@digi-frontend/dgate-api-documentation 4.0.0-beta.0 → 4.0.0-beta.3

package/dist/{index.js → index.mjs}

@@ -1,7 +1,6 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import * as React from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Alert, Breadcrumb, Button, Card, Divider, Drawer, Empty, Flex, Form, Grid, Input, Modal, Pagination, Select, Switch, Table, Tabs, Tag, Tooltip, Tree, Typography, message, theme } from "antd";
 import { AppstoreOutlined, BarsOutlined, CheckCircleOutlined, DownOutlined, EditOutlined, ExclamationCircleFilled, EyeOutlined, InfoCircleOutlined, LeftOutlined, MinusSquareOutlined, PlusOutlined, PlusSquareOutlined, RightOutlined, SafetyOutlined, SearchOutlined, UpCircleOutlined } from "@ant-design/icons";
@@ -12,9 +11,8 @@ import { Resizable } from "re-resizable";
 import Title from "antd/es/typography/Title";
 import { nanoid } from "nanoid";
 import { Light } from "react-syntax-highlighter";
-import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
-import * as hljs from "react-syntax-highlighter/dist/esm/styles/hljs";
-
+import json from "react-syntax-highlighter/dist/esm/languages/hljs/json.js";
+import * as hljs from "react-syntax-highlighter/dist/esm/styles/hljs/index.js";
 //#region src/store/slices/view.ts
 const createViewSlice = (set) => ({ view: {
 	selectedNodeKey: null,
@@ -70,32 +68,28 @@ const createViewSlice = (set) => ({ view: {
 		state.view.selectedStatusCode = code;
 	})
 } });
-
 //#endregion
 //#region src/store/index.ts
 const createStore = (set) => ({ ...createViewSlice(set) });
 const useStore = create()(devtools(immer(createStore), { name: "dgate-docs-store" }));
-var store_default = useStore;
-
 //#endregion
 //#region src/hooks/useStyle.ts
 function useStyle(componentName, stylesFn) {
-	const { token: token$1, theme: theme$1, hashId } = theme.useToken();
+	const { token, theme: theme$1, hashId } = theme.useToken();
 	const scope = (className) => `.${hashId}.${componentName}-${className}`;
 	const cx = (...classes) => classes.map((cls) => `${componentName}-${cls} ${hashId}`).join(" ");
 	return {
 		wrapSSR: useStyleRegister({
 			theme: theme$1,
-			token: token$1,
+			token,
 			path: [componentName]
-		}, () => stylesFn(token$1, scope)),
+		}, () => stylesFn(token, scope)),
 		cx,
 		scope,
-		token: token$1,
+		token,
 		hashId
 	};
 }
-
 //#endregion
 //#region src/theme/light.json
 var token = {
@@ -426,41 +420,40 @@ var token = {
 	"marginXXXL": 60,
 	"marginXXXXL": 72
 };
-
 //#endregion
 //#region src/view/helper/sidebar.utils.ts
 const methodColors = {
 	GET: {
-		bg: token.colorPrimaryBgHover,
+		bg: "transparent",
 		color: token.colorPrimary
 	},
 	POST: {
-		bg: token.colorSuccess,
-		color: "#FFFFFF"
+		bg: "transparent",
+		color: token.colorSuccess
 	},
 	DELETE: {
-		bg: token.colorErrorBg,
+		bg: "transparent",
 		color: token.colorError
 	},
 	PUT: {
-		bg: token.colorWarningBg,
+		bg: "transparent",
 		color: token.colorWarning
 	},
 	PATCH: {
-		bg: token["volcano.1"],
+		bg: "transparent",
 		color: token["volcano.5"]
 	},
 	OPTIONS: {
-		bg: token["geekblue.2"],
+		bg: "transparent",
 		color: token["geekblue.6"]
 	},
 	HEAD: {
-		bg: token["purple.1"],
+		bg: "transparent",
 		color: token["purple.5"]
 	},
 	TRACE: {
-		bg: token["cyan.1"],
-		color: token["cyan.5"]
+		bg: "transparent",
+		color: token["volcano.4"]
 	}
 };
 const darkerMethodColors = {
@@ -497,43 +490,91 @@ const darkerMethodColors = {
 		color: "#FFFFFF"
 	}
 };
+const sidebarMethodColors = {
+	GET: {
+		bg: token.colorPrimaryBgHover,
+		color: token.colorPrimary
+	},
+	POST: {
+		bg: token.colorSuccessBg,
+		color: token.colorSuccess
+	},
+	DELETE: {
+		bg: token.colorErrorBg,
+		color: token.colorError
+	},
+	PUT: {
+		bg: token.colorWarningBg,
+		color: token.colorWarning
+	},
+	PATCH: {
+		bg: token["volcano.1"],
+		color: token["volcano.5"]
+	},
+	OPTIONS: {
+		bg: token["geekblue.2"],
+		color: token["geekblue.6"]
+	},
+	HEAD: {
+		bg: token["purple.1"],
+		color: token["purple.5"]
+	},
+	TRACE: {
+		bg: token["volcano.1"],
+		color: token["volcano.4"]
+	}
+};
 const buildTreeDataStructure = (data) => {
 	if (!data) return [];
 	return data.map((api) => {
 		const tagEntries = Object.entries(api.tags);
+		const defaultTag = tagEntries.find(([tag]) => tag.toLowerCase() === "default");
+		const nonDefaultTags = tagEntries.filter(([tag]) => tag.toLowerCase() !== "default");
+		const defaultEndpoints = defaultTag ? defaultTag[1].map((endpoint) => ({
+			title: endpoint.summary,
+			key: endpoint.id,
+			isLeaf: true,
+			selectable: true,
+			method: endpoint.method,
+			data: {
+				endpoint,
+				api,
+				tagName: "default",
+				parentApiId: api.id
+			}
+		})) : [];
+		const tagNodes = nonDefaultTags.map(([tag, endpoints]) => {
+			const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
+			return {
+				title: tag,
+				key: tagId,
+				selectable: true,
+				data: {
+					tagName: tag,
+					apiData: api
+				},
+				children: endpoints.map((endpoint) => ({
+					title: endpoint.summary,
+					key: endpoint.id,
+					isLeaf: true,
+					selectable: true,
+					method: endpoint.method,
+					data: {
+						endpoint,
+						api,
+						tagName: tag,
+						parentApiId: api.id,
+						tagId
+					}
+				}))
+			};
+		});
 		return {
 			title: api.title,
 			key: api.id,
 			selectable: true,
 			data: api,
-			children: tagEntries.map(([tag, endpoints]) => {
-				const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
-				return {
-					title: tag,
-					key: tagId,
-					selectable: true,
-					data: {
-						tagName: tag,
-						apiData: api
-					},
-					children: endpoints.map((endpoint) => {
-						return {
-							title: endpoint.summary,
-							key: endpoint.id,
-							isLeaf: true,
-							selectable: true,
-							method: endpoint.method,
-							data: {
-								endpoint,
-								api,
-								tagName: tag,
-								parentApiId: api.id,
-								tagId
-							}
-						};
-					})
-				};
-			})
+			children: [...tagNodes, ...defaultEndpoints]
 		};
 	});
 };
@@ -591,18 +632,18 @@ const filterTreeData = (data, searchText) => {
 	};
 	return data.map((node) => filterNode(node)).filter((node) => node !== null);
 };
-const getSidebarStyles = (token$1, scope) => ({
+const getSidebarStyles = (token, scope) => ({
 	[scope("sider")]: {
-		backgroundColor: token$1.colorBgElevated,
+		backgroundColor: token.colorBgElevated,
 		overflowX: "clip",
-		borderRadius: token$1.borderRadius,
+		borderRadius: token.borderRadius,
 		height: "auto"
 	},
-	[scope("content")]: { padding: token$1.padding },
+	[scope("content")]: { padding: token.padding },
 	[scope("controls")]: {
 		display: "flex",
-		gap: token$1.marginXS,
-		marginBottom: token$1.marginSM
+		gap: token.marginXS,
+		marginBottom: token.marginSM
 	},
 	[scope("search-input")]: { flex: 1 },
 	[scope("tree")]: {
@@ -628,15 +669,17 @@ const getSidebarStyles = (token$1, scope) => ({
 			width: "100%",
 			padding: 0
 		},
-		"& .ant-tree-switcher": { backgroundColor: token$1.colorBgElevated }
+		"& .ant-tree-switcher": { backgroundColor: token.colorBgElevated }
 	},
 	[scope("endpoint-item")]: {
 		display: "flex",
 		alignItems: "center",
-		gap: token$1.marginXS,
+		gap: token.marginXS,
 		width: "100%",
 		maxWidth: "100%",
-		minWidth: "100%"
+		minWidth: "100%",
+		paddingLeft: token.marginXS,
+		paddingRight: token.marginXS
 	},
 	[scope("method-tag")]: {
 		width: 51,
@@ -659,26 +702,26 @@ const getSidebarStyles = (token$1, scope) => ({
 		display: "block"
 	},
 	[scope("tag-title")]: {
-		color: token$1.colorText,
+		color: token.colorText,
 		maxWidth: "100%",
 		display: "block",
 		flex: 1
 	},
 	[scope("api-title")]: {
 		flex: 1,
-		color: token$1.colorText,
+		color: token.colorText,
 		maxWidth: "100%",
 		display: "block",
-		padding: 0,
+		paddingLeft: "4px",
+		paddingRight: "4px",
 		margin: 0
 	}
 });
-
 //#endregion
 //#region src/view/helper/sidebar.components.tsx
 const { Text: Text$1 } = Typography;
 const EndpointItem = ({ method, title, cx, isSelected = false }) => {
-	const methodStyle = (isSelected ? darkerMethodColors : methodColors)[method];
+	const methodStyle = (isSelected ? darkerMethodColors : sidebarMethodColors)[method];
 	const isPost = method?.toUpperCase() === "POST";
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${cx("endpoint-item")}${isSelected ? ` ${cx("endpoint-item-selected")}` : ""}`,
@@ -728,7 +771,6 @@ const convertToRenderableTreeData = (treeDataStructure, selectedEndpoint, cx) =>
 	};
 	return treeDataStructure.map(renderNode);
 };
-
 //#endregion
 //#region src/hooks/useNodeSelection.ts
 const useNodeSelection = () => {
@@ -834,32 +876,23 @@ const useNodeSelection = () => {
 		selectPreSelectedApi
 	};
 };
-
 //#endregion
-//#region src/assets/Minify.svg
-var _path$5;
-function _extends$5() {
-	return _extends$5 = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends$5.apply(null, arguments);
-}
-var SvgMinify = function SvgMinify$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$5({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 16,
-		height: 16,
-		fill: "none"
-	}, props), _path$5 || (_path$5 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "currentcolor",
-		d: "m6 11.334 2-2 2 2M6 4.666l2 2 2-2"
-	})));
-};
-var Minify_default = SvgMinify;
-
+//#region src/assets/Minify.tsx
+const Minify = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M6 11.334L8 9.33398L10 11.334",
+		stroke: "currentcolor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M6 4.66602L8 6.66602L10 4.66602",
+		stroke: "currentcolor"
+	})]
+});
 //#endregion
 //#region src/view/components/NoDataIcon.tsx
 const NoDataIcon = ({ width = 298, height = 237, fill = "#F1F5FD", stroke = "#E0E9F9", ...props }) => {
@@ -1027,8 +1060,6 @@ const NoDataIcon = ({ width = 298, height = 237, fill = "#F1F5FD", stroke = "#E0
 		]
 	});
 };
-var NoDataIcon_default = NoDataIcon;
-
 //#endregion
 //#region src/view/components/Sidebar.tsx
 const { useBreakpoint: useBreakpoint$4 } = Grid;
@@ -1038,7 +1069,7 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 	const { selectNodeByKey, clearSelection } = useNodeSelection();
 	const [autoExpandParent, setAutoExpandParent] = useState(true);
 	const isMobile = !useBreakpoint$4().md;
-	const { wrapSSR, cx, token: token$1 } = useStyle("Sidebar", getSidebarStyles);
+	const { wrapSSR, cx, token } = useStyle("Sidebar", getSidebarStyles);
 	const handleSearch = (value) => {
 		if (value && builtTreeData) {
 			setExpandedKeys(getAllTreeKeys(builtTreeData));
@@ -1103,7 +1134,7 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 				children: /* @__PURE__ */ jsx(Button, {
 					onClick: collapseAll,
 					title: "Collapse All",
-					icon: /* @__PURE__ */ jsx(Minify_default, {})
+					icon: /* @__PURE__ */ jsx(Minify, {})
 				})
 			})]
 		}), filteredTreeData?.length ? /* @__PURE__ */ jsx(Tree, {
@@ -1128,30 +1159,30 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 		}) : /* @__PURE__ */ jsxs(Flex, {
 			justify: "center",
 			align: "center",
-			gap: token$1.marginSM,
+			gap: token.marginSM,
 			vertical: true,
-			style: { marginTop: token$1.paddingXL },
-			children: [/* @__PURE__ */ jsx(NoDataIcon_default, {
-				stroke: token$1.colorPrimaryHover,
-				fill: token$1.colorPrimaryBg,
+			style: { marginTop: token.paddingXL },
+			children: [/* @__PURE__ */ jsx(NoDataIcon, {
+				stroke: token.colorPrimaryHover,
+				fill: token.colorPrimaryBg,
 				width: "10.375rem",
 				height: "8.1875rem"
 			}), searchValue.length ? /* @__PURE__ */ jsx(Text, {
 				style: {
 					textAlign: "center",
-					fontFamily: token$1.fontFamily,
+					fontFamily: token.fontFamily,
 					fontWeight: 400,
-					fontSize: token$1.fontSizeLG,
-					color: token$1.colorTextTertiary
+					fontSize: token.fontSizeLG,
+					color: token.colorTextTertiary
 				},
 				children: "No results found"
 			}) : /* @__PURE__ */ jsxs(Text, {
 				style: {
 					textAlign: "center",
-					fontFamily: token$1.fontFamily,
+					fontFamily: token.fontFamily,
 					fontWeight: 400,
-					fontSize: token$1.fontSizeLG,
-					color: token$1.colorTextTertiary
+					fontSize: token.fontSizeLG,
+					color: token.colorTextTertiary
 				},
 				children: [
 					"No API",
@@ -1191,52 +1222,40 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 		children: inner
 	}));
 };
-
 //#endregion
-//#region src/assets/link.svg
-var _path$4, _path2$3;
-function _extends$4() {
-	return _extends$4 = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends$4.apply(null, arguments);
-}
-var SvgLink = function SvgLink$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$4({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 12,
-		height: 12,
-		fill: "none"
-	}, props), _path$4 || (_path$4 = /* @__PURE__ */ React.createElement("path", {
-		fill: "#4D75D9",
-		d: "M3.875 9.25C2.085 9.25.625 7.79.625 6s1.46-3.25 3.25-3.25c.205 0 .375.17.375.375s-.17.375-.375.375a2.5 2.5 0 0 0 0 5 2.5 2.5 0 0 0 2.5-2.5c0-.205.17-.375.375-.375s.375.17.375.375c0 1.79-1.46 3.25-3.25 3.25"
-	})), _path2$3 || (_path2$3 = /* @__PURE__ */ React.createElement("path", {
-		fill: "#4D75D9",
-		d: "M8 9.375A.38.38 0 0 1 7.625 9c0-.205.17-.375.375-.375A2.63 2.63 0 0 0 10.625 6 2.63 2.63 0 0 0 8 3.375 2.63 2.63 0 0 0 5.375 6c0 .205-.17.375-.375.375A.38.38 0 0 1 4.625 6 3.38 3.38 0 0 1 8 2.625 3.38 3.38 0 0 1 11.375 6 3.38 3.38 0 0 1 8 9.375"
-	})));
-};
-var link_default = SvgLink;
-
+//#region src/assets/link.tsx
+const Link = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M3.875 9.25C2.085 9.25 0.625 7.79 0.625 6C0.625 4.21 2.085 2.75 3.875 2.75C4.08 2.75 4.25 2.92 4.25 3.125C4.25 3.33 4.08 3.5 3.875 3.5C2.495 3.5 1.375 4.62 1.375 6C1.375 7.38 2.495 8.5 3.875 8.5C5.255 8.5 6.375 7.38 6.375 6C6.375 5.795 6.545 5.625 6.75 5.625C6.955 5.625 7.125 5.795 7.125 6C7.125 7.79 5.665 9.25 3.875 9.25Z",
+		fill: "#4D75D9"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 9.375C7.795 9.375 7.625 9.205 7.625 9C7.625 8.795 7.795 8.625 8 8.625C9.445 8.625 10.625 7.445 10.625 6C10.625 4.555 9.445 3.375 8 3.375C6.555 3.375 5.375 4.555 5.375 6C5.375 6.205 5.205 6.375 5 6.375C4.795 6.375 4.625 6.205 4.625 6C4.625 4.14 6.14 2.625 8 2.625C9.86 2.625 11.375 4.14 11.375 6C11.375 7.86 9.86 9.375 8 9.375Z",
+		fill: "#4D75D9"
+	})]
+});
 //#endregion
 //#region src/view/components/ApiPage/components/ApiCard.tsx
 const ApiCard = ({ api, viewStyle }) => {
-	const { wrapSSR, cx, token: token$1 } = useStyle("DocumentationApiCard", (token$2, scope) => ({
+	const { wrapSSR, cx, token } = useStyle("DocumentationApiCard", (token, scope) => ({
 		[scope("method-chip")]: {
 			minWidth: "5.375rem",
 			width: "fit-content",
-			paddingLeft: token$2.marginXS,
-			paddingRight: token$2.marginXS,
+			paddingLeft: token.marginXS,
+			paddingRight: token.marginXS,
 			display: "flex",
 			justifyContent: "center",
 			alignItems: "center",
-			borderRadius: token$2.borderRadius
+			borderRadius: token.borderRadius
 		},
 		[scope("list-container")]: {
-			paddingTop: token$2.marginXS,
-			paddingBottom: token$2.marginXS
+			paddingTop: token.marginXS,
+			paddingBottom: token.marginXS
 		},
 		[scope("chip-title")]: {
 			alignSelf: "center",
@@ -1244,97 +1263,97 @@ const ApiCard = ({ api, viewStyle }) => {
 			padding: 0,
 			margin: 0,
 			lineHeight: "1.375rem",
-			fontSize: token$2.fontSize
+			fontSize: token.fontSize
 		},
 		[scope("list-see-details")]: {
 			width: "6.5625rem",
 			height: "2rem",
-			borderRadius: token$2.borderRadius,
-			border: `${token$2.lineWidth}px solid ${token$2.Button?.defaultBorderColor}`,
-			paddingRight: token$2.Button?.paddingInline,
-			paddingLeft: token$2.Button?.paddingInline,
-			background: token$2.Button?.defaultBg,
-			"&:hover": { background: token$2.Button?.defaultBg }
+			borderRadius: token.borderRadius,
+			border: `${token.lineWidth}px solid ${token.Button?.defaultBorderColor}`,
+			paddingRight: token.Button?.paddingInline,
+			paddingLeft: token.Button?.paddingInline,
+			background: token.Button?.defaultBg,
+			"&:hover": { background: token.Button?.defaultBg }
 		},
 		[scope("list-content")]: {
 			display: "flex",
-			paddingTop: token$2.paddingXXS,
-			paddingBottom: token$2.paddingXXS,
-			paddingRight: token$2.paddingXS,
-			paddingLeft: token$2.paddingXS,
+			paddingTop: token.paddingXXS,
+			paddingBottom: token.paddingXXS,
+			paddingRight: token.paddingXS,
+			paddingLeft: token.paddingXS,
 			alignItems: "center",
-			gap: token$2.marginXS,
+			gap: token.marginXS,
 			alignSelf: "stretch",
 			flexDirection: "row",
-			borderRadius: token$2.borderRadiusSM,
-			border: `1px solid ${token$2.colorBorderSecondary}`,
+			borderRadius: token.borderRadiusSM,
+			border: `1px solid ${token.colorBorderSecondary}`,
 			minWidth: "6.25rem",
 			maxWidth: "fit-content",
-			svg: { path: { fill: token$2.colorPrimary } }
+			svg: { path: { fill: token.colorPrimary } }
 		},
 		[scope("list-title")]: {
-			color: token$2.colorTextHeading,
-			fontSize: token$2.fontSizeHeading3,
-			fontWeight: token$2.fontWeightStrong,
-			lineHeight: token$2.lineHeightHeading3,
+			color: token.colorTextHeading,
+			fontSize: token.fontSizeHeading3,
+			fontWeight: token.fontWeightStrong,
+			lineHeight: token.lineHeightHeading3,
 			paddingBottom: 0,
 			marginBottom: 0,
-			fontFamily: token$2.fontFamily,
+			fontFamily: token.fontFamily,
 			cursor: "pointer",
 			transition: "color 0.2s ease-in",
 			"&:hover": {
-				color: `${token$2.colorPrimary} !important`,
+				color: `${token.colorPrimary} !important`,
 				textDecoration: "underline"
 			}
 		},
 		[scope("path-name")]: {
-			color: token$2.colorText,
-			fontSize: token$2.fontSizeSM,
+			color: token.colorText,
+			fontSize: token.fontSizeSM,
 			fontWeight: 400,
-			fontFamily: token$2.fontFamily
+			fontFamily: token.fontFamily
 		},
 		[scope("grid-card")]: {
 			width: "17.5rem",
 			height: "100%",
-			borderRadius: token$2.borderRadiusLG
+			borderRadius: token.borderRadiusLG
 		},
 		[scope("grid-title")]: {
-			color: token$2.colorTextHeading,
-			fontSize: token$2.fontSizeHeading3,
-			fontWeight: token$2.fontWeightStrong,
-			lineHeight: token$2.lineHeightHeading3,
+			color: token.colorTextHeading,
+			fontSize: token.fontSizeHeading3,
+			fontWeight: token.fontWeightStrong,
+			lineHeight: token.lineHeightHeading3,
 			paddingBottom: 0,
 			marginBottom: 0,
-			fontFamily: token$2.fontFamily
+			fontFamily: token.fontFamily
 		},
 		[scope("grid-content")]: {
 			display: "flex",
-			paddingTop: token$2.paddingXXS,
-			paddingBottom: token$2.paddingXXS,
-			paddingRight: token$2.paddingXS,
-			paddingLeft: token$2.paddingXS,
+			paddingTop: token.paddingXXS,
+			paddingBottom: token.paddingXXS,
+			paddingRight: token.paddingXS,
+			paddingLeft: token.paddingXS,
 			alignItems: "center",
-			gap: token$2.marginXS,
+			gap: token.marginXS,
 			alignSelf: "stretch",
 			flexDirection: "row",
-			borderRadius: token$2.borderRadiusSM,
-			border: `1px solid ${token$2.colorBorderSecondary}`,
-			svg: { path: { fill: token$2.colorPrimary } }
+			borderRadius: token.borderRadiusSM,
+			border: `1px solid ${token.colorBorderSecondary}`,
+			svg: { path: { fill: token.colorPrimary } }
 		},
 		[scope("grid-path-name")]: {
-			color: token$2.colorText,
-			fontSize: token$2.fontSizeSM,
+			color: token.colorText,
+			fontSize: token.fontSizeSM,
 			fontWeight: 400,
-			fontFamily: token$2.fontFamily
+			fontFamily: token.fontFamily
 		},
 		[scope("grid-see-details")]: {
 			paddingTop: 0,
 			paddingBottom: 0,
 			paddingLeft: "0.4375rem",
 			paddingRight: "0.4375rem",
-			borderRadius: token$2.borderRadiusSM,
-			border: `1px solid ${token$2.Button?.defaultBorderColor}`,
-			background: token$2.Button?.defaultBg,
+			borderRadius: token.borderRadiusSM,
+			border: `1px solid ${token.Button?.defaultBorderColor}`,
+			background: token.Button?.defaultBg,
 			boxShadow: `0 2px 0 0 rgba(0, 0, 0, 0.02)`,
 			width: "100%",
 			height: "1.5rem"
@@ -1378,7 +1397,7 @@ const ApiCard = ({ api, viewStyle }) => {
 				align: "center",
 				className: cx("list-container"),
 				children: [/* @__PURE__ */ jsxs(Flex, {
-					gap: token$1.marginSM,
+					gap: token.marginSM,
 					children: [/* @__PURE__ */ jsx(MethodChip, { method: api.method }), /* @__PURE__ */ jsx(Title, {
 						className: cx("list-title"),
 						level: 4,
@@ -1393,7 +1412,7 @@ const ApiCard = ({ api, viewStyle }) => {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: cx("list-content"),
-				children: [/* @__PURE__ */ jsx(link_default, {}), /* @__PURE__ */ jsx(Text, {
+				children: [/* @__PURE__ */ jsx(Link, {}), /* @__PURE__ */ jsx(Text, {
 					className: cx("path-name"),
 					children: api?.path
 				})]
@@ -1408,7 +1427,7 @@ const ApiCard = ({ api, viewStyle }) => {
 		className: cx("grid-card"),
 		children: /* @__PURE__ */ jsxs(Flex, {
 			vertical: true,
-			gap: token$1.marginSM,
+			gap: token.marginSM,
 			children: [
 				/* @__PURE__ */ jsx(MethodChip, { method: api?.method }),
 				/* @__PURE__ */ jsx(Title, {
@@ -1418,7 +1437,7 @@ const ApiCard = ({ api, viewStyle }) => {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: cx("grid-content"),
-					children: [/* @__PURE__ */ jsx(link_default, {}), /* @__PURE__ */ jsx(Text, {
+					children: [/* @__PURE__ */ jsx(Link, {}), /* @__PURE__ */ jsx(Text, {
 						className: cx("grid-path-name"),
 						children: api?.path
 					})]
@@ -1432,8 +1451,6 @@ const ApiCard = ({ api, viewStyle }) => {
 		})
 	}));
 };
-var ApiCard_default = ApiCard;
-
 //#endregion
 //#region src/view/components/ApiPage/components/ViewModeApiHeader.tsx
 function formatAuthType(authType) {
@@ -1447,11 +1464,11 @@ function formatAuthType(authType) {
 	}
 }
 const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
-	const { wrapSSR, cx, token: token$1 } = useStyle("ViewModeApiHeader", (token$2, scope) => ({
+	const { wrapSSR, cx } = useStyle("ViewModeApiHeader", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.marginMD
+			gap: token.marginMD
 		},
 		[scope("meta-bar")]: {
 			display: "flex",
@@ -1467,20 +1484,20 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			display: "flex",
 			alignItems: "center",
 			paddingRight: 12,
-			borderRight: `1px solid ${token$2.colorBorderSecondary}`,
+			borderRight: `1px solid ${token.colorBorderSecondary}`,
 			marginRight: 12
 		},
 		[scope("jws-tag")]: {
 			display: "flex",
 			alignItems: "center",
 			height: 32,
-			background: token$2.colorPrimaryBg,
-			border: `1px solid ${token$2.colorPrimaryBorder}`,
+			background: token.colorPrimaryBg,
+			border: `1px solid ${token.colorPrimaryBorder}`,
 			borderRadius: 6,
 			padding: "0 8px",
 			fontSize: 12,
 			lineHeight: "20px",
-			color: token$2.colorPrimary,
+			color: token.colorPrimary,
 			fontWeight: 400,
 			margin: 0
 		},
@@ -1488,14 +1505,14 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			display: "inline-flex",
 			alignItems: "center",
 			gap: 4,
-			background: token$2.colorBgContainer,
-			border: `1px solid ${token$2.colorBorder}`,
+			background: token.colorBgContainer,
+			border: `1px solid ${token.colorBorder}`,
 			borderRadius: 4,
 			padding: "0 8px",
 			height: 32,
 			fontSize: 12,
 			lineHeight: "20px",
-			color: token$2.colorText,
+			color: token.colorText,
 			margin: 0,
 			boxSizing: "border-box"
 		},
@@ -1508,8 +1525,8 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			display: "inline-flex",
 			alignItems: "center",
 			gap: 8,
-			background: token$2.colorFillTertiary,
-			border: `1px solid ${token$2.colorBorder}`,
+			background: token.colorFillTertiary,
+			border: `1px solid ${token.colorBorder}`,
 			borderRadius: 6,
 			padding: "0 15px",
 			height: 32,
@@ -1518,13 +1535,13 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 		},
 		[scope("version-icon")]: {
 			fontSize: 16,
-			color: token$2.colorTextDisabled,
+			color: token.colorTextDisabled,
 			display: "flex",
 			alignItems: "center"
 		},
 		[scope("version-text")]: {
 			fontSize: 14,
-			color: token$2.colorTextDisabled,
+			color: token.colorTextDisabled,
 			fontWeight: 400,
 			lineHeight: 1
 		},
@@ -1538,16 +1555,16 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			justifyContent: "center"
 		},
 		[scope("toggle-btn-active")]: {
-			border: `1px solid ${token$2.colorPrimary} !important`,
-			color: `${token$2.colorPrimary} !important`,
-			backgroundColor: `${token$2.colorBgContainer} !important`,
+			border: `1px solid ${token.colorPrimary} !important`,
+			color: `${token.colorPrimary} !important`,
+			backgroundColor: `${token.colorBgContainer} !important`,
 			zIndex: 1
 		},
 		[scope("description")]: {
-			fontSize: token$2.fontSizeLG,
-			color: token$2.colorTextTertiary
+			fontSize: token.fontSizeLG,
+			color: token.colorTextTertiary
 		},
-		[scope("title")]: { fontFamily: token$2.fontFamily }
+		[scope("title")]: { fontFamily: token.fontFamily }
 	}));
 	const version = api.relatedVersions?.find((v) => v.apiId === api.currentVersion)?.version || api.version;
 	return wrapSSR(/* @__PURE__ */ jsxs("div", {
@@ -1632,15 +1649,13 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 		]
 	}));
 };
-
 //#endregion
 //#region src/view/components/ApiPage/index.tsx
 const APIPage = () => {
 	const [selectedUrl, setSelectedUrl] = useState("");
-	const { view: { selectedApi, transformedData, setSelectedApi, setFocusedContent, setSelectedNodeKey, focusedTag, setFocusedTag } } = store_default();
+	const { view: { selectedApi, focusedTag, setFocusedTag } } = useStore();
 	const [viewStyle, setViewStyle] = useState("grid");
-	const { wrapSSR, cx, token: token$1 } = useStyle("DocumentationApiPage", () => ({}));
-	selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion);
+	const { wrapSSR, token } = useStyle("DocumentationApiPage", () => ({}));
 	const urlsOptions = useMemo(() => selectedApi?.servers?.map((server) => ({
 		label: server?.url,
 		value: server?.url
@@ -1680,7 +1695,7 @@ const APIPage = () => {
 	};
 	return wrapSSR(/* @__PURE__ */ jsxs(Flex, {
 		vertical: true,
-		gap: token$1.margin,
+		gap: token.margin,
 		children: [selectedApi && /* @__PURE__ */ jsx(ViewModeApiHeader, {
 			api: selectedApi,
 			viewLayout: viewStyle,
@@ -1697,14 +1712,14 @@ const APIPage = () => {
 				haveUnderLine: index < arr.length - 1,
 				contextPath: selectedApi?.contextPath,
 				viewStyle,
-				token: token$1
+				token
 			}, `${selectedApi?.id}_${key}`);
 		})]
 	}));
 };
-const APIsRenderer = ({ apis, withTitle, tagName, haveUnderLine, contextPath, viewStyle, token: token$1 }) => {
+const APIsRenderer = ({ apis, withTitle, tagName, haveUnderLine, contextPath, viewStyle, token }) => {
 	return /* @__PURE__ */ jsxs(Flex, {
-		gap: viewStyle === "grid" ? token$1.marginXS : 0,
+		gap: viewStyle === "grid" ? token.marginXS : 0,
 		style: {
 			marginBottom: 0,
 			paddingBottom: 0
@@ -1721,19 +1736,18 @@ const APIsRenderer = ({ apis, withTitle, tagName, haveUnderLine, contextPath, vi
 				wrap: "wrap",
 				gap: viewStyle === "grid" ? "1.5rem" : 0,
 				vertical: viewStyle === "list",
-				children: apis.map((item) => /* @__PURE__ */ jsx(ApiCard_default, {
+				children: apis.map((item) => /* @__PURE__ */ jsx(ApiCard, {
 					api: item,
 					viewStyle
 				}, `${tagName}_renderer_${item.id}_${item.method}_${item.path}`))
 			}),
 			haveUnderLine && /* @__PURE__ */ jsx(Divider, { style: {
-				marginTop: token$1.marginSM,
-				marginBottom: token$1.marginSM
+				marginTop: token.marginSM,
+				marginBottom: token.marginSM
 			} })
 		]
 	}, `${tagName}_renderer_${contextPath}`);
 };
-
 //#endregion
 //#region src/utils/index.ts
 const handleStatusColor = (code) => {
@@ -1744,7 +1758,6 @@ const handleStatusColor = (code) => {
 	else if (code >= 300 && code < 400) return "orange";
 	else return "gray";
 };
-
 //#endregion
 //#region src/view/components/EndpointPage/EndpointPage.tsx
 const { Title: Title$2, Paragraph } = Typography;
@@ -1766,7 +1779,7 @@ const requestColumns = [
 	}
 ];
 const responseColumns = [...requestColumns];
-const buildRequestData = (params, token$1) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
+const buildRequestData = (params, token) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
 	let typeLabel = p.schema?.type;
 	if (p.schema?.type === "array" && p.schema?.items?.type) typeLabel = `${p.schema.type}_${p.schema.items.type}`;
 	return {
@@ -1775,17 +1788,17 @@ const buildRequestData = (params, token$1) => [...params].sort((a, b) => a.requi
 			p.name,
 			typeLabel && /* @__PURE__ */ jsx("span", {
 				style: {
-					color: token$1.colorTextTertiary,
+					color: token.colorTextTertiary,
 					marginLeft: "0.25rem",
 					marginRight: "0.25rem"
 				},
 				children: typeLabel
 			}),
 			p.required ? /* @__PURE__ */ jsx("span", {
-				style: { color: token$1.colorError },
+				style: { color: token.colorError },
 				children: "*"
 			}) : /* @__PURE__ */ jsx("span", {
-				style: { color: token$1.colorSuccess },
+				style: { color: token.colorSuccess },
 				children: "Optional"
 			})
 		] }),
@@ -1793,7 +1806,7 @@ const buildRequestData = (params, token$1) => [...params].sort((a, b) => a.requi
 		enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
 	};
 });
-const buildHeaderData = (headers, token$1) => {
+const buildHeaderData = (headers, token) => {
 	if (!headers) return [];
 	return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
 		let typeLabel = header.schema?.type;
@@ -1804,17 +1817,17 @@ const buildHeaderData = (headers, token$1) => {
 				name,
 				typeLabel && /* @__PURE__ */ jsx("span", {
 					style: {
-						color: token$1.colorTextTertiary,
+						color: token.colorTextTertiary,
 						marginLeft: "0.25rem",
 						marginRight: "0.25rem"
 					},
 					children: typeLabel
 				}),
 				header.required ? /* @__PURE__ */ jsx("span", {
-					style: { color: token$1.colorError },
+					style: { color: token.colorError },
 					children: "*"
 				}) : /* @__PURE__ */ jsx("span", {
-					style: { color: token$1.colorSuccess },
+					style: { color: token.colorSuccess },
 					children: "Optional"
 				})
 			] }, idx),
@@ -1823,7 +1836,7 @@ const buildHeaderData = (headers, token$1) => {
 		};
 	});
 };
-const buildRequestBodyData = (requestBody, token$1) => {
+const buildRequestBodyData = (requestBody, token) => {
 	if (!requestBody?.content) return [];
 	const contentType = Object.keys(requestBody.content)[0];
 	const schema = requestBody.content[contentType]?.schema;
@@ -1836,17 +1849,17 @@ const buildRequestBodyData = (requestBody, token$1) => {
 			name,
 			prop.type && /* @__PURE__ */ jsx("span", {
 				style: {
-					color: token$1.colorTextTertiary,
+					color: token.colorTextTertiary,
 					marginLeft: "0.25rem",
 					marginRight: "0.25rem"
 				},
 				children: prop.type
 			}),
 			required.includes(name) ? /* @__PURE__ */ jsx("span", {
-				style: { color: token$1.colorError },
+				style: { color: token.colorError },
 				children: "*"
 			}) : /* @__PURE__ */ jsx("span", {
-				style: { color: token$1.colorSuccess },
+				style: { color: token.colorSuccess },
 				children: "Optional"
 			})
 		] }),
@@ -1855,14 +1868,14 @@ const buildRequestBodyData = (requestBody, token$1) => {
 	}));
 };
 const EndpointPage = () => {
-	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag, setActiveRequestTab } = store_default(({ view }) => view);
+	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag, setActiveRequestTab } = useStore(({ view }) => view);
 	const [activeTabKey, setActiveTabKey] = useState("header");
-	const { token: token$1 } = theme.useToken();
-	const { cx } = useStyle("EndpointPage", (token$2, scope) => ({
+	const { token } = theme.useToken();
+	const { cx } = useStyle("EndpointPage", (token, scope) => ({
 		[scope("docs-endpoint-container")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.marginLG,
+			gap: token.marginLG,
 			height: "100%"
 		},
 		[scope("content")]: {
@@ -1871,43 +1884,43 @@ const EndpointPage = () => {
 		},
 		[scope("code")]: {
 			background: "unset",
-			borderRadius: token$2.borderRadius,
-			padding: token$2.paddingSM,
+			borderRadius: token.borderRadius,
+			padding: token.paddingSM,
 			fontFamily: "monospace",
 			whiteSpace: "pre-wrap"
 		},
 		[scope("breadcrumb")]: {
 			display: "flex",
-			gap: token$2.marginLG,
+			gap: token.marginLG,
 			alignItems: "center",
-			marginBottom: token$2.marginLG
+			marginBottom: token.marginLG
 		},
 		[scope("request-card")]: {
-			borderRadius: token$2.borderRadius,
-			backgroundColor: token$2.colorBgBase,
+			borderRadius: token.borderRadius,
+			backgroundColor: token.colorBgBase,
 			".ant-card-head": {
 				minHeight: "unset",
 				borderBottom: "unset",
 				padding: "0.75rem",
-				backgroundColor: token$2.colorBgBase
+				backgroundColor: token.colorBgBase
 			},
 			".ant-card-body": {
 				padding: "0px 0.75rem 0.75rem 0.75rem",
-				backgroundColor: token$2.colorBgBase,
+				backgroundColor: token.colorBgBase,
 				".ant-tabs-tab": { paddingTop: "0" }
 			},
-			"& .ant-table": { backgroundColor: `${token$2.colorBgBase} !important` },
-			"& .ant-table-thead > tr > th": { backgroundColor: `${token$2.colorBgBase} !important` },
-			"& .ant-table-tbody > tr > td": { backgroundColor: `${token$2.colorBgBase} !important` }
+			"& .ant-table": { backgroundColor: `${token.colorBgBase} !important` },
+			"& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` },
+			"& .ant-table-tbody > tr > td": { backgroundColor: `${token.colorBgBase} !important` }
 		},
-		[scope("row-odd")]: { "& > td": { background: `${token$2.colorBgElevated} !important` } },
-		[scope("row-even")]: { "& > td": { background: `${token$2.colorBgLayout} !important` } }
+		[scope("row-odd")]: { "& > td": { background: `${token.colorBgElevated} !important` } },
+		[scope("row-even")]: { "& > td": { background: `${token.colorBgLayout} !important` } }
 	}));
-	const methodStyle = methodColors[selectedEndpoint?.method];
-	const headerParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], token$1);
-	const pathParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], token$1);
-	const queryParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], token$1);
-	const requestBodyData = buildRequestBodyData(selectedEndpoint?.requestBody, token$1);
+	const methodStyle = sidebarMethodColors[selectedEndpoint?.method];
+	const headerParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], token);
+	const pathParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], token);
+	const queryParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], token);
+	const requestBodyData = buildRequestBodyData(selectedEndpoint?.requestBody, token);
 	const requestTabs = [
 		{
 			key: "header",
@@ -1964,7 +1977,7 @@ const EndpointPage = () => {
 		setActiveRequestTab(firstKey);
 	}, [selectedEndpoint?.id]);
 	const responseHeaders = (selectedEndpoint?.responses?.[selectedStatusCode || 200])?.headers;
-	const responseHeaderData = buildHeaderData(responseHeaders, token$1);
+	const responseHeaderData = buildHeaderData(responseHeaders, token);
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("docs-endpoint-container"),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -2004,18 +2017,24 @@ const EndpointPage = () => {
 									display: "flex",
 									flexDirection: "row",
 									alignItems: "center",
-									color: token$1.colorTextTertiary,
+									color: token.colorTextTertiary,
 									gap: "0.25rem"
 								},
 								children: /* @__PURE__ */ jsx("span", { children: selectedEndpoint?.tagName || "default" })
 							})
 						},
-						{ title: /* @__PURE__ */ jsx("span", {
-							style: {
-								display: "flex",
-								gap: "1rem"
-							},
-							children: selectedEndpoint?.summary || "Endpoint Name"
+						{ title: /* @__PURE__ */ jsx(Tooltip, {
+							title: selectedEndpoint?.summary || "Endpoint Name",
+							children: /* @__PURE__ */ jsx("span", {
+								style: {
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap",
+									display: "block",
+									maxWidth: "300px"
+								},
+								children: selectedEndpoint?.summary || "Endpoint Name"
+							})
 						}) }
 					] })]
 				}),
@@ -2038,11 +2057,21 @@ const EndpointPage = () => {
 							flexShrink: 0
 						},
 						children: selectedEndpoint?.method
-					}), selectedEndpoint?.summary?.replace(selectedEndpoint?.method, "") ?? "--"]
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						title: selectedEndpoint?.summary ?? "--",
+						children: /* @__PURE__ */ jsx("span", {
+							style: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: selectedEndpoint?.summary?.replace(selectedEndpoint?.method, "") ?? "--"
+						})
+					})]
 				}),
 				/* @__PURE__ */ jsx(Paragraph, {
 					style: {
-						color: token$1.colorTextTertiary,
+						color: token.colorTextTertiary,
 						marginBottom: "1.5rem"
 					},
 					children: selectedEndpoint?.description ?? "--"
@@ -2052,9 +2081,9 @@ const EndpointPage = () => {
 					className: cx("request-card"),
 					style: {
 						marginBottom: "1.5rem",
-						backgroundColor: token$1.colorBgBase
+						backgroundColor: token.colorBgBase
 					},
-					styles: { body: { backgroundColor: token$1.colorBgBase } },
+					styles: { body: { backgroundColor: token.colorBgBase } },
 					children: /* @__PURE__ */ jsx(Tabs, {
 						activeKey: activeTabKey,
 						onChange: (key) => {
@@ -2088,51 +2117,41 @@ const EndpointPage = () => {
 		})
 	});
 };
-
 //#endregion
-//#region src/assets/mouseSquare.svg
-var _path$3, _path2$2;
-function _extends$3() {
-	return _extends$3 = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends$3.apply(null, arguments);
-}
-var SvgMouseSquare = function SvgMouseSquare$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$3({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 18,
-		height: 18,
-		fill: "none"
-	}, props), _path$3 || (_path$3 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#fff",
+//#region src/assets/mouseSquare.tsx
+const MouseSquare = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 18 18",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M16.5 9V6.75C16.5 3 15 1.5 11.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5H9",
+		stroke: "white",
+		strokeWidth: "1.5",
 		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 1.5,
-		d: "M16.5 9V6.75C16.5 3 15 1.5 11.25 1.5h-4.5C3 1.5 1.5 3 1.5 6.75v4.5C1.5 15 3 16.5 6.75 16.5H9"
-	})), _path2$2 || (_path2$2 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#fff",
+		strokeLinejoin: "round"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M15.7202 13.3808L14.4978 13.7934C14.1603 13.9059 13.8902 14.1684 13.7777 14.5134L13.3652 15.7359C13.0127 16.7934 11.5277 16.7709 11.1977 15.7134L9.81025 11.2508C9.54025 10.3658 10.3577 9.54085 11.2352 9.81835L15.7053 11.2059C16.7553 11.5359 16.7702 13.0283 15.7202 13.3808Z",
+		stroke: "white",
+		strokeWidth: "1.5",
 		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 1.5,
-		d: "m15.72 13.38-1.222.413a1.13 1.13 0 0 0-.72.72l-.413 1.223c-.352 1.057-1.837 1.035-2.167-.023L9.81 11.251c-.27-.885.548-1.71 1.425-1.433l4.47 1.388c1.05.33 1.065 1.822.015 2.175"
-	})));
-};
-var mouseSquare_default = SvgMouseSquare;
-
+		strokeLinejoin: "round"
+	})]
+});
 //#endregion
 //#region src/view/components/MainContent.tsx
 const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage }) => {
-	const { focusedContent, transformedData } = store_default(({ view }) => view);
-	const { wrapSSR, cx, token: token$1 } = useStyle("MainContent", (token$2, scope) => ({
+	const { focusedContent, transformedData } = useStore(({ view }) => view);
+	const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
 		[scope("inner-doc-container")]: {
 			width: "100%",
 			height: "auto",
-			borderRadius: token$2.borderRadius,
-			padding: token$2.paddingXL
+			borderRadius: token.borderRadius,
+			padding: token.paddingXL,
+			overflow: "hidden",
+			minWidth: 0
 		},
 		[scope("centered")]: {
 			display: "flex",
@@ -2143,31 +2162,31 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 			padding: 0
 		},
 		[scope("title")]: {
-			fontFamily: token$2.fontFamily,
+			fontFamily: token.fontFamily,
 			fontWeight: 600,
-			fontSize: token$2.fontSizeHeading4,
-			color: token$2.colorText
+			fontSize: token.fontSizeHeading4,
+			color: token.colorText
 		},
 		[scope("text")]: {
-			color: token$2.colorText,
-			fontFamily: token$2.fontFamily
+			color: token.colorText,
+			fontFamily: token.fontFamily
 		},
 		[scope("visit-landing-button")]: {
 			width: "12.25rem",
 			height: "2.5rem",
-			borderRadius: token$2.borderRadiusLG
+			borderRadius: token.borderRadiusLG
 		},
 		[scope("reset-button")]: {
 			width: "8.125rem",
 			height: "2.5rem",
-			borderRadius: token$2.borderRadiusLG,
-			backgroundColor: token$2?.Button?.primaryColor,
-			fontSize: token$2.Button?.contentFontSizeLG
+			borderRadius: token.borderRadiusLG,
+			backgroundColor: token?.Button?.primaryColor,
+			fontSize: token.Button?.contentFontSizeLG
 		}
 	}));
 	return wrapSSR(/* @__PURE__ */ jsx("div", {
 		className: cx("inner-doc-container", !transformedData?.length ? "centered" : ""),
-		style: { backgroundColor: focusedContent === "ENDPOINT" ? token$1.colorBgBase : token$1.colorBgElevated },
+		style: { backgroundColor: focusedContent === "ENDPOINT" ? token.colorBgBase : token.colorBgElevated },
 		children: !transformedData?.length ? /* @__PURE__ */ jsxs(Flex, {
 			justify: "center",
 			align: "center",
@@ -2175,9 +2194,9 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 			vertical: true,
 			flex: 1,
 			children: [
-				/* @__PURE__ */ jsx(NoDataIcon_default, {
-					stroke: token$1.colorPrimaryHover,
-					fill: token$1.colorPrimaryBg,
+				/* @__PURE__ */ jsx(NoDataIcon, {
+					stroke: token.colorPrimaryHover,
+					fill: token.colorPrimaryBg,
 					width: "18.625rem",
 					height: "14.75rem"
 				}),
@@ -2198,7 +2217,7 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 				!searchEnabled ? /* @__PURE__ */ jsx(Button, {
 					type: "primary",
 					onClick: handleVisitLandingPage,
-					icon: /* @__PURE__ */ jsx(mouseSquare_default, {}),
+					icon: /* @__PURE__ */ jsx(MouseSquare, {}),
 					iconPosition: "start",
 					className: cx("visit-landing-button"),
 					children: "Visit Landing Page"
@@ -2212,27 +2231,26 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 		}) : focusedContent === "ENDPOINT" ? /* @__PURE__ */ jsx(EndpointPage, {}) : /* @__PURE__ */ jsx(APIPage, {})
 	}));
 };
-
 //#endregion
 //#region src/view/components/ApiPage/components/ApiDocumentationBar.tsx
 const { useBreakpoint: useBreakpoint$3 } = Grid;
 const { Title: Title$1 } = Typography;
 const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, hasChanges = false, switcherNode }) => {
 	const isMobile = !useBreakpoint$3().md;
-	const { wrapSSR, cx, token: token$1 } = useStyle("ApiDocumentationBar", (token$2, scope) => ({
+	const { wrapSSR, cx, token } = useStyle("ApiDocumentationBar", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			padding: `${token$2.marginSM + 4}px ${token$2.paddingLG}px`,
-			background: token$2.colorBgContainer,
-			borderRadius: token$2.borderRadius,
+			padding: `${token.marginSM + 4}px ${token.paddingLG}px`,
+			background: token.colorBgContainer,
+			borderRadius: token.borderRadius,
 			width: "100%",
-			["@media (max-width: 640px)"]: { padding: `${token$2.marginSM}px ${token$2.marginMD}px` }
+			["@media (max-width: 640px)"]: { padding: `${token.marginSM}px ${token.marginMD}px` }
 		},
 		[scope("mobileWrapper")]: {
 			flexDirection: "column",
-			gap: token$2.marginMD
+			gap: token.marginMD
 		},
 		[scope("mobileTopRow")]: {
 			width: "100%",
@@ -2255,7 +2273,9 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 			flex: 1,
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginSM
+			gap: token.marginSM,
+			minWidth: 0,
+			overflow: "hidden"
 		},
 		[scope("arrow-icon")]: {
 			width: 24,
@@ -2263,14 +2283,14 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("switcher")]: {
 			display: "flex",
 			alignItems: "center",
-			background: token$2.colorBgLayout,
-			padding: "4px 48px",
-			borderRadius: token$2.borderRadius,
+			background: token.colorBgLayout,
+			padding: "4px 4px",
+			borderRadius: token.borderRadius,
 			gap: 8
 		},
 		[scope("switcher-item")]: {
@@ -2281,17 +2301,17 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 			background: "transparent",
 			border: "none",
 			cursor: "pointer",
-			fontSize: token$2.fontSizeLG,
+			fontSize: token.fontSizeLG,
 			fontWeight: 400,
-			color: token$2.colorText,
-			fontFamily: token$2.fontFamily,
+			color: token.colorText,
+			fontFamily: token.fontFamily,
 			transition: "all 0.2s ease"
 		},
 		[scope("switcher-item-active")]: {
-			background: token$2.colorBgContainer,
-			borderRadius: token$2.borderRadius,
+			background: token.colorBgContainer,
+			borderRadius: token.borderRadius,
 			boxShadow: "0px 2px 4px -2px rgba(17,12,34,0.12)",
-			fontSize: token$2.fontSize,
+			fontSize: token.fontSize,
 			fontWeight: 700
 		},
 		[scope("switcher-icon")]: {
@@ -2305,14 +2325,14 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 		[scope("actions")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginMD,
+			gap: token.marginMD,
 			flex: 1,
 			justifyContent: "flex-end"
 		},
 		[scope("mobileActions")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginSM,
+			gap: token.marginSM,
 			justifyContent: "flex-end"
 		}
 	}));
@@ -2333,7 +2353,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 						style: {
 							margin: 0,
 							fontWeight: 600,
-							color: token$1.colorTextHeading
+							color: token.colorTextHeading
 						},
 						children: apiName
 					})
@@ -2363,15 +2383,22 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: cx("title-section"),
-				children: /* @__PURE__ */ jsxs(Title$1, {
-					level: 3,
-					style: {
-						margin: 0,
-						fontWeight: 600,
-						whiteSpace: "nowrap",
-						color: token$1.colorTextHeading
-					},
-					children: [apiName, " API Documentation"]
+				children: /* @__PURE__ */ jsx(Tooltip, {
+					title: `${apiName} API Documentation`,
+					children: /* @__PURE__ */ jsxs(Title$1, {
+						level: 3,
+						style: {
+							margin: 0,
+							fontWeight: 600,
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							color: token.colorTextHeading,
+							minWidth: 0,
+							flex: 1
+						},
+						children: [apiName, " API Documentation"]
+					})
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -2410,17 +2437,16 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 		]
 	}));
 };
-
 //#endregion
 //#region src/view/components/ApiPage/components/GeneralSection.tsx
 const { useBreakpoint: useBreakpoint$2 } = Grid;
 const GeneralSection = ({ apiName, authType, version, description, onApiNameChange, onDescriptionChange, collapsed = false, onToggleCollapse, onChangeDetected }) => {
 	const isMobile = !useBreakpoint$2().md;
-	const { wrapSSR, cx, token: token$1 } = useStyle("GeneralSection", (token$2, scope) => ({
+	const { wrapSSR, cx, token } = useStyle("GeneralSection", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			borderRadius: token$2.borderRadius,
+			borderRadius: token.borderRadius,
 			overflow: "hidden",
 			width: "100%"
 		},
@@ -2428,22 +2454,22 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			padding: `${token$2.paddingXS}px ${token$2.paddingLG}px`,
-			background: token$2.colorPrimaryBg,
-			borderRadius: `${token$2.borderRadius}px ${token$2.borderRadius}px 0 0`
+			padding: `${token.paddingXS}px ${token.paddingLG}px`,
+			background: token.colorPrimaryBg,
+			borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
 		},
 		[scope("body")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.paddingLG,
-			padding: token$2.paddingLG,
-			paddingBottom: token$2.paddingXXL ?? 48,
-			background: token$2.colorBgElevated,
-			borderRadius: `0 0 ${token$2.borderRadius}px ${token$2.borderRadius}px`
+			gap: token.paddingLG,
+			padding: token.paddingLG,
+			paddingBottom: token.paddingXXL ?? 48,
+			background: token.colorBgElevated,
+			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
 		},
 		[scope("row")]: {
 			display: "flex",
-			gap: token$2.paddingLG,
+			gap: token.paddingLG,
 			width: "100%"
 		},
 		[scope("field")]: {
@@ -2455,22 +2481,22 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 		[scope("label")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginXXS,
-			fontSize: token$2.fontSize,
+			gap: token.marginXXS,
+			fontSize: token.fontSize,
 			fontWeight: 400,
-			color: token$2.colorText,
-			paddingBottom: token$2.paddingXS,
+			color: token.colorText,
+			paddingBottom: token.paddingXS,
 			lineHeight: "22px"
 		},
 		[scope("label-required")]: {
-			color: token$2.colorError,
-			fontSize: token$2.fontSize
+			color: token.colorError,
+			fontSize: token.fontSize
 		},
 		[scope("count")]: {
 			alignSelf: "flex-end",
-			fontSize: token$2.fontSize,
-			color: token$2.colorTextDescription,
-			marginTop: token$2.marginXXS
+			fontSize: token.fontSize,
+			color: token.colorTextDescription,
+			marginTop: token.marginXXS
 		}
 	}));
 	return wrapSSR(/* @__PURE__ */ jsxs("div", {
@@ -2481,7 +2507,7 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 				level: 4,
 				style: {
 					margin: 0,
-					color: token$1.colorTextHeading
+					color: token.colorTextHeading
 				},
 				children: "General"
 			}), /* @__PURE__ */ jsx(Button, {
@@ -2497,8 +2523,8 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 		}), !collapsed && /* @__PURE__ */ jsxs("div", {
 			className: cx("body"),
 			style: isMobile ? {
-				padding: token$1.paddingMD,
-				paddingBottom: token$1.paddingXXL ?? 48
+				padding: token.paddingMD,
+				paddingBottom: token.paddingXXL ?? 48
 			} : void 0,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: cx("row"),
@@ -2579,73 +2605,101 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 		})]
 	}));
 };
-
 //#endregion
-//#region src/assets/trash.svg
-var _mask, _path$2, _path2$1, _path3;
-function _extends$2() {
-	return _extends$2 = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends$2.apply(null, arguments);
-}
-var SvgTrash = function SvgTrash$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$2({
-		xmlns: "http://www.w3.org/2000/svg",
-		fill: "none",
-		viewBox: "0 0 40 40"
-	}, props), _mask || (_mask = /* @__PURE__ */ React.createElement("mask", {
-		id: "trash_svg__a",
-		fill: "#fff"
-	}, /* @__PURE__ */ React.createElement("path", { d: "M0 8a8 8 0 0 1 8-8h24a8 8 0 0 1 8 8v24a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8z" }))), _path$2 || (_path$2 = /* @__PURE__ */ React.createElement("path", {
-		fill: "#FF4D4F",
-		d: "M8 0v1h24v-2H8zm32 8h-1v24h2V8zm-8 32v-1H8v2h24zM0 32h1V8h-2v24zm8 8v-1a7 7 0 0 1-7-7h-2a9 9 0 0 0 9 9zm32-8h-1a7 7 0 0 1-7 7v2a9 9 0 0 0 9-9zM32 0v1a7 7 0 0 1 7 7h2a9 9 0 0 0-9-9zM8 0v-1a9 9 0 0 0-9 9h2a7 7 0 0 1 7-7z",
-		mask: "url(#trash_svg__a)"
-	})), _path2$1 || (_path2$1 = /* @__PURE__ */ React.createElement("path", {
-		fill: "#FF4D4F",
-		d: "M26.75 15.484a76 76 0 0 0-7.515-.375q-2.227 0-4.455.225l-1.53.15"
-	})), _path3 || (_path3 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#FF4D4F",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 1.5,
-		d: "M26.75 15.484a76 76 0 0 0-7.515-.375q-2.227 0-4.455.225l-1.53.15M17.375 14.728l.165-.983c.12-.712.21-1.245 1.477-1.245h1.966c1.267 0 1.364.563 1.477 1.252l.165.975M25.137 17.856l-.487 7.552c-.083 1.177-.15 2.092-2.243 2.092h-4.815c-2.092 0-2.16-.915-2.242-2.092l-.488-7.553M18.748 23.375h2.497M18.125 20.375h3.75"
-	})));
-};
-var trash_default = SvgTrash;
-
+//#region src/assets/trash.tsx
+const Trash = (props) => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 40 40",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("mask", {
+			id: "path-1-inside-1_17984_239034",
+			fill: "white",
+			children: /* @__PURE__ */ jsx("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" })
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M8 0V1H32V0V-1H8V0ZM40 8H39V32H40H41V8H40ZM32 40V39H8V40V41H32V40ZM0 32H1V8H0H-1V32H0ZM8 40V39C4.13401 39 1 35.866 1 32H0H-1C-1 36.9706 3.02944 41 8 41V40ZM40 32H39C39 35.866 35.866 39 32 39V40V41C36.9706 41 41 36.9706 41 32H40ZM32 0V1C35.866 1 39 4.13401 39 8H40H41C41 3.02944 36.9706 -1 32 -1V0ZM8 0V-1C3.02944 -1 -1 3.02944 -1 8H0H1C1 4.13401 4.13401 1 8 1V0Z",
+			fill: "#FF4D4F",
+			mask: "url(#path-1-inside-1_17984_239034)"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
+			fill: "#FF4D4F"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M17.375 14.7275L17.54 13.745C17.66 13.0325 17.75 12.5 19.0175 12.5H20.9825C22.25 12.5 22.3475 13.0625 22.46 13.7525L22.625 14.7275",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M25.1373 17.8555L24.6498 25.408C24.5673 26.5855 24.4998 27.5005 22.4073 27.5005H17.5923C15.4998 27.5005 15.4323 26.5855 15.3498 25.408L14.8623 17.8555",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M18.7476 23.375H21.2451",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M18.125 20.375H21.875",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	]
+});
 //#endregion
-//#region src/assets/info-circle.svg
-var _path$1;
-function _extends$1() {
-	return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends$1.apply(null, arguments);
-}
-var SvgInfoCircle = function SvgInfoCircle$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$1({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 24,
-		height: 24,
-		fill: "none"
-	}, props), _path$1 || (_path$1 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#000",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeOpacity: .45,
-		strokeWidth: 1.5,
-		d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10M12 8v5M11.995 16h.009"
-	})));
-};
-var info_circle_default = SvgInfoCircle;
-
+//#region src/assets/info-circle.tsx
+const InfoCircle = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z",
+			stroke: "black",
+			strokeOpacity: "0.45",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M12 8V13",
+			stroke: "black",
+			strokeOpacity: "0.45",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11.9946 16H12.0036",
+			stroke: "black",
+			strokeOpacity: "0.45",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	]
+});
 //#endregion
 //#region src/hooks/useDebounce.ts
 function useDebounce(value, delay = 500) {
@@ -2660,7 +2714,6 @@ function useDebounce(value, delay = 500) {
 	}, [value, delay]);
 	return debouncedValue;
 }
-
 //#endregion
 //#region src/view/components/ApiPage/components/AddParameterDrawer.tsx
 const PARAM_IN_OPTIONS = [
@@ -2734,11 +2787,11 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			setHasChanges(false);
 		}
 	}, [open]);
-	const { wrapSSR, cx, token: token$1 } = useStyle("AddParameterDrawer", (token$2, scope) => ({
+	const { wrapSSR, cx, token } = useStyle("AddParameterDrawer", (token, scope) => ({
 		[scope("title")]: {
 			fontSize: 16,
 			fontWeight: 600,
-			color: token$2.colorTextBase,
+			color: token.colorTextBase,
 			lineHeight: "24px",
 			fontFamily: "Cairo SemiBold, Cairo, sans-serif"
 		},
@@ -2749,21 +2802,21 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			"& .ant-form-item": { marginBottom: 0 }
 		},
 		[scope("label")]: {
-			fontSize: token$2.fontSize,
-			color: token$2.colorText
+			fontSize: token.fontSize,
+			color: token.colorText
 		},
 		[scope("asterisk")]: {
-			color: token$2.colorError,
+			color: token.colorError,
 			marginLeft: 2
 		},
 		[scope("label-optional")]: {
-			color: token$2.colorTextTertiary,
+			color: token.colorTextTertiary,
 			marginLeft: 4,
-			fontSize: token$2.fontSize
+			fontSize: token.fontSize
 		},
 		[scope("label-secondary")]: {
-			fontSize: token$2.fontSize,
-			color: token$2.colorTextSecondary
+			fontSize: token.fontSize,
+			color: token.colorTextSecondary
 		},
 		[scope("switch-row")]: {
 			display: "flex",
@@ -2771,8 +2824,8 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			gap: 8
 		},
 		[scope("switch-label")]: {
-			fontSize: token$2.fontSize,
-			color: token$2.colorText
+			fontSize: token.fontSize,
+			color: token.colorText
 		},
 		[scope("enum-input-row")]: {
 			display: "flex",
@@ -2787,27 +2840,27 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			width: 32,
 			height: 32,
 			flexShrink: 0,
-			borderColor: token$2.colorPrimary,
-			color: token$2.colorPrimary,
+			borderColor: token.colorPrimary,
+			color: token.colorPrimary,
 			padding: 0,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
 			"&:hover": {
-				borderColor: `${token$2.colorPrimary} !important`,
-				color: `${token$2.colorPrimary} !important`
+				borderColor: `${token.colorPrimary} !important`,
+				color: `${token.colorPrimary} !important`
 			}
 		},
 		[scope("enum-list")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.marginXS,
-			marginTop: token$2.marginXS
+			gap: token.marginXS,
+			marginTop: token.marginXS
 		},
 		[scope("enum-value-row")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginXS
+			gap: token.marginXS
 		},
 		[scope("enum-value-input-wrap")]: {
 			flex: 1,
@@ -2816,10 +2869,10 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 		[scope("enum-value-input")]: {
 			height: 32,
 			fontSize: 14,
-			color: token$2.colorText,
-			background: token$2.colorBgBase,
-			border: `1px solid ${token$2.colorBorder}`,
-			borderRadius: token$2.borderRadius,
+			color: token.colorText,
+			background: token.colorBgBase,
+			border: `1px solid ${token.colorBorder}`,
+			borderRadius: token.borderRadius,
 			cursor: "default",
 			width: "100%"
 		},
@@ -2831,7 +2884,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			borderRadius: token$2.borderRadius
+			borderRadius: token.borderRadius
 		},
 		[scope("footer")]: {
 			display: "flex",
@@ -2868,7 +2921,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			fontSize: 16,
 			fontWeight: 400,
 			lineHeight: "24px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("modalCloseBtn")]: {
 			position: "absolute",
@@ -2884,12 +2937,12 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			border: "none",
 			background: "transparent",
 			padding: 0,
-			color: token$2.colorTextTertiary,
+			color: token.colorTextTertiary,
 			fontSize: 16,
 			lineHeight: 1,
 			"&:hover": {
-				color: token$2.colorText,
-				backgroundColor: token$2.colorFillSecondary
+				color: token.colorText,
+				backgroundColor: token.colorFillSecondary
 			}
 		},
 		[scope("modalContent")]: {
@@ -2906,7 +2959,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			fontSize: 14,
 			fontWeight: 400,
 			lineHeight: "22px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("modalFooter")]: {
 			display: "flex",
@@ -2991,14 +3044,14 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			styles: {
 				header: {
 					padding: "16px 24px",
-					borderBottom: `1px solid ${token$1.colorFillSecondary}`,
-					background: token$1.colorBgBase
+					borderBottom: `1px solid ${token.colorFillSecondary}`,
+					background: token.colorBgBase
 				},
 				body: { padding: "24px" },
 				footer: {
 					padding: "24px",
-					background: token$1.colorPrimaryBg,
-					borderTop: `1px solid ${token$1.colorFillSecondary}`
+					background: token.colorPrimaryBg,
+					borderTop: `1px solid ${token.colorFillSecondary}`
 				}
 			},
 			footer: /* @__PURE__ */ jsxs("div", {
@@ -3102,7 +3155,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 							children: [/* @__PURE__ */ jsx(Switch, {
 								checked: requiredValue ?? true,
 								onChange: (checked) => form.setFieldValue("required", checked),
-								style: { backgroundColor: requiredValue ?? true ? token$1.colorPrimary : void 0 }
+								style: { backgroundColor: requiredValue ?? true ? token.colorPrimary : void 0 }
 							}), /* @__PURE__ */ jsx("span", {
 								className: cx("switch-label"),
 								children: "Required?"
@@ -3170,7 +3223,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 								}), /* @__PURE__ */ jsx(Button, {
 									danger: true,
 									type: "text",
-									icon: /* @__PURE__ */ jsx(trash_default, {
+									icon: /* @__PURE__ */ jsx(Trash, {
 										width: 32,
 										height: 32
 									}),
@@ -3243,9 +3296,9 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 							borderRadius: 8,
 							height: 32,
 							paddingInline: 16,
-							backgroundColor: token$1.colorPrimary,
-							borderColor: token$1.colorPrimary,
-							boxShadow: `0px 2px 0px ${token$1.colorPrimaryBg}`
+							backgroundColor: token.colorPrimary,
+							borderColor: token.colorPrimary,
+							boxShadow: `0px 2px 0px ${token.colorPrimaryBg}`
 						},
 						children: mode === "edit" ? "Yes, Edit" : "Yes, Add"
 					})]
@@ -3254,20 +3307,19 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 		})
 	] }));
 };
-
 //#endregion
 //#region src/view/components/ApiPage/components/EndpointsSection.tsx
 const { useBreakpoint: useBreakpoint$1 } = Grid;
 const PAGE_SIZE = 5;
-const getStatusCodeColor = (code, token$1) => {
+const getStatusCodeColor = (code, token) => {
 	const n = parseInt(code, 10);
 	if (n >= 400 && n < 500) return {
-		dot: token$1.colorError,
-		text: token$1.colorError
+		dot: token.colorError,
+		text: token.colorError
 	};
 	return {
-		dot: token$1.colorSuccess,
-		text: token$1.colorText
+		dot: token.colorSuccess,
+		text: token.colorText
 	};
 };
 const buildViewParamRows = (params) => params.map((p, idx) => ({
@@ -3322,11 +3374,11 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			return next;
 		});
 	};
-	const { wrapSSR, cx, token: token$1 } = useStyle("EndpointsSection", (token$2, scope) => ({
+	const { wrapSSR, cx, token } = useStyle("EndpointsSection", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			borderRadius: token$2.borderRadius,
+			borderRadius: token.borderRadius,
 			overflow: "hidden",
 			width: "100%",
 			flexShrink: 0
@@ -3335,28 +3387,28 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			padding: `${token$2.paddingXS}px ${token$2.paddingLG}px`,
-			background: token$2.colorPrimaryBg,
-			borderRadius: `${token$2.borderRadius}px ${token$2.borderRadius}px 0 0`
+			padding: `${token.paddingXS}px ${token.paddingLG}px`,
+			background: token.colorPrimaryBg,
+			borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
 		},
 		[scope("body")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.margin,
-			padding: token$2.paddingLG,
-			background: token$2.colorBgElevated,
-			borderRadius: `0 0 ${token$2.borderRadius}px ${token$2.borderRadius}px`
+			gap: token.margin,
+			padding: token.paddingLG,
+			background: token.colorBgElevated,
+			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
 		},
 		[scope("tag-title")]: {
-			fontSize: token$2.fontSize,
+			fontSize: token.fontSize,
 			fontWeight: 600,
-			color: token$2.colorTextSecondary,
-			marginBottom: token$2.marginXS
+			color: token.colorTextSecondary,
+			marginBottom: token.marginXS
 		},
 		[scope("endpoint-row")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginSM,
+			gap: token.marginSM,
 			width: "100%"
 		},
 		[scope("endpoint-card")]: {
@@ -3364,44 +3416,48 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			flex: "1 0 0",
 			alignItems: "center",
 			gap: 14,
-			padding: `${token$2.paddingXS}px ${token$2.padding}px`,
-			background: token$2.colorFillSecondary,
-			borderRadius: token$2.borderRadius,
-			cursor: "pointer"
+			padding: `${token.paddingXS}px ${token.padding}px`,
+			background: token.colorFillSecondary,
+			borderRadius: token.borderRadius,
+			cursor: "pointer",
+			overflow: "hidden"
 		},
 		[scope("endpoint-card-active")]: {
 			background: "transparent",
-			border: `1px solid ${token$2.colorPrimaryBorder}`
+			border: `1px solid ${token.colorPrimaryBorder}`
 		},
 		[scope("method-badge")]: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
 			width: 64,
-			padding: `0 ${token$2.paddingXS}px`,
-			borderRadius: token$2.borderRadius,
+			padding: `0 ${token.paddingXS}px`,
+			borderRadius: token.borderRadius,
 			border: "1px solid",
-			fontSize: token$2.fontSize,
+			fontSize: token.fontSize,
 			fontWeight: 400,
 			lineHeight: "22px",
 			whiteSpace: "nowrap",
 			alignSelf: "stretch"
 		},
 		[scope("endpoint-path")]: {
-			fontSize: token$2.fontSizeLG,
+			fontSize: token.fontSizeLG,
 			fontWeight: 600,
-			color: token$2.colorTextHeading,
-			lineHeight: "24px"
+			color: token.colorTextHeading,
+			lineHeight: "24px",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
 		},
 		[scope("endpoint-form")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.paddingLG,
-			padding: token$2.paddingLG,
-			borderLeft: `3px solid ${token$2.colorPrimaryBorder}`,
-			borderRight: `3px solid ${token$2.colorPrimaryBorder}`,
-			borderBottom: `3px solid ${token$2.colorPrimaryBorder}`,
-			borderRadius: `0 0 ${token$2.borderRadius}px ${token$2.borderRadius}px`
+			gap: token.paddingLG,
+			padding: token.paddingLG,
+			borderLeft: `3px solid ${token.colorPrimaryBorder}`,
+			borderRight: `3px solid ${token.colorPrimaryBorder}`,
+			borderBottom: `3px solid ${token.colorPrimaryBorder}`,
+			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
 		},
 		[scope("form-row")]: {
 			display: "flex",
@@ -3417,41 +3473,41 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		[scope("field-label")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginXXS,
-			fontSize: token$2.fontSize,
+			gap: token.marginXXS,
+			fontSize: token.fontSize,
 			fontWeight: 400,
-			color: token$2.colorText,
-			paddingBottom: token$2.paddingXS,
+			color: token.colorText,
+			paddingBottom: token.paddingXS,
 			lineHeight: "22px"
 		},
-		[scope("label-required")]: { color: token$2.colorError },
-		[scope("label-optional")]: { color: token$2.colorTextDescription },
+		[scope("label-required")]: { color: token.colorError },
+		[scope("label-optional")]: { color: token.colorTextDescription },
 		[scope("section-header")]: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			paddingBottom: token$2.marginXXS,
-			borderBottom: `1px solid ${token$2.colorBorder}`,
+			paddingBottom: token.marginXXS,
+			borderBottom: `1px solid ${token.colorBorder}`,
 			width: "100%"
 		},
 		[scope("section-title")]: {
-			fontSize: token$2.fontSizeLG,
+			fontSize: token.fontSizeLG,
 			fontWeight: 600,
-			color: token$2.colorPrimary,
+			color: token.colorPrimary,
 			lineHeight: "24px"
 		},
 		[scope("param-row")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginXS,
-			padding: `${token$2.marginXXS}px ${token$2.marginSM}px`,
-			border: `1px solid ${token$2.colorBorder}`,
-			borderRadius: token$2.borderRadius,
-			background: token$2.colorBgContainer,
+			gap: token.marginXS,
+			padding: `${token.marginXXS}px ${token.marginSM}px`,
+			border: `1px solid ${token.colorBorder}`,
+			borderRadius: token.borderRadius,
+			background: token.colorBgContainer,
 			width: "100%",
 			cursor: "pointer",
 			userSelect: "none",
-			"&:hover": { background: token$2.colorFillTertiary }
+			"&:hover": { background: token.colorFillTertiary }
 		},
 		[scope("param-row-icon")]: {
 			fontSize: 12,
@@ -3468,7 +3524,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			fontFamily: "Cairo, sans-serif",
 			fontSize: 14,
 			lineHeight: "20px",
-			color: token$2.colorTextLightSolid,
+			color: token.colorTextLightSolid,
 			width: "100%",
 			whiteSpace: "pre",
 			overflowX: "auto",
@@ -3484,7 +3540,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		},
 		[scope("code-btn")]: {
 			borderColor: "#fff",
-			color: token$2.colorTextLightSolid,
+			color: token.colorTextLightSolid,
 			"&:hover": {
 				borderColor: "#fff !important",
 				color: "#fff !important",
@@ -3502,8 +3558,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			justifyContent: "space-between",
 			width: "100%",
 			padding: `12px 24px`,
-			borderBottom: `1px solid ${token$2.colorBorderSecondary}`,
-			background: token$2.colorBgContainer,
+			borderBottom: `1px solid ${token.colorBorderSecondary}`,
+			background: token.colorBgContainer,
 			"&:last-child": { borderBottom: "none" }
 		},
 		[scope("param-details")]: {
@@ -3521,12 +3577,12 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		[scope("param-detail-label")]: {
 			fontFamily: "Cairo SemiBold, Cairo, sans-serif",
 			fontSize: 16,
-			color: token$2.colorTextSecondary
+			color: token.colorTextSecondary
 		},
 		[scope("param-detail-value")]: {
 			fontFamily: "Cairo, sans-serif",
 			fontSize: 16,
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("param-detail-value--ellipsis")]: {
 			overflow: "hidden",
@@ -3545,13 +3601,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			display: "inline-flex",
 			alignItems: "center",
 			verticalAlign: "middle",
-			background: token$2.colorBgContainer,
-			border: `1px solid ${token$2.colorBorder}`,
+			background: token.colorBgContainer,
+			border: `1px solid ${token.colorBorder}`,
 			borderRadius: 6,
 			padding: "1px 8px",
 			fontSize: 12,
 			lineHeight: "20px",
-			color: token$2.colorText,
+			color: token.colorText,
 			fontFamily: "Cairo, sans-serif",
 			margin: 0
 		},
@@ -3563,10 +3619,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			width: 20,
 			height: 20,
 			borderRadius: "50%",
-			border: `1px solid ${token$2.colorBorder}`,
+			border: `1px solid ${token.colorBorder}`,
 			background: "white",
 			fontSize: 12,
-			color: token$2.colorText,
+			color: token.colorText,
 			cursor: "default"
 		},
 		[scope("enum-tooltip-list")]: {
@@ -3574,7 +3630,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			padding: "0 0 0 16px",
 			fontSize: 14,
 			lineHeight: "22px",
-			color: token$2.colorTextLightSolid,
+			color: token.colorTextLightSolid,
 			fontFamily: "Cairo, sans-serif"
 		},
 		[scope("status-label")]: {
@@ -3625,7 +3681,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 				alignItems: "center",
 				gap: 8
 			},
-			"& .ant-select-item-option-selected": { background: `${token$2.colorPrimaryBg} !important` }
+			"& .ant-select-item-option-selected": { background: `${token.colorPrimaryBg} !important` }
 		},
 		[scope("param-actions")]: {
 			display: "flex",
@@ -3638,11 +3694,11 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			borderColor: token$2.colorPrimary,
-			color: token$2.colorPrimary,
+			borderColor: token.colorPrimary,
+			color: token.colorPrimary,
 			"&:hover": {
-				borderColor: `${token$2.colorPrimary} !important`,
-				color: `${token$2.colorPrimary} !important`
+				borderColor: `${token.colorPrimary} !important`,
+				color: `${token.colorPrimary} !important`
 			}
 		},
 		[scope("param-delete-btn")]: {
@@ -3672,7 +3728,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			fontSize: 16,
 			fontWeight: 400,
 			lineHeight: "24px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("deleteModalCloseBtn")]: {
 			position: "absolute",
@@ -3688,12 +3744,12 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			border: "none",
 			background: "transparent",
 			padding: 0,
-			color: token$2.colorTextSecondary,
+			color: token.colorTextSecondary,
 			fontSize: 16,
 			lineHeight: 1,
 			"&:hover": {
-				color: token$2.colorText,
-				backgroundColor: token$2.colorFillSecondary
+				color: token.colorText,
+				backgroundColor: token.colorFillSecondary
 			}
 		},
 		[scope("deleteModalContent")]: {
@@ -3710,7 +3766,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			fontSize: 14,
 			fontWeight: 400,
 			lineHeight: "22px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("deleteModalFooter")]: {
 			display: "flex",
@@ -3728,33 +3784,33 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			flexDirection: "column",
 			gap: 16,
 			width: "100%",
-			borderLeft: `3px solid ${token$2.colorPrimaryBorder}`,
-			borderRight: `3px solid ${token$2.colorPrimaryBorder}`,
-			borderBottom: `3px solid ${token$2.colorPrimaryBorder}`,
-			borderRadius: `0 0 ${token$2.borderRadius}px ${token$2.borderRadius}px`,
-			padding: token$2.paddingLG
+			borderLeft: `3px solid ${token.colorPrimaryBorder}`,
+			borderRight: `3px solid ${token.colorPrimaryBorder}`,
+			borderBottom: `3px solid ${token.colorPrimaryBorder}`,
+			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
+			padding: token.paddingLG
 		},
 		[scope("view-params-card")]: {
-			border: `1px solid ${token$2.colorBorder}`,
-			borderRadius: token$2.borderRadius,
+			border: `1px solid ${token.colorBorder}`,
+			borderRadius: token.borderRadius,
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.marginSM,
+			gap: token.marginSM,
 			paddingTop: 12,
 			width: "100%",
 			overflow: "hidden",
 			"& .ant-table-thead > tr > th": {
-				background: token$2.colorFillSecondary,
+				background: token.colorFillSecondary,
 				fontWeight: 700,
 				fontSize: 14,
-				padding: `${token$2.paddingXS}px`,
-				paddingInline: `${token$2.paddingXS}px`,
-				borderColor: `${token$2.colorSplit} !important`
+				padding: `${token.paddingXS}px`,
+				paddingInline: `${token.paddingXS}px`,
+				borderColor: `${token.colorSplit} !important`
 			},
 			"& .ant-table-tbody > tr > td": {
-				padding: `${token$2.paddingXS}px`,
-				paddingInline: `${token$2.paddingXS}px`,
-				borderColor: `${token$2.colorBorder} !important`,
+				padding: `${token.paddingXS}px`,
+				paddingInline: `${token.paddingXS}px`,
+				borderColor: `${token.colorBorder} !important`,
 				height: 38
 			},
 			"& .ant-table-container": {
@@ -3773,30 +3829,30 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		[scope("view-params-title")]: {
 			fontSize: 16,
 			fontWeight: 600,
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("view-status-select-sm")]: { width: 65 },
 		[scope("view-param-name")]: {
 			fontSize: 14,
 			fontWeight: 400,
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("view-param-type")]: {
 			fontFamily: "'Cascadia Code', sans-serif",
 			fontSize: 12,
-			color: token$2.colorTextSecondary,
+			color: token.colorTextSecondary,
 			marginLeft: 4,
 			marginRight: 4
 		},
-		[scope("view-param-required")]: { color: token$2.colorError },
+		[scope("view-param-required")]: { color: token.colorError },
 		[scope("view-param-optional")]: {
-			color: token$2.colorSuccess,
+			color: token.colorSuccess,
 			fontSize: 12,
 			marginLeft: 4
 		},
 		[scope("view-param-desc")]: {
 			fontSize: 12,
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("view-enum-container")]: {
 			display: "inline-flex",
@@ -3805,21 +3861,21 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center"
 		},
 		[scope("view-enum-tag")]: {
-			background: token$2.colorFillSecondary,
-			border: `1px solid ${token$2.colorBorder}`,
+			background: token.colorFillSecondary,
+			border: `1px solid ${token.colorBorder}`,
 			borderRadius: 4,
 			padding: "1px 8px",
 			fontSize: 12,
 			lineHeight: "20px",
-			color: token$2.colorText,
+			color: token.colorText,
 			margin: 0,
 			cursor: "default"
 		},
-		[scope("view-row-odd")]: { "& > td": { background: `${token$2.colorBgLayout} !important` } },
-		[scope("view-row-even")]: { "& > td": { background: `${token$2.colorBgContainer} !important` } },
+		[scope("view-row-odd")]: { "& > td": { background: `${token.colorBgLayout} !important` } },
+		[scope("view-row-even")]: { "& > td": { background: `${token.colorBgContainer} !important` } },
 		[scope("empty-wrapper")]: {
-			background: token$2.colorBgElevated,
-			borderRadius: token$2.borderRadius,
+			background: token.colorBgElevated,
+			borderRadius: token.borderRadius,
 			paddingTop: 16,
 			paddingBottom: 16,
 			gap: 8,
@@ -3852,25 +3908,25 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		[scope("empty-description")]: {
 			fontSize: 14,
 			lineHeight: "22px",
-			color: token$2.colorTextDescription,
+			color: token.colorTextDescription,
 			textAlign: "center",
 			fontWeight: 400
 		},
 		[scope("pagination")]: {
 			display: "flex",
 			justifyContent: "center",
-			marginTop: token$2.marginMD,
+			marginTop: token.marginMD,
 			".ant-pagination-item-active": {
-				backgroundColor: token$2.colorBgContainer,
-				borderColor: token$2.colorPrimary,
-				borderRadius: token$2.borderRadius,
+				backgroundColor: token.colorBgContainer,
+				borderColor: token.colorPrimary,
+				borderRadius: token.borderRadius,
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "center",
 				a: {
-					color: token$2.colorPrimary,
-					fontWeight: token$2.fontWeightStrong,
-					fontSize: token$2.fontSize,
+					color: token.colorPrimary,
+					fontWeight: token.fontWeightStrong,
+					fontSize: token.fontSize,
 					lineHeight: "22px",
 					display: "flex",
 					alignItems: "center",
@@ -3879,18 +3935,18 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 				}
 			},
 			".ant-pagination-item": {
-				borderRadius: token$2.borderRadius,
+				borderRadius: token.borderRadius,
 				minWidth: 32,
 				height: 32,
 				lineHeight: "32px",
 				a: {
-					color: token$2.colorText,
+					color: token.colorText,
 					fontWeight: 400,
-					fontSize: token$2.fontSize
+					fontSize: token.fontSize
 				}
 			},
 			".ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link": {
-				borderRadius: token$2.borderRadius,
+				borderRadius: token.borderRadius,
 				width: 32,
 				height: 32,
 				display: "flex",
@@ -3984,7 +4040,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 					level: 4,
 					style: {
 						margin: 0,
-						color: token$1.colorTextHeading
+						color: token.colorTextHeading
 					},
 					children: "Endpoints"
 				}), /* @__PURE__ */ jsx(Button, {
@@ -4012,14 +4068,17 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 								children: [/* @__PURE__ */ jsx("span", {
 									className: cx("method-badge"),
 									style: {
-										color: methodColor?.color,
+										color: isExpanded ? "#ffffff" : methodColor?.color,
 										borderColor: methodColor?.color,
-										backgroundColor: methodColor?.bg
+										backgroundColor: isExpanded ? methodColor?.color : "transparent"
 									},
 									children: ep.method
-								}), /* @__PURE__ */ jsx("span", {
-									className: cx("endpoint-path"),
-									children: ep.path
+								}), /* @__PURE__ */ jsx(Tooltip, {
+									title: ep.path,
+									children: /* @__PURE__ */ jsx("span", {
+										className: cx("endpoint-path"),
+										children: ep.path
+									})
 								})]
 							}), /* @__PURE__ */ jsx(UpCircleOutlined, {
 								onClick: () => handleEndpointClick(ep),
@@ -4029,7 +4088,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 									transform: isExpanded ? "rotate(0deg)" : "rotate(180deg)",
 									transition: "transform 0.2s",
 									flexShrink: 0,
-									color: isExpanded ? token$1.colorPrimary : token$1.colorText
+									color: isExpanded ? token.colorPrimary : token.colorText
 								}
 							})]
 						}),
@@ -4156,7 +4215,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												style: {
 													display: "flex",
 													alignItems: "center",
-													gap: token$1.marginMD
+													gap: token.marginMD
 												},
 												children: [/* @__PURE__ */ jsx("span", {
 													className: cx("section-title"),
@@ -4282,7 +4341,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											const pagedReqParams = allReqParams.slice((reqPage - 1) * PAGE_SIZE, reqPage * PAGE_SIZE);
 											return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 												className: cx("param-list"),
-												style: { marginTop: token$1.margin },
+												style: { marginTop: token.margin },
 												children: pagedReqParams.map((param, i) => {
 													const idx = (reqPage - 1) * PAGE_SIZE + i;
 													return /* @__PURE__ */ jsx("div", {
@@ -4322,16 +4381,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															style: {
 																display: "flex",
 																alignItems: "center",
-																gap: token$1.margin,
-																background: token$1.colorFillTertiary,
-																borderRadius: token$1.borderRadius,
-																padding: `0 ${token$1.marginSM}px`,
+																gap: token.margin,
+																background: token.colorFillTertiary,
+																borderRadius: token.borderRadius,
+																padding: `0 ${token.marginSM}px`,
 																height: 50,
 																flexShrink: 0
 															},
 															children: [/* @__PURE__ */ jsx(Button, {
 																danger: true,
-																icon: /* @__PURE__ */ jsx(trash_default, {
+																icon: /* @__PURE__ */ jsx(Trash, {
 																	width: 32,
 																	height: 32
 																}),
@@ -4450,7 +4509,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															children: [/* @__PURE__ */ jsx(Button, {
 																danger: true,
 																type: "text",
-																icon: /* @__PURE__ */ jsx(trash_default, {
+																icon: /* @__PURE__ */ jsx(Trash, {
 																	height: 32,
 																	width: 32
 																}),
@@ -4492,12 +4551,12 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										})(),
 										/* @__PURE__ */ jsxs("div", {
 											className: cx("param-row"),
-											style: { marginTop: token$1.margin },
+											style: { marginTop: token.margin },
 											onClick: () => toggleRequestPanel(ep.id),
 											children: [/* @__PURE__ */ jsx(DownOutlined, { className: cx("param-row-icon", openRequestPanels.has(ep.id) ? "param-row-icon--open" : "") }), /* @__PURE__ */ jsxs("span", {
-												style: { fontSize: token$1.fontSize },
+												style: { fontSize: token.fontSize },
 												children: ["Request ", /* @__PURE__ */ jsx("span", {
-													style: { color: token$1.colorError },
+													style: { color: token.colorError },
 													children: "*"
 												})]
 											})]
@@ -4541,7 +4600,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												style: {
 													display: "flex",
 													alignItems: "center",
-													gap: token$1.marginMD
+													gap: token.marginMD
 												},
 												children: [/* @__PURE__ */ jsx("span", {
 													className: cx("section-title"),
@@ -4721,7 +4780,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											const pagedResParams = allResParams.slice((resPage - 1) * PAGE_SIZE, resPage * PAGE_SIZE);
 											return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 												className: cx("param-list"),
-												style: { marginTop: token$1.margin },
+												style: { marginTop: token.margin },
 												children: pagedResParams.map((param, i) => {
 													const idx = (resPage - 1) * PAGE_SIZE + i;
 													return /* @__PURE__ */ jsx("div", {
@@ -4761,16 +4820,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															style: {
 																display: "flex",
 																alignItems: "center",
-																gap: token$1.margin,
-																background: token$1.colorFillTertiary,
-																borderRadius: token$1.borderRadius,
-																padding: `0 ${token$1.marginSM}px`,
+																gap: token.margin,
+																background: token.colorFillTertiary,
+																borderRadius: token.borderRadius,
+																padding: `0 ${token.marginSM}px`,
 																height: 50,
 																flexShrink: 0
 															},
 															children: [/* @__PURE__ */ jsx(Button, {
 																danger: true,
-																icon: /* @__PURE__ */ jsx(trash_default, {
+																icon: /* @__PURE__ */ jsx(Trash, {
 																	width: 32,
 																	height: 32
 																}),
@@ -4900,7 +4959,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															}), /* @__PURE__ */ jsx(Button, {
 																danger: true,
 																type: "text",
-																icon: /* @__PURE__ */ jsx(trash_default, {
+																icon: /* @__PURE__ */ jsx(Trash, {
 																	height: 18,
 																	width: 18
 																}),
@@ -4931,18 +4990,18 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										})(),
 										/* @__PURE__ */ jsxs("div", {
 											className: cx("param-row"),
-											style: { marginTop: token$1.margin },
+											style: { marginTop: token.margin },
 											onClick: () => toggleResponsePanel(ep.id),
 											children: [
 												/* @__PURE__ */ jsx(DownOutlined, { className: cx("param-row-icon", openResponsePanels.has(ep.id) ? "param-row-icon--open" : "") }),
 												/* @__PURE__ */ jsxs("span", {
-													style: { fontSize: token$1.fontSize },
+													style: { fontSize: token.fontSize },
 													children: ["Response ", /* @__PURE__ */ jsx("span", {
-														style: { color: token$1.colorError },
+														style: { color: token.colorError },
 														children: "*"
 													})]
 												}),
-												/* @__PURE__ */ jsx(info_circle_default, { style: {
+												/* @__PURE__ */ jsx(InfoCircle, { style: {
 													width: 24,
 													height: 24
 												} })
@@ -5124,11 +5183,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		]
 	}));
 };
-
 //#endregion
 //#region src/view/components/ApiPage/components/UnsavedChangesBanner.tsx
 const UnsavedChangesBanner = ({ onClose }) => {
-	const { wrapSSR, cx, token: token$1 } = useStyle("UnsavedChangesBanner", (token$2, scope) => ({
+	const { wrapSSR, cx } = useStyle("UnsavedChangesBanner", (token, scope) => ({
 		[scope("root")]: {
 			position: "sticky",
 			top: 0,
@@ -5138,7 +5196,7 @@ const UnsavedChangesBanner = ({ onClose }) => {
 		},
 		[scope("alert")]: {
 			padding: "8px 12px",
-			fontSize: token$2.fontSize,
+			fontSize: token.fontSize,
 			fontWeight: 400,
 			borderRadius: 0
 		}
@@ -5156,17 +5214,16 @@ const UnsavedChangesBanner = ({ onClose }) => {
 		})
 	}));
 };
-
 //#endregion
 //#region src/view/components/ApiPage/components/TagsSection.tsx
 const { useBreakpoint } = Grid;
 const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
 	const isMobile = !useBreakpoint().md;
-	const { wrapSSR, cx, token: token$1 } = useStyle("TagsSection", (token$2, scope) => ({
+	const { wrapSSR, cx, token } = useStyle("TagsSection", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			borderRadius: token$2.borderRadius,
+			borderRadius: token.borderRadius,
 			overflow: "hidden",
 			width: "100%",
 			flexShrink: 0
@@ -5175,36 +5232,37 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			padding: `${token$2.paddingXS}px ${token$2.paddingLG}px`,
-			background: token$2.colorPrimaryBg,
-			borderRadius: `${token$2.borderRadius}px ${token$2.borderRadius}px 0 0`
+			padding: `${token.paddingXS}px ${token.paddingLG}px`,
+			background: token.colorPrimaryBg,
+			borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
 		},
 		[scope("head-actions")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.margin
+			gap: token.margin
 		},
 		[scope("body")]: {
 			display: "flex",
 			flexDirection: "column",
 			gap: 0,
-			padding: token$2.paddingLG,
-			background: token$2.colorBgElevated,
-			borderRadius: `0 0 ${token$2.borderRadius}px ${token$2.borderRadius}px`
+			padding: token.paddingLG,
+			background: token.colorBgElevated,
+			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
 		},
 		[scope("tag-row")]: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
 			height: 50,
-			paddingBottom: token$2.margin,
-			paddingRight: token$2.paddingLG,
-			borderBottom: `1px solid ${token$2.colorBorder}`,
+			paddingTop: token.controlHeightLG,
+			paddingBottom: token.controlHeightLG,
+			paddingRight: token.paddingLG,
+			borderBottom: `1px solid ${token.colorBorder}`,
 			width: "100%"
 		},
 		[scope("tag-row-last")]: {
 			borderBottom: "none",
-			paddingBottom: 0
+			paddingBottom: token.marginLG
 		},
 		[scope("tag-info")]: {
 			display: "flex",
@@ -5216,26 +5274,26 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 		[scope("tag-col")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.marginXXS
+			gap: token.marginXXS
 		},
 		[scope("col-label")]: {
-			fontSize: token$2.fontSizeLG,
+			fontSize: token.fontSizeLG,
 			fontWeight: 600,
-			color: token$2.colorTextTertiary,
+			color: token.colorTextTertiary,
 			lineHeight: "24px",
 			whiteSpace: "nowrap"
 		},
 		[scope("col-value")]: {
-			fontSize: token$2.fontSizeLG,
+			fontSize: token.fontSizeLG,
 			fontWeight: 400,
-			color: token$2.colorText,
+			color: token.colorText,
 			lineHeight: "24px",
 			whiteSpace: "nowrap"
 		},
 		[scope("col-value-link")]: {
-			fontSize: token$2.fontSize,
+			fontSize: token.fontSize,
 			fontWeight: 400,
-			color: token$2.colorPrimary,
+			color: token.colorPrimary,
 			lineHeight: "22px",
 			textDecoration: "underline",
 			whiteSpace: "nowrap"
@@ -5243,13 +5301,13 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 		[scope("tag-actions")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.margin
+			gap: token.margin
 		},
 		[scope("btn-delete")]: {
 			width: 40,
 			height: 40,
-			border: `1px solid ${token$2.colorError}`,
-			borderRadius: token$2.borderRadius,
+			border: `1px solid ${token.colorError}`,
+			borderRadius: token.borderRadius,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center"
@@ -5257,9 +5315,9 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 		[scope("btn-edit")]: {
 			width: 40,
 			height: 40,
-			border: `1px solid ${token$2.colorBorder}`,
-			borderRadius: token$2.borderRadius,
-			background: token$2.colorBgContainer,
+			border: `1px solid ${token.colorBorder}`,
+			borderRadius: token.borderRadius,
+			background: token.colorBgContainer,
 			boxShadow: "0px 2px 0px 0px rgba(0,0,0,0.02)",
 			display: "flex",
 			alignItems: "center",
@@ -5271,8 +5329,8 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 			alignItems: "flex-start",
 			justifyContent: "space-between",
 			gap: 8,
-			paddingBottom: token$2.margin,
-			borderBottom: `1px solid ${token$2.colorBorder}`,
+			paddingBottom: token.margin,
+			borderBottom: `1px solid ${token.colorBorder}`,
 			width: "100%",
 			minHeight: 50
 		},
@@ -5300,9 +5358,9 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 			display: "flex",
 			flexDirection: "column",
 			gap: 0,
-			padding: token$2.paddingMD,
-			background: token$2.colorBgElevated,
-			borderRadius: `0 0 ${token$2.borderRadius}px ${token$2.borderRadius}px`,
+			padding: token.paddingMD,
+			background: token.colorBgElevated,
+			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
 			overflowX: "auto"
 		}
 	}));
@@ -5314,7 +5372,7 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 				level: 4,
 				style: {
 					margin: 0,
-					color: token$1.colorTextHeading
+					color: token.colorTextHeading
 				},
 				children: "Tags"
 			}), /* @__PURE__ */ jsxs("div", {
@@ -5324,7 +5382,7 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 					type: "primary",
 					icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
 					onClick: onAddTag,
-					style: { borderRadius: token$1.borderRadius },
+					style: { borderRadius: token.borderRadius },
 					children: "Add Tag"
 				}), /* @__PURE__ */ jsx(Button, {
 					type: "text",
@@ -5349,14 +5407,14 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 							children: [/* @__PURE__ */ jsx("span", {
 								className: cx("col-label"),
 								style: {
-									fontSize: token$1.fontSize,
+									fontSize: token.fontSize,
 									lineHeight: "20px"
 								},
 								children: "Tag Name:"
 							}), /* @__PURE__ */ jsx("span", {
 								className: cx("col-value"),
 								style: {
-									fontSize: token$1.fontSize,
+									fontSize: token.fontSize,
 									lineHeight: "20px",
 									overflow: "hidden",
 									textOverflow: "ellipsis",
@@ -5369,7 +5427,7 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 							children: [/* @__PURE__ */ jsx("span", {
 								className: cx("col-label"),
 								style: {
-									fontSize: token$1.fontSize,
+									fontSize: token.fontSize,
 									lineHeight: "20px"
 								},
 								children: "Description:"
@@ -5378,7 +5436,7 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 								children: /* @__PURE__ */ jsx("span", {
 									className: cx("col-value"),
 									style: {
-										fontSize: token$1.fontSize,
+										fontSize: token.fontSize,
 										lineHeight: "20px",
 										overflow: "hidden",
 										textOverflow: "ellipsis",
@@ -5401,7 +5459,7 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 							children: /* @__PURE__ */ jsx(Button, {
 								danger: true,
 								type: "text",
-								icon: /* @__PURE__ */ jsx(trash_default, {
+								icon: /* @__PURE__ */ jsx(Trash, {
 									width: 32,
 									height: 32
 								}),
@@ -5508,7 +5566,7 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 							children: /* @__PURE__ */ jsx(Button, {
 								danger: true,
 								type: "text",
-								icon: /* @__PURE__ */ jsx(trash_default, {
+								icon: /* @__PURE__ */ jsx(Trash, {
 									width: 32,
 									height: 32
 								}),
@@ -5541,7 +5599,6 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 		}))]
 	}));
 };
-
 //#endregion
 //#region src/view/components/ApiPage/components/AddTagDrawer.tsx
 const TAG_NAME_REGEX = /^[A-Za-z0-9_-]+$/;
@@ -5555,11 +5612,11 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 	const tagNameValue = Form.useWatch("name", form);
 	const extDocsDesc = Form.useWatch("externalDocsDescription", form);
 	const extDocsLink = Form.useWatch("externalDocsLink", form);
-	const { wrapSSR, cx, token: token$1 } = useStyle("AddTagDrawer", (token$2, scope) => ({
+	const { wrapSSR, cx, token } = useStyle("AddTagDrawer", (token, scope) => ({
 		[scope("title")]: {
 			fontSize: 16,
 			fontWeight: 600,
-			color: token$2.colorTextBase,
+			color: token.colorTextBase,
 			lineHeight: "24px",
 			fontFamily: "Cairo SemiBold, Cairo, sans-serif"
 		},
@@ -5570,25 +5627,25 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 			"& .ant-form-item": { marginBottom: 0 }
 		},
 		[scope("label")]: {
-			fontSize: token$2.fontSize,
-			color: token$2.colorText
+			fontSize: token.fontSize,
+			color: token.colorText
 		},
 		[scope("asterisk")]: {
-			color: token$2.colorError,
+			color: token.colorError,
 			marginLeft: 2
 		},
 		[scope("label-optional")]: {
-			color: token$2.colorTextTertiary,
+			color: token.colorTextTertiary,
 			marginLeft: 4,
-			fontSize: token$2.fontSize
+			fontSize: token.fontSize
 		},
 		[scope("label-secondary")]: {
-			fontSize: token$2.fontSize,
-			color: token$2.colorTextSecondary
+			fontSize: token.fontSize,
+			color: token.colorTextSecondary
 		},
 		[scope("label-disabled")]: {
-			fontSize: token$2.fontSize,
-			color: token$2.colorTextDisabled
+			fontSize: token.fontSize,
+			color: token.colorTextDisabled
 		},
 		[scope("footer")]: {
 			display: "flex",
@@ -5625,7 +5682,7 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 			fontSize: 16,
 			fontWeight: 400,
 			lineHeight: "24px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("modalCloseBtn")]: {
 			position: "absolute",
@@ -5641,12 +5698,12 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 			border: "none",
 			background: "transparent",
 			padding: 0,
-			color: token$2.colorTextTertiary,
+			color: token.colorTextTertiary,
 			fontSize: 16,
 			lineHeight: 1,
 			"&:hover": {
-				color: token$2.colorText,
-				backgroundColor: token$2.colorFillSecondary
+				color: token.colorText,
+				backgroundColor: token.colorFillSecondary
 			}
 		},
 		[scope("modalContent")]: {
@@ -5663,7 +5720,7 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 			fontSize: 14,
 			fontWeight: 400,
 			lineHeight: "22px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("modalFooter")]: {
 			display: "flex",
@@ -5740,14 +5797,14 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 			styles: {
 				header: {
 					padding: "16px 24px",
-					borderBottom: `1px solid ${token$1.colorFillSecondary}`,
-					background: token$1.colorBgBase
+					borderBottom: `1px solid ${token.colorFillSecondary}`,
+					background: token.colorBgBase
 				},
 				body: { padding: "24px" },
 				footer: {
 					padding: "24px",
-					background: token$1.colorPrimaryBg,
-					borderTop: `1px solid ${token$1.colorFillSecondary}`
+					background: token.colorPrimaryBg,
+					borderTop: `1px solid ${token.colorFillSecondary}`
 				}
 			},
 			footer: /* @__PURE__ */ jsxs("div", {
@@ -5948,9 +6005,9 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 							borderRadius: 8,
 							height: 32,
 							paddingInline: 16,
-							backgroundColor: token$1.colorPrimary,
-							borderColor: token$1.colorPrimary,
-							boxShadow: `0px 2px 0px ${token$1.colorPrimaryBg}`
+							backgroundColor: token.colorPrimary,
+							borderColor: token.colorPrimary,
+							boxShadow: `0px 2px 0px ${token.colorPrimaryBg}`
 						},
 						children: confirmBtnLabel
 					})]
@@ -5959,7 +6016,6 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 		})
 	] }));
 };
-
 //#endregion
 //#region src/view/helper/mutate.ts
 const resolveSchema = (schema, components) => {
@@ -6044,44 +6100,32 @@ const transformOpenApiToDocs = (api) => {
 		curl
 	};
 };
-
 //#endregion
-//#region src/assets/copy.svg
-var _path, _path2;
-function _extends() {
-	return _extends = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends.apply(null, arguments);
-}
-var SvgCopy = function SvgCopy$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 16,
-		height: 16,
-		fill: "none"
-	}, props), _path || (_path = /* @__PURE__ */ React.createElement("path", {
-		fill: "currentcolor",
-		d: "M7.4 15.167H4.6c-2.607 0-3.767-1.16-3.767-3.766V8.6c0-2.607 1.16-3.767 3.767-3.767h2.8c2.606 0 3.766 1.16 3.766 3.767v2.8c0 2.606-1.16 3.766-3.766 3.766M4.6 5.834c-2.067 0-2.767.7-2.767 2.767v2.8c0 2.066.7 2.766 2.767 2.766h2.8c2.066 0 2.766-.7 2.766-2.766V8.6c0-2.067-.7-2.767-2.766-2.767z"
-	})), _path2 || (_path2 = /* @__PURE__ */ React.createElement("path", {
-		fill: "currentcolor",
-		d: "M11.4 11.167h-.734a.504.504 0 0 1-.5-.5V8.601c0-2.067-.7-2.767-2.766-2.767H5.333a.504.504 0 0 1-.5-.5v-.733C4.833 1.994 5.993.834 8.6.834h2.8c2.606 0 3.766 1.16 3.766 3.767v2.8c0 2.606-1.16 3.766-3.766 3.766m-.234-1h.234c2.066 0 2.766-.7 2.766-2.766V4.6c0-2.067-.7-2.767-2.766-2.767H8.6c-2.067 0-2.767.7-2.767 2.767v.233H7.4c2.606 0 3.766 1.16 3.766 3.767z"
-	})));
-};
-var copy_default = SvgCopy;
-
+//#region src/assets/copy.tsx
+const Copy = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M7.39967 15.1673H4.59967C1.99301 15.1673 0.833008 14.0073 0.833008 11.4007V8.60065C0.833008 5.99398 1.99301 4.83398 4.59967 4.83398H7.39967C10.0063 4.83398 11.1663 5.99398 11.1663 8.60065V11.4007C11.1663 14.0073 10.0063 15.1673 7.39967 15.1673ZM4.59967 5.83398C2.53301 5.83398 1.83301 6.53398 1.83301 8.60065V11.4007C1.83301 13.4673 2.53301 14.1673 4.59967 14.1673H7.39967C9.46634 14.1673 10.1663 13.4673 10.1663 11.4007V8.60065C10.1663 6.53398 9.46634 5.83398 7.39967 5.83398H4.59967Z",
+		fill: "currentcolor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M11.3997 11.1673H10.6663C10.393 11.1673 10.1663 10.9407 10.1663 10.6673V8.60065C10.1663 6.53398 9.46634 5.83398 7.39967 5.83398H5.33301C5.05967 5.83398 4.83301 5.60732 4.83301 5.33398V4.60065C4.83301 1.99398 5.99301 0.833984 8.59967 0.833984H11.3997C14.0063 0.833984 15.1663 1.99398 15.1663 4.60065V7.40065C15.1663 10.0073 14.0063 11.1673 11.3997 11.1673ZM11.1663 10.1673H11.3997C13.4663 10.1673 14.1663 9.46732 14.1663 7.40065V4.60065C14.1663 2.53398 13.4663 1.83398 11.3997 1.83398H8.59967C6.53301 1.83398 5.83301 2.53398 5.83301 4.60065V4.83398H7.39967C10.0063 4.83398 11.1663 5.99398 11.1663 8.60065V10.1673Z",
+		fill: "currentcolor"
+	})]
+});
 //#endregion
 //#region src/view/components/EndpointPage/Codebox/Codebox.tsx
 Light.registerLanguage("json", json);
 const Codebox = ({ code, language, wrapLongLines }) => {
 	const [appTheme] = useState("DARK");
-	const { token: token$1, theme: themeConfig } = theme.useToken();
-	const bodyBg = themeConfig.id == 1 ? token$1.colorBgContainer : "#1d2856";
-	const { cx } = useStyle("codeBox", (token$2, scope) => ({ [scope("codebox")]: {
-		borderRadius: token$2.borderRadius,
+	const { token, theme: themeConfig } = theme.useToken();
+	const bodyBg = themeConfig.id == 1 ? token.colorBgContainer : "#1d2856";
+	const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: {
+		borderRadius: token.borderRadius,
 		height: "100%",
 		maxHeight: "100%",
 		overflow: "auto",
@@ -6108,12 +6152,10 @@ const Codebox = ({ code, language, wrapLongLines }) => {
 		})
 	});
 };
-var Codebox_default = Codebox;
-
 //#endregion
 //#region src/view/components/CodeboxSidebar.tsx
 function CodeboxSidebar() {
-	const { selectedEndpoint, selectedApi, activeRequestTab, selectedStatusCode, statusCodeOptions, setSelectedStatusCode } = store_default(({ view }) => view);
+	const { selectedEndpoint, selectedApi, activeRequestTab, selectedStatusCode, statusCodeOptions, setSelectedStatusCode } = useStore(({ view }) => view);
 	const httpStatusOptions = useMemo(() => statusCodeOptions.map((code) => ({
 		value: code,
 		label: /* @__PURE__ */ jsxs("span", {
@@ -6287,7 +6329,7 @@ function CodeboxSidebar() {
 							setCurlTooltip("Copied!");
 							setTimeout(() => setCurlTooltip("Copy cURL"), 1500);
 						},
-						icon: /* @__PURE__ */ jsx(copy_default, { style: { color: "white" } })
+						icon: /* @__PURE__ */ jsx(Copy, { style: { color: "white" } })
 					})
 				})]
 			}), /* @__PURE__ */ jsx("div", {
@@ -6317,12 +6359,10 @@ function CodeboxSidebar() {
 					open: httpStatusOptions.length === 1 ? false : void 0,
 					suffixIcon: httpStatusOptions.length > 1 ? void 0 : false
 				})]
-			}), /* @__PURE__ */ jsx(Codebox_default, { code: JSON.stringify(selectedEndpoint?.responses[selectedStatusCode], null, 2) || "" })]
+			}), /* @__PURE__ */ jsx(Codebox, { code: JSON.stringify(selectedEndpoint?.responses[selectedStatusCode], null, 2) || "" })]
 		})]
 	});
 }
-var CodeboxSidebar_default = CodeboxSidebar;
-
 //#endregion
 //#region src/view/layout.tsx
 const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onSave }) => {
@@ -6352,11 +6392,11 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 	});
 	const [localTags, setLocalTags] = useState([]);
 	const [messageApi, contextHolder] = message.useMessage();
-	const { focusedContent, selectedNodeKey, selectedApi, originalData, builtTreeData, selectedEndpoint, setOriginalData, setTransformedData, setBuiltTreeData, setFocusedContent, setExpandedKeys, setSelectedEndpoint } = store_default(({ view }) => view);
+	const { focusedContent, selectedNodeKey, selectedApi, originalData, builtTreeData, selectedEndpoint, setOriginalData, setTransformedData, setBuiltTreeData, setFocusedContent, setExpandedKeys, setSelectedEndpoint } = useStore(({ view }) => view);
 	const { selectFirstApi, selectPreSelectedApi, clearSelection } = useNodeSelection();
 	const hasInitializedRef = useRef(false);
-	const { useBreakpoint: useBreakpoint$5 } = Grid;
-	const isMobile = !useBreakpoint$5().md;
+	const { useBreakpoint } = Grid;
+	const isMobile = !useBreakpoint().md;
 	useEffect(() => {
 		return () => {
 			resetStore();
@@ -6398,11 +6438,11 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 		selectedApi,
 		selectFirstApi
 	]);
-	const { cx, token: token$1 } = useStyle("APIDocumentationLayout", (token$2, scope) => ({
+	const { cx, token } = useStyle("APIDocumentationLayout", (token, scope) => ({
 		[scope("documentation-container")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.marginLG,
+			gap: token.marginLG,
 			height: "100%",
 			overflowY: "auto"
 		},
@@ -6414,7 +6454,7 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 			display: "flex",
 			flexShrink: 0,
 			height: "auto",
-			gap: token$2.marginLG,
+			gap: token.marginLG,
 			width: "100%"
 		},
 		[".delete-tag-confirm-modal .ant-modal-container"]: {
@@ -6436,7 +6476,7 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 			fontSize: 16,
 			fontWeight: 400,
 			lineHeight: "24px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("deleteModalCloseBtn")]: {
 			position: "absolute",
@@ -6452,12 +6492,12 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 			border: "none",
 			background: "transparent",
 			padding: 0,
-			color: token$2.colorTextTertiary,
+			color: token.colorTextTertiary,
 			fontSize: 16,
 			lineHeight: 1,
 			"&:hover": {
-				color: token$2.colorText,
-				backgroundColor: token$2.colorFillSecondary
+				color: token.colorText,
+				backgroundColor: token.colorFillSecondary
 			}
 		},
 		[scope("deleteModalContent")]: {
@@ -6474,7 +6514,7 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 			fontSize: 14,
 			fontWeight: 400,
 			lineHeight: "22px",
-			color: token$2.colorText
+			color: token.colorText
 		},
 		[scope("deleteModalFooter")]: {
 			display: "flex",
@@ -6763,7 +6803,7 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 		style: {
 			display: "flex",
 			alignItems: "center",
-			background: token$1.colorBgLayout,
+			background: token.colorBgLayout,
 			padding: "4px",
 			borderRadius: 8,
 			gap: 8
@@ -6778,12 +6818,12 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 				border: "none",
 				cursor: "pointer",
 				borderRadius: 8,
-				fontFamily: token$1.fontFamily,
-				background: mode === "edit" ? token$1.colorBgContainer : "transparent",
+				fontFamily: token.fontFamily,
+				background: mode === "edit" ? token.colorBgContainer : "transparent",
 				boxShadow: mode === "edit" ? "0px 2px 4px -2px rgba(17,12,34,0.12)" : "none",
 				fontWeight: mode === "edit" ? 700 : 400,
-				fontSize: mode === "edit" ? token$1.fontSize : token$1.fontSizeLG,
-				color: token$1.colorText
+				fontSize: mode === "edit" ? token.fontSize : token.fontSizeLG,
+				color: token.colorText
 			},
 			children: [/* @__PURE__ */ jsx(EditOutlined, { style: { fontSize: 18 } }), "Edit"]
 		}), /* @__PURE__ */ jsxs("button", {
@@ -6796,12 +6836,12 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 				border: "none",
 				cursor: "pointer",
 				borderRadius: 8,
-				fontFamily: token$1.fontFamily,
-				background: mode === "view" ? token$1.colorBgContainer : "transparent",
+				fontFamily: token.fontFamily,
+				background: mode === "view" ? token.colorBgContainer : "transparent",
 				boxShadow: mode === "view" ? "0px 2px 4px -2px rgba(17,12,34,0.12)" : "none",
 				fontWeight: mode === "view" ? 700 : 400,
-				fontSize: mode === "view" ? token$1.fontSize : token$1.fontSizeLG,
-				color: token$1.colorText
+				fontSize: mode === "view" ? token.fontSize : token.fontSizeLG,
+				color: token.colorText
 			},
 			children: [/* @__PURE__ */ jsx(EyeOutlined, { style: { fontSize: 18 } }), "View"]
 		})]
@@ -6966,7 +7006,7 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 						handleResetSearch,
 						searchEnabled: !!searchValue
 					}),
-					!isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar_default, {})
+					!isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar, {})
 				]
 			}),
 			/* @__PURE__ */ jsx(AddTagDrawer, {
@@ -7066,7 +7106,102 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 		]
 	});
 };
-
 //#endregion
-export { ApiDocumentationBar, DocumentationLayout, useStore };
-//# sourceMappingURL=index.js.map
+//#region src/view/devportal-layout.tsx
+const DevportalDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage }) => {
+	const [searchValue, setSearchValue] = useState("");
+	const { focusedContent, selectedNodeKey, selectedApi, builtTreeData, setOriginalData, setTransformedData, setBuiltTreeData, setFocusedContent, setExpandedKeys } = useStore(({ view }) => view);
+	const { selectFirstApi, selectPreSelectedApi, clearSelection } = useNodeSelection();
+	const hasInitializedRef = useRef(false);
+	useEffect(() => {
+		return () => {
+			resetStore();
+		};
+	}, []);
+	const resetStore = () => {
+		setExpandedKeys([]);
+		setFocusedContent(null);
+		setBuiltTreeData([]);
+		setTransformedData([]);
+		setOriginalData([]);
+		setSearchValue("");
+		clearSelection();
+		hasInitializedRef.current = false;
+	};
+	useEffect(() => {
+		if (!hasInitializedRef.current && data.length > 0) {
+			setOriginalData(data);
+			const transformedData = data.map(transformOpenApiToDocs).sort((a, b) => a.title.localeCompare(b.title));
+			setTransformedData(transformedData);
+			setBuiltTreeData(buildTreeDataStructure(transformedData));
+			hasInitializedRef.current = true;
+		}
+	}, [
+		data,
+		setOriginalData,
+		setTransformedData,
+		setBuiltTreeData
+	]);
+	useEffect(() => {
+		if (builtTreeData && builtTreeData.length > 0 && !selectedApi && !selectedNodeKey && hasInitializedRef.current) {
+			if (!preSelectedApi) selectFirstApi(builtTreeData);
+			else selectPreSelectedApi(builtTreeData, preSelectedApi);
+			hasInitializedRef.current = false;
+		}
+	}, [
+		builtTreeData,
+		selectedNodeKey,
+		selectedApi,
+		selectFirstApi
+	]);
+	const { cx } = useStyle("APIDocumentationLayout", (token, scope) => ({
+		[scope("documentation-container")]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: token.marginLG,
+			height: "100%",
+			maxHeight: "100%",
+			overflow: "hidden"
+		},
+		[scope("docs-layout")]: {
+			display: "flex",
+			height: "100%",
+			maxHeight: "100%",
+			overflow: "hidden",
+			gap: token.marginLG,
+			width: "100%"
+		}
+	}));
+	const handleResetSearch = () => {
+		setSearchValue("");
+	};
+	const _handleVisitLandingPage = () => {
+		if (handleVisitLandingPage) {
+			handleVisitLandingPage();
+			return;
+		}
+		window.location.pathname = "/";
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("documentation-container"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("docs-layout"),
+			children: [
+				/* @__PURE__ */ jsx(Sidebar, {
+					searchValue,
+					setSearchValue
+				}),
+				/* @__PURE__ */ jsx(MainContent, {
+					handleVisitLandingPage: _handleVisitLandingPage,
+					handleResetSearch,
+					searchEnabled: !!searchValue
+				}),
+				focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar, {})
+			]
+		})
+	});
+};
+//#endregion
+export { ApiDocumentationBar, DevportalDocumentationLayout, DocumentationLayout, useStore };
+
+//# sourceMappingURL=index.mjs.map