@nulogy/components 6.8.0 → 7.1.0

package/dist/main.js

@@ -11908,6 +11908,8 @@
     textOverflow: true
   });
 
+  var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility);
+
   var getAttrs = function getAttrs(inline) {
     return inline ? {
       as: "span"
@@ -11932,7 +11934,7 @@
       lineHeight: theme.lineHeights.base,
       opacity: disabled ? "0.7" : undefined
     };
-  }, compose(space, typography, color, layout, overflow, textOverflow, cursor$1));
+  }, addStyledProps);
   Text.defaultProps = {
     inline: false,
     disabled: false
@@ -16501,7 +16503,7 @@
     }, _ref2["" + ListItem] = {
       marginBottom: compact ? 0 : theme.space.x1
     }, _ref2;
-  }, space, color, typography, layout, shadow, border);
+  }, addStyledProps);
   List.defaultProps = {
     className: undefined,
     compact: false,
@@ -20275,7 +20277,7 @@
         opacity: ".5"
       }
     };
-  }, color);
+  }, addStyledProps);
   DropdownButton.defaultProps = {
     disabled: false,
     hoverColor: "darkBlue",
@@ -20320,7 +20322,7 @@
         opacity: ".5"
       }
     };
-  });
+  }, addStyledProps);
   DropdownLink.defaultProps = {
     disabled: false,
     color: "darkGrey",
@@ -20389,7 +20391,7 @@
       transition: ".2s",
       padding: theme.space.x1 + " " + theme.space.x2
     };
-  }, color);
+  }, addStyledProps);
 
   var HelpText = styled__default['default'](Text).withConfig({
     displayName: "HelpText",
@@ -23257,7 +23259,7 @@
     };
   };
 
-  var ApplyMenuLinkStyles$2 = styled__default['default'].div.withConfig({
+  var ApplyMenuLinkStyles$1 = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__ApplyMenuLinkStyles",
     componentId: "sc-1mpxh2o-0"
   })(function (_ref) {
@@ -23282,12 +23284,12 @@
       })
     };
   });
-  ApplyMenuLinkStyles$2.propTypes = {
+  ApplyMenuLinkStyles$1.propTypes = {
     color: PropTypes__default['default'].string,
     hoverColor: PropTypes__default['default'].string,
     hoverBackground: PropTypes__default['default'].string
   };
-  ApplyMenuLinkStyles$2.defaultProps = {
+  ApplyMenuLinkStyles$1.defaultProps = {
     color: Theme.colors.white,
     hoverColor: Theme.colors.lightBlue,
     hoverBackground: Theme.colors.black
@@ -23350,7 +23352,7 @@
   };
 
   var renderCustom$4 = function renderCustom(menuItem, themeColorObject) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$2, Object.assign({}, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
       key: menuItem.name
     }), menuItem.render());
   };
@@ -23469,7 +23471,7 @@
     };
   };
 
-  var ApplyMenuLinkStyles$1 = styled__default['default'].li.withConfig({
+  var ApplyMenuLinkStyles = styled__default['default'].li.withConfig({
     displayName: "MobileMenu__ApplyMenuLinkStyles",
     componentId: "vqy2lk-1"
   })(function (_ref2) {
@@ -23498,13 +23500,13 @@
       })
     };
   });
-  ApplyMenuLinkStyles$1.propTypes = {
+  ApplyMenuLinkStyles.propTypes = {
     layer: PropTypes__default['default'].number,
     color: PropTypes__default['default'].string,
     hoverColor: PropTypes__default['default'].string,
     hoverBackground: PropTypes__default['default'].string
   };
-  ApplyMenuLinkStyles$1.defaultProps = {
+  ApplyMenuLinkStyles.defaultProps = {
     layer: 0,
     color: Theme.colors.white,
     hoverColor: Theme.colors.lightBlue,
@@ -23577,7 +23579,7 @@
   };
 
   var renderCustom$3 = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({
       key: menuItem.name
     }, themeColorObject, {
       layer: layer,
@@ -44584,7 +44586,7 @@
     hideDelay: "100"
   };
 
-  var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+  var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
@@ -44592,7 +44594,9 @@
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
       name: subMenuItem.name,
-      menuData: subMenuItem.items
+      menuData: subMenuItem.items,
+      trigger: subMenuItem.trigger,
+      layer: layer
     }));
   };
 
@@ -44610,12 +44614,16 @@
     }, subMenuItem.name));
   };
 
-  var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
+  var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-    }, subMenuItem.render(onItemClick));
+    }, subMenuItem.render({
+      size: "medium",
+      onItemClick: onItemClick,
+      layer: layer
+    }));
   };
 
   var renderText$2 = function renderText(subMenuItem) {
@@ -44638,9 +44646,9 @@
     }
   };
 
-  var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger) {
+  var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
     return subMenuItems.map(function (subMenuItem) {
-      return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger);
+      return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
     });
   };
 
@@ -44654,8 +44662,8 @@
   });
 
   var StyledButton$1 = styled__default['default'](DropdownButton).withConfig({
-    displayName: "SubMenuTrigger__StyledButton",
-    componentId: "sc-1tg8y8b-0"
+    displayName: "SubMenuTriggerButton__StyledButton",
+    componentId: "bvw24f-0"
   })(function (_ref) {
     var isOpen = _ref.isOpen,
         theme = _ref.theme;
@@ -44689,7 +44697,9 @@
     var menuData = _a.menuData,
         name = _a.name,
         onItemClick = _a.onItemClick,
-        props = __rest(_a, ["menuData", "name", "onItemClick"]);
+        _trigger = _a.trigger,
+        layer = _a.layer,
+        props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
 
     return (
       /*#__PURE__*/
@@ -44700,24 +44710,37 @@
         showArrow: false,
         triggerTogglesMenuState: false
       }, props, {
-        dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref2) {
-          var openMenu = _ref2.openMenu,
-              closeMenu = _ref2.closeMenu;
+        dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
+          var openMenu = _ref.openMenu,
+              closeMenu = _ref.closeMenu;
           return {
             onMouseEnter: openMenu,
             onMouseLeave: closeMenu
           };
         },
-        trigger: function trigger(_ref3) {
-          var closeMenu = _ref3.closeMenu,
-              openMenu = _ref3.openMenu,
-              isOpen = _ref3.isOpen;
-          return /*#__PURE__*/React__default['default'].createElement(SubMenuTriggerButton, {
+        trigger: function trigger(_ref2) {
+          var closeMenu = _ref2.closeMenu,
+              openMenu = _ref2.openMenu,
+              isOpen = _ref2.isOpen;
+
+          var defaultRender = function defaultRender() {
+            return /*#__PURE__*/React__default['default'].createElement(SubMenuTriggerButton, {
+              isOpen: isOpen,
+              name: name,
+              onMouseEnter: openMenu,
+              onMouseLeave: closeMenu
+            });
+          };
+
+          var triggerProps = {
+            size: "medium",
+            closeMenu: closeMenu,
+            openMenu: openMenu,
             isOpen: isOpen,
-            name: name,
-            onMouseEnter: openMenu,
-            onMouseLeave: closeMenu
-          });
+            defaultRender: defaultRender,
+            layer: layer
+          };
+          return _trigger ? _trigger(triggerProps) : defaultRender();
         }
       }), /*#__PURE__*/React__default['default'].createElement("ul", {
         style: {
@@ -44725,15 +44748,15 @@
           margin: "0",
           padding: "0"
         }
-      }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger)))
+      }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
     );
   };
 
   SubMenuTrigger.displayName = "SubMenuTrigger";
 
   var StyledButton = styled__default['default'].button.withConfig({
-    displayName: "MenuTrigger__StyledButton",
-    componentId: "sc-6k53fy-0"
+    displayName: "MenuTriggerButton__StyledButton",
+    componentId: "sc-9xtkk1-0"
   })(function (_ref) {
     var _ref$color = _ref.color,
         color = _ref$color === void 0 ? "white" : _ref$color,
@@ -44804,7 +44827,9 @@
         hoverColor = _a.hoverColor,
         hoverBackground = _a.hoverBackground,
         ariaLabel = _a["aria-label"],
-        props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"]);
+        _trigger = _a.trigger,
+        layer = _a.layer,
+        props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
 
     var dropdownMinWidth = "auto";
 
@@ -44814,6 +44839,13 @@
       return popperData;
     };
 
+    var triggerProps = {
+      color: color,
+      hoverColor: hoverColor,
+      hoverBackground: hoverBackground,
+      name: name,
+      "aria-label": ariaLabel
+    };
     return (
       /*#__PURE__*/
       // @ts-ignore
@@ -44834,16 +44866,18 @@
           }
         },
         trigger: function trigger() {
-          return /*#__PURE__*/React__default['default'].createElement(MenuTriggerButton, {
-            color: color,
-            hoverColor: hoverColor,
-            hoverBackground: hoverBackground,
-            name: name,
-            "aria-label": ariaLabel
-          });
+          var defaultRender = function defaultRender() {
+            return /*#__PURE__*/React__default['default'].createElement(MenuTriggerButton, Object.assign({}, triggerProps));
+          };
+
+          return _trigger ? _trigger({
+            size: "medium",
+            defaultRender: defaultRender,
+            layer: layer
+          }) : defaultRender();
         }
-      }), function (_ref2) {
-        var closeMenu = _ref2.closeMenu;
+      }), function (_ref) {
+        var closeMenu = _ref.closeMenu;
         return /*#__PURE__*/React__default['default'].createElement("ul", {
           style: {
             listStyle: "none",
@@ -44854,7 +44888,7 @@
         }, renderSubMenuItems(menuData, function (e) {
           closeMenu(e);
           e.stopPropagation();
-        }, SubMenuTrigger));
+        }, SubMenuTrigger, layer + 1));
       })
     );
   };
@@ -44874,43 +44908,14 @@
     };
   };
 
-  var ApplyMenuLinkStyles = styled__default['default'].div.withConfig({
-    displayName: "DesktopMenu__ApplyMenuLinkStyles",
+  var MenuLink = styled__default['default'].a.withConfig({
+    displayName: "DesktopMenu__MenuLink",
     componentId: "sc-8mrjkc-0"
   })(function (_ref) {
-    var _ref$color = _ref.color,
-        color = _ref$color === void 0 ? "white" : _ref$color,
-        _ref$hoverColor = _ref.hoverColor,
-        hoverColor = _ref$hoverColor === void 0 ? "lightBlue" : _ref$hoverColor,
-        _ref$hoverBackground = _ref.hoverBackground,
-        hoverBackground = _ref$hoverBackground === void 0 ? "black" : _ref$hoverBackground,
+    var color = _ref.color,
+        hoverColor = _ref.hoverColor,
+        hoverBackground = _ref.hoverBackground,
         theme = _ref.theme;
-    return {
-      "button, a": Object.assign(Object.assign({}, getSharedStyles$1(color, theme)), {
-        transition: ".2s",
-        "&:hover, &:focus": {
-          outline: "none",
-          color: theme.colors[hoverColor] || hoverColor,
-          backgroundColor: theme.colors[hoverBackground] || hoverBackground,
-          cursor: "pointer"
-        },
-        "&:disabled": {
-          opacity: ".5"
-        },
-        "&:focus": {
-          boxShadow: theme.shadows.focus
-        }
-      })
-    };
-  });
-  var MenuLink = styled__default['default'].a.withConfig({
-    displayName: "DesktopMenu__MenuLink",
-    componentId: "sc-8mrjkc-1"
-  })(function (_ref2) {
-    var color = _ref2.color,
-        hoverColor = _ref2.hoverColor,
-        hoverBackground = _ref2.hoverBackground,
-        theme = _ref2.theme;
     return Object.assign(Object.assign({}, getSharedStyles$1(color, theme)), {
       fontWeight: theme.fontWeights.medium,
       transition: ".2s",
@@ -44930,23 +44935,23 @@
   });
   var MenuText = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__MenuText",
-    componentId: "sc-8mrjkc-2"
-  })(function (_ref3) {
-    var textColor = _ref3.textColor,
-        theme = _ref3.theme;
+    componentId: "sc-8mrjkc-1"
+  })(function (_ref2) {
+    var textColor = _ref2.textColor,
+        theme = _ref2.theme;
     return Object.assign(Object.assign({}, getSharedStyles$1(textColor, theme)), {
       fontWeight: theme.fontWeights.medium
     });
   });
   var Nav$1 = styled__default['default'].nav.withConfig({
     displayName: "DesktopMenu__Nav",
-    componentId: "sc-8mrjkc-3"
+    componentId: "sc-8mrjkc-2"
   })({
     display: "flex",
     alignItems: "center"
   });
 
-  var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
+  var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
     var _a;
 
     return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -44954,7 +44959,9 @@
     }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger, Object.assign({
       name: menuItem.name,
       "aria-label": menuItem.ariaLabel,
-      menuData: menuItem.items
+      menuData: menuItem.items,
+      trigger: menuItem.trigger,
+      layer: layer
     }, themeColorObject)));
   };
 
@@ -44970,12 +44977,15 @@
     }, themeColorObject), menuItem.name));
   };
 
-  var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
+  var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({}, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }), menuItem.render());
+    }, menuItem.render({
+      size: "medium",
+      layer: layer
+    }));
   };
 
   var renderText$1 = function renderText(menuItem, themeColorObject) {
@@ -44998,8 +45008,8 @@
     }
   };
 
-  var renderMenuItem = function renderMenuItem(menuItem, themeColorObject) {
-    return getRenderFunction$1(menuItem)(menuItem, themeColorObject);
+  var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
+    return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
   };
 
   var BaseDesktopMenu = function BaseDesktopMenu(_a) {
@@ -45008,13 +45018,13 @@
         props = __rest(_a, ["menuData", "themeColorObject"]);
 
     return /*#__PURE__*/React__default['default'].createElement(Nav$1, Object.assign({}, props), menuData.map(function (menuItem) {
-      return renderMenuItem(menuItem, themeColorObject);
+      return renderMenuItem(menuItem, themeColorObject, 0);
     }));
   };
 
   var DesktopMenu = styled__default['default'](BaseDesktopMenu).withConfig({
     displayName: "DesktopMenu",
-    componentId: "sc-8mrjkc-4"
+    componentId: "sc-8mrjkc-3"
   })({
     "> div": {
       ":not(:last-of-type)": {
@@ -45191,7 +45201,11 @@
     return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
       layer: layer,
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, menuItem.render(linkOnClick, layer));
+    }, menuItem.render({
+      size: "small",
+      onItemClick: linkOnClick,
+      layer: layer
+    }));
   };
 
   var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
@@ -45259,7 +45273,16 @@
         linkOnClick = _ref6.linkOnClick,
         themeColorObject = _ref6.themeColorObject,
         layer = _ref6.layer;
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
+
+    var defaultRender = function defaultRender() {
+      return getSubMenuHeading(layer, menuItem.name);
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, menuItem.trigger ? menuItem.trigger({
+      size: "small",
+      defaultRender: defaultRender,
+      layer: layer
+    }) : defaultRender(), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
   };
 
   var Menu$1 = styled__default['default'].ul.withConfig({
@@ -45270,6 +45293,7 @@
 
     var theme = _ref7.theme;
     return _ref8 = {
+      listStyle: "none",
       margin: "0",
       padding: theme.space.x1 + " 0",
       zIndex: theme.zIndices.content,
@@ -52820,6 +52844,7 @@
   exports.Toggle = ToggleComponent;
   exports.Tooltip = Tooltip;
   exports.TruncatedText = TruncatedText;
+  exports.addStyledProps = addStyledProps;
   exports.theme = Theme;
   exports.useWindowDimensions = useWindowDimensions;
 

package/dist/main.module.js

@@ -11882,6 +11882,8 @@ var textOverflow = system({
   textOverflow: true
 });
 
+var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility);
+
 var getAttrs = function getAttrs(inline) {
   return inline ? {
     as: "span"
@@ -11906,7 +11908,7 @@ var Text = styled.p.attrs(function (props) {
     lineHeight: theme.lineHeights.base,
     opacity: disabled ? "0.7" : undefined
   };
-}, compose(space, typography, color, layout, overflow, textOverflow, cursor$1));
+}, addStyledProps);
 Text.defaultProps = {
   inline: false,
   disabled: false
@@ -16475,7 +16477,7 @@ var List = styled.ul.withConfig({
   }, _ref2["" + ListItem] = {
     marginBottom: compact ? 0 : theme.space.x1
   }, _ref2;
-}, space, color, typography, layout, shadow, border);
+}, addStyledProps);
 List.defaultProps = {
   className: undefined,
   compact: false,
@@ -20249,7 +20251,7 @@ var DropdownButton = styled.button.withConfig({
       opacity: ".5"
     }
   };
-}, color);
+}, addStyledProps);
 DropdownButton.defaultProps = {
   disabled: false,
   hoverColor: "darkBlue",
@@ -20294,7 +20296,7 @@ var DropdownLink = styled.a.withConfig({
       opacity: ".5"
     }
   };
-});
+}, addStyledProps);
 DropdownLink.defaultProps = {
   disabled: false,
   color: "darkGrey",
@@ -20363,7 +20365,7 @@ var DropdownText = styled(Text).withConfig({
     transition: ".2s",
     padding: theme.space.x1 + " " + theme.space.x2
   };
-}, color);
+}, addStyledProps);
 
 var HelpText = styled(Text).withConfig({
   displayName: "HelpText",
@@ -23231,7 +23233,7 @@ var getSharedStyles$3 = function getSharedStyles(color) {
   };
 };
 
-var ApplyMenuLinkStyles$2 = styled.div.withConfig({
+var ApplyMenuLinkStyles$1 = styled.div.withConfig({
   displayName: "DesktopMenu__ApplyMenuLinkStyles",
   componentId: "sc-1mpxh2o-0"
 })(function (_ref) {
@@ -23256,12 +23258,12 @@ var ApplyMenuLinkStyles$2 = styled.div.withConfig({
     })
   };
 });
-ApplyMenuLinkStyles$2.propTypes = {
+ApplyMenuLinkStyles$1.propTypes = {
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.string
 };
-ApplyMenuLinkStyles$2.defaultProps = {
+ApplyMenuLinkStyles$1.defaultProps = {
   color: Theme.colors.white,
   hoverColor: Theme.colors.lightBlue,
   hoverBackground: Theme.colors.black
@@ -23324,7 +23326,7 @@ var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
 };
 
 var renderCustom$4 = function renderCustom(menuItem, themeColorObject) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$2, Object.assign({}, themeColorObject, {
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
     key: menuItem.name
   }), menuItem.render());
 };
@@ -23443,7 +23445,7 @@ var getSharedStyles$2 = function getSharedStyles(_ref) {
   };
 };
 
-var ApplyMenuLinkStyles$1 = styled.li.withConfig({
+var ApplyMenuLinkStyles = styled.li.withConfig({
   displayName: "MobileMenu__ApplyMenuLinkStyles",
   componentId: "vqy2lk-1"
 })(function (_ref2) {
@@ -23472,13 +23474,13 @@ var ApplyMenuLinkStyles$1 = styled.li.withConfig({
     })
   };
 });
-ApplyMenuLinkStyles$1.propTypes = {
+ApplyMenuLinkStyles.propTypes = {
   layer: PropTypes.number,
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.string
 };
-ApplyMenuLinkStyles$1.defaultProps = {
+ApplyMenuLinkStyles.defaultProps = {
   layer: 0,
   color: Theme.colors.white,
   hoverColor: Theme.colors.lightBlue,
@@ -23551,7 +23553,7 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
 };
 
 var renderCustom$3 = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles, Object.assign({
     key: menuItem.name
   }, themeColorObject, {
     layer: layer,
@@ -44558,7 +44560,7 @@ NavBarDropdownMenu.defaultProps = {
   hideDelay: "100"
 };
 
-var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger, layer) {
   var _a;
 
   return /*#__PURE__*/React__default.createElement(NoWrapLi, {
@@ -44566,7 +44568,9 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
     name: subMenuItem.name,
-    menuData: subMenuItem.items
+    menuData: subMenuItem.items,
+    trigger: subMenuItem.trigger,
+    layer: layer
   }));
 };
 
@@ -44584,12 +44588,16 @@ var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
   }, subMenuItem.name));
 };
 
-var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
+var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
   var _a;
 
   return /*#__PURE__*/React__default.createElement(NoWrapLi, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, subMenuItem.render(onItemClick));
+  }, subMenuItem.render({
+    size: "medium",
+    onItemClick: onItemClick,
+    layer: layer
+  }));
 };
 
 var renderText$2 = function renderText(subMenuItem) {
@@ -44612,9 +44620,9 @@ var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
   }
 };
 
-var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger) {
+var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick, SubMenuTrigger, layer) {
   return subMenuItems.map(function (subMenuItem) {
-    return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger);
+    return getRenderFunction$2(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer);
   });
 };
 
@@ -44628,8 +44636,8 @@ var NoWrapLi = styled.li.withConfig({
 });
 
 var StyledButton$1 = styled(DropdownButton).withConfig({
-  displayName: "SubMenuTrigger__StyledButton",
-  componentId: "sc-1tg8y8b-0"
+  displayName: "SubMenuTriggerButton__StyledButton",
+  componentId: "bvw24f-0"
 })(function (_ref) {
   var isOpen = _ref.isOpen,
       theme = _ref.theme;
@@ -44663,7 +44671,9 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
   var menuData = _a.menuData,
       name = _a.name,
       onItemClick = _a.onItemClick,
-      props = __rest(_a, ["menuData", "name", "onItemClick"]);
+      _trigger = _a.trigger,
+      layer = _a.layer,
+      props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer"]);
 
   return (
     /*#__PURE__*/
@@ -44674,24 +44684,37 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
       showArrow: false,
       triggerTogglesMenuState: false
     }, props, {
-      dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref2) {
-        var openMenu = _ref2.openMenu,
-            closeMenu = _ref2.closeMenu;
+      dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref) {
+        var openMenu = _ref.openMenu,
+            closeMenu = _ref.closeMenu;
         return {
           onMouseEnter: openMenu,
           onMouseLeave: closeMenu
         };
       },
-      trigger: function trigger(_ref3) {
-        var closeMenu = _ref3.closeMenu,
-            openMenu = _ref3.openMenu,
-            isOpen = _ref3.isOpen;
-        return /*#__PURE__*/React__default.createElement(SubMenuTriggerButton, {
+      trigger: function trigger(_ref2) {
+        var closeMenu = _ref2.closeMenu,
+            openMenu = _ref2.openMenu,
+            isOpen = _ref2.isOpen;
+
+        var defaultRender = function defaultRender() {
+          return /*#__PURE__*/React__default.createElement(SubMenuTriggerButton, {
+            isOpen: isOpen,
+            name: name,
+            onMouseEnter: openMenu,
+            onMouseLeave: closeMenu
+          });
+        };
+
+        var triggerProps = {
+          size: "medium",
+          closeMenu: closeMenu,
+          openMenu: openMenu,
           isOpen: isOpen,
-          name: name,
-          onMouseEnter: openMenu,
-          onMouseLeave: closeMenu
-        });
+          defaultRender: defaultRender,
+          layer: layer
+        };
+        return _trigger ? _trigger(triggerProps) : defaultRender();
       }
     }), /*#__PURE__*/React__default.createElement("ul", {
       style: {
@@ -44699,15 +44722,15 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
         margin: "0",
         padding: "0"
       }
-    }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger)))
+    }, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1)))
   );
 };
 
 SubMenuTrigger.displayName = "SubMenuTrigger";
 
 var StyledButton = styled.button.withConfig({
-  displayName: "MenuTrigger__StyledButton",
-  componentId: "sc-6k53fy-0"
+  displayName: "MenuTriggerButton__StyledButton",
+  componentId: "sc-9xtkk1-0"
 })(function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "white" : _ref$color,
@@ -44778,7 +44801,9 @@ var MenuTrigger = function MenuTrigger(_a) {
       hoverColor = _a.hoverColor,
       hoverBackground = _a.hoverBackground,
       ariaLabel = _a["aria-label"],
-      props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"]);
+      _trigger = _a.trigger,
+      layer = _a.layer,
+      props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer"]);
 
   var dropdownMinWidth = "auto";
 
@@ -44788,6 +44813,13 @@ var MenuTrigger = function MenuTrigger(_a) {
     return popperData;
   };
 
+  var triggerProps = {
+    color: color,
+    hoverColor: hoverColor,
+    hoverBackground: hoverBackground,
+    name: name,
+    "aria-label": ariaLabel
+  };
   return (
     /*#__PURE__*/
     // @ts-ignore
@@ -44808,16 +44840,18 @@ var MenuTrigger = function MenuTrigger(_a) {
         }
       },
       trigger: function trigger() {
-        return /*#__PURE__*/React__default.createElement(MenuTriggerButton, {
-          color: color,
-          hoverColor: hoverColor,
-          hoverBackground: hoverBackground,
-          name: name,
-          "aria-label": ariaLabel
-        });
+        var defaultRender = function defaultRender() {
+          return /*#__PURE__*/React__default.createElement(MenuTriggerButton, Object.assign({}, triggerProps));
+        };
+
+        return _trigger ? _trigger({
+          size: "medium",
+          defaultRender: defaultRender,
+          layer: layer
+        }) : defaultRender();
       }
-    }), function (_ref2) {
-      var closeMenu = _ref2.closeMenu;
+    }), function (_ref) {
+      var closeMenu = _ref.closeMenu;
       return /*#__PURE__*/React__default.createElement("ul", {
         style: {
           listStyle: "none",
@@ -44828,7 +44862,7 @@ var MenuTrigger = function MenuTrigger(_a) {
       }, renderSubMenuItems(menuData, function (e) {
         closeMenu(e);
         e.stopPropagation();
-      }, SubMenuTrigger));
+      }, SubMenuTrigger, layer + 1));
     })
   );
 };
@@ -44848,43 +44882,14 @@ var getSharedStyles$1 = function getSharedStyles(color, theme) {
   };
 };
 
-var ApplyMenuLinkStyles = styled.div.withConfig({
-  displayName: "DesktopMenu__ApplyMenuLinkStyles",
+var MenuLink = styled.a.withConfig({
+  displayName: "DesktopMenu__MenuLink",
   componentId: "sc-8mrjkc-0"
 })(function (_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "white" : _ref$color,
-      _ref$hoverColor = _ref.hoverColor,
-      hoverColor = _ref$hoverColor === void 0 ? "lightBlue" : _ref$hoverColor,
-      _ref$hoverBackground = _ref.hoverBackground,
-      hoverBackground = _ref$hoverBackground === void 0 ? "black" : _ref$hoverBackground,
+  var color = _ref.color,
+      hoverColor = _ref.hoverColor,
+      hoverBackground = _ref.hoverBackground,
       theme = _ref.theme;
-  return {
-    "button, a": Object.assign(Object.assign({}, getSharedStyles$1(color, theme)), {
-      transition: ".2s",
-      "&:hover, &:focus": {
-        outline: "none",
-        color: theme.colors[hoverColor] || hoverColor,
-        backgroundColor: theme.colors[hoverBackground] || hoverBackground,
-        cursor: "pointer"
-      },
-      "&:disabled": {
-        opacity: ".5"
-      },
-      "&:focus": {
-        boxShadow: theme.shadows.focus
-      }
-    })
-  };
-});
-var MenuLink = styled.a.withConfig({
-  displayName: "DesktopMenu__MenuLink",
-  componentId: "sc-8mrjkc-1"
-})(function (_ref2) {
-  var color = _ref2.color,
-      hoverColor = _ref2.hoverColor,
-      hoverBackground = _ref2.hoverBackground,
-      theme = _ref2.theme;
   return Object.assign(Object.assign({}, getSharedStyles$1(color, theme)), {
     fontWeight: theme.fontWeights.medium,
     transition: ".2s",
@@ -44904,23 +44909,23 @@ var MenuLink = styled.a.withConfig({
 });
 var MenuText = styled.div.withConfig({
   displayName: "DesktopMenu__MenuText",
-  componentId: "sc-8mrjkc-2"
-})(function (_ref3) {
-  var textColor = _ref3.textColor,
-      theme = _ref3.theme;
+  componentId: "sc-8mrjkc-1"
+})(function (_ref2) {
+  var textColor = _ref2.textColor,
+      theme = _ref2.theme;
   return Object.assign(Object.assign({}, getSharedStyles$1(textColor, theme)), {
     fontWeight: theme.fontWeights.medium
   });
 });
 var Nav$1 = styled.nav.withConfig({
   displayName: "DesktopMenu__Nav",
-  componentId: "sc-8mrjkc-3"
+  componentId: "sc-8mrjkc-2"
 })({
   display: "flex",
   alignItems: "center"
 });
 
-var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
+var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, layer) {
   var _a;
 
   return /*#__PURE__*/React__default.createElement("div", {
@@ -44928,7 +44933,9 @@ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
   }, /*#__PURE__*/React__default.createElement(MenuTrigger, Object.assign({
     name: menuItem.name,
     "aria-label": menuItem.ariaLabel,
-    menuData: menuItem.items
+    menuData: menuItem.items,
+    trigger: menuItem.trigger,
+    layer: layer
   }, themeColorObject)));
 };
 
@@ -44944,12 +44951,15 @@ var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
   }, themeColorObject), menuItem.name));
 };
 
-var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
+var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles, Object.assign({}, themeColorObject, {
+  return /*#__PURE__*/React__default.createElement("div", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }), menuItem.render());
+  }, menuItem.render({
+    size: "medium",
+    layer: layer
+  }));
 };
 
 var renderText$1 = function renderText(menuItem, themeColorObject) {
@@ -44972,8 +44982,8 @@ var getRenderFunction$1 = function getRenderFunction(menuItem) {
   }
 };
 
-var renderMenuItem = function renderMenuItem(menuItem, themeColorObject) {
-  return getRenderFunction$1(menuItem)(menuItem, themeColorObject);
+var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer) {
+  return getRenderFunction$1(menuItem)(menuItem, themeColorObject, layer);
 };
 
 var BaseDesktopMenu = function BaseDesktopMenu(_a) {
@@ -44982,13 +44992,13 @@ var BaseDesktopMenu = function BaseDesktopMenu(_a) {
       props = __rest(_a, ["menuData", "themeColorObject"]);
 
   return /*#__PURE__*/React__default.createElement(Nav$1, Object.assign({}, props), menuData.map(function (menuItem) {
-    return renderMenuItem(menuItem, themeColorObject);
+    return renderMenuItem(menuItem, themeColorObject, 0);
   }));
 };
 
 var DesktopMenu = styled(BaseDesktopMenu).withConfig({
   displayName: "DesktopMenu",
-  componentId: "sc-8mrjkc-4"
+  componentId: "sc-8mrjkc-3"
 })({
   "> div": {
     ":not(:last-of-type)": {
@@ -45165,7 +45175,11 @@ var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject
   return /*#__PURE__*/React__default.createElement(ChildIndentingLi, {
     layer: layer,
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, menuItem.render(linkOnClick, layer));
+  }, menuItem.render({
+    size: "small",
+    onItemClick: linkOnClick,
+    layer: layer
+  }));
 };
 
 var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
@@ -45233,7 +45247,16 @@ var SubMenu = function SubMenu(_ref6) {
       linkOnClick = _ref6.linkOnClick,
       themeColorObject = _ref6.themeColorObject,
       layer = _ref6.layer;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
+
+  var defaultRender = function defaultRender() {
+    return getSubMenuHeading(layer, menuItem.name);
+  };
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, menuItem.trigger ? menuItem.trigger({
+    size: "small",
+    defaultRender: defaultRender,
+    layer: layer
+  }) : defaultRender(), /*#__PURE__*/React__default.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
 };
 
 var Menu$1 = styled.ul.withConfig({
@@ -45244,6 +45267,7 @@ var Menu$1 = styled.ul.withConfig({
 
   var theme = _ref7.theme;
   return _ref8 = {
+    listStyle: "none",
     margin: "0",
     padding: theme.space.x1 + " 0",
     zIndex: theme.zIndices.content,
@@ -52712,4 +52736,4 @@ var SortingTable = function SortingTable(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };

package/dist/src/BrandedNavBar/MenuTrigger.d.ts

@@ -1,11 +1,14 @@
-/// <reference types="react" />
+import React from "react";
+import { TriggerFunctionProps } from "./TriggerFunctionProps";
 export declare type MenuTriggerProps = {
     name?: string;
     "aria-label"?: string;
-    menuData?: any[];
     color?: string;
     hoverColor?: string;
     hoverBackground?: string;
+    menuData?: any[];
+    trigger?: (props: TriggerFunctionProps) => React.ReactNode;
+    layer: number;
 };
-declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, ...props }: MenuTriggerProps) => JSX.Element;
+declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, ...props }: MenuTriggerProps) => JSX.Element;
 export default MenuTrigger;

package/dist/src/BrandedNavBar/MenuTriggerButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare type MenuTriggerButtonProps = React.ComponentPropsWithRef<"button"> & {
+    name?: React.ReactNode;
+    color?: string;
+    hoverColor?: string;
+    hoverBackground?: string;
+};
+declare const MenuTriggerButton: React.ForwardRefExoticComponent<Pick<MenuTriggerButtonProps, "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "hoverColor" | "hoverBackground"> & React.RefAttributes<HTMLButtonElement>>;
+export default MenuTriggerButton;

package/dist/src/BrandedNavBar/NavBar.story.d.ts

@@ -68,3 +68,15 @@ export declare const CustomRenderingInHamburger: {
         };
     };
 };
+export declare const CustomMenuTriggers: () => JSX.Element;
+export declare const CustomMenuTriggersInHamburger: {
+    (): JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};

package/dist/src/BrandedNavBar/SubMenuTrigger.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
+import { TriggerFunctionProps } from "./TriggerFunctionProps";
 declare type SubMenuTriggerProps = React.ComponentPropsWithRef<"button"> & {
     name?: string;
     isOpen?: boolean;
     onItemClick?: any;
     menuData: any[];
+    trigger: (props: TriggerFunctionProps) => React.ReactNode;
+    layer: number;
 };
 declare const SubMenuTrigger: {
-    ({ menuData, name, onItemClick, ...props }: SubMenuTriggerProps): JSX.Element;
+    ({ menuData, name, onItemClick, trigger, layer, ...props }: SubMenuTriggerProps): JSX.Element;
     displayName: string;
 };
 export default SubMenuTrigger;

package/dist/src/BrandedNavBar/SubMenuTriggerButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type SubMenuTriggerButtonProps = React.ComponentPropsWithRef<"button"> & {
+    name?: string;
+    isOpen: boolean;
+};
+declare const SubMenuTriggerButton: React.ForwardRefExoticComponent<Pick<SubMenuTriggerButtonProps, "type" | "name" | "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isOpen"> & React.RefAttributes<HTMLButtonElement>>;
+export default SubMenuTriggerButton;

package/dist/src/BrandedNavBar/TriggerFunctionProps.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare type TriggerFunctionProps = {
+    size: "small" | "medium";
+    isOpen?: boolean;
+    closeMenu?: any;
+    openMenu?: any;
+    defaultRender: () => React.ReactNode;
+    layer: number;
+};

package/dist/src/BrandedNavBar/renderSubMenuItems.d.ts

@@ -1,2 +1,2 @@
-declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any) => any;
+declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any, layer: any) => any;
 export default renderSubMenuItems;

package/dist/src/DropdownMenu/DropdownButton.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { DefaultNDSThemeType } from "../theme.type";
-declare type DropdownButtonProps = React.ComponentPropsWithRef<"button"> & {
+import { StyledProps } from "../StyledProps";
+declare type DropdownButtonProps = React.ComponentPropsWithRef<"button"> & StyledProps & {
     color?: string;
     disabled?: boolean;
     theme?: DefaultNDSThemeType;

package/dist/src/List/List.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SpaceProps, ColorProps, TypographyProps, LayoutProps, BoxShadowProps, BorderProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
-declare type ListProps = React.ComponentPropsWithRef<"ul"> & SpaceProps & BorderProps & ColorProps & LayoutProps & TypographyProps & BoxShadowProps & {
+import { StyledProps } from "../StyledProps";
+declare type ListProps = React.ComponentPropsWithRef<"ul"> & StyledProps & {
     theme?: DefaultNDSThemeType;
     className?: string;
     compact?: boolean;

package/dist/src/NavBar/MenuTrigger.d.ts

@@ -1,5 +1,13 @@
 /// <reference types="react" />
 import PropTypes from "prop-types";
+export declare type MenuTriggerProps = {
+    name?: string;
+    "aria-label"?: string;
+    color?: string;
+    hoverColor?: string;
+    hoverBackground?: string;
+    menuData?: any[];
+};
 declare const MenuTrigger: {
     (props: any): JSX.Element;
     propTypes: {

package/dist/src/StyledProps/index.d.ts

@@ -0,0 +1,8 @@
+import { SpaceProps, ColorProps, TypographyProps, LayoutProps, BoxShadowProps, BorderProps, OverflowProps } from "styled-system";
+import { TextOverflowProps } from "./textOverflow";
+import { CursorProps } from "./cursor";
+import { TransformProps } from "./transform";
+import { TransitionProps } from "./transition";
+import { VisibilityProps } from "./visibility";
+export declare const addStyledProps: import("styled-system").styleFn;
+export declare type StyledProps = BorderProps & BoxShadowProps & ColorProps & CursorProps & LayoutProps & OverflowProps & SpaceProps & TextOverflowProps & TransformProps & TransitionProps & TypographyProps & VisibilityProps;

package/dist/src/Type/Text.d.ts

@@ -1,14 +1,12 @@
 /// <reference types="react" />
-import { SpaceProps, TypographyProps, ColorProps, OverflowProps, LayoutProps } from "styled-system";
-import { TextOverflowProps } from "../StyledProps/textOverflow";
-import { CursorProps } from "../StyledProps/cursor";
 import type { DefaultNDSThemeType } from "../theme.type";
+import { StyledProps } from "../StyledProps";
 export declare type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
     inline?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & SpaceProps & OverflowProps & LayoutProps & TextOverflowProps & TypographyProps & CursorProps & ColorProps & {
+} & StyledProps & {
     theme?: DefaultNDSThemeType;
 };
 declare const Text: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, TextProps, never>;

package/dist/src/index.d.ts

@@ -48,3 +48,5 @@ export { ApplicationFrame, Page, Sidebar } from "./Layout";
 export { useWindowDimensions } from "./utils";
 export { Divider } from "./Divider";
 export { SortingTable } from "./SortingTable";
+export { addStyledProps } from "./StyledProps";
+export type { StyledProps } from "./StyledProps";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.8.0",
+  "version": "7.1.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {