@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.1

package/components/SideNavigation/SideNavigationCategories.connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationCategories.connector.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationCategories.connector.js"],"names":[],"mappings":""}

package/components/SideNavigation/SideNavigationCategories.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=SideNavigationCategories.d.ts.map

package/components/SideNavigation/SideNavigationCategories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationCategories.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationCategories.jsx"],"names":[],"mappings":";;kBAAiC,OAAO"}

package/components/SideNavigation/SideNavigationCategories.js

@@ -1,10 +1,33 @@
 import React, { useEffect } from 'react';
 import { LoadingIndicator } from '@shopgate/pwa-ui-shared';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import SideNavigationCategoriesItemChildren from "./SideNavigationCategoriesItemChildren";
 import connect from "./SideNavigationCategories.connector";
-import { list, loadingIndicator } from "./SideNavigationCategories.style";
-import { item } from "./SideNavigationItem.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  list: {
+    borderBottom: `1px solid ${colors.shade7}`
+  },
+  loadingIndicator: {
+    padding: 0,
+    margin: 'auto'
+  },
+  item: {
+    alignItems: 'center',
+    display: 'flex',
+    textAlign: 'left',
+    outline: 0,
+    padding: theme.spacing(2),
+    position: 'relative',
+    width: '100%',
+    lineHeight: '1.45em'
+  }
+}));
 
 /**
  * The SideNavigationCategories component.
@@ -15,13 +38,15 @@ import { item } from "./SideNavigationItem.style";
  * @property {Function} props.fetchCategory - Function to fetch the category data.
  * @returns {JSX.Element|null} The rendered component or null.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const SideNavigationCategories = ({
   categoryId,
   subcategories,
   fetchCategory,
   rootCategoriesFetching
 }) => {
+  const {
+    classes
+  } = useStyles();
   useEffect(() => {
     if (!subcategories) {
       fetchCategory(categoryId);
@@ -29,9 +54,9 @@ const SideNavigationCategories = ({
   }, [categoryId, fetchCategory, subcategories]);
   if (!subcategories && rootCategoriesFetching) {
     return /*#__PURE__*/_jsx("li", {
-      className: item,
+      className: classes.item,
       children: /*#__PURE__*/_jsx(LoadingIndicator, {
-        className: loadingIndicator
+        className: classes.loadingIndicator
       })
     });
   }
@@ -39,7 +64,7 @@ const SideNavigationCategories = ({
     return null;
   }
   return /*#__PURE__*/_jsx("li", {
-    className: list,
+    className: classes.list,
     children: /*#__PURE__*/_jsx(SideNavigationCategoriesItemChildren, {
       level: 0,
       subcategories: subcategories

package/components/SideNavigation/SideNavigationCategoriesItem.connector.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<Function & Object, {}>;
+export default _default;
+//# sourceMappingURL=SideNavigationCategoriesItem.connector.d.ts.map

package/components/SideNavigation/SideNavigationCategoriesItem.connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationCategoriesItem.connector.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationCategoriesItem.connector.js"],"names":[],"mappings":""}

package/components/SideNavigation/SideNavigationCategoriesItem.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=SideNavigationCategoriesItem.d.ts.map

package/components/SideNavigation/SideNavigationCategoriesItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationCategoriesItem.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationCategoriesItem.jsx"],"names":[],"mappings":";;kBAEO,OAAO"}

package/components/SideNavigation/SideNavigationCategoriesItem.js

@@ -4,12 +4,41 @@ import ArrowDrop from '@shopgate/pwa-ui-shared/icons/ArrowDropIcon';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import { CATEGORY_PATH } from '@shopgate/pwa-common-commerce/category/constants';
 import { ProgressBar } from '@shopgate/pwa-ui-shared';
+import { makeStyles } from '@shopgate/engage/styles';
 // eslint-disable-next-line import/no-cycle
 import SideNavigationCategoriesItemChildren from "./SideNavigationCategoriesItemChildren";
 import SideNavigationItem from "./SideNavigationItem";
 import connect from "./SideNavigationCategoriesItem.connector";
-import { chevronButton, chevronUp, chevronDown, progressBar, open } from "./SideNavigationCategoriesItem.style";
 import { useSideNavigation } from "./SideNavigation.hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  chevronButton: {
+    flexShrink: 0,
+    outline: 0,
+    margin: theme.spacing(0, -2, 0, 1),
+    fontSize: '1.6em',
+    color: '#373D41',
+    position: 'relative'
+  },
+  chevronDown: {
+    transformOrigin: 'center center',
+    transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    transform: 'rotateZ(0deg)'
+  },
+  chevronUp: {
+    transformOrigin: 'center center',
+    transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    transform: 'rotateZ(180deg)'
+  },
+  progressBar: {
+    position: 'absolute',
+    overflow: 'hidden',
+    width: '100%',
+    bottom: 0,
+    height: 3
+  },
+  open: {}
+}));
 
 /**
  * The SideNavigationCategoriesItem component.
@@ -22,7 +51,6 @@ import { useSideNavigation } from "./SideNavigation.hooks";
  * @param {number} [props.level=0] The current nesting level.
  * @returns {JSX.Element|null} The rendered component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavigationCategoriesItem = ({
   categoryId,
   category,
@@ -31,6 +59,9 @@ const SideNavigationCategoriesItem = ({
   fetchCategory,
   level
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const {
@@ -56,14 +87,14 @@ const SideNavigationCategoriesItem = ({
       return /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: handleClick,
-        className: chevronButton,
+        className: classes.chevronButton,
         children: /*#__PURE__*/_jsx(ArrowDrop, {
-          className: (isOpen && subcategories ? chevronUp : chevronDown).toString()
+          className: isOpen && subcategories ? classes.chevronUp : classes.chevronDown
         })
       });
     }
     return null;
-  }, [handleClick, hasSubcategories, isOpen, maxNestingReached, subcategories]);
+  }, [classes.chevronButton, classes.chevronDown, classes.chevronUp, handleClick, hasSubcategories, isOpen, maxNestingReached, subcategories]);
   if (!category) {
     return null;
   }
@@ -73,9 +104,9 @@ const SideNavigationCategoriesItem = ({
     level: level,
     buttonRight: buttonRight,
     forceActive: activeCategoryId === categoryId,
-    className: level === 0 && isOpen ? open : null,
+    className: level === 0 && isOpen ? classes.open : null,
     children: [isLoading && /*#__PURE__*/_jsx("div", {
-      className: progressBar,
+      className: classes.progressBar,
       children: /*#__PURE__*/_jsx(ProgressBar, {})
     }), !maxNestingReached && isOpen && hasSubcategories && subcategories && /*#__PURE__*/_jsx(SideNavigationCategoriesItemChildren, {
       subcategories: subcategories,

package/components/SideNavigation/SideNavigationCategoriesItemChildren.d.ts

@@ -0,0 +1,22 @@
+export default SideNavigationCategoriesItemChildren;
+/**
+ * The SideNavigationCategoriesItemChildren component.
+ * @param {Object} props The component props.
+ * @param {Array} props.subcategories The list of subcategories.
+ * @param {number} props.level The current nesting level.
+ * @returns {JSX.Element} The rendered component.
+ */
+declare function SideNavigationCategoriesItemChildren({ subcategories, level }: {
+    subcategories: any[];
+    level: number;
+}): JSX.Element;
+declare namespace SideNavigationCategoriesItemChildren {
+    namespace propTypes {
+        let level: PropTypes.Validator<number>;
+        let subcategories: PropTypes.Validator<(PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+        }> | null | undefined)[]>;
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=SideNavigationCategoriesItemChildren.d.ts.map

package/components/SideNavigation/SideNavigationCategoriesItemChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationCategoriesItemChildren.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationCategoriesItemChildren.jsx"],"names":[],"mappings":";AAKA;;;;;;GAMG;AACH,gFAJG;IAAqB,aAAa;IACZ,KAAK,EAAnB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAYvB;;;;;;;;;sBArBqB,YAAY"}

package/components/SideNavigation/SideNavigationContent.d.ts

@@ -0,0 +1,24 @@
+export default SideNavigationContent;
+/**
+ * SideNavigationContent component.
+ * @param {Object} props - The component props.
+ * @param {Object} [props.classNames] - The class names for the navigation visibility.
+ * @returns {JSX.Element} The rendered component.
+ */
+declare function SideNavigationContent({ classNames }: {
+    classNames?: Object | undefined;
+}): JSX.Element;
+declare namespace SideNavigationContent {
+    namespace propTypes {
+        let classNames: PropTypes.Requireable<PropTypes.InferProps<{
+            visible: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+            hidden: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        }>>;
+    }
+    namespace defaultProps {
+        let classNames_1: null;
+        export { classNames_1 as classNames };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=SideNavigationContent.d.ts.map

package/components/SideNavigation/SideNavigationContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationContent.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationContent.jsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AACH,uDAHG;IAAuB,UAAU;CACjC,GAAU,GAAG,CAAC,OAAO,CA2BvB;;;;;;;;;;;;;sBA7CqB,YAAY"}

package/components/SideNavigation/SideNavigationContent.js

@@ -1,11 +1,17 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { INDEX_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
 import SideNavigationCategories from "./SideNavigationCategories";
 import SideNavigationLinks from "./SideNavigationLinks";
 import SideNavigationItem from "./SideNavigationItem";
 import { useSideNavigation } from "./SideNavigation.hooks";
-import { container } from "./SideNavigationContent.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    background: '#fff'
+  }
+});
 
 /**
  * SideNavigationContent component.
@@ -13,10 +19,12 @@ import { container } from "./SideNavigationContent.style";
  * @param {Object} [props.classNames] - The class names for the navigation visibility.
  * @returns {JSX.Element} The rendered component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavigationContent = ({
   classNames
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     isVisible
   } = useSideNavigation();
@@ -33,7 +41,7 @@ const SideNavigationContent = ({
   return /*#__PURE__*/_jsx("div", {
     className: wrapperClass,
     children: isVisible && /*#__PURE__*/_jsx("nav", {
-      className: container,
+      className: classes.container,
       children: /*#__PURE__*/_jsxs("ul", {
         children: [/*#__PURE__*/_jsx(SideNavigationItem, {
           href: INDEX_PATH,

package/components/SideNavigation/SideNavigationItem.d.ts

@@ -0,0 +1,38 @@
+declare const _default: React.MemoExoticComponent<{
+    ({ children, level, buttonRight, forceActive, forceInactive, className, onClick, href, label, }: {
+        children?: React.ReactNode;
+        level?: number | undefined;
+        buttonRight?: React.ReactNode;
+        forceActive?: boolean | undefined;
+        forceInactive?: boolean | undefined;
+        className?: string | undefined;
+        onClick?: Function | undefined;
+        href?: string | undefined;
+        label: string;
+    }): JSX.Element;
+    propTypes: {
+        label: PropTypes.Validator<string>;
+        buttonRight: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        forceActive: PropTypes.Requireable<boolean>;
+        forceInactive: PropTypes.Requireable<boolean>;
+        href: PropTypes.Requireable<string>;
+        level: PropTypes.Requireable<number>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    defaultProps: {
+        buttonRight: null;
+        children: null;
+        forceActive: boolean;
+        forceInactive: boolean;
+        level: number;
+        href: null;
+        className: null;
+        onClick: () => void;
+    };
+}>;
+export default _default;
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=SideNavigationItem.d.ts.map

package/components/SideNavigation/SideNavigationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationItem.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationItem.jsx"],"names":[],"mappings":";qGAmDG;QAAgC,QAAQ,GAAhC,KAAK,CAAC,SAAS;QACA,KAAK;QACI,WAAW,GAAnC,KAAK,CAAC,SAAS;QACC,WAAW;QACX,aAAa;QACd,SAAS;QACP,OAAO;QACT,IAAI;QACL,KAAK,EAAnB,MAAM;KACd,GAAU,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;kBA5Da,OAAO;sBAItB,YAAY"}

package/components/SideNavigation/SideNavigationItem.js

@@ -1,11 +1,53 @@
 import React, { useMemo, memo } from 'react';
-import classNames from 'classnames';
 import Link from '@shopgate/pwa-common/components/Link';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import PropTypes from 'prop-types';
-import { getIndentation, item, itemActive, link, linkActive, list } from "./SideNavigationItem.style";
 import { useSideNavigation } from "./SideNavigation.hooks";
 
+/**
+ * @param {Object} theme Theme object
+ * @param {number} level Side navigation nesting depth.
+ * @returns {number|string}  padding for the level.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getIndentationPadding = (theme, level) => level * theme.spacing(2);
+const useStyles = makeStyles()((theme, {
+  level
+}) => ({
+  indentation: {
+    paddingLeft: getIndentationPadding(theme, level)
+  },
+  list: {
+    position: 'relative'
+  },
+  item: {
+    alignItems: 'center',
+    display: 'flex',
+    textAlign: 'left',
+    outline: 0,
+    padding: theme.spacing(2),
+    position: 'relative',
+    width: '100%',
+    lineHeight: '1.45em'
+  },
+  itemActive: {
+    background: 'var(--color-side-navigation-active-background)'
+  },
+  link: {
+    flexGrow: 1,
+    textAlign: 'left',
+    outline: 0,
+    color: theme.palette.text.primary,
+    ':hover': {
+      color: 'var(--color-primary)'
+    }
+  },
+  linkActive: {
+    color: 'var(--color-primary) !important'
+  }
+}));
+
 /**
  * SideNavigationItem component.
  * @param {Object} props - The component props.
@@ -20,7 +62,6 @@ import { useSideNavigation } from "./SideNavigation.hooks";
  * @param {string} props.label - The label text for the item.
  * @returns {JSX.Element} The rendered component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavigationItem = ({
   children,
   level,
@@ -32,27 +73,33 @@ const SideNavigationItem = ({
   href,
   label
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    level
+  });
   const {
     currentPathname
   } = useSideNavigation();
   const isActive = useMemo(() => !forceInactive && (currentPathname === href || forceActive), [currentPathname, forceActive, forceInactive, href]);
   return /*#__PURE__*/_jsxs("li", {
-    className: classNames(list, className),
+    className: cx(classes.list, className),
     children: [/*#__PURE__*/_jsxs("div", {
-      className: classNames(item, {
-        [itemActive]: isActive
+      className: cx(classes.item, {
+        [classes.itemActive]: isActive
       }),
       children: [href ? /*#__PURE__*/_jsx(Link, {
         tag: "a",
         href: href,
-        className: classNames(link, getIndentation(level), {
-          [linkActive]: isActive
+        className: cx(classes.link, classes.indentation, {
+          [classes.linkActive]: isActive
         }),
         children: i18n.text(label)
       }) : /*#__PURE__*/_jsx("button", {
         type: "button",
-        className: classNames(link, getIndentation(level), {
-          [linkActive]: isActive
+        className: cx(classes.link, classes.indentation, {
+          [classes.linkActive]: isActive
         }),
         onClick: onClick,
         children: i18n.text(label)

package/components/SideNavigation/SideNavigationLinks.d.ts

@@ -0,0 +1,7 @@
+export default SideNavigationLinks;
+/**
+ * SideNavigationLinks component
+ * @returns {JSX}
+ */
+declare function SideNavigationLinks(): JSX;
+//# sourceMappingURL=SideNavigationLinks.d.ts.map

package/components/SideNavigation/SideNavigationLinks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationLinks.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationLinks.jsx"],"names":[],"mappings":";AAeA;;;GAGG;AACH,wCAFa,GAAG,CAwCf"}

package/components/SideNavigation/SideNavigationLinks.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { FAVORITES_PATH } from '@shopgate/pwa-common-commerce/favorites/constants';
 import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
 import { LOGIN_PATH } from '@shopgate/pwa-common/constants/RoutePaths';

package/components/SideNavigation/SideNavigationLinksLegal.connector.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<Function & import("react-redux").DispatchProp<import("redux").AnyAction>, {}>;
+export default _default;
+//# sourceMappingURL=SideNavigationLinksLegal.connector.d.ts.map

package/components/SideNavigation/SideNavigationLinksLegal.connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationLinksLegal.connector.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationLinksLegal.connector.js"],"names":[],"mappings":""}

package/components/SideNavigation/SideNavigationLinksLegal.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=SideNavigationLinksLegal.d.ts.map

package/components/SideNavigation/SideNavigationLinksLegal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationLinksLegal.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationLinksLegal.jsx"],"names":[],"mappings":";;kBAAkB,OAAO"}

package/components/SideNavigation/SideNavigationLinksQuicklinks.connector.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<Function & import("react-redux").DispatchProp<import("redux").AnyAction>, {}>;
+export default _default;
+//# sourceMappingURL=SideNavigationLinksQuicklinks.connector.d.ts.map

package/components/SideNavigation/SideNavigationLinksQuicklinks.connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationLinksQuicklinks.connector.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationLinksQuicklinks.connector.js"],"names":[],"mappings":""}

package/components/SideNavigation/SideNavigationLinksQuicklinks.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=SideNavigationLinksQuicklinks.d.ts.map

package/components/SideNavigation/SideNavigationLinksQuicklinks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationLinksQuicklinks.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationLinksQuicklinks.jsx"],"names":[],"mappings":";;kBAAkB,OAAO"}

package/components/SideNavigation/SideNavigationNestedItem.d.ts

@@ -0,0 +1,35 @@
+export default SideNavigationNestedItem;
+/**
+ * The SideNavigationCategoriesItem component
+ * @param {Object} props The component props.
+ * @param {number} props.level The nesting level.
+ * @param {string} props.label The item label.
+ * @param {string} props.href The item href.
+ * @param {JSX.Element} props.children The nested items.
+ * @param {boolean} props.forceActive Whether the item should be forced open.
+ * @returns {JSX.Element}
+ */
+declare function SideNavigationNestedItem({ level, label, href, children, forceActive, }: {
+    level: number;
+    label: string;
+    href: string;
+    children: JSX.Element;
+    forceActive: boolean;
+}): JSX.Element;
+declare namespace SideNavigationNestedItem {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let href: PropTypes.Validator<string>;
+        let label: PropTypes.Validator<string>;
+        let forceActive: PropTypes.Requireable<boolean>;
+        let level: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        let level_1: number;
+        export { level_1 as level };
+        let forceActive_1: boolean;
+        export { forceActive_1 as forceActive };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=SideNavigationNestedItem.d.ts.map

package/components/SideNavigation/SideNavigationNestedItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationNestedItem.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationNestedItem.jsx"],"names":[],"mappings":";AA8BA;;;;;;;;;GASG;AACH,0FAPG;IAAsB,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,IAAI,EAAlB,MAAM;IACa,QAAQ,EAA3B,GAAG,CAAC,OAAO;IACI,WAAW,EAA1B,OAAO;CACf,GAAU,GAAG,CAAC,OAAO,CAwCvB;;;;;;;;;;;;;;;;sBA1EqB,YAAY"}

package/components/SideNavigation/SideNavigationNestedItem.js

@@ -1,8 +1,30 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import ArrowDrop from '@shopgate/pwa-ui-shared/icons/ArrowDropIcon';
 import PropTypes from 'prop-types';
-import { chevronButton, chevronUp, chevronDown, open } from "./SideNavigationCategoriesItem.style";
+import { makeStyles } from '@shopgate/engage/styles';
 import SideNavigationItem from "./SideNavigationItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  chevronButton: {
+    flexShrink: 0,
+    outline: 0,
+    margin: theme.spacing(0, -2, 0, 1),
+    fontSize: '1.6em',
+    color: '#373D41',
+    position: 'relative'
+  },
+  chevronDown: {
+    transformOrigin: 'center center',
+    transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    transform: 'rotateZ(0deg)'
+  },
+  chevronUp: {
+    transformOrigin: 'center center',
+    transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    transform: 'rotateZ(180deg)'
+  },
+  open: {}
+}));
 
 /**
  * The SideNavigationCategoriesItem component
@@ -14,7 +36,6 @@ import SideNavigationItem from "./SideNavigationItem";
  * @param {boolean} props.forceActive Whether the item should be forced open.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const SideNavigationNestedItem = ({
   level,
   label,
@@ -22,6 +43,9 @@ const SideNavigationNestedItem = ({
   children,
   forceActive
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [isOpen, setIsOpen] = useState(forceActive);
   useEffect(() => {
     if (forceActive) {
@@ -34,17 +58,17 @@ const SideNavigationNestedItem = ({
   const buttonRight = useMemo(() => /*#__PURE__*/_jsx("button", {
     type: "button",
     onClick: handleClick,
-    className: chevronButton,
+    className: classes.chevronButton,
     children: /*#__PURE__*/_jsx(ArrowDrop, {
-      className: (isOpen ? chevronUp : chevronDown).toString()
+      className: isOpen ? classes.chevronUp : classes.chevronDown
     })
-  }), [handleClick, isOpen]);
+  }), [classes.chevronButton, classes.chevronDown, classes.chevronUp, handleClick, isOpen]);
   return /*#__PURE__*/_jsx(SideNavigationItem, {
     href: href,
     label: label,
     level: level,
     buttonRight: buttonRight,
-    className: level === 0 && isOpen ? open : null,
+    className: level === 0 && isOpen ? classes.open : null,
     forceInactive: true,
     children: isOpen ? children : null
   });

package/components/SideNavigation/SideNavigationProvider.connector.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<Function & Object, {}>;
+export default _default;
+//# sourceMappingURL=SideNavigationProvider.connector.d.ts.map

package/components/SideNavigation/SideNavigationProvider.connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationProvider.connector.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationProvider.connector.js"],"names":[],"mappings":""}

package/components/SideNavigation/SideNavigationProvider.context.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react").Context<{}>;
+export default _default;
+//# sourceMappingURL=SideNavigationProvider.context.d.ts.map

package/components/SideNavigation/SideNavigationProvider.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationProvider.context.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationProvider.context.js"],"names":[],"mappings":""}

package/components/SideNavigation/SideNavigationProvider.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=SideNavigationProvider.d.ts.map

package/components/SideNavigation/SideNavigationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationProvider.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationProvider.jsx"],"names":[],"mappings":";;kBAAoD,OAAO"}

package/components/SideNavigation/SideNavigationProvider.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { CATEGORY_PATTERN, CATEGORY_FILTER_PATTERN } from '@shopgate/pwa-common-commerce/category/constants';

package/components/SideNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SideNavigation } from "./SideNavigation";
+//# sourceMappingURL=index.d.ts.map