@nulogy/components 15.2.2 → 15.2.3

package/dist/src/BrandedNavBar/MenuTriggerButton.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
@@ -40,17 +29,14 @@ const StyledButton = styled.button(({ color = "white", hoverColor = "lightBlue",
         opacity: ".5",
     },
 }));
-const MenuTriggerButton = React.forwardRef((_a, ref) => {
-    var { name, color, hoverColor, hoverBackground } = _a, props = __rest(_a, ["name", "color", "hoverColor", "hoverBackground"]);
-    return (React.createElement(StyledButton, Object.assign({ color: color, hoverColor: hoverColor, hoverBackground: hoverBackground, ref: ref }, props),
-        name,
-        React.createElement(Icon, { style: {
-                position: "absolute",
-                top: "52%",
-                transform: "translateY(-50%)",
-                right: "8px",
-            }, icon: "downArrow", color: themeGet(`colors.${color}`, color)(color), size: "20px", p: "2px" })));
-});
+const MenuTriggerButton = React.forwardRef(({ name, color, hoverColor, hoverBackground, ...props }, ref) => (React.createElement(StyledButton, { color: color, hoverColor: hoverColor, hoverBackground: hoverBackground, ref: ref, ...props },
+    name,
+    React.createElement(Icon, { style: {
+            position: "absolute",
+            top: "52%",
+            transform: "translateY(-50%)",
+            right: "8px",
+        }, icon: "downArrow", color: themeGet(`colors.${color}`, color)(color), size: "20px", p: "2px" }))));
 MenuTriggerButton.displayName = "MenuTriggerButton";
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default MenuTriggerButton;

package/dist/src/BrandedNavBar/MobileMenu.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import { display } from "styled-system";
@@ -41,26 +30,38 @@ const getSharedStyles = (theme) => ({
     lineHeight: theme.lineHeights.heading3,
     padding: `${theme.space.x1} ${theme.space.x3}`,
 });
-const TopLevelLink = styled(Link)(({ theme }) => (Object.assign(Object.assign({}, getSharedStyles(theme)), { color: theme.colors.darkBlue, "&:visited": {
+const TopLevelLink = styled(Link)(({ theme }) => ({
+    ...getSharedStyles(theme),
+    color: theme.colors.darkBlue,
+    "&:visited": {
         color: theme.colors.darkBlue,
-    }, width: "100%", borderRadius: "0", transition: ".2s", "&:hover, &:focus": {
+    },
+    width: "100%",
+    borderRadius: "0",
+    transition: ".2s",
+    "&:hover, &:focus": {
         outline: "none",
         color: theme.colors.blackBlue,
         backgroundColor: theme.colors.whiteGrey,
         cursor: "pointer",
-    }, "&:focus": {
+    },
+    "&:focus": {
         boxShadow: theme.shadows.focus,
-    }, "&:disabled": {
+    },
+    "&:disabled": {
         opacity: ".5",
-    } })), addStyledProps);
-const TopLevelText = styled(Text)(({ theme }) => (Object.assign(Object.assign({}, getSharedStyles(theme)), { color: theme.colors.blackBlue })), addStyledProps);
+    },
+}), addStyledProps);
+const TopLevelText = styled(Text)(({ theme }) => ({
+    ...getSharedStyles(theme),
+    color: theme.colors.blackBlue,
+}), addStyledProps);
 const SubMenuItemsList = styled.ul({
     listStyle: "none",
     paddingLeft: "0",
     margin: "0",
 });
 const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
-    var _a;
     const sharedLinkProps = {
         onClick: linkOnClick,
         href: menuItem.href,
@@ -72,25 +73,18 @@ const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
         target: menuItem.openInNew ? "_blank" : undefined,
     };
     const topLevel = layer === 0;
-    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, topLevel ? (React.createElement(TopLevelLink, Object.assign({}, sharedLinkProps),
+    return (React.createElement("li", { key: menuItem.key ?? menuItem.name }, topLevel ? (React.createElement(TopLevelLink, { ...sharedLinkProps },
         menuItem.name,
-        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" }))) : (React.createElement(DropdownLink, Object.assign({}, sharedLinkProps),
+        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" }))) : (React.createElement(DropdownLink, { ...sharedLinkProps },
         menuItem.name,
         menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })))));
 };
-const renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => {
-    var _a;
-    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, menuItem.render({ size: "small", onItemClick: linkOnClick, layer })));
-};
-const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => {
-    var _a;
-    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name, style: { display: "block" } },
-        React.createElement(SubMenu, { menuItem: menuItem, layer: layer, themeColorObject: themeColorObject, linkOnClick: linkOnClick })));
-};
+const renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => (React.createElement("li", { key: menuItem.key ?? menuItem.name }, menuItem.render({ size: "small", onItemClick: linkOnClick, layer })));
+const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => (React.createElement("li", { key: menuItem.key ?? menuItem.name, style: { display: "block" } },
+    React.createElement(SubMenu, { menuItem: menuItem, layer: layer, themeColorObject: themeColorObject, linkOnClick: linkOnClick })));
 const renderText = (menuItem, linkOnClick, themeColorObject, layer) => {
-    var _a;
     const MenuText = layer === 0 ? TopLevelText : DropdownText;
-    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name },
+    return (React.createElement("li", { key: menuItem.key ?? menuItem.name },
         React.createElement(MenuText, { pl: getPaddingLeft(layer), mb: "x1" }, menuItem.name)));
 };
 const getRenderFunction = (menuItem) => {
@@ -135,12 +129,11 @@ const Nav = styled.nav(({ backgroundColor }) => ({
 }), {
     minHeight: "calc(100vh - 72px)",
 });
-const BaseMobileMenu = (_a) => {
-    var { menuData, closeMenu, subtext, themeColorObject, showNulogyLogo } = _a, props = __rest(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "showNulogyLogo"]);
+const BaseMobileMenu = ({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }) => {
     useScrollLock();
-    return (React.createElement(Nav, Object.assign({ backgroundColor: themeColorObject && themeColorObject.background }, props),
+    return (React.createElement(Nav, { backgroundColor: themeColorObject && themeColorObject.background, ...props },
         React.createElement(BrandingWrap, null,
-            React.createElement(BrandingText, { logoColor: themeColorObject === null || themeColorObject === void 0 ? void 0 : themeColorObject.logoColor })),
+            React.createElement(BrandingText, { logoColor: themeColorObject?.logoColor })),
         React.createElement(Menu, null,
             menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject),
             menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)),

package/dist/src/BrandedNavBar/NavBar.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import ReactResizeDetector from "react-resize-detector";
@@ -33,12 +22,11 @@ const themeColorObject = {
     textColor: "blackBlue",
     logoColor: "blue",
 };
-const MediumNavBar = (_a) => {
-    var { menuData, environment, logo, showNulogyLogo, subtext } = _a, props = __rest(_a, ["menuData", "environment", "logo", "showNulogyLogo", "subtext"]);
+const MediumNavBar = ({ menuData, environment, logo, showNulogyLogo, subtext, ...props }) => {
     const { t } = useTranslation();
     return (React.createElement(React.Fragment, null,
         environment && React.createElement(EnvironmentBanner, null, environment),
-        React.createElement("header", Object.assign({}, props),
+        React.createElement("header", { ...props },
             React.createElement(NavBarBackground, { backgroundColor: "white", height: NAVBAR_HEIGHT },
                 logo,
                 React.createElement(Flex, { justifyContent: "space-between", alignContent: "flex-end", flexGrow: 1, ml: "x3", alignItems: "center" },
@@ -48,21 +36,19 @@ const MediumNavBar = (_a) => {
                         showNulogyLogo && (React.createElement(Box, { pl: "x3" },
                             React.createElement(NulogyLogoContainer, { height: NAVBAR_HEIGHT, subText: subtext })))))))));
 };
-const SelectNavBarBasedOnWidth = (_a) => {
-    var { width, defaultOpen, breakpointUpper, brandingLinkHref = "/", brandingLinkTo, brandingLinkComponent, logoSrc } = _a, props = __rest(_a, ["width", "defaultOpen", "breakpointUpper", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent", "logoSrc"]);
+const SelectNavBarBasedOnWidth = ({ width, defaultOpen, breakpointUpper, brandingLinkHref = "/", brandingLinkTo, brandingLinkComponent, logoSrc, ...props }) => {
     const currentWidth = width || (typeof window !== "undefined" && window.innerWidth);
     const logo = (React.createElement(BrandLogoContainer, { logoSrc: logoSrc, brandingLinkHref: brandingLinkHref, brandingLinkTo: brandingLinkTo, brandingLinkComponent: brandingLinkComponent, subtext: props.subtext }));
     if (currentWidth >= numberFromDimension(breakpointUpper)) {
-        return React.createElement(MediumNavBar, Object.assign({ logo: logo, showNulogyLogo: logoSrc }, props));
+        return React.createElement(MediumNavBar, { logo: logo, showNulogyLogo: logoSrc, ...props });
     }
     else {
-        return (React.createElement(SmallNavBar, Object.assign({ width: currentWidth, defaultOpen: defaultOpen, themeColorObject: themeColorObject, navBarHeight: NAVBAR_HEIGHT, logo: logo, showNulogyLogo: logoSrc }, props)));
+        return (React.createElement(SmallNavBar, { width: currentWidth, defaultOpen: defaultOpen, themeColorObject: themeColorObject, navBarHeight: NAVBAR_HEIGHT, logo: logo, showNulogyLogo: logoSrc, ...props }));
     }
 };
-const BaseNavBar = (_a) => {
-    var { environment, breakpointUpper = "medium" } = _a, props = __rest(_a, ["environment", "breakpointUpper"]);
+const BaseNavBar = ({ environment, breakpointUpper = "medium", ...props }) => {
     const { breakpoints } = useTheme();
-    return (React.createElement(ReactResizeDetector, { handleWidth: true }, ({ width }) => (React.createElement(SelectNavBarBasedOnWidth, Object.assign({ breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper, width: width, environment: environment }, props)))));
+    return (React.createElement(ReactResizeDetector, { handleWidth: true }, ({ width }) => (React.createElement(SelectNavBarBasedOnWidth, { breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper, width: width, environment: environment, ...props }))));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const NavBar = styled(BaseNavBar)({});

package/dist/src/BrandedNavBar/NavBar.story.js

@@ -17,7 +17,7 @@ const ResetStorybookView = styled.div({
     height: "100vh",
 });
 const BrandedNavBar = (props) => (React.createElement(ResetStorybookView, null,
-    React.createElement(NDSBrandedNavBar, Object.assign({}, props)),
+    React.createElement(NDSBrandedNavBar, { ...props }),
     React.createElement(Heading1, { mt: "x3", ml: "x1" }, "Some content")));
 const primaryMenu = [
     {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultNDSThemeType } from "../theme";
 import { StyledProps } from "../StyledProps";
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */

package/dist/src/BrandedNavBar/NavBarDropdownMenu.js

@@ -50,12 +50,18 @@ class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
                 closeMenu,
                 openMenu,
                 isOpen,
-            }), Object.assign(Object.assign({ "aria-haspopup": true, "aria-expanded": isOpen, type: "button" }, this.menuTriggerEventHandlers()), { ref: (node) => {
+            }), {
+                "aria-haspopup": true,
+                "aria-expanded": isOpen,
+                type: "button",
+                ...this.menuTriggerEventHandlers(),
+                ref: (node) => {
                     ref(node);
                     this.setTriggerRef(node);
-                } }))),
+                },
+            })),
             isOpen && (React.createElement(Popper, { placement: placement, modifiers: modifiers }, (popperProps) => (React.createElement(React.Fragment, null,
-                React.createElement(DropdownMenuContainer, Object.assign({}, popperProps, { placement: placement, showArrow: showArrow }, this.menuEventHandlers(), { ref: (node) => {
+                React.createElement(DropdownMenuContainer, { ...popperProps, placement: placement, showArrow: showArrow, ...this.menuEventHandlers(), ref: (node) => {
                         if (typeof popperProps.ref === "function") {
                             popperProps.ref(node);
                         }
@@ -63,11 +69,11 @@ class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
                     }, onMouseDown: (e) => {
                         e.preventDefault();
                         e.target.focus();
-                    } }, dropdownMenuContainerEventHandlers({
-                    openMenu,
-                    closeMenu,
-                })),
-                    React.createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, { placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" })),
+                    }, ...dropdownMenuContainerEventHandlers({
+                        openMenu,
+                        closeMenu,
+                    }) },
+                    React.createElement(PopperArrow, { ...popperProps.arrowProps, placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" }),
                     React.createElement(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
                     childrenFnc({
                         closeMenu,

package/dist/src/BrandedNavBar/SmallNavBar.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import styled, { useTheme } from "styled-components";
 import { useTranslation } from "react-i18next";
 import React, { useEffect } from "react";
@@ -59,8 +48,7 @@ const MenuIcon = ({ isOpen }) => {
     return React.createElement(Icon, { icon: icon, title: title });
 };
 /* eslint-disable react/destructuring-assignment */
-const SmallNavBarNoState = (_a) => {
-    var { menuData, menuState: { isOpen, toggleMenu, closeMenu }, subtext, environment, showNulogyLogo, breakpointLower = "small", themeColorObject, navBarHeight, logo, renderMenuButton } = _a, props = __rest(_a, ["menuData", "menuState", "subtext", "environment", "showNulogyLogo", "breakpointLower", "themeColorObject", "navBarHeight", "logo", "renderMenuButton"]);
+const SmallNavBarNoState = ({ menuData, menuState: { isOpen, toggleMenu, closeMenu }, subtext, environment, showNulogyLogo, breakpointLower = "small", themeColorObject, navBarHeight, logo, renderMenuButton, ...props }) => {
     const navRef = React.useRef(null);
     useEffect(() => {
         if (navRef && navRef.current) {
@@ -69,20 +57,20 @@ const SmallNavBarNoState = (_a) => {
     }, [isOpen]);
     const { breakpoints } = useTheme();
     const ariaExpanded = isOpen ? true : null;
-    return (React.createElement(SmallHeader, Object.assign({ ref: navRef, isOpen: isOpen, breakpointLower: breakpoints ? breakpoints[breakpointLower] : breakpointLower }, props),
+    return (React.createElement(SmallHeader, { ref: navRef, isOpen: isOpen, breakpointLower: breakpoints ? breakpoints[breakpointLower] : breakpointLower, ...props },
         environment && React.createElement(EnvironmentBanner, null, environment),
         React.createElement(NavBarBackground, { backgroundColor: "white", height: navBarHeight },
             logo,
             React.createElement(Flex, { justifyContent: "flex-end", ml: "x3", flexGrow: 1 },
                 menuData.search && (React.createElement(Flex, { maxWidth: "18em", alignItems: "center", px: "0" },
-                    React.createElement(NavBarSearch, Object.assign({}, menuData.search)))),
+                    React.createElement(NavBarSearch, { ...menuData.search }))),
                 (menuData.primaryMenu || menuData.secondaryMenu) &&
                     (renderMenuButton ? (renderMenuButton({
                         themeColorObject: themeColorObject,
                         onClick: toggleMenu,
                         ariaExpanded,
                         isOpen,
-                    })) : (React.createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, { onClick: toggleMenu, "aria-expanded": ariaExpanded }),
+                    })) : (React.createElement(MobileMenuTrigger, { ...themeColorObject, onClick: toggleMenu, "aria-expanded": ariaExpanded },
                         React.createElement(MenuIcon, { isOpen: isOpen })))))),
         isOpen && (React.createElement(MobileMenu, { themeColorObject: themeColorObject, subtext: subtext, menuData: menuData, closeMenu: closeMenu, showNulogyLogo: showNulogyLogo }))));
 };

package/dist/src/BrandedNavBar/SmallNavBar.story.js

@@ -15,7 +15,7 @@ const ResetStorybookView = styled.div({
     height: "100vh",
 });
 const WrappedSmallNavBar = (props) => (React.createElement(ResetStorybookView, null,
-    React.createElement(SmallNavBar, Object.assign({ navBarHeight: "56px" }, props)),
+    React.createElement(SmallNavBar, { navBarHeight: "56px", ...props }),
     React.createElement(Heading1, { mt: "x3", ml: "x1" }, "Some content")));
 const primaryMenu = [
     {

package/dist/src/BrandedNavBar/SubMenuTrigger.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled, { useTheme } from "styled-components";
 import { addStyledProps } from "../StyledProps";
@@ -16,16 +5,15 @@ import NavBarDropdownMenu from "./NavBarDropdownMenu";
 import renderSubMenuItems from "./renderSubMenuItems";
 import SubMenuTriggerButton from "./SubMenuTriggerButton";
 import { NAVBAR_HEIGHT } from "./NavBar";
-const SubMenuTrigger = (_a) => {
-    var { menuData, name, onItemClick, trigger, layer, menuType } = _a, props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
+const SubMenuTrigger = ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }) => {
     const theme = useTheme();
-    return (React.createElement(NavBarDropdownMenu, Object.assign({ placement: getPlacement(menuType), modifiers: {
+    return (React.createElement(NavBarDropdownMenu, { placement: getPlacement(menuType), modifiers: {
             preventOverflow: {
                 enabled: true,
                 padding: theme.space.x1,
                 boundariesElement: "viewport",
             },
-        }, showArrow: true, triggerTogglesMenuState: false }, props, { dropdownMenuContainerEventHandlers: ({ openMenu, closeMenu }) => ({
+        }, showArrow: true, triggerTogglesMenuState: false, ...props, dropdownMenuContainerEventHandlers: ({ openMenu, closeMenu }) => ({
             onMouseEnter: openMenu,
             onMouseLeave: closeMenu,
         }), trigger: ({ closeMenu, openMenu, isOpen }) => {
@@ -39,7 +27,7 @@ const SubMenuTrigger = (_a) => {
                 layer,
             };
             return trigger ? trigger(triggerProps) : defaultRender();
-        } }),
+        } },
         React.createElement(SubMenuItemsList, null, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType))));
 };
 const SubMenuItemsList = styled("ul")(({ theme }) => ({

package/dist/src/BrandedNavBar/SubMenuTriggerButton.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import styled from "styled-components";
 import React from "react";
 import { DropdownButton } from "../DropdownMenu";
@@ -19,9 +8,8 @@ const StyledButton = styled(DropdownButton)(({ isOpen, theme }) => ({
     backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
     color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey,
 }));
-const SubMenuTriggerButton = React.forwardRef((_a, ref) => {
-    var { name, isOpen } = _a, props = __rest(_a, ["name", "isOpen"]);
-    return (React.createElement(StyledButton, Object.assign({ isOpen: isOpen, ref: ref }, props),
+const SubMenuTriggerButton = React.forwardRef(({ name, isOpen, ...props }, ref) => {
+    return (React.createElement(StyledButton, { isOpen: isOpen, ref: ref, ...props },
         React.createElement(Flex, { gap: "half", justifyContent: "space-between", alignItems: "center" },
             name,
             React.createElement(Icon, { icon: "rightArrow", size: "20px" }))));

package/dist/src/BrandedNavBar/renderSubMenuItems.js

@@ -2,13 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { DropdownText, DropdownLink } from "../DropdownMenu";
 import { Icon } from "../Icon";
-const renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => {
-    var _a;
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
-        React.createElement(SubMenuTrigger, { onItemClick: onItemClick, name: subMenuItem.name, menuData: subMenuItem.items, trigger: subMenuItem.trigger, layer: layer, menuType: menuType })));
-};
+const renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name },
+    React.createElement(SubMenuTrigger, { onItemClick: onItemClick, name: subMenuItem.name, menuData: subMenuItem.items, trigger: subMenuItem.trigger, layer: layer, menuType: menuType })));
 const renderSubMenuLink = (subMenuItem, onItemClick) => {
-    var _a;
     const linkProps = {
         onClick: onItemClick,
         href: subMenuItem.href,
@@ -16,20 +12,14 @@ const renderSubMenuLink = (subMenuItem, onItemClick) => {
         as: subMenuItem.as,
         target: subMenuItem.openInNew ? "_blank" : undefined,
     };
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
-        React.createElement(DropdownLink, Object.assign({}, linkProps),
+    return (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name },
+        React.createElement(DropdownLink, { ...linkProps },
             subMenuItem.name,
             subMenuItem.openInNew && React.createElement(Icon, { size: "x2", icon: "openInNew" }))));
 };
-const renderCustom = (subMenuItem, onItemClick, _SubMenuTrigger, layer) => {
-    var _a;
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name }, subMenuItem.render({ size: "medium", onItemClick, layer })));
-};
-const renderText = (subMenuItem) => {
-    var _a;
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
-        React.createElement(DropdownText, null, subMenuItem.name)));
-};
+const renderCustom = (subMenuItem, onItemClick, _SubMenuTrigger, layer) => (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name }, subMenuItem.render({ size: "medium", onItemClick, layer })));
+const renderText = (subMenuItem) => (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name },
+    React.createElement(DropdownText, null, subMenuItem.name)));
 const getRenderFunction = (subMenuItem) => {
     if (subMenuItem.items) {
         return renderSubMenuTrigger;

package/dist/src/Branding/Branding.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled, { useTheme } from "styled-components";
 import { Flex } from "../Flex";
@@ -65,10 +54,9 @@ const BrandingBoxPaddings = {
     medium: "2px",
     large: "6px",
 };
-const Branding = (_a) => {
-    var { logoType = "wordmark", subtext, size = "medium", alignment = "left", withLine, logoColor = "blue", className } = _a, props = __rest(_a, ["logoType", "subtext", "size", "alignment", "withLine", "logoColor", "className"]);
+const Branding = ({ logoType = "wordmark", subtext, size = "medium", alignment = "left", withLine, logoColor = "blue", className, ...props }) => {
     const theme = useTheme();
-    return (React.createElement(BrandingWrap, Object.assign({ size: size, alignment: alignment, className: className }, props),
+    return (React.createElement(BrandingWrap, { size: size, alignment: alignment, className: className, ...props },
         logoType === "lettermark" ? (React.createElement(LettermarkLogo, { size: size, letterFill: getLogoColor(logoColor, theme).letter })) : (React.createElement(WordmarkLogo, { size: size, letterFill: getLogoColor(logoColor, theme).letter, logoFill: getLogoColor(logoColor, theme).logo })),
         subtext && (React.createElement(Flex, { justifyContent: getAlignment(alignment), width: "100%", py: BrandingBoxPaddings[size] },
             alignment !== "left" && withLine && React.createElement(Line, { logoColor: logoColor }),

package/dist/src/Branding/BrandingText.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type BrandingTextProps = {
     logoColor?: "blue" | "white";
     size?: "small" | "medium" | "large";

package/dist/src/Branding/LettermarkLogo.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 const sizes = {
     small: {
@@ -25,8 +14,7 @@ const sizes = {
     },
 };
 const getSize = (size) => sizes[size] || sizes.medium;
-export default function LettermarkLogo(_a) {
-    var { size, letterFill } = _a, props = __rest(_a, ["size", "letterFill"]);
-    return (React.createElement("svg", Object.assign({}, getSize(size), props, { viewBox: "0 0 37 32", style: { display: "block", margin: size === "large" ? null : "2px 0" } }),
+export default function LettermarkLogo({ size, letterFill, ...props }) {
+    return (React.createElement("svg", { ...getSize(size), ...props, viewBox: "0 0 37 32", style: { display: "block", margin: size === "large" ? null : "2px 0" } },
         React.createElement("path", { fill: letterFill, d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z" })));
 }

package/dist/src/Branding/WordmarkLogo.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 const sizes = {
     small: {
@@ -25,9 +14,8 @@ const sizes = {
     },
 };
 const getSize = (size) => sizes[size] || sizes.medium;
-export default function WordmarkLogo(_a) {
-    var { size, logoFill, letterFill } = _a, props = __rest(_a, ["size", "logoFill", "letterFill"]);
-    return (React.createElement("svg", Object.assign({}, getSize(size), props, { viewBox: "0 0 133 32", style: { display: "block", margin: size === "medium" ? "2px 0" : null } }),
+export default function WordmarkLogo({ size, logoFill, letterFill, ...props }) {
+    return (React.createElement("svg", { ...getSize(size), ...props, viewBox: "0 0 133 32", style: { display: "block", margin: size === "medium" ? "2px 0" : null } },
         React.createElement("path", { fill: letterFill, d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z" }),
         React.createElement("g", { transform: "translate(43.000000, 0.000000)", fill: logoFill },
             React.createElement("path", { d: "M5.14521212,24.2224981 L1.33226763e-14,24.2224981 L1.33226763e-14,9.41134654 L4.75151515,9.41134654 L4.75151515,11.8937708 C5.43733518,11.0060378 6.29475204,10.2653615 7.27272727,9.71583139 C8.16188898,9.23817548 9.15699751,8.9920662 10.166303,9.00019502 C11.7333333,9.00019502 12.9221818,9.44948795 13.7328485,10.3480738 C14.5435152,11.2466597 14.9488485,12.5615688 14.9488485,14.2928011 L14.9488485,24.2224981 L9.83078788,24.2224981 L9.83078788,15.7376496 C9.83078788,14.961892 9.67175758,14.3755486 9.35369697,13.9786193 C9.03563636,13.58169 8.56436364,13.3877506 7.93987879,13.3968011 C7.04258586,13.3968011 6.35216162,13.6980536 5.86860606,14.3005587 C5.38505051,14.9030637 5.14391919,15.7803162 5.14521212,16.9323162 L5.14521212,24.2224981 Z" }),

package/dist/src/Breadcrumbs/Breadcrumbs.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { isValidElement } from "react";
 import { Flex } from "../Flex";
 import { Icon } from "../Icon";
@@ -21,15 +10,14 @@ const insertSeparators = (items) => {
             React.createElement(Icon, { icon: "rightArrow" })));
     }, []);
 };
-const Breadcrumbs = (_a) => {
-    var { variant, as = "nav", children } = _a, props = __rest(_a, ["variant", "as", "children"]);
+const Breadcrumbs = ({ variant, as = "nav", children, ...props }) => {
     const componentVariant = useComponentVariant(variant);
     const allItems = React.Children.map(children, (child, index) => {
         if (!isValidElement(child))
             return null;
         return (React.createElement(BreadcrumbsListItem, { variant: componentVariant, key: `child-${index}` }, child));
     }).filter(Boolean);
-    return (React.createElement(Flex, Object.assign({ as: as }, props),
+    return (React.createElement(Flex, { as: as, ...props },
         React.createElement(BreadcrumbsList, null, insertSeparators(allItems))));
 };
 export default Breadcrumbs;

package/dist/src/Breadcrumbs/BreadcrumbsList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const BreadcrumbsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
 export default BreadcrumbsList;

package/dist/src/Breadcrumbs/BreadcrumbsListItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export declare const BreadcrumbsListSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const BreadcrumbsListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {

package/dist/src/Button/Button.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled, { useTheme } from "styled-components";
 import { space, variant } from "styled-system";
@@ -75,11 +64,10 @@ const WrapperButton = styled.button(({ fullWidth }) => ({
         },
     },
 }), space);
-const Button = React.forwardRef((_a, ref) => {
-    var { children, iconSide = "right", icon, className, asLink, variant, size } = _a, props = __rest(_a, ["children", "iconSide", "icon", "className", "asLink", "variant", "size"]);
+const Button = React.forwardRef(({ children, iconSide = "right", icon, className, asLink, variant, size, ...props }, ref) => {
     const { lineHeights: { smallTextCompressed }, } = useTheme();
     const componentVariant = useComponentVariant(variant);
-    return (React.createElement(WrapperButton, Object.assign({ as: asLink ? "a" : "button", ref: ref, className: className, variant: componentVariant, size: size }, props),
+    return (React.createElement(WrapperButton, { as: asLink ? "a" : "button", ref: ref, className: className, variant: componentVariant, size: size, ...props },
         icon && iconSide === "left" && React.createElement(Icon, { size: `${smallTextCompressed}em`, mr: "half", icon: icon }),
         children,
         icon && iconSide === "right" && React.createElement(Icon, { size: `${smallTextCompressed}em`, ml: "half", icon: icon })));

package/dist/src/Button/CloseButton.js

@@ -45,7 +45,7 @@ const WrapperButton = styled.button(({ disabled, theme }) => ({
 const CloseButton = React.forwardRef((props, ref) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (React.createElement(WrapperButton, Object.assign({ "aria-label": t("close"), ref: ref }, props),
+    return (React.createElement(WrapperButton, { "aria-label": t("close"), ref: ref, ...props },
         React.createElement(Icon, { size: theme.space.x4, icon: "close", p: "half" })));
 });
 export default CloseButton;