@nulogy/components 11.3.0 → 12.0.0

package/dist/main.module.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useEffect, createElement, useLayoutEffect, useCallback, useMemo, forwardRef, Fragment, Component as Component$1, useState, cloneElement, Children, isValidElement, PureComponent, useImperativeHandle } from 'react';
-import styled, { useTheme, createGlobalStyle, ThemeContext as ThemeContext$1, ThemeProvider } from 'styled-components';
+import styled, { useTheme, createGlobalStyle, ThemeContext as ThemeContext$1, StyleSheetManager, ThemeProvider } from 'styled-components';
 import assign$1 from 'object-assign';
 import icons from '@nulogy/icons';
 import _extends$5 from '@babel/runtime/helpers/extends';
@@ -11034,7 +11034,14 @@ var WrapperButton$2 = styled.button.withConfig({
     },
     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",
@@ -11050,14 +11057,7 @@ var WrapperButton$2 = styled.button.withConfig({
       }
     }
   });
-}, variant$1({
-  variants: {
-    touch: {
-      fontSize: "md",
-      lineHeight: "base"
-    }
-  }
-}), space);
+}, space);
 var Button = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var children = _a.children,
       _a$iconSide = _a.iconSide,
@@ -13998,7 +13998,7 @@ var weakMemoize = function weakMemoize(func) {
   };
 };
 
-function memoize(fn) {
+function memoize$1(fn) {
   var cache = Object.create(null);
   return function (arg) {
     if (cache[arg] === undefined) cache[arg] = fn(arg);
@@ -14453,7 +14453,7 @@ var prefixer = function prefixer(element, index, children, callback) {
 
 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];
@@ -14817,7 +14817,7 @@ var isProcessableValue = function isProcessableValue(value) {
   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();
 });
 
@@ -16791,7 +16791,7 @@ var MenuPlacer = function MenuPlacer(props) {
     })
   });
 };
-var Menu$1 = function Menu(props) {
+var Menu$2 = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
@@ -16801,7 +16801,7 @@ var Menu$1 = function Menu(props) {
     ref: innerRef
   }, innerProps), children);
 };
-var Menu$1$1 = Menu$1;
+var Menu$1$1 = Menu$2;
 
 // ==============================
 // Menu List
@@ -24464,21 +24464,21 @@ var StyledOption = styled.div.withConfig({
     }
   };
 }, 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);
@@ -27634,7 +27634,7 @@ function ariaLabelType(props, propName, compName, location, propFullName) {
   return null;
 } ////////////////////////////////////////////////////////////////////////////////
 
-var Overlay$1 = styled(motion(DialogOverlay)).withConfig({
+var Overlay$2 = styled(motion(DialogOverlay)).withConfig({
   displayName: "BottomSheetstyled__Overlay",
   componentId: "sc-1v36wsf-0"
 })(function (_ref) {
@@ -27656,7 +27656,7 @@ var Sheet = styled(motion(DialogContent)).withConfig({
 })(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    ":focus": {
+    "&:focus": {
       outline: "none"
     },
     inset: 0,
@@ -27703,8 +27703,10 @@ var Footer = styled.div.withConfig({
 })(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    position: "sticky",
+    position: "fixed",
     bottom: 0,
+    left: 0,
+    right: 0,
     marginLeft: theme.space.x1,
     marginRight: theme.space.x1,
     padding: theme.space.x2,
@@ -27715,7 +27717,7 @@ var Footer = styled.div.withConfig({
     marginTop: "auto"
   };
 });
-var Header$1 = styled.div.withConfig({
+var Header$2 = styled.div.withConfig({
   displayName: "BottomSheetstyled__Header",
   componentId: "sc-1v36wsf-4"
 })(function (_ref4) {
@@ -27797,7 +27799,7 @@ var transition = {
   ease: [0.32, 0.72, 0, 1]
 };
 
-function Root(_a) {
+function Root$1(_a) {
   var isOpen = _a.isOpen,
       onClose = _a.onClose,
       children = _a.children,
@@ -27818,7 +27820,7 @@ function OverlayPart(_a) {
       onClose = _useBottomSheet.onClose,
       isOpen = _useBottomSheet.isOpen;
 
-  return /*#__PURE__*/React__default.createElement(Overlay$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Overlay$2, Object.assign({
     variants: overlayVariants,
     initial: "hidden",
     animate: "visible",
@@ -27849,11 +27851,11 @@ function SheetPart(_a) {
 }
 
 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
@@ -28293,8 +28295,8 @@ var DropdownButton = styled.button.withConfig({
 }), addStyledProps);
 
 var DropdownLink = styled.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"
@@ -28896,8 +28898,8 @@ var DesktopMenu = styled(BaseDesktopMenu).withConfig({
   displayName: "DesktopMenu",
   componentId: "sc-8mrjkc-3"
 })({
-  "> div": {
-    ":not(:last-of-type)": {
+  "& > div": {
+    "&:not(:last-of-type)": {
       marginRight: "8px"
     }
   }
@@ -29177,7 +29179,7 @@ var Line = styled.div.withConfig({
   return {
     position: "relative",
     width: "100%",
-    ":before": {
+    "&:before": {
       content: "''",
       position: "absolute",
       top: "50%",
@@ -29374,7 +29376,7 @@ var InputWrapper = styled(Box).withConfig({
     position: "relative",
     display: "flex",
     flexGrow: 1,
-    ":focus-within": {
+    "&:focus-within": {
       svg: {
         color: theme.colors.darkBlue
       }
@@ -29544,7 +29546,7 @@ var NavBarSearch = styled(BaseNavBarSearch).withConfig({
       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,
@@ -29560,7 +29562,7 @@ var NavBarSearch = styled(BaseNavBarSearch).withConfig({
       background: "transparent",
       border: "solid 1px transparent",
       borderRadius: theme.radii.medium,
-      ":focus": {
+      "&:focus": {
         background: theme.colors.white,
         border: "solid 1px transparent",
         boxShadow: "none"
@@ -29770,7 +29772,7 @@ var SubMenu = function SubMenu(_ref4) {
   }) : defaultRender(), /*#__PURE__*/React__default.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
 };
 
-var Menu = styled.ul.withConfig({
+var Menu$1 = styled.ul.withConfig({
   displayName: "MobileMenu__Menu",
   componentId: "sc-18t6zrc-4"
 })(function (_ref5) {
@@ -29812,7 +29814,7 @@ var BaseMobileMenu = function BaseMobileMenu(_a) {
     backgroundColor: themeColorObject && themeColorObject.background
   }, props), /*#__PURE__*/React__default.createElement(BrandingWrap, null, /*#__PURE__*/React__default.createElement(BrandingText, {
     logoColor: themeColorObject === null || themeColorObject === void 0 ? void 0 : themeColorObject.logoColor
-  })), /*#__PURE__*/React__default.createElement(Menu, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), showNulogyLogo && /*#__PURE__*/React__default.createElement(Flex, {
+  })), /*#__PURE__*/React__default.createElement(Menu$1, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), showNulogyLogo && /*#__PURE__*/React__default.createElement(Flex, {
     textAlign: "center",
     borderTop: borderStyle,
     height: "40px",
@@ -45015,7 +45017,7 @@ function useMediaQuery(q) {
   var _a;
 
   var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
-  var theme = useTheme();
+  var theme = React__default.useContext(ThemeContext$1);
   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 = useCallback(function (query) {
     if (isUnsupported) {
@@ -45066,7 +45068,7 @@ var ApplicationFrame = function ApplicationFrame(_a) {
   }, children));
 };
 
-var Header = function Header(_a) {
+var Header$1 = function Header(_a) {
   var _b, _c;
 
   var background = _a.background,
@@ -45161,7 +45163,7 @@ var Page = function Page(_a) {
   return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
     flexDirection: "column",
     flexGrow: fullHeight ? 1 : 0
-  }, rest), renderHeader ? renderHeader() : (breadcrumbs || title || headerContent) && /*#__PURE__*/React__default.createElement(Header, {
+  }, rest), renderHeader ? renderHeader() : (breadcrumbs || title || headerContent) && /*#__PURE__*/React__default.createElement(Header$1, {
     renderBreadcrumbs: function renderBreadcrumbs() {
       return breadcrumbs;
     },
@@ -47324,7 +47326,7 @@ var ModalFooter = styled.div.withConfig({
     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,
@@ -47353,7 +47355,7 @@ var ModalHeader = styled.div.withConfig({
     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,
@@ -47406,7 +47408,7 @@ var StyledReactModal = styled(ReactModal).withConfig({
 
   var theme = _ref2.theme;
   return _ref3 = {
-    ":focus": {
+    "&:focus": {
       outline: "none"
     },
     display: "flex",
@@ -50235,6 +50237,27 @@ i18next.init({
   }
 });
 
+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__*/createContext(undefined);
 function FeatureFlagsProvider(_ref) {
   var featureFlags = _ref.featureFlags,
@@ -50941,9 +50964,20 @@ function NDSThemeProvider(_ref) {
       children = _ref.children;
   var variant = useComponentVariant();
   var theme = useNDSTheme(variant, customTheme);
-  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+  return /*#__PURE__*/React__default.createElement(StyleSheetManager, {
+    enableVendorPrefixes: true,
+    shouldForwardProp: shouldForwardProp
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: theme
-  }, children);
+  }, children));
+}
+
+function shouldForwardProp(propName, target) {
+  if (typeof target === "string") {
+    return isPropValid(propName);
+  }
+
+  return true;
 }
 
 var Reset = createGlobalStyle(function () {
@@ -51072,7 +51106,7 @@ function NDSProvider(_ref) {
   }, children))))));
 }
 
-var Overlay = styled(Flex).withConfig({
+var Overlay$1 = styled(Flex).withConfig({
   displayName: "Overlay",
   componentId: "sc-mcd6gm-0"
 })(function (_ref) {
@@ -54373,6 +54407,380 @@ var ToggleComponent = /*#__PURE__*/React__default.forwardRef(function (props, re
   }, props));
 });
 
+var TOPBAR = {
+  themedHeight: "x6"
+};
+
+var MenuItemList = styled.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.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.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.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(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.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.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.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(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.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(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.createElement(Box, {
+    as: "li",
+    flex: "1 1"
+  }, /*#__PURE__*/React__default.createElement(StyledBackLink, Object.assign({}, props, {
+    "data-testid": "topbar-back-link"
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: "arrowBack"
+  }), md && /*#__PURE__*/React__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.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.createElement(Flex, {
+    justifyContent: "flex-end",
+    as: "li",
+    color: "black",
+    flex: "1 1"
+  }, /*#__PURE__*/React__default.createElement(MenuButton, {
+    onClick: toggle,
+    "data-testid": "topbar-menu-button"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: "x3",
+    color: "midGrey",
+    icon: showMenu ? "close" : "apps"
+  })), /*#__PURE__*/React__default.createElement(AnimatePresence, null, showMenu && /*#__PURE__*/React__default.createElement(Overlay, {
+    "data-testid": "topbar-menu-overlay",
+    initial: "hidden",
+    animate: "visible",
+    exit: "exit",
+    variants: blurVariants,
+    isOpen: showMenu,
+    onDismiss: close
+  }, /*#__PURE__*/React__default.createElement(DialogContent, {
+    "data-testid": "topbar-menu",
+    "aria-label": (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : t("menu options")
+  }, /*#__PURE__*/React__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.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.createElement(TileLink, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: icon,
+    size: "x3"
+  }), /*#__PURE__*/React__default.createElement(Flex, {
+    flexDirection: "column",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(MotionText, {
+    fontWeight: "medium",
+    fontSize: "md",
+    lineHeight: "base"
+  }, title), /*#__PURE__*/React__default.createElement(MotionText, {
+    fontSize: "xs"
+  }, description)));
+}
+
+function PageTitle(_a) {
+  var children = _a.children,
+      props = __rest$3(_a, ["children"]);
+
+  return /*#__PURE__*/React__default.createElement(StyledPageTitle, Object.assign({
+    "data-testid": "topbar-page-title"
+  }, props), children);
+}
+
+function Root(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Header, null, /*#__PURE__*/React__default.createElement(Navigation, null, /*#__PURE__*/React__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,
@@ -54479,4 +54887,4 @@ var TruncatedText = function TruncatedText(_a) {
   }, props), children);
 };
 
-export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, toast, useMediaQuery, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header$1 as Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TopBar, TruncatedText, addStyledProps, toast, useMediaQuery, useWindowDimensions };