@deriv-web-design/ui 0.0.6 → 0.0.7

package/dist/index.d.mts

@@ -602,11 +602,15 @@ interface NavDropdownItem {
     /** Opens in a new tab with ↗ indicator */
     external?: boolean;
 }
-interface NavDropdownColumn {
+interface NavDropdownSection {
     /** Section heading rendered above the link list */
     title: string;
     items: NavDropdownItem[];
 }
+interface NavDropdownColumn {
+    /** One or more titled groups stacked within this column */
+    sections: NavDropdownSection[];
+}
 interface NavDropdownFeature {
     /** Bold heading inside the dark feature card */
     title: string;

package/dist/index.d.ts

@@ -602,11 +602,15 @@ interface NavDropdownItem {
     /** Opens in a new tab with ↗ indicator */
     external?: boolean;
 }
-interface NavDropdownColumn {
+interface NavDropdownSection {
     /** Section heading rendered above the link list */
     title: string;
     items: NavDropdownItem[];
 }
+interface NavDropdownColumn {
+    /** One or more titled groups stacked within this column */
+    sections: NavDropdownSection[];
+}
 interface NavDropdownFeature {
     /** Bold heading inside the dark feature card */
     title: string;

package/dist/index.js

@@ -2399,9 +2399,9 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
       onMouseEnter,
       onMouseLeave,
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-col", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__dropdown-col-title", children: col.title }),
-          col.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__dropdown-col-title", children: section.title }),
+          section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "a",
             {
               href: link.href,
@@ -2415,7 +2415,7 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
             },
             link.href
           ))
-        ] }) }, col.title)) }),
+        ] }, section.title)) }, colIdx)) }),
         dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature }) })
       ] })
     }
@@ -2482,24 +2482,20 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
         exit: "hidden",
         transition: { duration: 0.22, ease: EASE_OUT_EXPO },
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-cols", children: [0, 1].map((colIdx) => {
-            const colItems = dropdown.columns.filter((_, i) => i % 2 === colIdx);
-            if (colItems.length === 0) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-col", children: colItems.map((col) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-col-section", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: col.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: col.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                "a",
-                {
-                  href: link.href,
-                  className: "navbar__drawer-link",
-                  target: link.external ? "_blank" : void 0,
-                  rel: link.external ? "noopener noreferrer" : void 0,
-                  children: link.label
-                },
-                link.href
-              )) })
-            ] }, col.title)) }, colIdx);
-          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-col-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "a",
+              {
+                href: link.href,
+                className: "navbar__drawer-link",
+                target: link.external ? "_blank" : void 0,
+                rel: link.external ? "noopener noreferrer" : void 0,
+                children: link.label
+              },
+              link.href
+            )) })
+          ] }, section.title)) }, colIdx)) }),
           dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
         ] })
       }
@@ -2641,7 +2637,7 @@ var Navbar = ({
               onMouseEnter: clearHoverTimeout,
               onMouseLeave: handleNavLeave
             },
-            openDropdown
+            "dropdown"
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__actions", children: [
             loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(