docs: move "Content Security Policy" to the "Customization" section

Author: cheton

packages/react-docs/config/sidebar-routes.js

@@ -36,7 +36,6 @@ export const routes = [
       { title: 'Color Style', path: 'getting-started/color-style' },
       { title: 'Icons', path: 'getting-started/icons' },
       { title: 'The sx prop', path: 'getting-started/the-sx-prop' },
-      { title: 'Security', path: 'getting-started/security' },
       { title: 'Tonic UI Versions', path: 'getting-started/versions' },
     ],
   },
@@ -67,6 +66,7 @@ export const routes = [
       <ToolsConfigurationIcon size="4x" {...props} />
     ),
     routes: [
+      { title: 'Content Security Policy', path: 'customization/content-security-policy' },
       { title: 'CSS Theme Variables', path: 'customization/css-theme-variables' },
       { title: 'Shadow DOM', path: 'customization/shadow-dom' },
     ],

packages/react-docs/pages/getting-started/security/index.page.mdx renamed to packages/react-docs/pages/customization/content-security-policy.page.mdx

@@ -1,10 +1,10 @@
-# Security
+# Content Security Policy
 
-## Content Security Policy
+Content Security Policy plays a critical role in protecting against various attacks, most notably Cross-Site Scripting (XSS) and data injections. Its core function involves the inclusion of either a `Content-Security-Policy` header in the HTTP response or `<meta>` tags within the HTML of a page.
 
-Content Security Policy (CSP) plays a critical role in protecting against various attacks, most notably Cross-Site Scripting (XSS) and data injections. Its core function involves the inclusion of either a `Content-Security-Policy` header in the HTTP response or `<meta>` tags within the HTML of a page.
+## Getting Started
 
-Tonic UI relies on [Emotion](https://emotion.sh/) for its styling system. To seamless integrate [Emotion](https://emotion.sh/) with CSP, it is essential to provide a `nonce` value to the `CacheProvider` component. Detailed instruction can be found in the [Emotion documentation](https://emotion.sh/docs/@emotion/cache).
+Tonic UI relies on [Emotion](https://emotion.sh/) for its styling system. To seamless integrate [Emotion](https://emotion.sh/) with Content Security Policy, it is essential to provide a `nonce` value to the `CacheProvider` component. Detailed instruction can be found in the [Emotion documentation](https://emotion.sh/docs/@emotion/cache).
 
 ### Step 1: Implement a `EmotionCacheProvider` component
 
@@ -13,7 +13,11 @@ const EmotionCacheProvider = ({
   children,
   nonce,
 }) => {
-  const cache = createCache({ key: 'tonic-ui', nonce });
+  const cache = createCache({
+    key: 'tonic-ui',
+    nonce,
+  });
+
   return (
     <CacheProvider value={cache}>
       {children}