@griddo/ax 1.56.9 → 1.57.2

package/src/modules/GlobalEditor/index.tsx

@@ -11,7 +11,6 @@ import { sitesActions } from "@ax/containers/Sites";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty, useModal } from "@ax/hooks";
-import { setIsSavedData } from "@ax/forms";
 import Editor from "./Editor";
 
 import * as S from "./style";
@@ -39,12 +38,13 @@ const GlobalEditor = (props: IProps) => {
     setCurrentSiteInfo,
     savedSiteInfo,
     userEditing,
+    isNewTranslation,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   const [isPreviewMode, setIsPreviewMode] = useState(false);
-  const { isDirty } = useIsDirty(editorContent.editorContent);
+  const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
@@ -61,6 +61,9 @@ const GlobalEditor = (props: IProps) => {
     const handleGetPage = async () => await getPage(pageID, true);
     setTab(defaultTab);
     handleGetPage();
+    if (!pageID) {
+      setIsDirty(true);
+    }
 
     const interval = setInterval(() => {
       pageID && sendPagePing(pageID);
@@ -97,24 +100,32 @@ const GlobalEditor = (props: IProps) => {
 
   const publishPage = async () => {
     const { updatePageStatus, savePage, pageID } = props;
-    setIsSavedData(true);
 
     const publishPage = {
       status: pageStatus.UPLOAD_PENDING,
     };
 
-    pageID ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING) : await savePage(false, publishPage);
+    pageID
+      ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+      : await savePage(false, publishPage).then((isSaved: boolean) => {
+          if (isSaved) {
+            resetDirty();
+          }
+        });
   };
 
   const publishChanges = async () => {
     const { savePage } = props;
-    setIsSavedData(true);
 
     const publishPage = {
       status: pageStatus.UPLOAD_PENDING,
     };
 
-    await savePage(false, publishPage);
+    await savePage(false, publishPage).then((isSaved: boolean) => {
+      if (isSaved) {
+        resetDirty();
+      }
+    });
   };
 
   const unpublishPage = async () => {
@@ -136,17 +147,23 @@ const GlobalEditor = (props: IProps) => {
 
   const handlePublishDraft = async () => {
     const { savePage } = props;
-    setIsSavedData(true);
-    await savePage(false, null, true);
+
+    await savePage(false, null, true).then((isSaved: boolean) => {
+      if (isSaved) {
+        resetDirty();
+      }
+    });
   };
 
   const handleDiscardDraft = async () => {
     const { discardDraft } = props;
+    resetDirty();
     await discardDraft();
   };
 
   const handleDiscarChanges = async () => {
     const { getPage, pageID } = props;
+    resetDirty();
     await getPage(pageID, true);
   };
 
@@ -230,7 +247,6 @@ const GlobalEditor = (props: IProps) => {
 
   const handleSavePage = async () => {
     const { savePage } = props;
-    setIsSavedData(true);
 
     const publishPage = {
       status: pageStatus.UPLOAD_PENDING,
@@ -238,7 +254,11 @@ const GlobalEditor = (props: IProps) => {
 
     const createDraft = isPublished && !hasDraft;
     const status = props.pageStatus === pageStatus.PUBLISHED && !createDraft ? publishPage : undefined;
-    await savePage(createDraft, status);
+    await savePage(createDraft, status).then((isSaved: boolean) => {
+      if (isSaved) {
+        resetDirty();
+      }
+    });
   };
 
   const goToPages = (path: string) => setRoute(path);
@@ -259,15 +279,15 @@ const GlobalEditor = (props: IProps) => {
     switch (props.pageStatus) {
       case pageStatus.PUBLISHED:
       case pageStatus.UPLOAD_PENDING:
-        return isPublished && hasDraft ? "Save & publish" : "Save draft";
+        return !isDirty ? "Saved" : isPublished && hasDraft ? "Save & publish" : "Save draft";
       default:
-        return "Save";
+        return !isDirty ? "Saved" : "Save";
     }
   };
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: isSaving || isPreviewMode,
+    disabled: isSaving || isPreviewMode || !isDirty,
     action: handleSavePage,
   };
 
@@ -280,6 +300,7 @@ const GlobalEditor = (props: IProps) => {
 
   const toggleDraftPage = async () => {
     const { getPage } = props;
+    resetDirty();
     const pageID = isDraft ? editorContent.editorContent.draftFromPage : editorContent.editorContent.haveDraftPage;
     await getPage(pageID);
   };
@@ -445,6 +466,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   savedSiteInfo: state.sites.savedSiteInfo,
   userEditing: state.pageEditor.userEditing,
   currentUserID: state.users.currentUser.id,
+  isNewTranslation: state.pageEditor.isNewTranslation,
 });
 
 interface IPageEditorStateProps {
@@ -463,6 +485,7 @@ interface IPageEditorStateProps {
   savedSiteInfo: any;
   userEditing: IUserEditing | null;
   currentUserID: number | null;
+  isNewTranslation: boolean;
 }
 
 const mapDispatchToProps = {
@@ -485,7 +508,7 @@ const mapDispatchToProps = {
 
 interface IPageEditorDispatchProps {
   getPage(pageID?: number, global?: boolean): Promise<void>;
-  savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<void>;
+  savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
   validatePage(): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -26,27 +26,42 @@ const DefaultsEditor = (props: IProps) => {
     currentDefaultsContent,
     navLanguages,
     isNewTranslation,
-    createNewTranslation,
+    createTranslation,
     selectedDefault,
     setHeader,
     setFooter,
     setHistoryPush,
+    header,
+    footer,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
+  const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
+
+  const currentDefaultNav = currentDefaultsContent.find((item: any) => item.setAsDefault);
+  const isNew = !header && !footer;
+  const isSetAsDefault = editorContent && editorContent.setAsDefault;
 
   useEffect(() => {
     getValues();
+    if (isNew) {
+      setIsDirty(true);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const { isDirty } = useIsDirty(editorContent);
-  const currentDefaultNav = currentDefaultsContent.find((item: any) => item.setAsDefault);
-  const isNew = editorContent && !editorContent.id;
-  const isSetAsDefault = editorContent && editorContent.setAsDefault;
-
   const save = () => {
-    isNew || isNewTranslation ? createNavigation() : updateNavigation(editorContent.id, editorContent, true);
+    isNew || isNewTranslation
+      ? createNavigation().then((isSaved: boolean) => {
+          if (isSaved) {
+            resetDirty();
+          }
+        })
+      : updateNavigation(editorContent.id, editorContent, true).then((isSaved: boolean) => {
+          if (isSaved) {
+            resetDirty();
+          }
+        });
   };
 
   const saveAsDefault = () => {
@@ -61,8 +76,8 @@ const DefaultsEditor = (props: IProps) => {
   };
 
   const rightButtonProps = {
-    label: isSaving ? "Saving" : "Save",
-    disabled: isSaving,
+    label: !isDirty ? "Saved" : isSaving ? "Saving" : "Save",
+    disabled: isSaving || !isDirty,
     action: () => saveButtonAction(),
   };
 
@@ -72,6 +87,11 @@ const DefaultsEditor = (props: IProps) => {
     getValues();
   };
 
+  const createNewTranslation = (isNewTranslation: boolean) => {
+    setIsDirty(true);
+    createTranslation(isNewTranslation);
+  };
+
   const languageActions = {
     setLanguage,
     createNewTranslation,
@@ -161,7 +181,7 @@ const mapDispatchToProps = {
   setSchema: navigationActions.setSchema,
   createNavigation: navigationActions.createNavigation,
   updateNavigation: navigationActions.updateNavigation,
-  createNewTranslation: navigationActions.createNewTranslation,
+  createTranslation: navigationActions.createNewTranslation,
   setHeader: navigationActions.setHeader,
   setFooter: navigationActions.setFooter,
 };
@@ -170,9 +190,9 @@ interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;
   getValues(): void;
-  createNavigation(): void;
-  updateNavigation(navID: number, data: any, fromEditor?: boolean): void;
-  createNewTranslation(isNewTranslation: boolean): void;
+  createNavigation(): Promise<boolean>;
+  updateNavigation(navID: number, data: any, fromEditor?: boolean): Promise<boolean>;
+  createTranslation(isNewTranslation: boolean): void;
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;
 }

package/src/modules/Navigation/Defaults/Item/atoms.tsx

@@ -32,7 +32,7 @@ const Translations = (props: IProps) => {
   const { currentLanguages, locale, languages, handleLanguage } = props;
 
   return (
-    <FloatingMenu Button={() => FlagsButton(currentLanguages)} isWide={true}>
+    <FloatingMenu Button={() => FlagsButton(currentLanguages)}>
       <LangMenu
         currentLanguages={currentLanguages}
         locale={locale}

package/src/modules/Navigation/Defaults/Nav/index.tsx

@@ -3,6 +3,8 @@ import { NavLink } from "react-router-dom";
 
 import { SubNav, MenuItem } from "@ax/components";
 
+import * as S from './style';
+
 const DefaultNav = (props: IProps): JSX.Element => {
   const { current, defaultTypes, onClick } = props;
 
@@ -10,12 +12,15 @@ const DefaultNav = (props: IProps): JSX.Element => {
     <SubNav>
       {defaultTypes &&
         defaultTypes.map((type: string, key: number) => {
-          const isSelected = current && type === current ? "selected" : "";
+          const isSelected = !!current && type === current;
+          const selectedClass = isSelected ? "selected" : "";
           const handleClick = () => onClick(type);
           return (
             <MenuItem key={key} onClick={handleClick}>
-              <NavLink to="#" className={isSelected}>
-                {type}
+              <NavLink to="#" className={selectedClass}>
+                <S.Link active={isSelected}>
+                  {type}
+                </S.Link>
               </NavLink>
             </MenuItem>
           );

package/src/modules/Navigation/Defaults/Nav/style.tsx

@@ -35,3 +35,7 @@ export const SubItem = styled.li`
 `;
 
 export const Item = styled.article``;
+
+export const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;

package/src/modules/Navigation/Defaults/index.tsx

@@ -32,6 +32,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
     restoreNavigation,
     deleteNavigation,
     getMenus,
+    resetDefaultsValues,
   } = props;
 
   const [page, setPage] = useState(1);
@@ -86,6 +87,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
   const memoizedGetMenus = useCallback(() => getMenus(), [getMenus]);
 
   useEffect(() => {
+    resetDefaultsValues();
     memoizedGetMenus();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -228,6 +230,7 @@ interface IDispatchProps {
   restoreNavigation(navID: number | number[], type: string): void;
   deleteNavigation(navID: number[], type: string): Promise<boolean>;
   getMenus(): void;
+  resetDefaultsValues(): void;
 }
 
 interface IDefaultsProps {
@@ -251,6 +254,7 @@ const mapDispatchToProps = {
   restoreNavigation: navigationActions.restoreNavigation,
   deleteNavigation: navigationActions.deleteNavigation,
   getMenus: menuActions.getMenus,
+  resetDefaultsValues: navigationActions.resetDefaultsValues,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(DefaultsList);

package/src/modules/Navigation/Menus/List/Nav/index.tsx

@@ -7,6 +7,8 @@ import { IRootState } from "@ax/types";
 import { useModal } from "@ax/hooks";
 import { menuActions } from "@ax/containers/Navigation";
 
+import * as S from "./style";
+
 const Nav = (props: INav): JSX.Element => {
   const { getCurrentMenu, currentType, isDirty, currentMenus } = props;
   const [category, setCategory] = useState(currentType);
@@ -29,12 +31,15 @@ const Nav = (props: INav): JSX.Element => {
               isDirty ? toggleModal() : getCurrentMenu(category.name);
             };
 
-            const isSelected = category.name === currentType ? "selected" : "";
+            const isSelected = category.name === currentType;
+            const selectedClass = isSelected ? "selected" : "";
 
             return (
               <MenuItem onClick={_handleClick} key={category.name}>
-                <NavLink to="#" className={isSelected}>
-                  {category.title}
+                <NavLink to="#" className={selectedClass}>
+                  <S.Link active={isSelected}>
+                    {category.title}
+                  </S.Link>
                 </NavLink>
               </MenuItem>
             );

package/src/modules/Navigation/Menus/List/Nav/style.tsx

@@ -10,3 +10,7 @@ export const ModalContent = styled.div`
     margin-bottom: 0;
   }
 `;
+
+export const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;

package/src/modules/Navigation/Menus/List/index.tsx

@@ -39,7 +39,9 @@ const List = (props: IMenuList): JSX.Element => {
   return (
     <S.ListWrapper>
       <Nav isDirty={isDirty} />
-      <Table isDirty={isDirty} />
+      <S.TableWrapper>
+        <Table isDirty={isDirty} />
+      </S.TableWrapper>
     </S.ListWrapper>
   );
 };

package/src/modules/Navigation/Menus/List/style.tsx

@@ -1,6 +1,14 @@
 import styled from "styled-components";
 
-export const ListWrapper = styled.div`
+const ListWrapper = styled.div`
   display: flex;
   height: 100%;
 `;
+
+const TableWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`;
+
+export { ListWrapper, TableWrapper };

package/src/modules/PageEditor/index.tsx

@@ -10,7 +10,6 @@ import { navigationActions } from "@ax/containers/Navigation";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty, useModal } from "@ax/hooks";
-import { setIsSavedData } from "@ax/forms";
 import { isModuleDisabled } from "@ax/helpers";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import Editor from "./Editor";
@@ -42,10 +41,11 @@ const PageEditor = (props: IProps) => {
     validated,
     pageEditor: { editorContent, schema },
     userEditing,
+    isNewTranslation,
   } = props;
 
   const [isPreviewMode, setIsPreviewMode] = useState(false);
-  const { isDirty } = useIsDirty(editorContent.editorContent);
+  const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
 
@@ -63,6 +63,10 @@ const PageEditor = (props: IProps) => {
     setTab(defaultTab);
     handleGetPage();
 
+    if (!pageID) {
+      setIsDirty(true);
+    }
+
     const interval = setInterval(() => {
       pageID && sendPagePing(pageID);
     }, 30000);
@@ -103,24 +107,32 @@ const PageEditor = (props: IProps) => {
 
   const publishPage = async () => {
     const { updatePageStatus, savePage, pageID } = props;
-    setIsSavedData(true);
 
     const publishPage = {
       status: pageStatus.UPLOAD_PENDING,
     };
 
-    pageID ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING) : await savePage(false, publishPage);
+    pageID
+      ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+      : await savePage(false, publishPage).then((isSaved: boolean) => {
+          if (isSaved) {
+            resetDirty();
+          }
+        });
   };
 
   const publishChanges = async () => {
     const { savePage } = props;
-    setIsSavedData(true);
 
     const publishPage = {
       status: pageStatus.UPLOAD_PENDING,
     };
 
-    await savePage(false, publishPage);
+    await savePage(false, publishPage).then((isSaved: boolean) => {
+      if (isSaved) {
+        resetDirty();
+      }
+    });
   };
 
   const unpublishPage = async () => {
@@ -142,17 +154,23 @@ const PageEditor = (props: IProps) => {
 
   const handlePublishDraft = async () => {
     const { savePage } = props;
-    setIsSavedData(true);
-    await savePage(false, null, true);
+    await savePage(false, null, true).then((isSaved: boolean) => {
+      if (isSaved) {
+        resetDirty();
+      }
+    });
   };
 
   const handleDiscardDraft = async () => {
     const { discardDraft } = props;
+    resetDirty();
     await discardDraft();
   };
 
   const handleDiscarChanges = async () => {
     const { getPage, pageID } = props;
+    resetDirty();
+
     await getPage(pageID);
   };
 
@@ -238,7 +256,6 @@ const PageEditor = (props: IProps) => {
 
   const handleSavePage = async () => {
     const { savePage } = props;
-    setIsSavedData(true);
 
     const publishPage = {
       status: pageStatus.UPLOAD_PENDING,
@@ -247,7 +264,11 @@ const PageEditor = (props: IProps) => {
     const createDraft = isPublished && !hasDraft && !isGlobal;
     const status = props.pageStatus === pageStatus.PUBLISHED && !createDraft ? publishPage : undefined;
 
-    await savePage(createDraft, status);
+    await savePage(createDraft, status).then((isSaved: boolean) => {
+      if (isSaved) {
+        resetDirty();
+      }
+    });
   };
 
   const goToPages = (path: string) => setRoute(path);
@@ -286,15 +307,15 @@ const PageEditor = (props: IProps) => {
     switch (props.pageStatus) {
       case pageStatus.PUBLISHED:
       case pageStatus.UPLOAD_PENDING:
-        return isGlobal || (isPublished && hasDraft) ? "Save & publish" : "Save draft";
+        return !isDirty ? "Saved" : isGlobal || (isPublished && hasDraft) ? "Save & publish" : "Save draft";
       default:
-        return "Save";
+        return !isDirty ? "Saved" : "Save";
     }
   };
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: isSaving || (!isTemplateActivated && !isGlobal) || isPreviewMode,
+    disabled: isSaving || (!isTemplateActivated && !isGlobal) || isPreviewMode || !isDirty,
     action: handleSavePage,
   };
 
@@ -307,6 +328,7 @@ const PageEditor = (props: IProps) => {
 
   const toggleDraftPage = async () => {
     const { getPage } = props;
+    resetDirty();
     const pageID = isDraft ? editorContent.editorContent.draftFromPage : editorContent.editorContent.haveDraftPage;
     await getPage(pageID);
   };
@@ -482,6 +504,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   validated: state.pageEditor.validated,
   userEditing: state.pageEditor.userEditing,
   currentUserID: state.users.currentUser.id,
+  isNewTranslation: state.pageEditor.isNewTranslation,
 });
 
 interface IPageEditorStateProps {
@@ -501,6 +524,7 @@ interface IPageEditorStateProps {
   validated: boolean;
   userEditing: IUserEditing | null;
   currentUserID: number | null;
+  isNewTranslation: boolean;
 }
 
 const mapDispatchToProps = {
@@ -524,7 +548,7 @@ const mapDispatchToProps = {
 
 interface IPageEditorDispatchProps {
   getPage(pageID?: number): Promise<void>;
-  savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<void>;
+  savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
   validatePage(): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;

package/src/modules/Settings/ContentTypes/DataPacks/AddModal/Filter/index.tsx

@@ -21,7 +21,7 @@ const Filter = (props: IProps) => {
   const handleClickAll = () => setFilter(null);
 
   return (
-    <FloatingMenu isWide={true} Button={Select} position="left">
+    <FloatingMenu Button={Select} position="left">
       <ListTitle>Filter by category</ListTitle>
       <ListItem key="all" onClick={handleClickAll}>
         All

package/src/modules/Settings/ContentTypes/DataPacks/AddModal/SortFilter/index.tsx

@@ -27,7 +27,7 @@ const SortFilter = (props: IProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Select} position="left">
+    <FloatingMenu Button={Select} position="left">
       <ListTitle>Name Sorting</ListTitle>
       <ListItem onClick={orderByNameAscending}>Ascendent</ListItem>
       <ListItem onClick={orderByNameDescending}>Descendent</ListItem>

package/src/modules/Settings/ContentTypes/DataPacks/Nav/index.tsx

@@ -22,7 +22,7 @@ const Nav = (props: IProps): JSX.Element => {
     isDirty ? toggleModal() : selectPack(null);
   };
 
-  const isSelected = selected ? "" : "selected";
+  const selectedClass = selected ? "" : "selected";
 
   const infoMenuProps: { icon: string; message: string; actionText: string; iconSize: "s" } = {
     icon: "alert",
@@ -43,8 +43,10 @@ const Nav = (props: IProps): JSX.Element => {
         <S.Item>
           <S.Heading>Your packages</S.Heading>
           <MenuItem onClick={resetFilter}>
-            <NavLink to="#" className={isSelected}>
-              Activated packages
+            <NavLink to="#" className={selectedClass}>
+              <S.Link active={!selected}>
+                Activated packages
+              </S.Link>
             </NavLink>
           </MenuItem>
         </S.Item>
@@ -55,16 +57,19 @@ const Nav = (props: IProps): JSX.Element => {
             activated.map((dataPack: any, key: number) => {
               const { id, title, templates, config } = dataPack;
               const isFromPage = templates && templates.length > 0;
-              const isSelected = id === (selected && selected.id) ? "selected" : "";
+              const isSelected = id === (selected && selected.id);
+              const selectedClass = isSelected ? "selected" : "";
               const _handleClick = () => {
                 setSelectedID(id);
                 isDirty ? toggleModal() : selectPack(id);
               };
               return (
                 <MenuItem key={key} onClick={_handleClick}>
-                  <NavLink to="#" className={isSelected}>
+                  <NavLink to="#" className={selectedClass}>
                     <S.LinkWrapper>
-                      {title}
+                      <S.Link active={isSelected}>
+                        {title}
+                      </S.Link>
                       {isFromPage && !config && <InformativeMenu {...infoMenuProps} />}
                     </S.LinkWrapper>
                   </NavLink>

package/src/modules/Settings/ContentTypes/DataPacks/Nav/style.tsx

@@ -45,9 +45,14 @@ const LinkWrapper = styled.div`
   justify-content: center;
 `;
 
+const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;
+
 export {
   Heading,
   SubItem,
   Item,
-  LinkWrapper
+  LinkWrapper,
+  Link
 }