@jetshop/ui 5.13.2 → 5.13.10-0

package/Auth/LogInFormProvider.js

@@ -1,71 +1,71 @@
-import React, { useState } from 'react';
-import { Formik, Form } from 'formik';
-import { useLoginMutation } from '@jetshop/core/hooks/useLoginMutation';
-import validate from './logInValidator';
-import t from '@jetshop/intl';
-import { useLoginRedirect } from '@jetshop/core/hooks/useLoginRedirect';
-import { Redirect } from 'react-router';
-import useAuth from '@jetshop/core/components/AuthContext/useAuth';
-import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
-import { trackLoginEvent } from '@jetshop/core/analytics/tracking';
-import { useTracker } from '@jetshop/core/analytics/Analytics';
-const LogInFormProvider = ({ children, redirect, initialEmail = '' }) => {
-    const { getRedirectUrl } = useLoginRedirect();
-    const { loggedIn } = useAuth();
-    const { loginMutation } = useLoginMutation();
-    const { routes } = useShopConfig();
-    const track = useTracker();
-    const [disabledByTimeout, setDisabledByTimeout] = useState(false);
-    function triggerLoginFailed(globalError) {
-        if (!globalError)
-            return;
-        const unableToLoginCustomerError = globalError.find(({ extensions }) => extensions.code === 'UnableToLoginCustomer');
-        const timeOutLength = unableToLoginCustomerError === null || unableToLoginCustomerError === void 0 ? void 0 : unableToLoginCustomerError.extensions.data.tryAgainIn;
-        if (timeOutLength) {
-            setDisabledByTimeout(true);
-            setTimeout(() => {
-                setDisabledByTimeout(false);
-            }, timeOutLength);
-        }
-    }
-    redirect = redirect ? redirect : routes.myPages.path;
-    return (React.createElement(Formik, { validate: validate, initialValues: {
-            email: initialEmail,
-            password: ''
-        }, onSubmit: (values, actions) => {
-            loginMutation({
-                variables: values
-            }).then(() => {
-                // Track user login in GTAG
-                track(trackLoginEvent());
-                const returnUrlPromise = getRedirectUrl();
-                if (returnUrlPromise) {
-                    returnUrlPromise.then(returnUrl => {
-                        if (returnUrl) {
-                            window.location.href = returnUrl;
-                        }
-                        else {
-                            actions.setSubmitting(false);
-                        }
-                    });
-                }
-                else {
-                    actions.setSubmitting(false);
-                }
-            }, error => {
-                actions.setSubmitting(false);
-                actions.setErrors(error);
-                actions.setStatus({
-                    globalError: t('Login failed. Please try again')
-                });
-                triggerLoginFailed(error.graphQLErrors);
-            });
-        }, render: props => {
-            var _a;
-            return (React.createElement(React.Fragment, null,
-                !props.isSubmitting && loggedIn && React.createElement(Redirect, { to: redirect }),
-                React.createElement(Form, null, children(Object.assign(Object.assign({}, props), { isValid: !disabledByTimeout || props.isValid, globalError: (_a = props === null || props === void 0 ? void 0 : props.status) === null || _a === void 0 ? void 0 : _a.globalError })))));
-        } }));
-};
-export default LogInFormProvider;
+import React, { useState } from 'react';
+import { Formik, Form } from 'formik';
+import { useLoginMutation } from '@jetshop/core/hooks/useLoginMutation';
+import validate from './logInValidator';
+import t from '@jetshop/intl';
+import { useLoginRedirect } from '@jetshop/core/hooks/useLoginRedirect';
+import { Redirect } from 'react-router';
+import useAuth from '@jetshop/core/components/AuthContext/useAuth';
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+import { trackLoginEvent } from '@jetshop/core/analytics/tracking';
+import { useTracker } from '@jetshop/core/analytics/Analytics';
+const LogInFormProvider = ({ children, redirect, initialEmail = '' }) => {
+    const { getRedirectUrl } = useLoginRedirect();
+    const { loggedIn } = useAuth();
+    const { loginMutation } = useLoginMutation();
+    const { routes } = useShopConfig();
+    const track = useTracker();
+    const [disabledByTimeout, setDisabledByTimeout] = useState(false);
+    function triggerLoginFailed(globalError) {
+        if (!globalError)
+            return;
+        const unableToLoginCustomerError = globalError.find(({ extensions }) => extensions.code === 'UnableToLoginCustomer');
+        const timeOutLength = unableToLoginCustomerError === null || unableToLoginCustomerError === void 0 ? void 0 : unableToLoginCustomerError.extensions.data.tryAgainIn;
+        if (timeOutLength) {
+            setDisabledByTimeout(true);
+            setTimeout(() => {
+                setDisabledByTimeout(false);
+            }, timeOutLength);
+        }
+    }
+    redirect = redirect ? redirect : routes.myPages.path;
+    return (React.createElement(Formik, { validate: validate, initialValues: {
+            email: initialEmail,
+            password: ''
+        }, onSubmit: (values, actions) => {
+            loginMutation({
+                variables: values
+            }).then(() => {
+                // Track user login in GTAG
+                track(trackLoginEvent());
+                const returnUrlPromise = getRedirectUrl();
+                if (returnUrlPromise) {
+                    returnUrlPromise.then(returnUrl => {
+                        if (returnUrl) {
+                            window.location.href = returnUrl;
+                        }
+                        else {
+                            actions.setSubmitting(false);
+                        }
+                    });
+                }
+                else {
+                    actions.setSubmitting(false);
+                }
+            }, error => {
+                actions.setSubmitting(false);
+                actions.setErrors(error);
+                actions.setStatus({
+                    globalError: t('Login failed. Please try again')
+                });
+                triggerLoginFailed(error.graphQLErrors);
+            });
+        }, render: props => {
+            var _a;
+            return (React.createElement(React.Fragment, null,
+                !props.isSubmitting && loggedIn && React.createElement(Redirect, { to: redirect }),
+                React.createElement(Form, null, children(Object.assign(Object.assign({}, props), { isValid: !disabledByTimeout || props.isValid, globalError: (_a = props === null || props === void 0 ? void 0 : props.status) === null || _a === void 0 ? void 0 : _a.globalError })))));
+        } }));
+};
+export default LogInFormProvider;
 //# sourceMappingURL=LogInFormProvider.js.map

package/Auth/LogOut.d.ts

@@ -1,10 +1,10 @@
-import { Customer } from '@jetshop/core/types';
-import { ApolloClient } from 'apollo-client';
-import { ButtonHTMLAttributes } from 'react';
-export interface LogOutProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    updateCustomer: (customer?: Customer) => void;
-    client: ApolloClient<any>;
-    updateLoggedIn(token?: string): void;
-}
-declare function LogOut(props: LogOutProps): JSX.Element;
-export default LogOut;
+import { Customer } from '@jetshop/core/types';
+import { ApolloClient } from 'apollo-client';
+import { ButtonHTMLAttributes } from 'react';
+export interface LogOutProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    updateCustomer: (customer?: Customer) => void;
+    client: ApolloClient<any>;
+    updateLoggedIn(token?: string): void;
+}
+declare function LogOut(props: LogOutProps): JSX.Element;
+export default LogOut;

package/Auth/LogOut.js

@@ -1,24 +1,24 @@
-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 useAuth from '@jetshop/core/components/AuthContext/useAuth';
-function LogOut(props) {
-    const { logOut } = useAuth();
-    const logout = (event) => {
-        logOut();
-        this.props.onClick && this.props.onClick(event);
-    };
-    const { children, updateLoggedIn, client } = props, rest = __rest(props, ["children", "updateLoggedIn", "client"]);
-    return (React.createElement("button", Object.assign({}, rest, { onClick: logout }), children));
-}
-export default LogOut;
+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 useAuth from '@jetshop/core/components/AuthContext/useAuth';
+function LogOut(props) {
+    const { logOut } = useAuth();
+    const logout = (event) => {
+        logOut();
+        this.props.onClick && this.props.onClick(event);
+    };
+    const { children, updateLoggedIn, client } = props, rest = __rest(props, ["children", "updateLoggedIn", "client"]);
+    return (React.createElement("button", Object.assign({}, rest, { onClick: logout }), children));
+}
+export default LogOut;
 //# sourceMappingURL=LogOut.js.map

package/Auth/logInValidator.d.ts

@@ -1,8 +1,8 @@
-declare const validate: (values: {
-    email: string;
-    password: string;
-}) => {
-    email?: string;
-    password?: string;
-};
-export default validate;
+declare const validate: (values: {
+    email: string;
+    password: string;
+}) => {
+    email?: string;
+    password?: string;
+};
+export default validate;

package/Auth/logInValidator.js

@@ -1,16 +1,16 @@
-import t from 'format-message';
-const validate = (values) => {
-    let errors = {};
-    if (!values.email) {
-        errors.email = t('Required');
-    }
-    else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,24}$/i.test(values.email)) {
-        errors.email = t('Invalid email address');
-    }
-    if (!values.password) {
-        errors.password = t('Required');
-    }
-    return errors;
-};
-export default validate;
+import t from 'format-message';
+const validate = (values) => {
+    let errors = {};
+    if (!values.email) {
+        errors.email = t('Required');
+    }
+    else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,24}$/i.test(values.email)) {
+        errors.email = t('Invalid email address');
+    }
+    if (!values.password) {
+        errors.password = t('Required');
+    }
+    return errors;
+};
+export default validate;
 //# sourceMappingURL=logInValidator.js.map

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { Product, Route } from '@jetshop/core/types';
-export interface BreadcrumbProps {
-    hideLast?: boolean;
-    parents: Route[];
-    breadcrumbText?: string;
-    className?: string;
-    product?: Product;
-    breadcrumbs?: string[];
-}
-export interface BreadcrumbsProps {
-    hideLast: boolean;
-}
-export default function Breadcrumbs(props: BreadcrumbProps): JSX.Element;
+/// <reference types="react" />
+import { Product, Route } from '@jetshop/core/types';
+export interface BreadcrumbProps {
+    hideLast?: boolean;
+    parents: Route[];
+    breadcrumbText?: string;
+    className?: string;
+    product?: Product;
+    breadcrumbs?: string[];
+}
+export interface BreadcrumbsProps {
+    hideLast: boolean;
+}
+export default function Breadcrumbs(props: BreadcrumbProps): JSX.Element;

package/Breadcrumbs/Breadcrumbs.js

@@ -1,84 +1,84 @@
-import React from 'react';
-import { styled } from 'linaria/react';
-import { cx } from 'linaria';
-import { Link } from 'react-router-dom';
-import { useIntl } from '@jetshop/intl';
-import { StructuredBreadcrumbData } from '@jetshop/core/components/StructuredData/StructuredBreadcrumbData';
-import useWarningInDev from '@jetshop/core/hooks/useWarningInDev';
-const StyledBreadcrumbs = styled('ul') `
-  a,
-  li {
-    color: #707070;
-    font-size: 0.75rem;
-  }
-
-  line-height: 1.5;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
-  margin-bottom: 2rem;
-  &.hide-last {
-    li:last-child:after {
-      display: none;
-    }
-  }
-`;
-const Breadcrumb = styled('li') `
-  white-space: nowrap;
-  &:after {
-    display: inline-block;
-    content: '/';
-    padding: 0 0.33em;
-  }
-`;
-export default function Breadcrumbs(props) {
-    const t = useIntl();
-    const { breadcrumbs, breadcrumbText, parents, hideLast, className } = props;
-    useWarningInDev(!breadcrumbs, 'Using <Breadcrumbs> without passing the breadcrumbs prop is deprecated.');
-    if (breadcrumbs) {
-        const crumbs = breadcrumbs.reduce((acc, text, index) => {
-            const crumb = {
-                text,
-                path: null
-            };
-            if (index < (parents === null || parents === void 0 ? void 0 : parents.length)) {
-                crumb.path = parents[parents.length - 1 - index].path;
-            }
-            return acc.concat(crumb);
-        }, [{ text: t('Home'), path: '/' }]);
-        return (React.createElement(React.Fragment, null,
-            React.createElement(StructuredBreadcrumbData, { breadcrumbs: crumbs.slice(1) }),
-            React.createElement(StyledBreadcrumbs, { className: cx(className, hideLast && 'hide-last') }, crumbs.map((crumb, index) => crumb.text && (React.createElement(Breadcrumb, { key: index }, !crumb.path ? (crumb.text) : (React.createElement(Link, { to: {
-                    pathname: crumb.path
-                } }, crumb.text))))))));
-    }
-    else {
-        // This is deprecated, remove in next major
-        if (breadcrumbText) {
-            const crumbs = (parents || []).reduceRight((acc, parent) => {
-                var _a;
-                return [
-                    ...acc,
-                    {
-                        text: (_a = parent.object) === null || _a === void 0 ? void 0 : _a.breadcrumbText,
-                        path: parent.path
-                    }
-                ];
-            }, [{ text: t('Home'), path: '/' }]);
-            crumbs.push({
-                text: breadcrumbText,
-                path: null
-            });
-            return (React.createElement(React.Fragment, null,
-                React.createElement(StructuredBreadcrumbData, { parents: parents, breadcrumbText: breadcrumbText }),
-                React.createElement(StyledBreadcrumbs, { className: cx(className, hideLast && 'hide-last') }, crumbs.map((crumb, index) => crumb.text && (React.createElement(Breadcrumb, { key: index }, !crumb.path ? (crumb.text) : (React.createElement(Link, { to: {
-                        pathname: crumb.path
-                    } }, crumb.text))))))));
-        }
-        else {
-            return null;
-        }
-    }
-}
+import React from 'react';
+import { styled } from 'linaria/react';
+import { cx } from 'linaria';
+import { Link } from 'react-router-dom';
+import { useIntl } from '@jetshop/intl';
+import { StructuredBreadcrumbData } from '@jetshop/core/components/StructuredData/StructuredBreadcrumbData';
+import useWarningInDev from '@jetshop/core/hooks/useWarningInDev';
+const StyledBreadcrumbs = styled('ul') `
+  a,
+  li {
+    color: #707070;
+    font-size: 0.75rem;
+  }
+
+  line-height: 1.5;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  margin-bottom: 2rem;
+  &.hide-last {
+    li:last-child:after {
+      display: none;
+    }
+  }
+`;
+const Breadcrumb = styled('li') `
+  white-space: nowrap;
+  &:after {
+    display: inline-block;
+    content: '/';
+    padding: 0 0.33em;
+  }
+`;
+export default function Breadcrumbs(props) {
+    const t = useIntl();
+    const { breadcrumbs, breadcrumbText, parents, hideLast, className } = props;
+    useWarningInDev(!breadcrumbs, 'Using <Breadcrumbs> without passing the breadcrumbs prop is deprecated.');
+    if (breadcrumbs) {
+        const crumbs = breadcrumbs.reduce((acc, text, index) => {
+            const crumb = {
+                text,
+                path: null
+            };
+            if (index < (parents === null || parents === void 0 ? void 0 : parents.length)) {
+                crumb.path = parents[parents.length - 1 - index].path;
+            }
+            return acc.concat(crumb);
+        }, [{ text: t('Home'), path: '/' }]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(StructuredBreadcrumbData, { breadcrumbs: crumbs.slice(1) }),
+            React.createElement(StyledBreadcrumbs, { className: cx(className, hideLast && 'hide-last') }, crumbs.map((crumb, index) => crumb.text && (React.createElement(Breadcrumb, { key: index }, !crumb.path ? (crumb.text) : (React.createElement(Link, { to: {
+                    pathname: crumb.path
+                } }, crumb.text))))))));
+    }
+    else {
+        // This is deprecated, remove in next major
+        if (breadcrumbText) {
+            const crumbs = (parents || []).reduceRight((acc, parent) => {
+                var _a;
+                return [
+                    ...acc,
+                    {
+                        text: (_a = parent.object) === null || _a === void 0 ? void 0 : _a.breadcrumbText,
+                        path: parent.path
+                    }
+                ];
+            }, [{ text: t('Home'), path: '/' }]);
+            crumbs.push({
+                text: breadcrumbText,
+                path: null
+            });
+            return (React.createElement(React.Fragment, null,
+                React.createElement(StructuredBreadcrumbData, { parents: parents, breadcrumbText: breadcrumbText }),
+                React.createElement(StyledBreadcrumbs, { className: cx(className, hideLast && 'hide-last') }, crumbs.map((crumb, index) => crumb.text && (React.createElement(Breadcrumb, { key: index }, !crumb.path ? (crumb.text) : (React.createElement(Link, { to: {
+                        pathname: crumb.path
+                    } }, crumb.text))))))));
+        }
+        else {
+            return null;
+        }
+    }
+}
 //# sourceMappingURL=Breadcrumbs.js.map

package/Breadcrumbs/getParentsOrCanonicalRoute.d.ts

@@ -1,3 +1,3 @@
-import { Route, Product } from '@jetshop/core/types';
-declare const getParentOrCanonicalRoute: (parents: Route[], product: Product) => Route[];
-export default getParentOrCanonicalRoute;
+import { Route, Product } from '@jetshop/core/types';
+declare const getParentOrCanonicalRoute: (parents: Route[], product: Product) => Route[];
+export default getParentOrCanonicalRoute;

package/Breadcrumbs/getParentsOrCanonicalRoute.js

@@ -1,14 +1,14 @@
-const getParentOrCanonicalRoute = (parents, product) => {
-    var _a;
-    if ((parents === null || parents === void 0 ? void 0 : parents.length) > 0) {
-        return parents;
-    }
-    else if ((_a = product === null || product === void 0 ? void 0 : product.primaryRoute) === null || _a === void 0 ? void 0 : _a.parents) {
-        return product.primaryRoute.parents;
-    }
-    else {
-        return null;
-    }
-};
-export default getParentOrCanonicalRoute;
+const getParentOrCanonicalRoute = (parents, product) => {
+    var _a;
+    if ((parents === null || parents === void 0 ? void 0 : parents.length) > 0) {
+        return parents;
+    }
+    else if ((_a = product === null || product === void 0 ? void 0 : product.primaryRoute) === null || _a === void 0 ? void 0 : _a.parents) {
+        return product.primaryRoute.parents;
+    }
+    else {
+        return null;
+    }
+};
+export default getParentOrCanonicalRoute;
 //# sourceMappingURL=getParentsOrCanonicalRoute.js.map

package/Breadcrumbs/index.d.ts

@@ -1 +1 @@
-export { default } from './Breadcrumbs';
+export { default } from './Breadcrumbs';

package/Breadcrumbs/index.js

@@ -1,2 +1,2 @@
-export { default } from './Breadcrumbs';
+export { default } from './Breadcrumbs';
 //# sourceMappingURL=index.js.map

package/Breakpoints.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export declare type BreakpointHelperProps = {
-    breakpoint: string;
-    render?: (props: any) => React.ReactNode;
-    children?: (props: any) => React.ReactNode;
-};
-export declare type BreakpointBetweenProps = BreakpointHelperProps & {
-    breakpoints: string[];
-};
-export declare const Above: ({ breakpoint, render, children }: BreakpointHelperProps) => JSX.Element;
-export declare function Below({ breakpoint, render, children }: BreakpointHelperProps): JSX.Element;
-export declare function Between({ children, render, breakpoints }: BreakpointBetweenProps): JSX.Element;
+import React from 'react';
+export declare type BreakpointHelperProps = {
+    breakpoint: string;
+    render?: (props: any) => React.ReactNode;
+    children?: (props: any) => React.ReactNode;
+};
+export declare type BreakpointBetweenProps = BreakpointHelperProps & {
+    breakpoints: string[];
+};
+export declare const Above: ({ breakpoint, render, children }: BreakpointHelperProps) => JSX.Element;
+export declare function Below({ breakpoint, render, children }: BreakpointHelperProps): JSX.Element;
+export declare function Between({ children, render, breakpoints }: BreakpointBetweenProps): JSX.Element;

package/Breakpoints.js

@@ -1,36 +1,36 @@
-import { useInitialBreakpoint } from '@jetshop/core/components/BreakpointProvider';
-import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
-import React from 'react';
-import Media from 'react-media';
-import { getMaxBreakpointValue } from './utils/breakpoints';
-export const Above = ({ breakpoint, render, children }) => {
-    const { theme: { breakpoints } } = useShopConfig();
-    const { breakpointIndex } = useInitialBreakpoint();
-    const query = { minWidth: breakpoints[breakpoint] };
-    return (React.createElement(Media, { query: query, defaultMatches: Object.keys(breakpoints).indexOf(breakpoint) <= breakpointIndex }, children || render));
-};
-export function Below({ breakpoint, render, children }) {
-    const { theme: { breakpoints } } = useShopConfig();
-    const { breakpointIndex } = useInitialBreakpoint();
-    const bpMap = Object.entries(breakpoints).map(([key, val]) => {
-        return { label: key, size: val };
-    });
-    const query = { maxWidth: getMaxBreakpointValue(breakpoint, bpMap) };
-    return (React.createElement(Media, { query: query, defaultMatches: Object.keys(breakpoints).indexOf(breakpoint) > breakpointIndex }, children || render));
-}
-export function Between({ children, render, breakpoints }) {
-    const { theme: { breakpoints: configuredBreakpoints } } = useShopConfig();
-    const { breakpointIndex } = useInitialBreakpoint();
-    const bpMap = Object.entries(configuredBreakpoints).map(([key, val]) => {
-        return { label: key, size: val };
-    });
-    const labels = Object.keys(configuredBreakpoints);
-    const defaultMatches = labels.indexOf(breakpoints[0]) <= breakpointIndex &&
-        labels.indexOf(breakpoints[1]) >= breakpointIndex;
-    const query = {
-        minWidth: configuredBreakpoints[breakpoints[0]],
-        maxWidth: getMaxBreakpointValue(breakpoints[1], bpMap)
-    };
-    return (React.createElement(Media, { query: query, defaultMatches: defaultMatches }, children || render));
-}
+import { useInitialBreakpoint } from '@jetshop/core/components/BreakpointProvider';
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+import React from 'react';
+import Media from 'react-media';
+import { getMaxBreakpointValue } from './utils/breakpoints';
+export const Above = ({ breakpoint, render, children }) => {
+    const { theme: { breakpoints } } = useShopConfig();
+    const { breakpointIndex } = useInitialBreakpoint();
+    const query = { minWidth: breakpoints[breakpoint] };
+    return (React.createElement(Media, { query: query, defaultMatches: Object.keys(breakpoints).indexOf(breakpoint) <= breakpointIndex }, children || render));
+};
+export function Below({ breakpoint, render, children }) {
+    const { theme: { breakpoints } } = useShopConfig();
+    const { breakpointIndex } = useInitialBreakpoint();
+    const bpMap = Object.entries(breakpoints).map(([key, val]) => {
+        return { label: key, size: val };
+    });
+    const query = { maxWidth: getMaxBreakpointValue(breakpoint, bpMap) };
+    return (React.createElement(Media, { query: query, defaultMatches: Object.keys(breakpoints).indexOf(breakpoint) > breakpointIndex }, children || render));
+}
+export function Between({ children, render, breakpoints }) {
+    const { theme: { breakpoints: configuredBreakpoints } } = useShopConfig();
+    const { breakpointIndex } = useInitialBreakpoint();
+    const bpMap = Object.entries(configuredBreakpoints).map(([key, val]) => {
+        return { label: key, size: val };
+    });
+    const labels = Object.keys(configuredBreakpoints);
+    const defaultMatches = labels.indexOf(breakpoints[0]) <= breakpointIndex &&
+        labels.indexOf(breakpoints[1]) >= breakpointIndex;
+    const query = {
+        minWidth: configuredBreakpoints[breakpoints[0]],
+        maxWidth: getMaxBreakpointValue(breakpoints[1], bpMap)
+    };
+    return (React.createElement(Media, { query: query, defaultMatches: defaultMatches }, children || render));
+}
 //# sourceMappingURL=Breakpoints.js.map

package/Button/Button.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-export declare const buttonStyles = "\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  color: white;\n  background-color: grey;\n  border-color: grey;\n  cursor: pointer;\n\n  text-align: center;\n  height: 54px;\n  font-family: 'Source Sans Pro', sans-serif;\n  width: 100%;\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n";
-export interface ButtonProps {
-    icon?: any;
-    children?: any;
-    text?: string;
-    onClick?: any;
-    /** Whether to use an a tag instead of button */
-    anchor?: boolean;
-    style?: any;
-    className?: string;
-}
-declare const Button: React.SFC<ButtonProps>;
-export default Button;
+import * as React from 'react';
+export declare const buttonStyles = "\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  color: white;\n  background-color: grey;\n  border-color: grey;\n  cursor: pointer;\n\n  text-align: center;\n  height: 54px;\n  font-family: 'Source Sans Pro', sans-serif;\n  width: 100%;\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n";
+export interface ButtonProps {
+    icon?: any;
+    children?: any;
+    text?: string;
+    onClick?: any;
+    /** Whether to use an a tag instead of button */
+    anchor?: boolean;
+    style?: any;
+    className?: string;
+}
+declare const Button: React.SFC<ButtonProps>;
+export default Button;