@jetshop/template-trend 6.1.4 → 6.1.5

package/dist/src/components/CategoryPage/Filters/ActiveFilters.js

@@ -0,0 +1,79 @@
+import { useFilters } from '@jetshop/core/hooks/Filters/useFilters';
+import { useListFilter } from '@jetshop/core/hooks/Filters/useListFilter';
+import t from '@jetshop/intl';
+import { ReactComponent as Cross } from '@jetshop/ui/svg/Cross.svg';
+import React from 'react';
+import { styled } from 'linaria/react';
+import { theme } from '../../Theme';
+export const FilterGroup = styled('div') `
+  font-size: 0.875rem;
+`;
+const Label = styled('label') `
+  font-weight: 300;
+  padding-right: 0.25rem;
+  text-transform: capitalize;
+`;
+const Value = styled('span') `
+  font-weight: 600;
+  padding-right: 1rem;
+`;
+export const AppliedFilter = styled('button') `
+  color: white;
+  border: 0;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  display: inline-flex;
+  background-color: ${theme.colors.blue};
+  height: 36px;
+  align-items: center;
+`;
+export const FilterWrapper = styled('aside') `
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -0.5rem;
+`;
+export const ClearButton = styled('button') `
+  background: none;
+  text-decoration: underline;
+  margin-left: 0.5rem;
+  width: 160px;
+  height: 36px;
+  border: 1px solid ${theme.colors.blue};
+  color: ${theme.colors.blue};
+  margin: 0.5rem;
+  text-decoration: none;
+  :hover,
+  :focus {
+    opacity: 0.8;
+    outline: none;
+  }
+`;
+export function ActiveFilters({ filters }) {
+    const { clearAllFilters } = useFilters();
+    if (!filters)
+        return null;
+    const activeListFilters = filters.filter(listFilter => {
+        return listFilter.hasActiveItems;
+    });
+    if (activeListFilters.length === 0)
+        return null;
+    return (React.createElement(FilterWrapper, null,
+        activeListFilters.map(listFilter => {
+            return (React.createElement(FilterGroup, { key: listFilter.id }, listFilter.items
+                .filter(item => item.isActive)
+                .map(listFilterItem => (React.createElement(ActiveListFilterItem, { item: listFilterItem, listFilter: listFilter, key: listFilterItem.value })))));
+        }),
+        React.createElement(ClearButton, { type: "button", onClick: clearAllFilters }, t('Clear all filters'))));
+}
+function ActiveListFilterItem({ item, listFilter }) {
+    const { apply } = useListFilter({ filter: listFilter });
+    return (React.createElement(AppliedFilter, { type: "button", key: item.value, onClick: () => {
+            apply({ value: item.value });
+        } },
+        React.createElement(Label, null,
+            listFilter.name,
+            " "),
+        React.createElement(Value, null, item.text),
+        React.createElement(Cross, null)));
+}
+//# sourceMappingURL=ActiveFilters.js.map

package/dist/src/components/CategoryPage/Filters/ActiveFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveFilters.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/ActiveFilters.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC1E,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;CAEvC,CAAC;AACF,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;;CAI5B,CAAC;AACF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAG3B,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;;sBAMvB,KAAK,CAAC,MAAM,CAAC,IAAI;;;CAGtC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;;CAI3C,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;;sBAMrB,KAAK,CAAC,MAAM,CAAC,IAAI;WAC5B,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;;;;CAQ3B,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE;IACvC,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,EAAE,CAAC;IAEzC,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE;QACpD,OAAO,UAAU,CAAC,cAAc,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACL,oBAAC,aAAa;QACX,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAClC,OAAO,CACL,oBAAC,WAAW,IAAC,GAAG,EAAE,UAAU,CAAC,EAAE,IAC5B,UAAU,CAAC,KAAK;iBACd,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAC7B,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,CACrB,oBAAC,oBAAoB,IACnB,IAAI,EAAE,cAAc,EACpB,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,cAAc,CAAC,KAAK,GACzB,CACH,CAAC,CACQ,CACf,CAAC;QACJ,CAAC,CAAC;QACF,oBAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,eAAe,IAChD,CAAC,CAAC,mBAAmB,CAAC,CACX,CACA,CACjB,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;IAChD,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;IACxD,OAAO,CACL,oBAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC/B,CAAC;QAED,oBAAC,KAAK;YAAE,UAAU,CAAC,IAAI;gBAAU;QACjC,oBAAC,KAAK,QAAE,IAAI,CAAC,IAAI,CAAS;QAC1B,oBAAC,KAAK,OAAG,CACK,CACjB,CAAC;AACJ,CAAC"}

package/dist/src/components/CategoryPage/Filters/BooleanFilters.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Checkbox from '@jetshop/ui/Checkbox';
+import { useBooleanFilter } from '@jetshop/core/hooks/Filters/useBooleanFilter';
+export function BooleanFilters({ filters }) {
+    if (!filters)
+        return null;
+    const boolFilters = filters.filter(filter => filter.__typename === 'BooleanFilter');
+    if (boolFilters.length === 0)
+        return null;
+    return boolFilters.map(filter => (React.createElement(BooleanFilter, { filter: filter, key: filter.id })));
+}
+function BooleanFilter({ filter }) {
+    const { apply } = useBooleanFilter({ filter });
+    return (React.createElement(Checkbox, { key: filter.id, label: filter.name, checked: filter.value, onChange: e => {
+            apply({ value: e.currentTarget.checked });
+        } }));
+}
+//# sourceMappingURL=BooleanFilters.js.map

package/dist/src/components/CategoryPage/Filters/BooleanFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanFilters.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/BooleanFilters.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAEhF,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE;IACxC,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAChC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,eAAe,CAChD,CAAC;IAEF,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE1C,OAAO,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC/B,oBAAC,aAAa,IAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,GAAI,CAClD,CAAC,CAAC;AACL,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,MAAM,EAAE;IAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,OAAO,EAAE,MAAM,CAAC,KAAK,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE;YACZ,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;QAC5C,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/src/components/CategoryPage/Filters/Filter.js

@@ -0,0 +1,97 @@
+import { Above, Below } from '@jetshop/ui/Breakpoints';
+import Drawer, { DrawerTarget, DrawerTrigger } from '@jetshop/ui/Modal/Drawer';
+import { SortOrders } from './SortOrders';
+import { styled } from 'linaria/react';
+import React, { Component } from 'react';
+import { ActiveFilters } from './ActiveFilters';
+import { BooleanFilters } from './BooleanFilters';
+import FilterDrawer from './FilterDrawer';
+import { ListFilters } from './ListFilters';
+import { MultiListFilters } from './MultiListFilters';
+import { RangeFilters } from './RangeFilters';
+import FilterButton from './Mobile/FilterButton';
+const Filters = styled('div') `
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  > div {
+    width: 224px;
+    margin-right: 16px;
+    position: relative;
+  }
+  [data-flight-dropdown-items] {
+    position: absolute;
+  }
+`;
+const FiltersSectionWrapper = styled('div') `
+  display: flex;
+  flex-direction: row;
+`;
+const FiltersWapper = styled('div') `
+  width: 90%;
+`;
+const BoolSortWrapper = styled('div') `
+  min-width: 224px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 0.875rem;
+  > div {
+    width: 224px;
+    text-align: right;
+    margin-bottom: 1em;
+    button {
+      height: 40px;
+      background-color: #f7f7f7;
+    }
+  }
+  .boolean-wrapper {
+    direction: rtl;
+    > label {
+      margin-bottom: 6px;
+      span {
+        margin: 0 0 0 12px;
+      }
+    }
+  }
+
+  [data-flight-dropdown-items] {
+    right: 0;
+    left: auto;
+  }
+  [data-flight-dropdown-item] {
+    display: flex;
+    * + * {
+      margin-left: auto;
+    }
+  }
+`;
+class Filter extends Component {
+    render() {
+        var _a, _b;
+        const { filters } = this.props;
+        const sortOrders = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.sortOrders) !== null && _b !== void 0 ? _b : [];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Above, { breakpoint: "md" }, matches => matches && (React.createElement(React.Fragment, null,
+                React.createElement(FiltersSectionWrapper, null,
+                    React.createElement(FiltersWapper, null,
+                        React.createElement(Filters, null,
+                            React.createElement(ListFilters, { filters: filters }),
+                            React.createElement(RangeFilters, { filters: filters })),
+                        React.createElement(Filters, null,
+                            React.createElement(MultiListFilters, { filters: filters }))),
+                    React.createElement(BoolSortWrapper, null,
+                        React.createElement(Filters, null,
+                            React.createElement(SortOrders, { sortOrders: sortOrders })),
+                        React.createElement("div", { className: "boolean-wrapper" },
+                            React.createElement(BooleanFilters, { filters: filters })))),
+                React.createElement(ActiveFilters, { filters: filters })))),
+            React.createElement(Below, { breakpoint: "md" }, matches => matches && (React.createElement(React.Fragment, null,
+                React.createElement(DrawerTrigger, { id: "filterDrawer" }, ({ showTarget }) => (React.createElement(FilterButton, { showTarget: showTarget, filters: filters }))),
+                React.createElement(DrawerTarget, { id: "filterDrawer" }, ({ hideTarget, isOpen }) => (React.createElement(Drawer, { isOpen: isOpen, right: true },
+                    React.createElement(FilterDrawer, { close: hideTarget, filters: filters, sortOrders: sortOrders })))))))));
+    }
+}
+export default Filter;
+//# sourceMappingURL=Filter.js.map

package/dist/src/components/CategoryPage/Filters/Filter.js.map

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

package/dist/src/components/CategoryPage/Filters/FilterDrawer.js

@@ -0,0 +1,91 @@
+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 { Intl } from '@jetshop/intl';
+import Accordion from '@jetshop/ui/Accordion/Accordion';
+import React from 'react';
+import { styled } from 'linaria/react';
+import { css } from 'linaria';
+import { BooleanFilters } from './BooleanFilters';
+import { ListAccordion } from './Mobile/ListAccordion';
+import { RangeAccordion } from './Mobile/RangeAccordion';
+import { SortOrderAccordion } from './Mobile/SortOrderAccordion';
+import { useFilters } from '@jetshop/core/hooks/Filters/useFilters';
+import { ClearButton } from './ActiveFilters';
+import t from '@jetshop/intl';
+import Button from '../../ui/Button';
+const Title = styled('h1') `
+  color: black;
+  font-size: 1.125rem;
+  text-align: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e8e8e8;
+  font-weight: 600;
+`;
+const Wrapper = styled('div') `
+  button {
+    padding: 0 1rem;
+    border-width: 1px 0 0 0;
+  }
+`;
+const ButtonContainer = styled('div') `
+  padding: 1em;
+  > button {
+    width: calc(50% - 0.5em);
+    border-radius: 0;
+    height: 36px;
+
+    &:last-of-type {
+      margin: 0 0 0 0.5em;
+    }
+
+    &:first-of-type {
+      margin: 0 0.5em 0 0;
+    }
+  }
+`;
+const boolFilters = css `
+  padding: 1rem;
+  label {
+    margin-top: 0.5em;
+  }
+`;
+const FilterDrawer = (_a) => {
+    var { filters, sortOrders, close } = _a, props = __rest(_a, ["filters", "sortOrders", "close"]);
+    const { clearAllFilters } = useFilters();
+    const isActiveListFilter = filters.some(listFilter => {
+        return listFilter.hasActiveItems;
+    });
+    const listFilters = (filters || []).filter(filter => filter.__typename === 'ListFilter');
+    const rangeFilters = (filters || []).filter(filter => filter.__typename === 'NumericRangeFilter');
+    const isFilters = !!filters;
+    const isSortOrders = sortOrders.length > 0;
+    return (React.createElement("section", Object.assign({}, props), (isFilters || isSortOrders) && (React.createElement(React.Fragment, null,
+        React.createElement(Wrapper, null,
+            React.createElement(Title, null,
+                React.createElement(Intl, null, t => isFilters && isSortOrders
+                    ? `${t('Filter')} & ${t('Sort by')}`
+                    : isFilters
+                        ? t('Filter')
+                        : t('Sort by'))),
+            React.createElement(Accordion, { single: true }, accordionProps => (React.createElement(React.Fragment, null,
+                isFilters && (React.createElement(React.Fragment, null,
+                    React.createElement(ListAccordion, { filters: filters, accordionProps: accordionProps }),
+                    React.createElement(RangeAccordion, { filters: filters, accordionProps: accordionProps, startingIdx: listFilters.length }))),
+                isSortOrders && (React.createElement(SortOrderAccordion, { sortOrders: sortOrders, accordionProps: accordionProps, startingIdx: listFilters.length + rangeFilters.length })),
+                isFilters && (React.createElement("div", { className: boolFilters },
+                    React.createElement(BooleanFilters, { filters: filters }))))))),
+        React.createElement(ButtonContainer, null,
+            React.createElement(Button, { onClick: close }, t('Apply filters')),
+            isActiveListFilter && (React.createElement(ClearButton, { type: "button", onClick: clearAllFilters }, t('Clear all filters'))))))));
+};
+export default FilterDrawer;
+//# sourceMappingURL=FilterDrawer.js.map

package/dist/src/components/CategoryPage/Filters/FilterDrawer.js.map

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

package/dist/src/components/CategoryPage/Filters/FilterDropdownMenu.js

@@ -0,0 +1,77 @@
+import { css } from 'linaria';
+import React from 'react';
+import { DropdownMenu } from '@jetshop/ui/DropdownMenu';
+import { theme } from '../../Theme';
+const menu = css `
+  margin-bottom: 1em;
+  font-size: 0.875rem;
+
+  [data-flight-dropdown-items] {
+    top: calc(100% - 1px);
+    background: ${theme.colors.background};
+    border: 1px solid ${theme.colors.blue};
+    border-top: 0;
+    border-radius: 0 0 3px 3px;
+    z-index: 999;
+    width: 100%;
+  }
+  [data-flight-dropdown-item] {
+    overflow: hidden;
+    display: block;
+    padding: 0.75em;
+    border-top: 1px solid ${theme.colors.lightgrey};
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    span + * {
+      margin-left: auto;
+    }
+    /* qty text */
+    span + span {
+      padding-left: 0.5em;
+      font-size: 80%;
+    }
+    :hover,
+    :focus {
+      background: white;
+      color: ${theme.colors.blue};
+      outline: none;
+    }
+  }
+
+  [data-flight-dropdown-button] {
+    padding: 0.75em;
+    border: 1px solid #dedede;
+    width: 100%;
+    text-align: left;
+    background: ${theme.colors.white};
+    font-weight: bold;
+    border-radius: 3px;
+    outline: none;
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-left: auto;
+    }
+
+    :focus {
+      border: 1px solid ${theme.colors.blue};
+    }
+
+    &[aria-expanded='true'] {
+      border-radius: 3px 3px 0 0;
+      border-color: ${theme.colors.blue};
+
+      .carot {
+        transform: rotate(180deg);
+      }
+    }
+  }
+`;
+export function FilterDropdownMenu(props) {
+    return React.createElement(DropdownMenu, Object.assign({ className: menu }, props));
+}
+//# sourceMappingURL=FilterDropdownMenu.js.map

package/dist/src/components/CategoryPage/Filters/FilterDropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdownMenu.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/FilterDropdownMenu.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;kBAME,KAAK,CAAC,MAAM,CAAC,UAAU;wBACjB,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;;;;;;4BAUb,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;eAiBnC,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;;;;;;kBAUd,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;0BAYV,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;sBAKrB,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;;;CAOtC,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAAC,KAAK;IACtC,OAAO,oBAAC,YAAY,kBAAC,SAAS,EAAE,IAAI,IAAM,KAAK,EAAI,CAAC;AACtD,CAAC"}

package/dist/src/components/CategoryPage/Filters/ListFilters.js

@@ -0,0 +1,38 @@
+import { useListFilter } from '@jetshop/core/hooks/Filters/useListFilter';
+import t from '@jetshop/intl';
+import { DropdownMenuButton as Button, DropdownMenuItem, DropdownMenuItems as Items } from '@jetshop/ui/DropdownMenu';
+import ErrorBoundary from '@jetshop/ui/ErrorBoundary/Generic';
+import PassThrough from '@jetshop/ui/ErrorBoundary/PassThrough';
+import { ReactComponent as Carot } from '@jetshop/ui/svg/Carrot.svg';
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+import React from 'react';
+import { FilterDropdownMenu } from './FilterDropdownMenu';
+export function ListFilters({ filters }) {
+    const listFilters = filters.filter(filter => filter.__typename === 'ListFilter');
+    if (listFilters.length === 0)
+        return null;
+    return listFilters.map(filter => (React.createElement(ErrorBoundary, { component: PassThrough, key: filter.id },
+        React.createElement(ListFilter, { filter: filter }))));
+}
+function ListFilter({ filter }) {
+    const { apply, clear } = useListFilter({ filter });
+    const onSelect = value => () => apply({ value });
+    return (React.createElement(FilterDropdownMenu, null,
+        React.createElement(Button, null,
+            React.createElement("span", null, filter.name),
+            filter.hasActiveItems ? React.createElement(Check, null) : React.createElement(Carot, { className: "carot" })),
+        React.createElement(Items, { as: "ul" },
+            filter.items.map(item => (React.createElement(DropdownMenuItem, { key: item.id, onSelect: item.resultCount > 0 && onSelect(item.value), style: item.resultCount === 0
+                    ? {
+                        opacity: 0.4,
+                        cursor: 'not-allowed'
+                    }
+                    : { cursor: 'pointer' } },
+                React.createElement("span", null, item.text),
+                item.isActive ? React.createElement(Check, null) : React.createElement("span", null, item.resultCount)))),
+            React.createElement(React.Fragment, null, filter.hasActiveItems && (React.createElement(DropdownMenuItem, { onSelect: ({ setIsOpen }) => {
+                    setIsOpen(false);
+                    clear();
+                } }, t('Clear filter')))))));
+}
+//# sourceMappingURL=ListFilters.js.map

package/dist/src/components/CategoryPage/Filters/ListFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListFilters.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/ListFilters.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC1E,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EACL,kBAAkB,IAAI,MAAM,EAC5B,gBAAgB,EAChB,iBAAiB,IAAI,KAAK,EAC3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAE;IACrC,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAChC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,YAAY,CAC7C,CAAC;IAEF,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE1C,OAAO,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC/B,oBAAC,aAAa,IAAC,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE;QACnD,oBAAC,UAAU,IAAC,MAAM,EAAE,MAAM,GAAI,CAChB,CACjB,CAAC,CAAC;AACL,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,MAAM,EAAE;IAC5B,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAEjD,OAAO,CACL,oBAAC,kBAAkB;QACjB,oBAAC,MAAM;YACL,kCAAO,MAAM,CAAC,IAAI,CAAQ;YACzB,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAC,KAAK,OAAG,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAC,OAAO,GAAG,CACzD;QACT,oBAAC,KAAK,IAAC,EAAE,EAAC,IAAI;YACX,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACxB,oBAAC,gBAAgB,IACf,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EACtD,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,CAAC;oBACpB,CAAC,CAAC;wBACE,OAAO,EAAE,GAAG;wBACZ,MAAM,EAAE,aAAa;qBACtB;oBACH,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBAG3B,kCAAO,IAAI,CAAC,IAAI,CAAQ;gBACvB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAC,KAAK,OAAG,CAAC,CAAC,CAAC,kCAAO,IAAI,CAAC,WAAW,CAAQ,CAC3C,CACpB,CAAC;YACF,0CACG,MAAM,CAAC,cAAc,IAAI,CACxB,oBAAC,gBAAgB,IACf,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;oBAC1B,SAAS,CAAC,KAAK,CAAC,CAAC;oBACjB,KAAK,EAAE,CAAC;gBACV,CAAC,IAEA,CAAC,CAAC,cAAc,CAAC,CACD,CACpB,CACA,CACG,CACW,CACtB,CAAC;AACJ,CAAC"}

package/dist/src/components/CategoryPage/Filters/Mobile/ActiveCarot.js

@@ -0,0 +1,15 @@
+import { ReactComponent as Carot } from '@jetshop/ui/svg/Carrot.svg';
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+import { css, cx } from 'linaria';
+import React from 'react';
+const carot = css `
+  transition: transform 200ms;
+  transform: rotate(-90deg);
+  &.is-open {
+    transform: rotate(0);
+  }
+`;
+export function ActiveCarot({ isActive, isOpen }) {
+    return isActive ? (React.createElement(Check, { className: "check" })) : (React.createElement(Carot, { className: cx(carot, isOpen ? 'is-open' : null) }));
+}
+//# sourceMappingURL=ActiveCarot.js.map

package/dist/src/components/CategoryPage/Filters/Mobile/ActiveCarot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveCarot.js","sourceRoot":"","sources":["../../../../../../src/components/CategoryPage/Filters/Mobile/ActiveCarot.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;CAMhB,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE;IAC9C,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,oBAAC,KAAK,IAAC,SAAS,EAAC,OAAO,GAAG,CAC5B,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAI,CAC3D,CAAC;AACJ,CAAC"}

package/dist/src/components/CategoryPage/Filters/Mobile/FilterButton.js

@@ -0,0 +1,107 @@
+import React, { useMemo, useEffect, useRef, useState } from 'react';
+import { theme } from '../../../Theme';
+import { ReactComponent as FilterIcon } from '../../../../svg/Filter.svg';
+import { styled } from 'linaria/react';
+const ButtonWrapper = styled('div') `
+  display: flex;
+  justify-content: flex-end;
+  right: 2rem;
+  ${theme.below.sm} {
+    right: 0.75rem;
+  }
+`;
+const Button = styled('button') `
+  position: absolute;
+  z-index: 9;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  outline: none;
+  margin-top: -8px;
+  p {
+    transition: all 0.2s ease;
+    padding-right: 10px;
+  }
+  &.fixed {
+    top: 32px;
+    position: fixed;
+  }
+`;
+const StyledFilterIcon = styled(FilterIcon) `
+  background: ${theme.colors.blue};
+  border-radius: 50%;
+  padding: 10px;
+  width: 40px;
+  height: 40px;
+  position: relative;
+`;
+const Badge = styled('div') `
+  position: absolute;
+  display: block;
+  top: -7px;
+  background: black;
+  color: white;
+  padding: 2px 4px;
+  border-radius: 4px;
+  left: 2px;
+  font-size: 0.8rem;
+  z-index: 2;
+  line-height: 0.9rem;
+`;
+const IconWrapper = styled('div') `
+  position: relative;
+  pointer-events: auto;
+  line-height: 0;
+`;
+const FilterButton = ({ showTarget, filters }) => {
+    const buttonWrapperElem = useRef(null);
+    const [isFixed, setIsFixed] = useState(false);
+    useEffect(() => {
+        function scroll() {
+            const elemYPos = buttonWrapperElem.current.getBoundingClientRect().y;
+            if (elemYPos <= 32)
+                setIsFixed(true);
+            else
+                setIsFixed(false);
+        }
+        window.addEventListener('scroll', scroll);
+        return () => {
+            window.removeEventListener('scroll', scroll);
+        };
+    });
+    const numOfActiveFilters = useMemo(() => {
+        let activeFilters = 0;
+        filters.forEach(filter => {
+            switch (filter.__typename) {
+                case 'ListFilter':
+                case 'MultiListFilter':
+                    if (filter.hasActiveItems)
+                        activeFilters++;
+                    break;
+                case 'NumericRangeFilter':
+                    if (filter.isActive)
+                        activeFilters++;
+                    break;
+                case 'BooleanFilter':
+                    if (filter.value)
+                        activeFilters++;
+                    break;
+                default:
+                    break;
+            }
+        });
+        return activeFilters;
+    }, [filters]);
+    return (React.createElement(ButtonWrapper, { ref: buttonWrapperElem },
+        React.createElement(Button, { onClick: showTarget, className: isFixed ? 'fixed' : '' },
+            React.createElement(IconWrapper, null,
+                numOfActiveFilters > 0 && React.createElement(Badge, null, numOfActiveFilters),
+                React.createElement(StyledFilterIcon, null)))));
+};
+export default FilterButton;
+//# sourceMappingURL=FilterButton.js.map

package/dist/src/components/CategoryPage/Filters/Mobile/FilterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.js","sourceRoot":"","sources":["../../../../../../src/components/CategoryPage/Filters/Mobile/FilterButton.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;IAI/B,KAAK,CAAC,KAAK,CAAC,EAAE;;;CAGjB,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;CAqB9B,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;gBAC3B,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;;CAMhC,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;CAY1B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;CAIhC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,MAAM;YACb,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC;YACrE,IAAI,QAAQ,IAAI,EAAE;gBAAE,UAAU,CAAC,IAAI,CAAC,CAAC;;gBAChC,UAAU,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC1C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,aAAa,GAAG,CAAC,CAAC;QACtB,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,QAAQ,MAAM,CAAC,UAAU,EAAE;gBACzB,KAAK,YAAY,CAAC;gBAClB,KAAK,iBAAiB;oBACpB,IAAI,MAAM,CAAC,cAAc;wBAAE,aAAa,EAAE,CAAC;oBAC3C,MAAM;gBACR,KAAK,oBAAoB;oBACvB,IAAI,MAAM,CAAC,QAAQ;wBAAE,aAAa,EAAE,CAAC;oBACrC,MAAM;gBACR,KAAK,eAAe;oBAClB,IAAI,MAAM,CAAC,KAAK;wBAAE,aAAa,EAAE,CAAC;oBAClC,MAAM;gBACR;oBACE,MAAM;aACT;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,aAAa,CAAC;IACvB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,oBAAC,aAAa,IAAC,GAAG,EAAE,iBAAiB;QACnC,oBAAC,MAAM,IAAC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAC5D,oBAAC,WAAW;gBACT,kBAAkB,GAAG,CAAC,IAAI,oBAAC,KAAK,QAAE,kBAAkB,CAAS;gBAC9D,oBAAC,gBAAgB,OAAG,CACR,CACP,CACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/src/components/CategoryPage/Filters/Mobile/ListAccordion.js

@@ -0,0 +1,44 @@
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+import { css } from 'linaria';
+import React from 'react';
+import { ActiveCarot } from './ActiveCarot';
+import { filterName } from './shared/styles';
+import { useListFilter } from '@jetshop/core/hooks/Filters/useListFilter';
+export const filtersStyle = css `
+  list-style: none;
+  li button {
+    padding: 1em;
+    width: 100%;
+    display: flex;
+    background: transparent;
+    border-top: 1px solid white;
+    background: #f0f0f0;
+    justify-content: space-between;
+    align-items: center;
+    span {
+      /* result count */
+      font-size: 0.75em;
+    }
+  }
+`;
+export const ListAccordion = ({ filters, accordionProps, startingIdx = 0 }) => {
+    if (!filters)
+        return null;
+    const listFilters = filters.filter(filter => filter.__typename === 'ListFilter');
+    return (React.createElement(React.Fragment, null, listFilters.map((filter, idx) => (React.createElement(ListFilter, { key: filter.id, filter: filter, idx: idx, startingIdx: startingIdx, accordionProps: accordionProps })))));
+};
+function ListFilter({ filter, idx, accordionProps, startingIdx }) {
+    const { apply } = useListFilter({ filter });
+    const { AccordionContent } = accordionProps;
+    const accordionIsOpen = accordionProps.openIndexes.includes(idx + startingIdx);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: filterName, onClick: () => accordionProps.handleClick(idx) },
+            filter.name,
+            React.createElement(ActiveCarot, { isActive: filter.hasActiveItems, isOpen: accordionIsOpen })),
+        React.createElement(AccordionContent, { isOpen: accordionIsOpen },
+            React.createElement("ul", { className: filtersStyle }, filter.items.map(item => (React.createElement("li", { key: item.id },
+                React.createElement("button", { onClick: () => apply({ value: item.value }) },
+                    item.text,
+                    item.isActive ? React.createElement(Check, null) : React.createElement("span", null, item.resultCount)))))))));
+}
+//# sourceMappingURL=ListAccordion.js.map

package/dist/src/components/CategoryPage/Filters/Mobile/ListAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListAccordion.js","sourceRoot":"","sources":["../../../../../../src/components/CategoryPage/Filters/Mobile/ListAccordion.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAE1E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB9B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE;IAC5E,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAChC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,YAAY,CAC7C,CAAC;IAEF,OAAO,CACL,0CACG,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,oBAAC,UAAU,IACT,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,cAAc,EAAE,WAAW,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5C,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC;IAC5C,MAAM,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,QAAQ,CACzD,GAAG,GAAG,WAAW,CAClB,CAAC;IAEF,OAAO,CACL;QACE,6BACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,CAAC;YAE7C,MAAM,CAAC,IAAI;YACZ,oBAAC,WAAW,IACV,QAAQ,EAAE,MAAM,CAAC,cAAc,EAC/B,MAAM,EAAE,eAAe,GACvB,CACE;QACN,oBAAC,gBAAgB,IAAC,MAAM,EAAE,eAAe;YACvC,4BAAI,SAAS,EAAE,YAAY,IACxB,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACxB,4BAAI,GAAG,EAAE,IAAI,CAAC,EAAE;gBACd,gCAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;oBAChD,IAAI,CAAC,IAAI;oBAET,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAC,KAAK,OAAG,CAAC,CAAC,CAAC,kCAAO,IAAI,CAAC,WAAW,CAAQ,CACrD,CACN,CACN,CAAC,CACC,CACY,CAClB,CACJ,CAAC;AACJ,CAAC"}

package/dist/src/components/CategoryPage/Filters/Mobile/RangeAccordion.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { RangeSlider } from '../RangeFilters';
+import { ActiveCarot } from './ActiveCarot';
+import { filterName } from './shared/styles';
+export const RangeAccordion = ({ filters, accordionProps, startingIdx = 0 }) => {
+    const rangeFilters = filters.filter(filter => filter.__typename === 'NumericRangeFilter');
+    if (rangeFilters.length === 0)
+        return null;
+    return rangeFilters.map((rangeFilter, idx) => (React.createElement(RangeFilter, { key: rangeFilter.id, rangeFilter: rangeFilter, idx: idx, accordionProps: accordionProps, startingIdx: startingIdx })));
+};
+function RangeFilter({ rangeFilter, idx, accordionProps, startingIdx }) {
+    const accordionIsOpen = accordionProps.openIndexes.includes(idx + startingIdx);
+    const { AccordionContent } = accordionProps;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: filterName, onClick: () => accordionProps.handleClick(idx + startingIdx) },
+            rangeFilter.name,
+            React.createElement(ActiveCarot, { isActive: rangeFilter.isActive, isOpen: accordionIsOpen })),
+        React.createElement(AccordionContent, { isOpen: accordionIsOpen },
+            React.createElement(RangeSlider, { filter: rangeFilter }))));
+}
+//# sourceMappingURL=RangeAccordion.js.map

package/dist/src/components/CategoryPage/Filters/Mobile/RangeAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeAccordion.js","sourceRoot":"","sources":["../../../../../../src/components/CategoryPage/Filters/Mobile/RangeAccordion.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,GAAG,CAAC,EAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CACjC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,oBAAoB,CACrD,CAAC;IACF,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE3C,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5C,oBAAC,WAAW,IACV,GAAG,EAAE,WAAW,CAAC,EAAE,EACnB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACX,CAChB,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,SAAS,WAAW,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,cAAc,EAAE,WAAW,EAAE;IACpE,MAAM,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,QAAQ,CACzD,GAAG,GAAG,WAAW,CAClB,CAAC;IACF,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC;IAE5C,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACb,6BACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC;YAE3D,WAAW,CAAC,IAAI;YACjB,oBAAC,WAAW,IAAC,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,eAAe,GAAI,CACpE;QACN,oBAAC,gBAAgB,IAAC,MAAM,EAAE,eAAe;YAEvC,oBAAC,WAAW,IAAC,MAAM,EAAE,WAAW,GAAI,CACnB,CACJ,CAClB,CAAC;AACJ,CAAC"}