@pnkx-lib/ui 1.5.3 → 1.5.5

package/es/chunks/{Divider-RlbRBxOQ.js → Image-CFyQxi2B.js}

@@ -1,10 +1,10 @@
-import { j as jsxRuntimeExports, b as Icon, _ as _extends, c as _typeof, u as useForm, P as PnkxField, I as Input, d as className, e as _arrayLikeToArray, f as _unsupportedIterableToArray, w as warningOnce, h as _createClass, i as _classCallCheck, k as _defineProperty, l as _slicedToArray, m as warning$1, n as canUseDom, o as _objectSpread2, p as updateCSS, r as removeCSS, q as _arrayWithHoles, s as _nonIterableRest, t as resetWarned$1, F as FastColor, v as generate, x as presetPrimaryColors, y as presetPalettes, z as _inherits, A as _createSuper, B as _assertThisInitialized, C as _objectWithoutProperties, G as IconContext } from './Switch-DKjEDP4L.js';
-import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Popconfirm, Typography, Table as Table$1, Modal as Modal$1, Tooltip as Tooltip$1, Tabs as Tabs$1, Popover as Popover$1, Badge as Badge$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Breadcrumb as Breadcrumb$1, Flex as Flex$1, Splitter as Splitter$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Tag as Tag$1, Divider as Divider$2 } from 'antd';
+import { j as jsxRuntimeExports, b as Icon, _ as _extends, c as _typeof, u as useForm, P as PnkxField, I as Input, d as classNames, e as _arrayLikeToArray, f as _unsupportedIterableToArray, w as warningOnce, h as _createClass, i as _classCallCheck, k as _defineProperty, l as _slicedToArray, m as warning$1, n as canUseDom, o as _objectSpread2, p as updateCSS, r as removeCSS, q as _arrayWithHoles, s as _nonIterableRest, t as resetWarned$1, F as FastColor, v as generate, x as presetPrimaryColors, y as presetPalettes, z as _inherits, A as _createSuper, B as _assertThisInitialized, C as _objectWithoutProperties, G as IconContext } from './Switch-eMq9KkOy.js';
+import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Popconfirm as Popconfirm$1, Typography, Table as Table$1, Modal as Modal$1, Tooltip as Tooltip$1, Tabs as Tabs$1, Popover as Popover$1, Badge as Badge$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Breadcrumb as Breadcrumb$1, Flex as Flex$1, Splitter as Splitter$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Tag as Tag$1, Divider as Divider$2, Alert as Alert$1, Spin as Spin$1, Drawer as Drawer$1, QRCode as QRCode$1, Result as Result$1, Rate as Rate$1, Segmented as Segmented$1, Statistic as Statistic$1, Timeline as Timeline$1, Tour as Tour$1, Tree as Tree$1, Watermark as Watermark$1, Anchor as Anchor$1, Affix, AutoComplete as AutoComplete$1, Input as Input$1, Collapse, ColorPicker, Empty as Empty$2, Image as Image$1 } from 'antd';
 import * as React from 'react';
 import React__default, { version as version$1, isValidElement, useState, useEffect, useContext, createContext, useRef, useLayoutEffect as useLayoutEffect$1, useMemo as useMemo$1 } from 'react';
-import ReactDOM__default from 'react-dom';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { u as useToast } from './cloneDeep-BLYi2V0G.js';
+import ReactDOM__default from 'react-dom';
 
 const Button = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { ...props });
@@ -2299,7 +2299,7 @@ const Table = ({
         const editable2 = isEditing(record);
         return editable2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Popconfirm,
+            Popconfirm$1,
             {
               title: "Bạn có chắc chắn muốn huỷ chỉnh sửa?",
               onConfirm: cancel,
@@ -2318,7 +2318,7 @@ const Table = ({
               color: "blue"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm, { title: "Bạn có muốn xoá ?", onConfirm: () => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm$1, { title: "Bạn có muốn xoá ?", onConfirm: () => {
           }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Button,
             {
@@ -2407,12 +2407,7 @@ const Table = ({
   return renderTableContent();
 };
 
-const Modal = ({
-  children,
-  onOk,
-  onSubmit,
-  ...rest
-}) => {
+const Modal = ({ children, onOk, onSubmit, ...rest }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal$1, { onOk: onSubmit ? onSubmit : onOk, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[20rem] overflow-y-auto", children: onSubmit ? /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit, children }) : children }) });
 };
 
@@ -2548,13 +2543,13 @@ const SearchFiltersForm = ({
 
 const Container = ({
   children,
-  className: className$1,
+  className,
   size
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: className(size, "mx-auto px-4 sm:px-6 lg:px-8", className$1),
+      className: classNames(size, "mx-auto px-4 sm:px-6 lg:px-8", className),
       children
     }
   );
@@ -4359,7 +4354,7 @@ var parseStyle = function parseStyle(interpolation) {
 function uniqueHash(path, styleStr) {
   return murmur2("".concat(path.join('%')).concat(styleStr));
 }
-function Empty() {
+function Empty$1() {
   return null;
 }
 var STYLE_PREFIX = 'style';
@@ -4509,7 +4504,7 @@ function useStyleRegister(info, styleFn) {
   return function (node) {
     var styleNode;
     if (!ssrInline || isMergedClientSide || !defaultCache) {
-      styleNode = /*#__PURE__*/React.createElement(Empty, null);
+      styleNode = /*#__PURE__*/React.createElement(Empty$1, null);
     } else {
       var _ref6;
       styleNode = /*#__PURE__*/React.createElement("style", _extends({}, (_ref6 = {}, _defineProperty(_ref6, ATTR_TOKEN, cachedTokenKey), _defineProperty(_ref6, ATTR_MARK, cachedStyleId), _ref6), {
@@ -7350,7 +7345,7 @@ function genCSSMotion(config) {
       }
       var motionCls = getTransitionName(motionName, "".concat(status, "-").concat(statusSuffix));
       motionChildren = children(_objectSpread2(_objectSpread2({}, mergedProps), {}, {
-        className: className(getTransitionName(motionName, status), _defineProperty(_defineProperty({}, motionCls, motionCls && statusSuffix), motionName, typeof motionName === 'string')),
+        className: classNames(getTransitionName(motionName, status), _defineProperty(_defineProperty({}, motionCls, motionCls && statusSuffix), motionName, typeof motionName === 'string')),
         style: statusStyle
       }), setNodeRef);
     }
@@ -8292,7 +8287,7 @@ const generateId = (() => {
 const Sider = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       prefixCls: customizePrefixCls,
-      className: className$1,
+      className,
       trigger,
       children,
       defaultCollapsed = false,
@@ -8370,7 +8365,7 @@ const Sider = /*#__PURE__*/React.forwardRef((props, ref) => {
   // special trigger when collapsedWidth == 0
   const zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? (/*#__PURE__*/React.createElement("span", {
     onClick: toggle,
-    className: className(`${prefixCls}-zero-width-trigger`, `${prefixCls}-zero-width-trigger-${reverseArrow ? 'right' : 'left'}`),
+    className: classNames(`${prefixCls}-zero-width-trigger`, `${prefixCls}-zero-width-trigger-${reverseArrow ? 'right' : 'left'}`),
     style: zeroWidthTriggerStyle
   }, trigger || /*#__PURE__*/React.createElement(RefIcon$6, null))) : null;
   const reverseIcon = direction === 'rtl' === !reverseArrow;
@@ -8393,12 +8388,12 @@ const Sider = /*#__PURE__*/React.forwardRef((props, ref) => {
     minWidth: siderWidth,
     width: siderWidth
   });
-  const siderCls = className(prefixCls, `${prefixCls}-${theme}`, {
+  const siderCls = classNames(prefixCls, `${prefixCls}-${theme}`, {
     [`${prefixCls}-collapsed`]: !!collapsed,
     [`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
     [`${prefixCls}-below`]: !!below,
     [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0
-  }, className$1, hashId, cssVarCls);
+  }, className, hashId, cssVarCls);
   const contextValue = React.useMemo(() => ({
     siderCollapsed: collapsed
   }), [collapsed]);
@@ -8458,7 +8453,7 @@ const Basic = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       prefixCls: customizePrefixCls,
       suffixCls,
-      className: className$1,
+      className,
       tagName: TagName
     } = props,
     others = __rest(props, ["prefixCls", "suffixCls", "className", "tagName"]);
@@ -8469,7 +8464,7 @@ const Basic = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [wrapSSR, hashId, cssVarCls] = useStyle$1(prefixCls);
   const prefixWithSuffixCls = suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
   return wrapSSR(/*#__PURE__*/React.createElement(TagName, Object.assign({
-    className: className(customizePrefixCls || prefixWithSuffixCls, className$1, hashId, cssVarCls),
+    className: classNames(customizePrefixCls || prefixWithSuffixCls, className, hashId, cssVarCls),
     ref: ref
   }, others)));
 });
@@ -8480,7 +8475,7 @@ const BasicLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [siders, setSiders] = React.useState([]);
   const {
       prefixCls: customizePrefixCls,
-      className: className$1,
+      className,
       rootClassName,
       children,
       hasSider,
@@ -8497,10 +8492,10 @@ const BasicLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
   const prefixCls = getPrefixCls('layout', customizePrefixCls);
   const mergedHasSider = useHasSider(siders, children, hasSider);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle$1(prefixCls);
-  const classString = className(prefixCls, {
+  const classString = classNames(prefixCls, {
     [`${prefixCls}-has-sider`]: mergedHasSider,
     [`${prefixCls}-rtl`]: direction === 'rtl'
-  }, contextClassName, className$1, rootClassName, hashId, cssVarCls);
+  }, contextClassName, className, rootClassName, hashId, cssVarCls);
   const contextValue = React.useMemo(() => ({
     siderHook: {
       addSider: id => {
@@ -11716,11 +11711,8 @@ const getDefaultConfig = () => {
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
 const userInfo = {
-  avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+  avatar: "https://img.freepik.com/premium-vector/character-avatar-isolated_729149-194801.jpg?semt=ais_hybrid&w=740",
   name: "username",
   email: "gmail@gmail.com"
 };
@@ -11731,17 +11723,17 @@ const languageInfo = {
 const bottomMenu = [
   {
     key: "user",
-    icon: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: "h-8 w-8 rounded-md", src: userInfo.avatar, alt: "" }),
-    label: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col whitespace-nowrap", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "a",
-        {
-          href: "#",
-          className: "text-sm font-semibold leading-6 text-white group-hover:text-black",
-          children: userInfo.name
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "#", className: "text-xs text-gray-300 group-hover:text-black", children: userInfo.email })
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        className: "h-8 w-8 rounded-md object-cover",
+        src: userInfo.avatar,
+        alt: ""
+      }
+    ),
+    label: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[32px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold text-white group-hover:text-black", children: userInfo.name }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-300", children: userInfo.email })
     ] }),
     show: true
   },
@@ -11822,64 +11814,110 @@ const Sidebar = ({ children, menu }) => {
           collapse ? "w-60" : "w-16"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-16 shrink-0 items-center justify-center bg-[#FFFFFF]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "img",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
             {
-              className: "h-8 w-auto",
-              src: collapse ? "https://i.ibb.co/XrQYLt6C/logo.png" : "https://i.ibb.co/7tPnGMqx/Type-Collapse-menu.png",
-              alt: "logo"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "flex flex-1 flex-col px-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "list", className: "-mx-2 space-y-1 relative", children: menu.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "relative pl-2 cursor-pointer", children: [
-              (activeMainMenu === item.href || item.href === pathUrl) && !collapse && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute top-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_24px_0_white]" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute bottom-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_-24px_0_white]" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
+              className: twMerge(
+                "flex h-16 shrink-0 items-center justify-center bg-[#FFFFFF]"
+              ),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
                 {
-                  className: `relative group ${!collapse ? "hover:bg-[#FFFFFF]" : ""} rounded-bl-full rounded-tl-full hover:text-black`,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "a",
+                  className: twMerge("h-8 w-auto"),
+                  src: collapse ? "https://i.ibb.co/XrQYLt6C/logo.png" : "https://i.ibb.co/7tPnGMqx/Type-Collapse-menu.png",
+                  alt: "logo"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: twMerge("flex flex-1 flex-col px-2"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "list", className: twMerge("-mx-2 space-y-1 relative"), children: menu.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "li",
+              {
+                className: twMerge("relative pl-2 cursor-pointer"),
+                children: [
+                  (activeMainMenu === item.href || item.href === pathUrl) && !collapse && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "span",
+                      {
+                        className: twMerge(
+                          "absolute top-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_24px_0_white]"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "span",
+                      {
+                        className: twMerge(
+                          "absolute bottom-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_-24px_0_white]"
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
                     {
-                      onClick: () => {
-                        handleActiveMain(item.href);
-                        setCollapse(false);
-                        setOpenSubCollapse(true);
-                      },
-                      className: classNames(
-                        item.href === activeMainMenu || item.href === pathUrl ? "bg-white text-black hover:text-black" : "text-white hover:bg-[#FFFFFF] hover:text-black",
-                        `py-2 rounded-md mt-2 text-sm whitespace-nowrap leading-6 font-semibold relative z-10 ${collapse ? "pl-4 mr-2" : "rounded-bl-full rounded-tl-full justify-center "} flex items-center gap-2`
+                      className: twMerge(
+                        "relative group rounded-bl-full rounded-tl-full hover:text-black",
+                        !collapse && "hover:bg-[#FFFFFF]"
                       ),
-                      children: [
-                        item.icon,
-                        collapse && item.name,
-                        collapse && /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$2, { className: "w-4 h-4 ml-auto" })
-                      ]
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                        "a",
+                        {
+                          onClick: () => {
+                            handleActiveMain(item.href);
+                            setCollapse(false);
+                            setOpenSubCollapse(true);
+                          },
+                          className: twMerge(
+                            item.href === activeMainMenu || item.href === pathUrl ? "bg-white text-black hover:text-black" : "text-white hover:bg-[#FFFFFF] hover:text-black",
+                            "py-2 rounded-md mt-2 text-sm whitespace-nowrap leading-6 font-semibold relative z-10",
+                            collapse ? "pl-4 mr-2" : "rounded-bl-full rounded-tl-full justify-center ",
+                            "flex items-center gap-2"
+                          ),
+                          children: [
+                            item.icon,
+                            collapse && item.name,
+                            collapse && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                              ForwardRef$2,
+                              {
+                                className: twMerge("w-4 h-4 ml-auto")
+                              }
+                            )
+                          ]
+                        }
+                      )
                     }
                   )
-                }
-              )
-            ] }, item.name)) }),
-            bottomMenu.map(
+                ]
+              },
+              item.name
+            )) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: twMerge("mt-auto pb-4"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: bottomMenu.map(
               (bm) => bm.show && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "li",
                 {
-                  className: classNames(
+                  className: twMerge(
                     "-mx-2 list-none flex items-center gap-4 rounded-md whitespace-nowrap group cursor-pointer",
-                    bm.extraClass || "",
-                    bm.key === "user" ? "mt-auto" : ""
+                    bm.extraClass || ""
                   ),
                   onClick: () => toast(),
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hover:bg-[#FFFFFF] flex items-center w-full ml-2 mr-2 whitespace-nowrap gap-2 p-2 rounded-md", children: [
-                    bm.icon,
-                    collapse && bm.label
-                  ] })
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: twMerge(
+                        "hover:bg-[#FFFFFF] flex items-center w-full ml-2 mr-2 whitespace-nowrap gap-2 p-2 rounded-md"
+                      ),
+                      children: [
+                        bm.icon,
+                        collapse && bm.label
+                      ]
+                    }
+                  )
                 },
                 bm.key
               )
-            )
+            ) }) })
           ] })
         ]
       }
@@ -11888,56 +11926,74 @@ const Sidebar = ({ children, menu }) => {
       "button",
       {
         onClick: () => setOpenSubCollapse(false),
-        className: `absolute top-1/19 transform -translate-y-1/2 cursor-pointer bg-white z-10 text-[#3078BD] rounded-full w-10 h-10 flex items-center justify-center shadow transition-all duration-300
-      left-44 sm:left-40 md:left-48 lg:left-66
-    `,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$3, { className: "w-4 h-4" })
+        className: twMerge(
+          "absolute top-1/19 transform -translate-y-1/2 cursor-pointer bg-white z-10 text-[#3078BD] rounded-full w-10 h-10 flex items-center justify-center shadow transition-all duration-300 left-44 sm:left-40 md:left-48 lg:left-66"
+        ),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$3, { className: twMerge("w-4 h-4") })
+      }
+    ),
+    openSubCollapse && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: twMerge(
+          "flex mt-3 flex-col w-40 border-gray-200 bg-white h-screen transition-all duration-300"
+        ),
+        children: [
+          !collapse && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: "https://i.ibb.co/0yCpN5wS/Frame-1111113861.png" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "nav",
+            {
+              className: twMerge(
+                "flex flex-1 transition-all duration-300 flex-col",
+                collapse ? "mt-0" : "mt-6"
+              ),
+              children: activeMenu && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "ul",
+                {
+                  role: "list",
+                  className: twMerge("-mx-2 space-y-1 cursor-pointer mt-4"),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "a",
+                      {
+                        onClick: () => {
+                          handleOpenSubmenu(activeMenu.name);
+                          router(activeMenu.href);
+                        },
+                        className: twMerge(
+                          activeMenu.href === pathUrl ? "bg-[#EEEEF0] text-black" : "text-gray-700 hover:bg-[#EEEEF0]",
+                          "group flex gap-x-3 rounded-md p-2 text-sm leading-6 transition-all duration-300 font-semibold items-center"
+                        ),
+                        children: [
+                          activeMenu.icon,
+                          activeMenu.name,
+                          openSubmenu === activeMenu.name ? /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$1, { className: twMerge("w-4 h-4 ml-auto") }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$4, { className: twMerge("w-4 h-4 ml-auto") })
+                        ]
+                      }
+                    ),
+                    openSubmenu === activeMenu.name && activeMenu.children && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: twMerge("pl-2 transition-all duration-300"), children: activeMenu.children.map((sub) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "li",
+                      {
+                        onClick: () => router(sub.href),
+                        className: twMerge(
+                          sub.href === pathUrl ? "bg-[#EEEEF0] text-black" : "",
+                          "text-xs hover:bg-[#EEEEF0] transition-all duration-300 mt-2 rounded-md py-2 flex items-center gap-2 p-2"
+                        ),
+                        children: [
+                          sub.icon,
+                          sub.name
+                        ]
+                      },
+                      sub.name
+                    )) })
+                  ] }, activeMenu.name)
+                }
+              )
+            }
+          )
+        ]
       }
     ),
-    openSubCollapse && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mt-3 flex-col w-40 border-gray-200 bg-white h-screen transition-all duration-300", children: [
-      !collapse && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: "https://i.ibb.co/0yCpN5wS/Frame-1111113861.png" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "nav",
-        {
-          className: `flex flex-1 transition-all duration-300 flex-col ${collapse ? "mt-0" : "mt-6"}`,
-          children: activeMenu && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "list", className: "-mx-2 space-y-1 cursor-pointer mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "a",
-              {
-                onClick: () => {
-                  handleOpenSubmenu(activeMenu.name);
-                  router(activeMenu.href);
-                },
-                className: classNames(
-                  activeMenu.href === pathUrl ? "bg-[#EEEEF0] text-black" : "text-gray-700 hover:bg-[#EEEEF0]",
-                  "group flex gap-x-3 rounded-md p-2 text-sm leading-6 transition-all duration-300 font-semibold items-center"
-                ),
-                children: [
-                  activeMenu.icon,
-                  activeMenu.name,
-                  openSubmenu === activeMenu.name ? /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$1, { className: "w-4 h-4 ml-auto" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$4, { className: "w-4 h-4 ml-auto" })
-                ]
-              }
-            ),
-            openSubmenu === activeMenu.name && activeMenu.children && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "pl-2 transition-all duration-300", children: activeMenu.children.map((sub) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "li",
-              {
-                onClick: () => router(sub.href),
-                className: classNames(
-                  sub.href === pathUrl ? "bg-[#EEEEF0] text-black" : "",
-                  "text-xs hover:bg-[#EEEEF0] transition-all duration-300 mt-2 rounded-md py-2 flex items-center gap-2 p-2"
-                ),
-                children: [
-                  sub.icon,
-                  sub.name
-                ]
-              },
-              sub.name
-            )) })
-          ] }, activeMenu.name) })
-        }
-      )
-    ] }),
     children
   ] });
 };
@@ -11957,7 +12013,7 @@ const Heading = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: className(
+        className: classNames(
           "flex justify-between items-end ",
           classNameWrapHeading
         ),
@@ -11983,5 +12039,197 @@ const Divider = ({ children, ...rest }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$2, { ...rest, children });
 };
 
-export { Button as B, CascaderField as C, Dropdown as D, Flex as F, Heading as H, Layout as L, Modal as M, Popover as P, Row as R, Skeleton as S, Table as T, Tooltip as a, Tabs as b, SearchFiltersForm as c, Container as d, Badge as e, Col as f, Breadcrumb as g, Space as h, Splitter as i, Menu as j, Pagination as k, Steps as l, Sidebar as m, Tag as n, Divider as o, typeColorMap as t };
-//# sourceMappingURL=Divider-RlbRBxOQ.js.map
+const Alert = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Alert$1, { ...props });
+};
+
+const Spin = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Spin$1, { ...rest, children });
+};
+
+const Drawer = ({ onSubmit, children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Drawer$1, { ...rest, children: onSubmit ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "form",
+    {
+      id: "pnkx-form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        onSubmit?.(e);
+      },
+      method: "POST",
+      children
+    }
+  ) : children });
+};
+
+const Popconfirm = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm$1, { ...rest, children });
+};
+
+const QRCode = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(QRCode$1, { ...props });
+};
+
+const Result = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Result$1, { ...rest, children });
+};
+
+const Rate = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Rate$1, { ...props });
+};
+
+const Segmented = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Segmented$1, { ...props });
+};
+
+const Statistic = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Statistic$1, { ...props });
+};
+
+const Timeline = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Timeline$1, { ...props });
+};
+
+const Tour = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tour$1, { ...props });
+};
+
+const Tree = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tree$1, { ...props });
+};
+
+const Watermark = ({ ...rest }) => {
+  const { Paragraph } = Typography;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { gap: "middle", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Watermark$1, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural." })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        style: {
+          zIndex: 10,
+          width: "100%",
+          maxWidth: 800,
+          position: "relative"
+        },
+        src: "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ",
+        alt: "img"
+      }
+    )
+  ] }) });
+};
+
+const AnchorContext = /*#__PURE__*/React.createContext(undefined);
+
+const AnchorLink = props => {
+  const {
+    href,
+    title,
+    prefixCls: customizePrefixCls,
+    children,
+    className,
+    target,
+    replace
+  } = props;
+  const context = React.useContext(AnchorContext);
+  const {
+    registerLink,
+    unregisterLink,
+    scrollTo,
+    onClick,
+    activeLink,
+    direction
+  } = context || {};
+  React.useEffect(() => {
+    registerLink === null || registerLink === void 0 ? void 0 : registerLink(href);
+    return () => {
+      unregisterLink === null || unregisterLink === void 0 ? void 0 : unregisterLink(href);
+    };
+  }, [href]);
+  const handleClick = e => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e, {
+      title,
+      href
+    });
+    scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo(href);
+    // Support clicking on an anchor does not record history.
+    if (e.defaultPrevented) {
+      return;
+    }
+    const isExternalLink = href.startsWith('http://') || href.startsWith('https://');
+    // Support external link
+    if (isExternalLink) {
+      if (replace) {
+        e.preventDefault();
+        window.location.replace(href);
+      }
+      return;
+    }
+    // Handling internal anchor link
+    e.preventDefault();
+    const historyMethod = replace ? 'replaceState' : 'pushState';
+    window.history[historyMethod](null, '', href);
+  };
+  // =================== Warning =====================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Anchor.Link');
+    process.env.NODE_ENV !== "production" ? warning(!children || direction !== 'horizontal', 'usage', '`Anchor.Link children` is not supported when `Anchor` direction is horizontal') : void 0;
+  }
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('anchor', customizePrefixCls);
+  const active = activeLink === href;
+  const wrapperClassName = classNames(`${prefixCls}-link`, className, {
+    [`${prefixCls}-link-active`]: active
+  });
+  const titleClassName = classNames(`${prefixCls}-link-title`, {
+    [`${prefixCls}-link-title-active`]: active
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("a", {
+    className: titleClassName,
+    href: href,
+    title: typeof title === 'string' ? title : '',
+    target: target,
+    onClick: handleClick
+  }, title), direction !== 'horizontal' ? children : null);
+};
+
+const AnchorComponent = (props) => {
+  const { containerClassName, spaceClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Anchor$1, { className: spaceClassName, ...restProps }) });
+};
+AnchorComponent.Link = AnchorLink;
+const Anchor = AnchorComponent;
+
+const Appfix = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Affix, { ...rest, children });
+};
+
+const AutoComplete = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AutoComplete$1, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input$1, {}) });
+};
+
+const PnkxCollapse = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { ...props });
+};
+
+const PnkxColorPicker = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, { ...props });
+};
+
+const Empty = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Empty$2, { ...props });
+};
+
+const Image = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Image$1, { ...props });
+};
+
+export { Alert as A, Button as B, CascaderField as C, Dropdown as D, Anchor as E, Flex as F, Appfix as G, Heading as H, AutoComplete as I, PnkxCollapse as J, PnkxColorPicker as K, Layout as L, Modal as M, Empty as N, Image as O, Popover as P, QRCode as Q, Row as R, Skeleton as S, Table as T, Watermark as W, Tooltip as a, Tabs as b, SearchFiltersForm as c, Container as d, Badge as e, Col as f, Breadcrumb as g, Space as h, Splitter as i, Menu as j, Pagination as k, Steps as l, Sidebar as m, Tag as n, Divider as o, Spin as p, Drawer as q, Popconfirm as r, Result as s, typeColorMap as t, Rate as u, Segmented as v, Statistic as w, Timeline as x, Tour as y, Tree as z };
+//# sourceMappingURL=Image-CFyQxi2B.js.map