@tanstack/router-devtools 1.111.11 → 1.112.4

package/dist/esm/TanStackRouterDevtools.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import React__default from "react";
+import { ShadowDomTargetContext, DevtoolsOnCloseContext } from "./context.js";
+import { useSafeState, useIsMounted } from "./utils.js";
+import { BaseTanStackRouterDevtoolsPanel } from "./BaseTanStackRouterDevtoolsPanel.js";
+import useLocalStorage from "./useLocalStorage.js";
+import { TanStackLogo } from "./logo.js";
+import { useStyles } from "./useStyles.js";
+function TanStackRouterDevtools(props) {
+  const { shadowDOMTarget } = props;
+  return /* @__PURE__ */ jsx(ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsx(FloatingTanStackRouterDevtools, { ...props }) });
+}
+function FloatingTanStackRouterDevtools({
+  initialIsOpen,
+  panelProps = {},
+  closeButtonProps = {},
+  toggleButtonProps = {},
+  position = "bottom-left",
+  containerElement: Container = "footer",
+  router,
+  shadowDOMTarget
+}) {
+  const [rootEl, setRootEl] = React__default.useState();
+  const panelRef = React__default.useRef(null);
+  const [isOpen, setIsOpen] = useLocalStorage(
+    "tanstackRouterDevtoolsOpen",
+    initialIsOpen
+  );
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage(
+    "tanstackRouterDevtoolsHeight",
+    null
+  );
+  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
+  const [isResizing, setIsResizing] = useSafeState(false);
+  const isMounted = useIsMounted();
+  const styles = useStyles();
+  const handleDragStart = (panelElement, startEvent) => {
+    if (startEvent.button !== 0) return;
+    setIsResizing(true);
+    const dragInfo = {
+      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
+      pageY: startEvent.pageY
+    };
+    const run = (moveEvent) => {
+      const delta = dragInfo.pageY - moveEvent.pageY;
+      const newHeight = dragInfo.originalHeight + delta;
+      setDevtoolsHeight(newHeight);
+      if (newHeight < 70) {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    };
+    const unsub = () => {
+      setIsResizing(false);
+      document.removeEventListener("mousemove", run);
+      document.removeEventListener("mouseUp", unsub);
+    };
+    document.addEventListener("mousemove", run);
+    document.addEventListener("mouseup", unsub);
+  };
+  const isButtonClosed = isOpen ?? false;
+  React__default.useEffect(() => {
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
+  React__default.useEffect(() => {
+    var _a;
+    if (isResolvedOpen) {
+      const previousValue = (_a = rootEl == null ? void 0 : rootEl.parentElement) == null ? void 0 : _a.style.paddingBottom;
+      const run = () => {
+        var _a2;
+        const containerHeight = (_a2 = panelRef.current) == null ? void 0 : _a2.getBoundingClientRect().height;
+        if (rootEl == null ? void 0 : rootEl.parentElement) {
+          rootEl.parentElement.style.paddingBottom = `${containerHeight}px`;
+        }
+      };
+      run();
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", run);
+        return () => {
+          window.removeEventListener("resize", run);
+          if ((rootEl == null ? void 0 : rootEl.parentElement) && typeof previousValue === "string") {
+            rootEl.parentElement.style.paddingBottom = previousValue;
+          }
+        };
+      }
+    }
+    return;
+  }, [isResolvedOpen, rootEl == null ? void 0 : rootEl.parentElement]);
+  React__default.useEffect(() => {
+    if (rootEl) {
+      const el = rootEl;
+      const fontSize = getComputedStyle(el).fontSize;
+      el.style.setProperty("--tsrd-font-size", fontSize);
+    }
+  }, [rootEl]);
+  const { style: panelStyle = {}, ...otherPanelProps } = panelProps;
+  const {
+    style: closeButtonStyle = {},
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
+  const {
+    onClick: onToggleClick,
+    className: toggleButtonClassName,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
+  if (!isMounted) return null;
+  const resolvedHeight = devtoolsHeight ?? 500;
+  return /* @__PURE__ */ jsxs(Container, { ref: setRootEl, className: "TanStackRouterDevtools", children: [
+    /* @__PURE__ */ jsx(
+      DevtoolsOnCloseContext.Provider,
+      {
+        value: {
+          onCloseClick: onCloseClick ?? (() => {
+          })
+        },
+        children: /* @__PURE__ */ jsx(
+          BaseTanStackRouterDevtoolsPanel,
+          {
+            ref: panelRef,
+            ...otherPanelProps,
+            router,
+            className: clsx(
+              styles.devtoolsPanelContainer,
+              styles.devtoolsPanelContainerVisibility(!!isOpen),
+              styles.devtoolsPanelContainerResizing(isResizing),
+              styles.devtoolsPanelContainerAnimation(
+                isResolvedOpen,
+                resolvedHeight + 16
+              )
+            ),
+            style: {
+              height: resolvedHeight,
+              ...panelStyle
+            },
+            isOpen: isResolvedOpen,
+            setIsOpen,
+            handleDragStart: (e) => handleDragStart(panelRef.current, e),
+            shadowDOMTarget
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        ...otherToggleButtonProps,
+        "aria-label": "Open TanStack Router Devtools",
+        onClick: (e) => {
+          setIsOpen(true);
+          onToggleClick && onToggleClick(e);
+        },
+        className: clsx(
+          styles.mainCloseBtn,
+          styles.mainCloseBtnPosition(position),
+          styles.mainCloseBtnAnimation(!isButtonClosed),
+          toggleButtonClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.mainCloseBtnIconContainer, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconOuter, children: /* @__PURE__ */ jsx(TanStackLogo, {}) }),
+            /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconInner, children: /* @__PURE__ */ jsx(TanStackLogo, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnDivider, children: "-" }),
+          /* @__PURE__ */ jsx("div", { className: styles.routerLogoCloseButton, children: "TanStack Router" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TanStackRouterDevtools
+};
+//# sourceMappingURL=TanStackRouterDevtools.js.map

package/dist/esm/TanStackRouterDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport React from 'react'\nimport { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'\nimport { useIsMounted, useSafeState } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { AnyRouter } from '@tanstack/react-router'\n\ninterface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function TanStackRouterDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const { shadowDOMTarget } = props\n\n  return (\n    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n      <FloatingTanStackRouterDevtools {...props} />\n    </ShadowDomTargetContext.Provider>\n  )\n}\n\nfunction FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  shadowDOMTarget,\n}: DevtoolsOptions): React.ReactElement | null {\n  const [rootEl, setRootEl] = React.useState<HTMLDivElement>()\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)\n  const [isResizing, setIsResizing] = useSafeState(false)\n  const isMounted = useIsMounted()\n  const styles = useStyles()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  const isButtonClosed = isOpen ?? false\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  React.useEffect(() => {\n    if (isResolvedOpen) {\n      const previousValue = rootEl?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef.current?.getBoundingClientRect().height\n        if (rootEl?.parentElement) {\n          rootEl.parentElement.style.paddingBottom = `${containerHeight}px`\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl?.parentElement && typeof previousValue === 'string') {\n            rootEl.parentElement.style.paddingBottom = previousValue\n          }\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen, rootEl?.parentElement])\n\n  React.useEffect(() => {\n    if (rootEl) {\n      const el = rootEl\n      const fontSize = getComputedStyle(el).fontSize\n      el.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  }, [rootEl])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    className: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted) return null\n\n  const resolvedHeight = devtoolsHeight ?? 500\n\n  return (\n    <Container ref={setRootEl} className=\"TanStackRouterDevtools\">\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          className={cx(\n            styles.devtoolsPanelContainer,\n            styles.devtoolsPanelContainerVisibility(!!isOpen),\n            styles.devtoolsPanelContainerResizing(isResizing),\n            styles.devtoolsPanelContainerAnimation(\n              isResolvedOpen,\n              resolvedHeight + 16,\n            ),\n          )}\n          style={{\n            height: resolvedHeight,\n            ...panelStyle,\n          }}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n      </DevtoolsOnCloseContext.Provider>\n\n      <button\n        type=\"button\"\n        {...otherToggleButtonProps}\n        aria-label=\"Open TanStack Router Devtools\"\n        onClick={(e) => {\n          setIsOpen(true)\n          onToggleClick && onToggleClick(e)\n        }}\n        className={cx(\n          styles.mainCloseBtn,\n          styles.mainCloseBtnPosition(position),\n          styles.mainCloseBtnAnimation(!isButtonClosed),\n          toggleButtonClassName,\n        )}\n      >\n        <div className={styles.mainCloseBtnIconContainer}>\n          <div className={styles.mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div className={styles.mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div className={styles.mainCloseBtnDivider}>-</div>\n        <div className={styles.routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Container>\n  )\n}\n"],"names":["React","_a","cx"],"mappings":"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"}

package/dist/esm/TanStackRouterDevtoolsPanel.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { AnyRouter } from '@tanstack/react-router';
+export interface DevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * The standard React className property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/TanStackRouterDevtoolsPanel.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { ShadowDomTargetContext, DevtoolsOnCloseContext } from "./context.js";
+import { BaseTanStackRouterDevtoolsPanel } from "./BaseTanStackRouterDevtoolsPanel.js";
+const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackRouterDevtoolsPanel2(props, ref) {
+  const { shadowDOMTarget } = props;
+  return /* @__PURE__ */ jsx(ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsx(
+    DevtoolsOnCloseContext.Provider,
+    {
+      value: {
+        onCloseClick: () => {
+        }
+      },
+      children: /* @__PURE__ */ jsx(BaseTanStackRouterDevtoolsPanel, { ref, ...props })
+    }
+  ) });
+});
+export {
+  TanStackRouterDevtoolsPanel
+};
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map

package/dist/esm/TanStackRouterDevtoolsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import React from 'react'\nimport { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport type { AnyRouter } from '@tanstack/react-router'\n\nexport interface DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * The standard React className property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n  HTMLDivElement,\n  DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(props, ref) {\n  const { shadowDOMTarget } = props\n\n  return (\n    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: () => {},\n        }}\n      >\n        <BaseTanStackRouterDevtoolsPanel ref={ref} {...props} />\n      </DevtoolsOnCloseContext.Provider>\n    </ShadowDomTargetContext.Provider>\n  )\n})\n"],"names":["React","TanStackRouterDevtoolsPanel"],"mappings":";;;;AAoCO,MAAM,8BAA8BA,eAAM,WAG/C,SAASC,6BAA4B,OAAO,KAAK;AAC3C,QAAA,EAAE,oBAAoB;AAE5B,SACG,oBAAA,uBAAuB,UAAvB,EAAgC,OAAO,iBACtC,UAAA;AAAA,IAAC,uBAAuB;AAAA,IAAvB;AAAA,MACC,OAAO;AAAA,QACL,cAAc,MAAM;AAAA,QAAA;AAAA,MACtB;AAAA,MAEA,UAAC,oBAAA,iCAAA,EAAgC,KAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA,GAE1D;AAEJ,CAAC;"}

package/dist/esm/index.d.ts

@@ -1 +1,2 @@
-export { TanStackRouterDevtools, TanStackRouterDevtoolsPanel } from './devtools.js';
+export { TanStackRouterDevtools } from './TanStackRouterDevtools.js';
+export { TanStackRouterDevtoolsPanel } from './TanStackRouterDevtoolsPanel.js';

package/dist/esm/index.js

@@ -1,4 +1,5 @@
-import { TanStackRouterDevtools, TanStackRouterDevtoolsPanel } from "./devtools.js";
+import { TanStackRouterDevtools } from "./TanStackRouterDevtools.js";
+import { TanStackRouterDevtoolsPanel } from "./TanStackRouterDevtoolsPanel.js";
 export {
   TanStackRouterDevtools,
   TanStackRouterDevtoolsPanel

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/esm/useStyles.d.ts

@@ -0,0 +1,52 @@
+export declare function useStyles(): {
+    devtoolsPanelContainer: string;
+    devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
+    devtoolsPanelContainerResizing: (isResizing: boolean) => string;
+    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
+    logo: string;
+    tanstackLogo: string;
+    routerLogo: string;
+    devtoolsPanel: string;
+    dragHandle: string;
+    firstContainer: string;
+    routerExplorerContainer: string;
+    routerExplorer: string;
+    row: string;
+    detailsHeader: string;
+    maskedBadge: string;
+    maskedLocation: string;
+    detailsContent: string;
+    routeMatchesToggle: string;
+    routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => string[];
+    detailsHeaderInfo: string;
+    matchRow: (active: boolean) => string[];
+    matchIndicator: (color: "green" | "red" | "yellow" | "gray" | "blue" | "purple") => string[];
+    matchID: string;
+    ageTicker: (showWarning: boolean) => string[];
+    secondContainer: string;
+    thirdContainer: string;
+    fourthContainer: string;
+    routesContainer: string;
+    routesRowContainer: (active: boolean, isMatch: boolean) => string[];
+    routesRow: (isMatch: boolean) => string[];
+    routeParamInfo: string;
+    nestedRouteRow: (isRoot: boolean) => string;
+    code: string;
+    matchesContainer: string;
+    cachedMatchesContainer: string;
+    maskedBadgeContainer: string;
+    matchDetails: string;
+    matchStatus: (status: "pending" | "success" | "error" | "notFound" | "redirected", isFetching: false | "beforeLoad" | "loader") => string;
+    matchDetailsInfo: string;
+    matchDetailsInfoLabel: string;
+    mainCloseBtn: string;
+    mainCloseBtnPosition: (position: "top-left" | "top-right" | "bottom-left" | "bottom-right") => string;
+    mainCloseBtnAnimation: (isOpen: boolean) => string;
+    routerLogoCloseButton: string;
+    mainCloseBtnDivider: string;
+    mainCloseBtnIconContainer: string;
+    mainCloseBtnIconOuter: string;
+    mainCloseBtnIconInner: string;
+    panelCloseBtn: string;
+    panelCloseBtnIcon: string;
+};