@nulogy/components 11.3.1 → 12.1.0

package/dist/main.js

@@ -11051,7 +11051,14 @@
         },
         padding: subPx(theme.space.x1) + " " + theme.space.x2
       };
-    }, function (_ref3) {
+    }, variant$1({
+      variants: {
+        touch: {
+          fontSize: "md",
+          lineHeight: "base"
+        }
+      }
+    }), function (_ref3) {
       var theme = _ref3.theme;
       return variant$1({
         prop: "size",
@@ -11067,14 +11074,7 @@
           }
         }
       });
-    }, variant$1({
-      variants: {
-        touch: {
-          fontSize: "md",
-          lineHeight: "base"
-        }
-      }
-    }), space);
+    }, space);
     var Button = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
       var children = _a.children,
           _a$iconSide = _a.iconSide,
@@ -14015,7 +14015,7 @@
       };
     };
 
-    function memoize(fn) {
+    function memoize$1(fn) {
       var cache = Object.create(null);
       return function (arg) {
         if (cache[arg] === undefined) cache[arg] = fn(arg);
@@ -14470,7 +14470,7 @@
 
     var isBrowser$5 = typeof document !== 'undefined';
     var getServerStylisCache = isBrowser$5 ? undefined : weakMemoize(function () {
-      return memoize(function () {
+      return memoize$1(function () {
         var cache = {};
         return function (name) {
           return cache[name];
@@ -14834,7 +14834,7 @@
       return value != null && typeof value !== 'boolean';
     };
 
-    var processStyleName = /* #__PURE__ */memoize(function (styleName) {
+    var processStyleName = /* #__PURE__ */memoize$1(function (styleName) {
       return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
     });
 
@@ -16808,7 +16808,7 @@
         })
       });
     };
-    var Menu$1 = function Menu(props) {
+    var Menu$2 = function Menu(props) {
       var children = props.children,
         innerRef = props.innerRef,
         innerProps = props.innerProps;
@@ -16818,7 +16818,7 @@
         ref: innerRef
       }, innerProps), children);
     };
-    var Menu$1$1 = Menu$1;
+    var Menu$1$1 = Menu$2;
 
     // ==============================
     // Menu List
@@ -24481,21 +24481,21 @@
         }
       };
     }, function (_ref2) {
-      var theme = _ref2.theme,
-          variant = _ref2.variant;
-      return stylesForVariant({
-        touch: {
-          div: {
-            // padding: subPx(theme.space.x2),
-            padding: subPx(theme.space.x1)
-          }
-        },
-        desktop: {
-          div: {
-            padding: subPx(theme.space.x1)
+      var theme = _ref2.theme;
+      return variant({
+        variants: {
+          touch: {
+            div: {
+              padding: subPx(theme.space.x1)
+            }
+          },
+          desktop: {
+            div: {
+              padding: subPx(theme.space.x1)
+            }
           }
         }
-      }, variant);
+      });
     });
     function SelectOption$1(props) {
       var variant = useComponentVariant(props.variant);
@@ -27651,7 +27651,7 @@
       return null;
     } ////////////////////////////////////////////////////////////////////////////////
 
-    var Overlay$1 = styled__default["default"](motion(DialogOverlay)).withConfig({
+    var Overlay$2 = styled__default["default"](motion(DialogOverlay)).withConfig({
       displayName: "BottomSheetstyled__Overlay",
       componentId: "sc-1v36wsf-0"
     })(function (_ref) {
@@ -27673,7 +27673,7 @@
     })(function (_ref2) {
       var theme = _ref2.theme;
       return {
-        ":focus": {
+        "&:focus": {
           outline: "none"
         },
         inset: 0,
@@ -27734,7 +27734,7 @@
         marginTop: "auto"
       };
     });
-    var Header$1 = styled__default["default"].div.withConfig({
+    var Header$2 = styled__default["default"].div.withConfig({
       displayName: "BottomSheetstyled__Header",
       componentId: "sc-1v36wsf-4"
     })(function (_ref4) {
@@ -27816,7 +27816,7 @@
       ease: [0.32, 0.72, 0, 1]
     };
 
-    function Root(_a) {
+    function Root$1(_a) {
       var isOpen = _a.isOpen,
           onClose = _a.onClose,
           children = _a.children,
@@ -27837,7 +27837,7 @@
           onClose = _useBottomSheet.onClose,
           isOpen = _useBottomSheet.isOpen;
 
-      return /*#__PURE__*/React__default["default"].createElement(Overlay$1, Object.assign({
+      return /*#__PURE__*/React__default["default"].createElement(Overlay$2, Object.assign({
         variants: overlayVariants,
         initial: "hidden",
         animate: "visible",
@@ -27868,11 +27868,11 @@
     }
 
     var BottomSheetParts = {
-      Root: Root,
+      Root: Root$1,
       Overlay: OverlayPart,
       Sheet: SheetPart,
       ContentContainer: ContentContainer,
-      Header: Header$1,
+      Header: Header$2,
       Title: Title,
       HelpText: HelpText,
       Footer: Footer
@@ -28312,8 +28312,8 @@
     }), addStyledProps);
 
     var DropdownLink = styled__default["default"].a.withConfig({
-      shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
-        return !["hoverColor", "bgHoverColor"].includes(prop) && defaultValidatorFn(prop);
+      shouldForwardProp: function shouldForwardProp(prop) {
+        return !["hoverColor", "bgHoverColor"].includes(prop);
       },
       displayName: "DropdownLink",
       componentId: "sc-73jvsg-0"
@@ -28915,8 +28915,8 @@
       displayName: "DesktopMenu",
       componentId: "sc-8mrjkc-3"
     })({
-      "> div": {
-        ":not(:last-of-type)": {
+      "& > div": {
+        "&:not(:last-of-type)": {
           marginRight: "8px"
         }
       }
@@ -29196,7 +29196,7 @@
       return {
         position: "relative",
         width: "100%",
-        ":before": {
+        "&:before": {
           content: "''",
           position: "absolute",
           top: "50%",
@@ -29393,7 +29393,7 @@
         position: "relative",
         display: "flex",
         flexGrow: 1,
-        ":focus-within": {
+        "&:focus-within": {
           svg: {
             color: theme.colors.darkBlue
           }
@@ -29563,7 +29563,7 @@
           border: "solid 1px transparent",
           borderRadius: theme.radii.medium,
           minWidth: theme.space.x5,
-          ":focus": {
+          "&:focus": {
             color: theme.colors.white,
             background: curriedDarken(0.1, theme.colors.blue),
             border: "solid 1px " + theme.colors.lightBlue,
@@ -29579,7 +29579,7 @@
           background: "transparent",
           border: "solid 1px transparent",
           borderRadius: theme.radii.medium,
-          ":focus": {
+          "&:focus": {
             background: theme.colors.white,
             border: "solid 1px transparent",
             boxShadow: "none"
@@ -29789,7 +29789,7 @@
       }) : defaultRender(), /*#__PURE__*/React__default["default"].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
     };
 
-    var Menu = styled__default["default"].ul.withConfig({
+    var Menu$1 = styled__default["default"].ul.withConfig({
       displayName: "MobileMenu__Menu",
       componentId: "sc-18t6zrc-4"
     })(function (_ref5) {
@@ -29831,7 +29831,7 @@
         backgroundColor: themeColorObject && themeColorObject.background
       }, props), /*#__PURE__*/React__default["default"].createElement(BrandingWrap, null, /*#__PURE__*/React__default["default"].createElement(BrandingText, {
         logoColor: themeColorObject === null || themeColorObject === void 0 ? void 0 : themeColorObject.logoColor
-      })), /*#__PURE__*/React__default["default"].createElement(Menu, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), showNulogyLogo && /*#__PURE__*/React__default["default"].createElement(Flex, {
+      })), /*#__PURE__*/React__default["default"].createElement(Menu$1, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), showNulogyLogo && /*#__PURE__*/React__default["default"].createElement(Flex, {
         textAlign: "center",
         borderTop: borderStyle,
         height: "40px",
@@ -45034,7 +45034,7 @@
       var _a;
 
       var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
-      var theme = styled.useTheme();
+      var theme = React__default["default"].useContext(styled.ThemeContext);
       var query = ((_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a[q]) ? "(min-width: " + theme.breakpoints[q] + ")" : q;
       var getMatches = React.useCallback(function (query) {
         if (isUnsupported) {
@@ -45085,7 +45085,7 @@
       }, children));
     };
 
-    var Header = function Header(_a) {
+    var Header$1 = function Header(_a) {
       var _b, _c;
 
       var background = _a.background,
@@ -45180,7 +45180,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
         flexDirection: "column",
         flexGrow: fullHeight ? 1 : 0
-      }, rest), renderHeader ? renderHeader() : (breadcrumbs || title || headerContent) && /*#__PURE__*/React__default["default"].createElement(Header, {
+      }, rest), renderHeader ? renderHeader() : (breadcrumbs || title || headerContent) && /*#__PURE__*/React__default["default"].createElement(Header$1, {
         renderBreadcrumbs: function renderBreadcrumbs() {
           return breadcrumbs;
         },
@@ -47343,7 +47343,7 @@
         backgroundColor: curriedTransparentize(0.1, theme.colors.white),
         zIndex: theme.zIndices.modalHeaderAndFooter,
         borderRadius: "0 0 " + theme.radii.medium + " " + theme.radii.medium,
-        ":after": {
+        "&:after": {
           content: "''",
           position: "absolute",
           top: 0,
@@ -47372,7 +47372,7 @@
         backgroundColor: curriedTransparentize(0.1, theme.colors.white),
         zIndex: theme.zIndices.modalHeaderAndFooter,
         borderRadius: theme.radii.medium + " " + theme.radii.medium + " 0 0",
-        ":after": {
+        "&:after": {
           content: "''",
           position: "absolute",
           bottom: 0,
@@ -47425,7 +47425,7 @@
 
       var theme = _ref2.theme;
       return _ref3 = {
-        ":focus": {
+        "&:focus": {
           outline: "none"
         },
         display: "flex",
@@ -50254,6 +50254,27 @@
       }
     });
 
+    function memoize(fn) {
+      var cache = Object.create(null);
+      return function (arg) {
+        if (cache[arg] === undefined) cache[arg] = fn(arg);
+        return cache[arg];
+      };
+    }
+
+    // eslint-disable-next-line no-undef
+    var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+
+    var isPropValid = /* #__PURE__ */memoize(function (prop) {
+      return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+      /* o */
+      && prop.charCodeAt(1) === 110
+      /* n */
+      && prop.charCodeAt(2) < 91;
+    }
+    /* Z+1 */
+    );
+
     var FeatureFlagsContext = /*#__PURE__*/React.createContext(undefined);
     function FeatureFlagsProvider(_ref) {
       var featureFlags = _ref.featureFlags,
@@ -50960,9 +50981,20 @@
           children = _ref.children;
       var variant = useComponentVariant();
       var theme = useNDSTheme(variant, customTheme);
-      return /*#__PURE__*/React__default["default"].createElement(styled.ThemeProvider, {
+      return /*#__PURE__*/React__default["default"].createElement(styled.StyleSheetManager, {
+        enableVendorPrefixes: true,
+        shouldForwardProp: shouldForwardProp
+      }, /*#__PURE__*/React__default["default"].createElement(styled.ThemeProvider, {
         theme: theme
-      }, children);
+      }, children));
+    }
+
+    function shouldForwardProp(propName, target) {
+      if (typeof target === "string") {
+        return isPropValid(propName);
+      }
+
+      return true;
     }
 
     var Reset = styled.createGlobalStyle(function () {
@@ -51091,7 +51123,7 @@
       }, children))))));
     }
 
-    var Overlay = styled__default["default"](Flex).withConfig({
+    var Overlay$1 = styled__default["default"](Flex).withConfig({
       displayName: "Overlay",
       componentId: "sc-mcd6gm-0"
     })(function (_ref) {
@@ -54392,6 +54424,380 @@
       }, props));
     });
 
+    var TOPBAR = {
+      themedHeight: "x6"
+    };
+
+    var MenuItemList = styled__default["default"].ul.withConfig({
+      displayName: "TopBarstyled__MenuItemList",
+      componentId: "sc-1hreuoq-0"
+    })(function (_ref) {
+      var _ref2;
+
+      var theme = _ref.theme;
+      return _ref2 = {
+        display: "grid",
+        width: "100%",
+        gap: theme.space.x1,
+        flexWrap: "wrap",
+        listStyle: "none",
+        padding: theme.space.x1_5,
+        margin: 0,
+        maxHeight: "calc(100dvh - " + theme.space[TOPBAR.themedHeight] + ")",
+        overflow: "auto",
+        gridTemplateColumns: "1fr"
+      }, _ref2["@media (min-width: " + theme.breakpoints.medium + ")"] = {
+        gridTemplateColumns: "repeat(2, 1fr)"
+      }, _ref2["@media (min-width: " + theme.breakpoints.large + ")"] = {
+        gridTemplateColumns: "repeat(3, 1fr)"
+      }, _ref2;
+    });
+    var Header = styled__default["default"].header.withConfig({
+      displayName: "TopBarstyled__Header",
+      componentId: "sc-1hreuoq-1"
+    })(function (_ref3) {
+      var theme = _ref3.theme;
+      return {
+        userSelect: "none",
+        touchAction: "none",
+        position: "sticky",
+        top: "0",
+        zIndex: theme.zIndices.navBar,
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: theme.colors.lightGrey,
+        background: curriedTransparentize(0.4, theme.colors.white),
+        backdropFilter: "blur(8px)",
+        width: "100dvw"
+      };
+    });
+    var Navigation = styled__default["default"].nav.withConfig({
+      displayName: "TopBarstyled__Navigation",
+      componentId: "sc-1hreuoq-2"
+    })(function (_ref4) {
+      var theme = _ref4.theme;
+      return {
+        height: theme.space[TOPBAR.themedHeight],
+        display: "flex",
+        alignItems: "center",
+        paddingLeft: theme.space.x2,
+        paddingRight: theme.space.x1
+      };
+    });
+    var StylelessButton = styled__default["default"].button.withConfig({
+      displayName: "TopBarstyled__StylelessButton",
+      componentId: "sc-1hreuoq-3"
+    })({
+      backgroundColor: "transparent",
+      border: "none",
+      margin: 0,
+      padding: 0,
+      textAlign: "inherit",
+      font: "inherit",
+      borderRadius: 0,
+      appearance: "none"
+    }, addStyledProps);
+    var MenuButton = styled__default["default"](StylelessButton).withConfig({
+      displayName: "TopBarstyled__MenuButton",
+      componentId: "sc-1hreuoq-4"
+    })(function (_ref5) {
+      var theme = _ref5.theme;
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: theme.space.x1,
+        borderRadius: theme.radii.medium,
+        transition: "background-color 0.2s",
+        cursor: "pointer",
+        "&:active, &:hover": {
+          backgroundColor: theme.colors.lightGrey
+        }
+      };
+    });
+    var NavigationItemsList = styled__default["default"].ul.withConfig({
+      displayName: "TopBarstyled__NavigationItemsList",
+      componentId: "sc-1hreuoq-5"
+    })({
+      padding: 0,
+      margin: 0,
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      listStyle: "none",
+      whiteSpace: "nowrap"
+    });
+    var StyledBackLink = styled__default["default"].a.withConfig({
+      displayName: "TopBarstyled__StyledBackLink",
+      componentId: "sc-1hreuoq-6"
+    })(function (_ref6) {
+      var theme = _ref6.theme;
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        color: theme.colors.midGrey,
+        textDecoration: "none",
+        paddingTop: theme.space.x1,
+        paddingBottom: theme.space.x1
+      };
+    });
+    var StyledPageTitle = styled__default["default"].li.withConfig({
+      displayName: "TopBarstyled__StyledPageTitle",
+      componentId: "sc-1hreuoq-7"
+    })(function (_ref7) {
+      var theme = _ref7.theme;
+      return {
+        paddingLeft: theme.space.x1,
+        paddingRight: theme.space.x1,
+        color: theme.colors.darkGrey,
+        textDecoration: "none",
+        fontSize: theme.fontSizes.small,
+        fontWeight: theme.fontWeights.medium,
+        lineHeight: theme.lineHeights.base,
+        whiteSpace: "nowrap",
+        flex: "auto",
+        textAlign: "center",
+        textOverflow: "ellipsis",
+        overflow: "hidden"
+      };
+    });
+    var Overlay = styled__default["default"](motion(DialogOverlay)).withConfig({
+      displayName: "TopBarstyled__Overlay",
+      componentId: "sc-1hreuoq-8"
+    })(function (_ref8) {
+      var theme = _ref8.theme;
+      return {
+        position: "fixed",
+        top: theme.space[TOPBAR.themedHeight],
+        bottom: theme.space.none,
+        left: theme.space.none,
+        right: theme.space.none,
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "flex-end",
+        backgroundColor: curriedTransparentize(0.85, theme.colors.white)
+      };
+    });
+    var TileLink = styled__default["default"].a.withConfig({
+      displayName: "TopBarstyled__TileLink",
+      componentId: "sc-1hreuoq-9"
+    })(function (_ref9) {
+      var theme = _ref9.theme;
+      return {
+        backgroundColor: curriedTransparentize(0.15)(theme.colors.blackBlue),
+        borderRadius: theme.radii.large,
+        display: "flex",
+        height: "100%",
+        alignItems: "flex-start",
+        padding: theme.space.x2,
+        textDecoration: "none",
+        color: theme.colors.white,
+        gap: theme.space.x1_5,
+        whiteSpace: "nowrap",
+        outlineOffset: theme.space.x0_25,
+        outlineColor: theme.colors.blue
+      };
+    });
+    var StyledMenuItem = styled__default["default"](motion.li).withConfig({
+      displayName: "TopBarstyled__StyledMenuItem",
+      componentId: "sc-1hreuoq-10"
+    })(function (_ref10) {
+      var _onlyChild, _ref11;
+
+      var theme = _ref10.theme;
+      return _ref11 = {
+        "&:only-child": (_onlyChild = {}, _onlyChild["@media (min-width: " + theme.breakpoints.medium + ")"] = {
+          gridColumn: "span 2"
+        }, _onlyChild["@media (min-width: " + theme.breakpoints.large + ")"] = {
+          gridColumn: "span 3"
+        }, _onlyChild)
+      }, _ref11["@media (min-width: " + theme.breakpoints.large + ")"] = {
+        "&:first-child:nth-last-child(2), &:last-child:nth-child(2)": {
+          gridColumn: "span 3"
+        }
+      }, _ref11;
+    });
+
+    var BACK_LINK_MAX_WIDTH = {
+      phoneLandscape: "20ch",
+      tabletPortrait: "18ch",
+      tabletLandscape: "20ch",
+      laptop: "24ch"
+    };
+    function BackLink(_a) {
+      var children = _a.children,
+          _a$maxWidth = _a.maxWidth,
+          maxWidth = _a$maxWidth === void 0 ? BACK_LINK_MAX_WIDTH : _a$maxWidth,
+          props = __rest$3(_a, ["children", "maxWidth"]);
+
+      var md = useMediaQuery("phoneLandscape");
+      return /*#__PURE__*/React__default["default"].createElement(Box, {
+        as: "li",
+        flex: "1 1"
+      }, /*#__PURE__*/React__default["default"].createElement(StyledBackLink, Object.assign({}, props, {
+        "data-testid": "topbar-back-link"
+      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "arrowBack"
+      }), md && /*#__PURE__*/React__default["default"].createElement(Text, {
+        maxWidth: maxWidth,
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        fontSize: "small"
+      }, children)));
+    }
+
+    var blurVariants = {
+      hidden: {
+        backdropFilter: "blur(0px)",
+        WebkitBackdropFilter: "blur(0px)"
+      },
+      visible: {
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+        transition: {
+          duration: 0.5,
+          ease: "easeInOut"
+        }
+      },
+      exit: {
+        backdropFilter: "blur(0px)",
+        WebkitBackdropFilter: "blur(0px)",
+        transition: {
+          duration: 0.5,
+          ease: "easeOut"
+        }
+      }
+    };
+    function Menu(_a) {
+      var _b;
+
+      var children = _a.children,
+          _a$defaultOpened = _a.defaultOpened,
+          defaultOpened = _a$defaultOpened === void 0 ? false : _a$defaultOpened,
+          props = __rest$3(_a, ["children", "defaultOpened"]);
+
+      var _React$useState = React__default["default"].useState(defaultOpened),
+          showMenu = _React$useState[0],
+          setShowMenu = _React$useState[1];
+
+      var _useTranslation = useTranslation(),
+          t = _useTranslation.t;
+
+      function close() {
+        setShowMenu(false);
+      }
+
+      function toggle() {
+        setShowMenu(function (s) {
+          return !s;
+        });
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(Flex, {
+        justifyContent: "flex-end",
+        as: "li",
+        color: "black",
+        flex: "1 1"
+      }, /*#__PURE__*/React__default["default"].createElement(MenuButton, {
+        onClick: toggle,
+        "data-testid": "topbar-menu-button"
+      }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        size: "x3",
+        color: "midGrey",
+        icon: showMenu ? "close" : "apps"
+      })), /*#__PURE__*/React__default["default"].createElement(AnimatePresence, null, showMenu && /*#__PURE__*/React__default["default"].createElement(Overlay, {
+        "data-testid": "topbar-menu-overlay",
+        initial: "hidden",
+        animate: "visible",
+        exit: "exit",
+        variants: blurVariants,
+        isOpen: showMenu,
+        onDismiss: close
+      }, /*#__PURE__*/React__default["default"].createElement(DialogContent, {
+        "data-testid": "topbar-menu",
+        "aria-label": (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : t("menu options")
+      }, /*#__PURE__*/React__default["default"].createElement(MenuItemList, null, children)))));
+    }
+
+    var fadeInVariants = {
+      hidden: {
+        opacity: 0,
+        filter: "blur(8px)",
+        y: -16,
+        scale: 0.95,
+        transition: {
+          ease: "easeOut",
+          duration: 0.25
+        }
+      },
+      visible: {
+        opacity: 1,
+        filter: "blur(0px)",
+        y: 0,
+        scale: 1,
+        transition: {
+          type: "spring",
+          duration: 0.75
+        }
+      }
+    };
+    function MenuItem(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React__default["default"].createElement(StyledMenuItem, {
+        "data-testid": "topbar-menu-item",
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        variants: fadeInVariants
+      }, children);
+    }
+
+    var MotionText = motion(Text);
+    function MenuItemLink(_a) {
+      var description = _a.description,
+          title = _a.title,
+          icon = _a.icon,
+          props = __rest$3(_a, ["description", "title", "icon"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(TileLink, Object.assign({}, props), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: icon,
+        size: "x3"
+      }), /*#__PURE__*/React__default["default"].createElement(Flex, {
+        flexDirection: "column",
+        justifyContent: "center"
+      }, /*#__PURE__*/React__default["default"].createElement(MotionText, {
+        fontWeight: "medium",
+        fontSize: "md",
+        lineHeight: "base"
+      }, title), /*#__PURE__*/React__default["default"].createElement(MotionText, {
+        fontSize: "xs"
+      }, description)));
+    }
+
+    function PageTitle(_a) {
+      var children = _a.children,
+          props = __rest$3(_a, ["children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(StyledPageTitle, Object.assign({
+        "data-testid": "topbar-page-title"
+      }, props), children);
+    }
+
+    function Root(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React__default["default"].createElement(Header, null, /*#__PURE__*/React__default["default"].createElement(Navigation, null, /*#__PURE__*/React__default["default"].createElement(NavigationItemsList, null, children)));
+    }
+    var TopBar = {
+      Root: Root,
+      PageTitle: PageTitle,
+      BackLink: BackLink,
+      Menu: Menu,
+      MenuItem: MenuItem,
+      MenuItemLink: MenuItemLink
+    };
+
     var MaybeTooltip = function MaybeTooltip(_a) {
       var _a$children = _a.children,
           children = _a$children === void 0 ? "" : _a$children,
@@ -54535,7 +54941,7 @@
     exports.Flex = Flex;
     exports.Form = Form;
     exports.FormSection = FormSection;
-    exports.Header = Header;
+    exports.Header = Header$1;
     exports.Heading1 = Heading1;
     exports.Heading2 = Heading2;
     exports.Heading3 = Heading3;
@@ -54555,7 +54961,7 @@
     exports.NDSProvider = NDSProvider;
     exports.NavBarBackground = NavBarBackground;
     exports.NotificationTypes = NotificationTypes;
-    exports.Overlay = Overlay;
+    exports.Overlay = Overlay$1;
     exports.Page = Page;
     exports.Pagination = Pagination;
     exports.PrimaryButton = PrimaryButton;
@@ -54594,6 +55000,7 @@
     exports.ToastContainer = ToastContainer;
     exports.Toggle = ToggleComponent;
     exports.Tooltip = Tooltip;
+    exports.TopBar = TopBar;
     exports.TruncatedText = TruncatedText;
     exports.addStyledProps = addStyledProps;
     exports.toast = toast;