@adminide-stack/yantra-help-browser 12.0.16-alpha.21 → 12.0.16-alpha.22

package/lib/components/SearchBar.js

@@ -4,6 +4,7 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
   const [searchResults, setSearchResults] = useState([]);
   const [showDropdown, setShowDropdown] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [isFocused, setIsFocused] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState({
     top: 0,
     left: 0,
@@ -11,27 +12,21 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
   });
   const searchContainerRef = useRef(null);
   const inputRef = useRef(null);
-  // Update search query when initialSearchQuery changes
-  // useEffect(() => {
-  //     setSearchQuery(initialSearchQuery);
-  // }, [initialSearchQuery]);
-  // Calculate dropdown position
   const updateDropdownPosition = useRef(() => {
     if (searchContainerRef.current) {
       const rect = searchContainerRef.current.getBoundingClientRect();
       setDropdownPosition({
-        top: rect.bottom + window.scrollY + 4,
+        top: rect.bottom + window.scrollY + 6,
         left: rect.left + window.scrollX,
         width: rect.width
       });
     }
   });
-  // Perform search as user types
   useEffect(() => {
     if (searchQuery.trim().length > 0) {
       const performSearch = async () => {
         const results = await searchArticles(searchQuery);
-        setSearchResults(results.slice(0, 5)); // Limit to 5 results for sidebar
+        setSearchResults(results.slice(0, 6));
         setShowDropdown(true);
         setSelectedIndex(-1);
       };
@@ -41,7 +36,6 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
       setShowDropdown(false);
     }
   }, [searchQuery]);
-  // Update position on scroll/resize
   useEffect(() => {
     if (showDropdown) {
       updateDropdownPosition.current();
@@ -55,13 +49,10 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
       };
     }
   }, [showDropdown]);
-  // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = event => {
       const target = event.target;
-      // Check if click is outside search container AND not on dropdown
       if (searchContainerRef.current && !searchContainerRef.current.contains(target)) {
-        // Check if click is on the dropdown (which is in a portal)
         const dropdown = document.querySelector('[data-search-dropdown]');
         if (!dropdown || !dropdown.contains(target)) {
           setShowDropdown(false);
@@ -69,19 +60,13 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
   const handleSearch = e => {
     e.preventDefault();
-    // if (onSearch && searchQuery.trim()) {
-    //     onSearch(searchQuery);
-    // }
-    // If there are results and user presses enter, navigate to first result
     if (searchResults.length > 0) {
-      const firstResult = searchResults[0];
-      navigate(`/help-center/${firstResult.categoryId}/${firstResult.slug}`);
+      const target = selectedIndex >= 0 ? searchResults[selectedIndex] : searchResults[0];
+      navigate(`/help-center/${target.categoryId}/${target.slug}`);
       setShowDropdown(false);
     }
   };
@@ -89,8 +74,22 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
     setSearchQuery(e.target.value);
   };
   const handleInputFocus = () => {
-    if (searchResults.length > 0) {
-      setShowDropdown(true);
+    setIsFocused(true);
+    if (searchResults.length > 0) setShowDropdown(true);
+  };
+  const handleInputBlur = () => {
+    setIsFocused(false);
+  };
+  const handleKeyDown = e => {
+    if (!showDropdown || searchResults.length === 0) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex(prev => prev < searchResults.length - 1 ? prev + 1 : 0);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex(prev => prev > 0 ? prev - 1 : searchResults.length - 1);
+    } else if (e.key === 'Escape') {
+      setShowDropdown(false);
     }
   };
   const handleResultClick = (article, e) => {
@@ -98,18 +97,24 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
       e.preventDefault();
       e.stopPropagation();
     }
-    // Verify article has required fields
-    if (!article || !article.categoryId || !article.slug) {
-      console.error('Article missing required fields:', article);
-      return;
-    }
-    // Close dropdown
+    if (!article?.categoryId || !article?.slug) return;
     setShowDropdown(false);
     setSearchQuery('');
-    // Navigate to the article using Remix navigate
-    const path = `/help-center/${article.categoryId}/${article.slug}`;
-    navigate(path);
+    navigate(`/help-center/${article.categoryId}/${article.slug}`);
   };
+  const popularTerms = [{
+    label: 'AI Employees',
+    icon: '\u{1F916}'
+  }, {
+    label: 'Integrations',
+    icon: '\u{1F517}'
+  }, {
+    label: 'Security',
+    icon: '\u{1F6E1}'
+  }, {
+    label: 'Getting started',
+    icon: '\u{1F680}'
+  }];
   return jsxs("div", {
     children: [jsx("form", {
       onSubmit: handleSearch,
@@ -117,79 +122,89 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
       style: {
         zIndex: 50
       },
-      children: jsx("div", {
+      children: jsxs("div", {
         ref: searchContainerRef,
-        className: "relative w-full",
-        children: jsxs("div", {
-          className: "flex w-full rounded-2xl bg-white shadow-2xl",
+        className: "relative w-full group",
+        children: [jsx("div", {
+          className: "absolute -inset-[2px] rounded-[18px] transition-opacity duration-500",
+          style: {
+            background: isFocused ? 'linear-gradient(135deg, rgba(6,182,212,0.3), rgba(139,92,246,0.3), rgba(236,72,153,0.2))' : 'transparent',
+            filter: 'blur(8px)',
+            opacity: isFocused ? 1 : 0
+          }
+        }), jsxs("div", {
+          className: `relative flex w-full rounded-2xl bg-white/[0.07] backdrop-blur-xl border shadow-2xl shadow-black/30 transition-all duration-300 ${isFocused ? 'border-white/[0.18] bg-white/[0.10]' : 'border-white/[0.08]'}`,
           children: [jsxs("div", {
             className: "relative flex-1",
             children: [jsx("div", {
-              className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6 z-10",
+              className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-5 z-10",
               children: jsx("svg", {
-                className: "h-6 w-6 text-gray-400",
+                className: `h-5 w-5 transition-colors duration-300 ${isFocused ? 'text-cyan-400' : 'text-white/30'}`,
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
                 children: jsx("path", {
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  strokeWidth: 2,
+                  strokeWidth: 1.5,
                   d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                 })
               })
             }), jsx("input", {
               ref: inputRef,
               type: "text",
-              className: "h-16 w-full bg-transparent py-6 pl-16 pr-6 text-lg text-gray-900 placeholder-gray-500 outline-none relative z-10",
-              placeholder: "Search help center...",
+              className: "h-[56px] w-full bg-transparent py-5 pl-14 pr-4 text-[15px] text-white placeholder-white/25 outline-none relative z-10",
+              placeholder: "Search articles, guides, and tutorials...",
               value: searchQuery,
               onChange: handleInputChange,
-              onFocus: handleInputFocus
+              onFocus: handleInputFocus,
+              onBlur: handleInputBlur,
+              onKeyDown: handleKeyDown
             })]
           }), jsx("button", {
             type: "submit",
-            className: "flex items-center justify-center rounded-r-2xl bg-gray-900 px-8 text-lg font-medium text-white transition-colors hover:bg-gray-800 relative z-10",
+            className: "flex items-center justify-center rounded-r-2xl bg-gradient-to-r from-cyan-500 to-blue-600 px-7 text-sm font-semibold text-white transition-all hover:from-cyan-400 hover:to-blue-500 hover:shadow-lg hover:shadow-cyan-500/20 relative z-10",
             children: "Search"
           })]
-        })
+        })]
       })
     }), jsxs("div", {
-      className: "mt-8 flex flex-wrap justify-center gap-3",
+      className: "mt-5 flex flex-wrap items-center justify-center gap-2",
       children: [jsx("span", {
-        className: "text-sm text-white/60",
+        className: "text-[12px] text-white/25 mr-1",
         children: "Popular:"
-      }), ['AI Employees', 'Integrations', 'Security', 'Getting started'].map(term => jsx("button", {
+      }), popularTerms.map(term => jsxs("button", {
         onClick: () => {
-          setSearchQuery(term);
+          setSearchQuery(term.label);
           setShowDropdown(true);
         },
-        className: "rounded-full bg-white/10 px-4 py-2 text-sm text-white/80 transition-colors hover:bg-white/20 hover:text-white",
-        children: term
-      }, term))]
+        className: "inline-flex items-center gap-1.5 rounded-full border border-white/[0.06] bg-white/[0.03] px-3 py-1.5 text-[12px] text-white/40 transition-all duration-300 hover:bg-white/[0.08] hover:text-white/60 hover:border-white/[0.12]",
+        children: [jsx("span", {
+          className: "text-[11px]",
+          children: term.icon
+        }), term.label]
+      }, term.label))]
     }), showDropdown && typeof document !== 'undefined' && createPortal(jsx(Fragment, {
-      children: searchResults.length > 0 ? jsx("div", {
+      children: searchResults.length > 0 ? jsxs("div", {
         "data-search-dropdown": true,
-        className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 max-h-96 overflow-y-auto z-[9999]",
+        className: "fixed rounded-2xl bg-white/95 backdrop-blur-xl shadow-2xl shadow-black/20 border border-gray-200/60 max-h-[420px] overflow-y-auto z-[9999]",
         style: {
           top: `${dropdownPosition.top}px`,
           left: `${dropdownPosition.left}px`,
           width: `${dropdownPosition.width}px`
         },
         onClick: e => e.stopPropagation(),
-        children: jsx("div", {
-          className: "py-1",
+        children: [jsx("div", {
+          className: "p-2",
           children: searchResults.map((article, index) => {
             const category = getCategoryByIdSync(article.categoryId);
-            `/help-center/${article.categoryId}/${article.slug}`;
-            return jsx("div", {
+            return jsxs("div", {
               onClick: e => {
-                console.log('Click event fired on article:', article.title);
                 e.preventDefault();
                 e.stopPropagation();
                 handleResultClick(article, e);
               },
-              className: `block px-4 py-3 hover:bg-blue-50 transition-colors cursor-pointer border-b border-gray-100 last:border-b-0 ${selectedIndex === index ? 'bg-blue-50' : ''}`,
+              className: `flex items-start gap-3 rounded-xl px-3 py-2.5 transition-all duration-150 cursor-pointer ${selectedIndex === index ? 'bg-gradient-to-r from-cyan-50 to-blue-50 shadow-sm' : 'hover:bg-gray-50/80'}`,
               role: "button",
               tabIndex: 0,
               onKeyDown: e => {
@@ -198,35 +213,84 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
                   handleResultClick(article);
                 }
               },
-              children: jsxs("div", {
-                className: "flex flex-col",
+              children: [jsx("div", {
+                className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100 text-gray-400 ring-1 ring-gray-200/60",
+                children: jsx("svg", {
+                  className: "h-3.5 w-3.5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: jsx("path", {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 1.5,
+                    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  })
+                })
+              }), jsxs("div", {
+                className: "min-w-0 flex-1",
                 children: [jsx("div", {
-                  className: "text-base font-semibold text-gray-900",
+                  className: "text-[13px] font-semibold text-gray-900 truncate",
                   children: article.title
                 }), article.description && jsx("div", {
-                  className: "text-sm text-gray-600 mt-0.5",
+                  className: "mt-0.5 text-[12px] text-gray-500 line-clamp-1",
                   children: article.description
                 }), category && jsx("div", {
-                  className: "text-xs text-blue-600 mt-1 font-medium",
+                  className: "mt-1.5 inline-flex items-center rounded-md bg-blue-50/80 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 ring-1 ring-blue-100",
                   children: category.title
                 })]
-              })
+              }), jsx("svg", {
+                className: "mt-1 h-3.5 w-3.5 shrink-0 text-gray-300",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: jsx("path", {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9 5l7 7-7 7"
+                })
+              })]
             }, article.id);
           })
-        })
+        }), jsx("div", {
+          className: "border-t border-gray-100/80 px-3 py-2 text-center",
+          children: jsx("span", {
+            className: "text-[11px] text-gray-400",
+            children: "Enter to select \u00B7 \u2191\u2193 navigate \u00B7 Esc to close"
+          })
+        })]
       }) : searchQuery.trim().length > 0 ? jsx("div", {
-        className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 z-[9999]",
+        className: "fixed rounded-2xl bg-white/95 backdrop-blur-xl shadow-2xl border border-gray-200/60 z-[9999]",
         style: {
           top: `${dropdownPosition.top}px`,
           left: `${dropdownPosition.left}px`,
           width: `${dropdownPosition.width}px`
         },
         onClick: e => e.stopPropagation(),
-        children: jsx("div", {
-          className: "px-4 py-6 text-center text-gray-500",
-          children: jsxs("p", {
-            children: ["No results found for \"", searchQuery, "\""]
-          })
+        children: jsxs("div", {
+          className: "px-4 py-8 text-center",
+          children: [jsx("div", {
+            className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-50",
+            children: jsx("svg", {
+              className: "h-5 w-5 text-gray-400",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              })
+            })
+          }), jsx("p", {
+            className: "text-sm font-medium text-gray-700",
+            children: "No results found"
+          }), jsx("p", {
+            className: "mt-1 text-xs text-gray-400",
+            children: "Try different keywords or browse categories below"
+          })]
         })
       }) : null
     }), document.body)]

package/lib/components/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sources":["../../src/components/SearchBar.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","sources":["../../src/components/SearchBar.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/lib/components/navbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA2BxC,UAAU,kBAAkB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwFtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,UAAU,kBAAkB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqFtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/navbar/index.js

@@ -17,60 +17,60 @@ const RightNavItems = ({
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation();
   const params = useParams();
-  const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen);
-  };
-  const isActive = path => {
-    return location.pathname === path;
-  };
+  const isActive = path => location.pathname === path;
+  const isDark = !scrolled && !params.articleSlug;
   return jsxs("div", {
-    className: `${scrolled || params.articleSlug ? 'text-foreground' : 'text-white'} flex justify-between align-center`,
+    className: `flex items-center justify-between ${isDark ? 'text-white' : 'text-foreground'}`,
     children: [jsxs("div", {
-      className: "flex",
+      className: "flex items-center",
       children: [jsx("div", {
-        className: "hidden sm:ml-6 sm:flex sm:space-x-8",
-        children: navItems.map(item => jsx(Link, {
+        className: "hidden sm:ml-6 sm:flex sm:items-center sm:gap-1",
+        children: navItems.map(item => jsxs(Link, {
           to: item.path,
-          className: `inline-flex items-center px-1 pt-1 text-lg transition-colors duration-200 ${isActive(item.path) ? `font-bold ${scrolled || params.articleSlug ? 'text-foreground' : 'text-white'}` : `font-medium ${scrolled || params.articleSlug ? 'text-foreground hover:text-gray-900' : 'text-white hover:text-gray-300'}`}`,
-          children: item.label
+          className: `relative rounded-lg px-3.5 py-2 text-[14px] font-medium transition-all duration-200 ${isActive(item.path) ? isDark ? 'bg-white/[0.08] text-white' : 'bg-foreground/[0.06] text-foreground' : isDark ? 'text-white/60 hover:bg-white/[0.05] hover:text-white' : 'text-muted-foreground hover:bg-muted hover:text-foreground'}`,
+          children: [item.label, isActive(item.path) && jsx("span", {
+            className: "absolute bottom-0 left-1/2 h-[2px] w-4 -translate-x-1/2 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500"
+          })]
         }, item.key))
-      }), jsx("div", {
-        className: "hidden sm:ml-6 sm:flex sm:items-center"
       }), jsx("div", {
         className: "-mr-2 flex items-center sm:hidden",
         children: jsxs("button", {
           type: "button",
-          className: "inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500",
+          className: "inline-flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-white/10",
+          onClick: () => setIsMenuOpen(!isMenuOpen),
           "aria-expanded": isMenuOpen,
-          onClick: toggleMenu,
           children: [jsx("span", {
             className: "sr-only",
-            children: "Open main menu"
+            children: "Toggle menu"
           }), jsx("svg", {
-            className: "block h-6 w-6",
-            xmlns: "http://www.w3.org/2000/svg",
+            className: "h-5 w-5",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            "aria-hidden": "true",
-            children: jsx("path", {
+            strokeWidth: 1.5,
+            children: isMenuOpen ? jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M6 18L18 6M6 6l12 12"
+            }) : jsx("path", {
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              strokeWidth: 2,
               d: "M4 6h16M4 12h16M4 18h16"
             })
           })]
         })
       })]
     }), isMenuOpen && jsx("div", {
-      className: "sm:hidden",
+      className: "absolute left-0 right-0 top-full z-50 border-b border-border/30 bg-background/95 backdrop-blur-xl sm:hidden",
       children: jsx("div", {
-        className: "space-y-1 pt-2 pb-3",
-        children: navItems.map(item => jsx(Link, {
+        className: "space-y-1 px-4 py-3",
+        children: navItems.map(item => jsxs(Link, {
           to: item.path,
-          className: `block border-l-4 py-2 pl-3 pr-4 text-base font-medium transition-colors duration-200 ${isActive(item.path) ? `border-[#057d78] font-bold ${scrolled || params.articleSlug ? 'text-foreground' : 'text-white'}` : `border-transparent font-medium ${scrolled || params.articleSlug ? 'text-gray-500 hover:text-gray-900' : 'text-gray-300 hover:text-white'} hover:border-[#057d78] hover:bg-gray-50`}`,
+          className: `flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${isActive(item.path) ? 'bg-gradient-to-r from-cyan-500/10 to-blue-500/10 text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'}`,
           onClick: () => setIsMenuOpen(false),
-          children: item.label
+          children: [isActive(item.path) && jsx("span", {
+            className: "h-1.5 w-1.5 rounded-full bg-cyan-500"
+          }), item.label]
         }, item.key))
       })
     })]

package/lib/components/navbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/navbar/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"gIASA,MAAM,QAAQ,GAAc,CAAA;AACxB,EAAA,GAAA,EAAA,MAAA;AACI,EAAA,KAAA,EAAA,MAAW;AACX,EAAA,IAAA,EAAA;AACA,CAAA,EAAA;AACH,EAAA,GAAA,EAAA,aAAA;AACD,EAAA,KAAA,EAAA,aAAA;AACI,EAAA,IAAA,EAAA;AACA,CAAA,EAAA;AACA,EAAA,GAAA,EAAA,aAAoB;AACvB,EAAA,KAAA,EAAA,aAAA;AACD,EAAA,IAAA,EAAA;AACI,CAAA,CAAA;AACA,MAAK,aAAe,GAAA,CAAA;AACpB,EAAA,QAAA;AACH,CAAA,KAAA;EACH,MAAA,CAAA,UAAA,EAAA,aAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAMF,EAAM,MAAO,QAAA,GAAA,WAA+C,EAAE;QACpD,MAAW,GAAA,SAAe,EAAA;AAChC,EAAA,MAAA,UAAc,GAAG,MAAW;AAC5B,IAAA,aAAY,CAAA,CAAG,UAAS,CAAE;;AAGtB,EAAA,MAAA,QAAA,GAAA,IAAe,IAAU;AAC7B,IAAA,OAAE,QAAA,CAAA,QAAA,KAAA,IAAA;AAEF,GAAA;AACI,EAAA,OAAAA,IAAA,CAAO,KAAQ,EAAA;AACnB,IAAA,SAAE,EAAA,CAAA,EAAA,QAAA,IAAA,MAAA,CAAA,WAAA,GAAA,iBAAA,GAAA,YAAA,CAAA,kCAAA,CAAA;IAEF,QACI,EACI,CAAAA,IAAA,CAAA,KAAA,EAAA;AAUwB,MAAA,SAAA,EAAA,MAAA;AACA,MAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA;AAiDI,QAAA,SAAA,EAAA,qCAAE;AACF,QAAA,QAAA,EAAA,QAAA,CAAA,GAAE,CAAkC,IAAA,IAAAA,GAAA,CAAA,IAAA,EAAA;AAY5E,UAAE,EAAA,EAAA,IAAA,CAAA,IAAA;AAEF,UAAA,sFAA6B,EAAA,QAAA,CAAA,IAAA,CAAA,IAAA,CAAA,GAAA,CAAA,UAAA,EAAA,QAAA,IAAA,MAAA,CAAA,WAAA,GAAA,iBAAA,GAAA,YAAA,CAAA,CAAA,GAAA,CAAA,YAAA,EAAA,QAAA,IAAA,MAAA,CAAA,WAAA,GAAA,qCAAA,GAAA,gCAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/navbar/index.tsx"],"sourcesContent":[null],"names":["_jsxs"],"mappings":"gIASA,MAAM,QAAQ,GAAc,CAAA;KACtB,EAAA,MAAK;OACL,EAAG,MAAE;MACL,EAAA;CACL,EAAC;AAMF,EAAM,GAAA,EAAC,aAAM;OACH,EAAA,aAAW;AACjB,EAAA,IAAA,EAAA;AACA,CAAA,EAAA;AAEA,EAAA,GAAA,EAAA,aAAc;OACR,EAAA,aAAU;MAET,EAAA;AAWyB,CAAA,CAAA;AACI,MAAA,aAAA,GAAA,CAAA;AACA,EAAA,QAAA,GAAA;AACJ,CAAA,KAAA;AACE,EAAA,MAAA,CAAA,UAAA,EAAA,aAAA,CAAA,GAAE,QAAsD,CAAA,KAAA,CAAA;AACxD,EAAA,MAAA,QAAA,GAAA,WAAA,EAAA;AA+CE,EAAA,MAAA,MAAA,GAAA,SAAA,EAAA;AACA,EAAA,MAAA,QAAA,GAAA,IAAA,IAAA,QACR,CAAA,QAAA,KAAA,IAAA;AAYhC,EAAE,MAAA,MAAA,GAAA,CAAA,QAAA,IAAA,CAAA,MAAA,CAAA,WAAA;AAEF,EAAA,OAAAA,IAAA,CAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/pages/CategoryCollection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/CategoryCollection/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAiGnC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/CategoryCollection/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EA6KnC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}