[Chore] Change Sistent package location

Signed-off-by: miacycle <184569369+miacycle@users.noreply.github.com>

Author: miacycle

package-lock.json

@@ -35,7 +35,7 @@
     "@fullcalendar/interaction": "^6.0.1",
     "@fullcalendar/react": "^6.1.8",
     "@layer5/meshery-design-embed": "^0.4.0",
-    "@layer5/sistent": "^0.14.182",
+    "@sistent/sistent": "^0.14.182",
     "@loadable/component": "^5.16.4",
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",

package.json

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { ComponentsWrapper } from "./Component.style";
-import { CatalogCard, SistentThemeProviderWithoutBaseLine } from "@layer5/sistent";
+import { CatalogCard, SistentThemeProviderWithoutBaseLine } from "@sistent/sistent";
 import axios from "axios";
 import { useStyledDarkMode } from "../../../../theme/app/useStyledDarkMode";
 import Button from "../../../../reusecore/Button";

src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js

@@ -5,17 +5,18 @@ import TOC from "../../../components/SistentNavigation";
 import IntraPage from "../../../components/handbook-navigation/intra-page";
 import SistentPagination from "../../../components/SistentNavigation/pagination";
 
+import { Link } from "gatsby";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 import { CodeBlock } from "./components/button/code-block";
-import { SistentThemeProvider } from "@layer5/sistent";
-import { Button } from "@layer5/sistent";
+import { SistentThemeProvider } from "@sistent/sistent";
+import { Button } from "@sistent/sistent";
 
 const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
 
 const codes = [
-  "npm i @layer5/sistent",
-  `  import { SistentThemeProvider } from "@layer5/sistent";
-  import { Button } from "@layer5/sistent";
+  "npm i @sistent/sistent",
+  `  import { SistentThemeProvider } from "@sistent/sistent";
+  import { Button } from "@sistent/sistent";
      
   <SistentThemeProvider>
     <Button variant="contained">Filled</Button>
@@ -78,8 +79,8 @@ const SistentAbout = () => {
             </p>
             <h3>Layer5 Brand Resources</h3>
             <ul>
-              <li><a href="https://layer5.io/brand/brand-guide.pdf">Brand Guide</a></li>
-              <li><a href="https://layer5.io/company/brand">Logos and Brand Kits</a></li>
+              <li><Link to="/brand/brand-guide.pdf">Brand Guide</Link></li>
+              <li><Link to="/brand">Logos and Brand Kits</Link></li>
             </ul>
             <a id="Installation">
               <h2>Installation and Quickstart</h2>
@@ -90,7 +91,7 @@ const SistentAbout = () => {
             </div>
             <p>
               After installation, you can import Sistent theme and any Sistent
-              component from "@layer5/sistent". The component needs to be
+              component from "@sistent/sistent". The component needs to be
               included inside "SistentThemeProvider".
             </p>
             <p>Taking button as an example:</p>

src/sections/Projects/Sistent/about.js

@@ -2,18 +2,18 @@ import { useLocation } from "@reach/router";
 import { navigate } from "gatsby";
 import React from "react";
 
-import { Container, SistentThemeProvider } from "@layer5/sistent";
+import { Container, SistentThemeProvider } from "@sistent/sistent";
 import { SistentLayout } from "../../sistent-layout";
 import { CodeBlock } from "../button/code-block";
 
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-import { Backdrop, Button, CircularProgress } from "@layer5/sistent";
+import { Backdrop, Button, CircularProgress } from "@sistent/sistent";
 
 const codes = [
   `
-  import { Backdrop, Button, CircularProgress } from "@layer5/sistent";
+  import { Backdrop, Button, CircularProgress } from "@sistent/sistent";
 
   // declare states and functions to handle open and close operation
 

src/sections/Projects/Sistent/components/backdrop/code.js

@@ -7,7 +7,7 @@ import {
   Button,
   Backdrop,
   CircularProgress,
-} from "@layer5/sistent";
+} from "@sistent/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";

src/sections/Projects/Sistent/components/backdrop/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import { SistentThemeProvider, Box } from "@layer5/sistent";
+import { SistentThemeProvider, Box } from "@sistent/sistent";
 import { CodeBlock } from "../button/code-block";
 import { SistentLayout } from "../../sistent-layout";
 

src/sections/Projects/Sistent/components/box/code.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 import { Row } from "../../../../../reusecore/Layout";
-import { SistentThemeProvider, Box } from "@layer5/sistent";
+import { SistentThemeProvider, Box } from "@sistent/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";

src/sections/Projects/Sistent/components/box/guidance.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import { SistentThemeProvider, Box } from "@layer5/sistent";
+import { SistentThemeProvider, Box } from "@sistent/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";

src/sections/Projects/Sistent/components/box/index.js

@@ -7,7 +7,7 @@ import {
   Button,
   ButtonGroup,
   Box,
-} from "@layer5/sistent";
+} from "@sistent/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

src/sections/Projects/Sistent/components/button-group/code.js

@@ -7,7 +7,7 @@ import {
   ButtonGroup,
   Button,
   Box,
-} from "@layer5/sistent";
+} from "@sistent/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";

src/sections/Projects/Sistent/components/button-group/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import { Button, SistentThemeProvider } from "@layer5/sistent";
+import { Button, SistentThemeProvider } from "@sistent/sistent";
 import { CodeBlock } from "./code-block";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { SistentLayout } from "../../sistent-layout";

src/sections/Projects/Sistent/components/button/code.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 import { Row } from "../../../../../reusecore/Layout";
-import { Button, SistentThemeProvider } from "@layer5/sistent";
+import { Button, SistentThemeProvider } from "@sistent/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";

src/sections/Projects/Sistent/components/button/guidance.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import { SistentThemeProvider, Button } from "@layer5/sistent";
+import { SistentThemeProvider, Button } from "@sistent/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Col, Row } from "../../../../../reusecore/Layout";

src/sections/Projects/Sistent/components/button/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import { SistentThemeProvider, Container, Box } from "@layer5/sistent";
+import { SistentThemeProvider, Container, Box } from "@sistent/sistent";
 import { CodeBlock } from "../button/code-block";
 // import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { SistentLayout } from "../../sistent-layout";

src/sections/Projects/Sistent/components/container/code.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 import { Row } from "../../../../../reusecore/Layout";
-import { SistentThemeProvider, Container, Box } from "@layer5/sistent";
+import { SistentThemeProvider, Container, Box } from "@sistent/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";

src/sections/Projects/Sistent/components/container/guidance.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import { SistentThemeProvider, Container, Box } from "@layer5/sistent";
+import { SistentThemeProvider, Container, Box } from "@sistent/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";

src/sections/Projects/Sistent/components/container/index.js

@@ -1,10 +1,10 @@
 import React, { useState, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
-import { SistentThemeProvider, KubernetesIcon, DesignIcon, CustomTooltip } from "@layer5/sistent";
+import { SistentThemeProvider, KubernetesIcon, DesignIcon, CustomTooltip } from "@sistent/sistent";
 import { SistentLayout } from "../../sistent-layout";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 import debounce from "lodash.debounce";
-import * as Icons from "@layer5/sistent";
+import * as Icons from "@sistent/sistent";
 import Code from "../../../../../components/CodeBlock";
 
 // Example code snippets for usage
@@ -14,7 +14,7 @@ const codes = [
     SistentThemeProvider,
     KubernetesIcon,
     DesignIcon,
-  } from "@layer5/sistent";
+  } from "@sistent/sistent";
   `,
   `
   <SistentThemeProvider>
@@ -45,7 +45,7 @@ const IconCard = ({ icon, isDark }) => {
   const [isHovered, setIsHovered] = useState(false);
 
   const handleIconClick = async () => {
-    const importStatement = `import { ${icon.name} } from "@layer5/sistent";`;
+    const importStatement = `import { ${icon.name} } from "@sistent/sistent";`;
     try {
       await navigator.clipboard.writeText(importStatement);
       setShowPopup(true);
@@ -71,7 +71,7 @@ const IconCard = ({ icon, isDark }) => {
             }}
           >
             {
-              `import { ${icon.name} } from "@layer5/sistent";`
+              `import { ${icon.name} } from "@sistent/sistent";`
             }
           </h6>
           <button

src/sections/Projects/Sistent/components/icons/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import { SistentThemeProvider, Link } from "@layer5/sistent";
+import { SistentThemeProvider, Link } from "@sistent/sistent";
 import { CodeBlock } from "../button/code-block";
 // import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { SistentLayout } from "../../sistent-layout";

src/sections/Projects/Sistent/components/link/code.js

@@ -2,7 +2,7 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 import { Row } from "../../../../../reusecore/Layout";
-import { SistentThemeProvider, Link, ExternalLinkIcon } from "@layer5/sistent";
+import { SistentThemeProvider, Link, ExternalLinkIcon } from "@sistent/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";