@nulogy/components 16.0.0 → 16.0.2

package/dist/src/BottomSheet/stories/BottomSheet.parts.story.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box } from "../../Box";
 import { Button, QuietButton, PrimaryButton } from "../../Button";
@@ -7,7 +8,7 @@ import { Placeholder } from "../../utils/story/placeholder";
 import { BottomSheetParts as BottomSheet } from "../BottomSheet.parts";
 export default {
     title: "Components/BottomSheet/Parts",
-    decorators: [(storyFn) => React.createElement("div", { style: { width: "800px", height: "800px" } }, storyFn())],
+    decorators: [(storyFn) => _jsx("div", { style: { width: "800px", height: "800px" }, children: storyFn() })],
     parameters: {
         chromatic: { delay: 3000 },
     },
@@ -20,26 +21,5 @@ export const RenderedUsingCompositionalAPI = () => {
     function close() {
         setIsOpen(false);
     }
-    return (React.createElement(Box, null,
-        React.createElement(Button, { onClick: open }, "Open Sheet"),
-        React.createElement(BottomSheet.Root, { isOpen: isOpen, onClose: close },
-            React.createElement(BottomSheet.Overlay, { closeOnClick: true },
-                React.createElement(BottomSheet.Sheet, { "aria-label": "Example Sheet" },
-                    React.createElement(BottomSheet.ContentContainer, null,
-                        React.createElement(Box, { width: { small: "100%", medium: 704 }, margin: "0 auto" },
-                            React.createElement(BottomSheet.Header, null,
-                                React.createElement(BottomSheet.Title, null, "Title"),
-                                React.createElement(BottomSheet.HelpText, null,
-                                    React.createElement(React.Fragment, null,
-                                        "Help text can further explain the purpose and content of the BottomSheet",
-                                        " ",
-                                        React.createElement(Link, { href: "#story" }, "Learn more")))),
-                            React.createElement(Box, { px: "x3", py: "x4" },
-                                React.createElement(Placeholder, null))),
-                        React.createElement(BottomSheet.Footer, null,
-                            React.createElement(Flex, { justifyContent: "space-between" },
-                                React.createElement(Button, { onClick: close }, "Close"),
-                                React.createElement(Flex, { gap: "x2" },
-                                    React.createElement(QuietButton, null, "Secondary action"),
-                                    React.createElement(PrimaryButton, { onClick: close }, "Primary action"))))))))));
+    return (_jsxs(Box, { children: [_jsx(Button, { onClick: open, children: "Open Sheet" }), _jsx(BottomSheet.Root, { isOpen: isOpen, onClose: close, children: _jsx(BottomSheet.Overlay, { closeOnClick: true, children: _jsx(BottomSheet.Sheet, { "aria-label": "Example Sheet", children: _jsxs(BottomSheet.ContentContainer, { children: [_jsxs(Box, { width: { small: "100%", medium: 704 }, margin: "0 auto", children: [_jsxs(BottomSheet.Header, { children: [_jsx(BottomSheet.Title, { children: "Title" }), _jsx(BottomSheet.HelpText, { children: _jsxs(_Fragment, { children: ["Help text can further explain the purpose and content of the BottomSheet", " ", _jsx(Link, { href: "#story", children: "Learn more" })] }) })] }), _jsx(Box, { px: "x3", py: "x4", children: _jsx(Placeholder, {}) })] }), _jsx(BottomSheet.Footer, { children: _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(Button, { onClick: close, children: "Close" }), _jsxs(Flex, { gap: "x2", children: [_jsx(QuietButton, { children: "Secondary action" }), _jsx(PrimaryButton, { onClick: close, children: "Primary action" })] })] }) })] }) }) }) })] }));
 };

package/dist/src/BottomSheet/stories/BottomSheet.story.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 declare const _default: {
     title: string;
-    decorators: ((storyFn: any) => React.JSX.Element)[];
+    decorators: ((storyFn: any) => import("react/jsx-runtime").JSX.Element)[];
     parameters: {
         chromatic: {
             delay: number;
@@ -9,4 +8,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const BasicUsage: () => React.JSX.Element;
+export declare const BasicUsage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.story.js

@@ -1,18 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Button } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
 export default {
     title: "Components/BottomSheet",
-    decorators: [(storyFn) => React.createElement("div", { style: { width: "800px", height: "800px" } }, storyFn())],
+    decorators: [(storyFn) => _jsx("div", { style: { width: "800px", height: "800px" }, children: storyFn() })],
     parameters: {
         chromatic: { delay: 3000 },
     },
 };
 export const BasicUsage = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false) },
-            React.createElement(Placeholder, null))));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
 };

package/dist/src/Box/Box.d.ts

@@ -7,15 +7,15 @@ export interface BoxProps extends StyledProps, ComponentPropsWithRef<"div"> {
 declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>> & string;
 export interface AnimatedBoxProps extends MotionProps, Omit<BoxProps, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd" | "style" | "transition"> {
 }
-export declare const AnimatedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
-    children?: import("react").ReactNode | Record<string, unknown>;
-    slot?: string;
-    title?: string;
+export declare const AnimatedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
+    children?: import("react").ReactNode;
     property?: string;
     color?: string;
     content?: string;
     translate?: "yes" | "no";
     hidden?: boolean;
+    slot?: string;
+    title?: string;
     defaultChecked?: boolean;
     defaultValue?: string | number | readonly string[];
     suppressContentEditableWarning?: boolean;
@@ -24,7 +24,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus?: boolean;
     className?: string;
-    contentEditable?: "inherit" | (boolean | "true" | "false");
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only";
     contextMenu?: string;
     dir?: string;
     draggable?: boolean | "true" | "false";
@@ -32,7 +32,6 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     id?: string;
     lang?: string;
     nonce?: string;
-    placeholder?: string;
     spellCheck?: boolean | "true" | "false";
     tabIndex?: number;
     radioGroup?: string;
@@ -56,7 +55,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     results?: number;
     security?: string;
     unselectable?: "off" | "on";
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
     is?: string;
     exportparts?: string;
     part?: string;
@@ -72,7 +71,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     "aria-colindextext"?: string;
     "aria-colspan"?: number;
     "aria-controls"?: string;
-    "aria-current"?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date";
+    "aria-current"?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date";
     "aria-describedby"?: string;
     "aria-description"?: string;
     "aria-details"?: string;
@@ -82,7 +81,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     "aria-expanded"?: boolean | "true" | "false";
     "aria-flowto"?: string;
     "aria-grabbed"?: boolean | "true" | "false";
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
+    "aria-haspopup"?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
     "aria-hidden"?: boolean | "true" | "false";
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
     "aria-keyshortcuts"?: string;
@@ -99,7 +98,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     "aria-posinset"?: number;
     "aria-pressed"?: boolean | "true" | "false" | "mixed";
     "aria-readonly"?: boolean | "true" | "false";
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
     "aria-required"?: boolean | "true" | "false";
     "aria-roledescription"?: string;
     "aria-rowcount"?: number;
@@ -250,9 +249,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerOver?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerOut?: import("react").PointerEventHandler<HTMLDivElement>;
@@ -272,5 +269,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement>;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement>;
-} & MotionProps & import("react").RefAttributes<HTMLDivElement>, AnimatedBoxProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+} & MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, AnimatedBoxProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 export default Box;

package/dist/src/Box/Box.story.d.ts

@@ -1,71 +1,70 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Box: () => React.JSX.Element;
+export declare const _Box: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithATextColour: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithABackgroundColour: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithASetWidth: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAResponsiveWidth: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithPadding: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithMargin: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAShadow: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithABackgroundImage: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithHoverTransition: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithTransform: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAnimation: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Box/Box.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { styled } from "styled-components";
 import { Button } from "../Button";
 import { Box, Flex } from "../index";
@@ -6,53 +7,36 @@ import { AnimatedBox } from "./Box";
 export default {
     title: "Components/Box",
 };
-export const _Box = () => React.createElement(Box, { p: "x3" }, "Hello World");
-export const WithATextColour = () => (React.createElement(Flex, { p: "x3", color: "blue" }, "Hello World"));
+export const _Box = () => _jsx(Box, { p: "x3", children: "Hello World" });
+export const WithATextColour = () => (_jsx(Flex, { p: "x3", color: "blue", children: "Hello World" }));
 WithATextColour.story = {
     name: "With a text colour",
 };
-export const WithABackgroundColour = () => (React.createElement(Box, { p: "x3", color: "white", bg: "blue" }, "Hello World"));
+export const WithABackgroundColour = () => (_jsx(Box, { p: "x3", color: "white", bg: "blue", children: "Hello World" }));
 WithABackgroundColour.story = {
     name: "With a background colour",
 };
-export const WithASetWidth = () => (React.createElement(Box, { p: "x3", width: 1 / 2, bg: "whiteGrey" }, "Half Width"));
+export const WithASetWidth = () => (_jsx(Box, { p: "x3", width: 1 / 2, bg: "whiteGrey", children: "Half Width" }));
 WithASetWidth.story = {
     name: "With a set width",
 };
-export const WithAResponsiveWidth = () => (React.createElement(Box, { p: "x3", width: { extraSmall: 1, small: 1 / 2, medium: 1 / 4 }, bg: "whiteGrey" }, "Full width on extra small screens, 1/2 width on small and 1/4 width on medium"));
+export const WithAResponsiveWidth = () => (_jsx(Box, { p: "x3", width: { extraSmall: 1, small: 1 / 2, medium: 1 / 4 }, bg: "whiteGrey", children: "Full width on extra small screens, 1/2 width on small and 1/4 width on medium" }));
 WithAResponsiveWidth.story = {
     name: "With a responsive width",
 };
-export const WithPadding = () => (React.createElement(Box, { p: "x2" },
-    React.createElement(Box, { m: "x1", p: "x3", bg: "whiteGrey" }, "Padding"),
-    React.createElement(Box, { m: "x1", p: "x3", bg: "whiteGrey" }, "Padding top"),
-    React.createElement(Box, { m: "x1", pr: "x3", bg: "whiteGrey" }, "Padding right"),
-    React.createElement(Box, { m: "x1", pb: "x3", bg: "whiteGrey" }, "Padding bottom"),
-    React.createElement(Box, { m: "x1", pl: "x3", bg: "whiteGrey" }, "Padding left"),
-    React.createElement(Box, { m: "x1", px: "x3", bg: "whiteGrey" }, "Padding x"),
-    React.createElement(Box, { m: "x1", py: "x3", bg: "whiteGrey" }, "Padding y")));
+export const WithPadding = () => (_jsxs(Box, { p: "x2", children: [_jsx(Box, { m: "x1", p: "x3", bg: "whiteGrey", children: "Padding" }), _jsx(Box, { m: "x1", p: "x3", bg: "whiteGrey", children: "Padding top" }), _jsx(Box, { m: "x1", pr: "x3", bg: "whiteGrey", children: "Padding right" }), _jsx(Box, { m: "x1", pb: "x3", bg: "whiteGrey", children: "Padding bottom" }), _jsx(Box, { m: "x1", pl: "x3", bg: "whiteGrey", children: "Padding left" }), _jsx(Box, { m: "x1", px: "x3", bg: "whiteGrey", children: "Padding x" }), _jsx(Box, { m: "x1", py: "x3", bg: "whiteGrey", children: "Padding y" })] }));
 WithPadding.story = {
     name: "With padding",
 };
-export const WithMargin = () => (React.createElement(Box, { p: "x3" },
-    React.createElement(Box, { m: "x3", bg: "whiteGrey" }, "Margin"),
-    React.createElement(Box, { mt: "x3", bg: "whiteGrey" }, "Margin top"),
-    React.createElement(Box, { mr: "x3", bg: "whiteGrey" }, "Margin right"),
-    React.createElement(Box, { mb: "x3", bg: "whiteGrey" }, "Margin bottom"),
-    React.createElement(Box, { ml: "x3", bg: "whiteGrey" }, "Margin left"),
-    React.createElement(Box, { mx: "x3", bg: "whiteGrey" }, "Margin x"),
-    React.createElement(Box, { my: "x3", bg: "whiteGrey" }, "Margin y")));
+export const WithMargin = () => (_jsxs(Box, { p: "x3", children: [_jsx(Box, { m: "x3", bg: "whiteGrey", children: "Margin" }), _jsx(Box, { mt: "x3", bg: "whiteGrey", children: "Margin top" }), _jsx(Box, { mr: "x3", bg: "whiteGrey", children: "Margin right" }), _jsx(Box, { mb: "x3", bg: "whiteGrey", children: "Margin bottom" }), _jsx(Box, { ml: "x3", bg: "whiteGrey", children: "Margin left" }), _jsx(Box, { mx: "x3", bg: "whiteGrey", children: "Margin x" }), _jsx(Box, { my: "x3", bg: "whiteGrey", children: "Margin y" })] }));
 WithMargin.story = {
     name: "With margin",
 };
-export const WithAShadow = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { p: "x1", mb: "x2", boxShadow: "small" }, "Small shadow"),
-    React.createElement(Box, { p: "x3", mb: "x2", boxShadow: "medium" }, "Medium shadow"),
-    React.createElement(Box, { p: "x6", mb: "x2", boxShadow: "large" }, "Large shadow")));
+export const WithAShadow = () => (_jsxs(_Fragment, { children: [_jsx(Box, { p: "x1", mb: "x2", boxShadow: "small", children: "Small shadow" }), _jsx(Box, { p: "x3", mb: "x2", boxShadow: "medium", children: "Medium shadow" }), _jsx(Box, { p: "x6", mb: "x2", boxShadow: "large", children: "Large shadow" })] }));
 WithAShadow.story = {
     name: "With a shadow",
 };
-export const WithABackgroundImage = () => (React.createElement(Box, { p: "x1", mb: "x2", backgroundImage: "linear-gradient(0deg, #E1EBFA, #216BEB)" }, "Gradient"));
+export const WithABackgroundImage = () => (_jsx(Box, { p: "x1", mb: "x2", backgroundImage: "linear-gradient(0deg, #E1EBFA, #216BEB)", children: "Gradient" }));
 WithABackgroundImage.story = {
     name: "With a background image",
 };
@@ -61,11 +45,11 @@ const HoverableBox = styled(Box)({
         backgroundColor: "blue",
     },
 });
-export const WithHoverTransition = () => (React.createElement(HoverableBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transition: "background-color 0.5s linear" }, "Transition"));
+export const WithHoverTransition = () => (_jsx(HoverableBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transition: "background-color 0.5s linear", children: "Transition" }));
 WithHoverTransition.story = {
     name: "With hover transition",
 };
-export const WithTransform = () => (React.createElement(Box, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transform: "rotate(90deg)" }, "Rotated"));
+export const WithTransform = () => (_jsx(Box, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transform: "rotate(90deg)", children: "Rotated" }));
 WithTransform.story = {
     name: "with transform",
 };
@@ -76,9 +60,7 @@ export const WithAnimation = () => {
         closed: { opacity: 0, x: "-100%" },
     };
     const handleClick = () => setIsOpen(!isOpen);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: handleClick }, "Animate!"),
-        React.createElement(AnimatedBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", animate: isOpen ? "open" : "closed", variants: variants, transition: { duration: 2 } }, "Animated")));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleClick, children: "Animate!" }), _jsx(AnimatedBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", animate: isOpen ? "open" : "closed", variants: variants, transition: { duration: 2 }, children: "Animated" })] }));
 };
 WithAnimation.story = {
     name: "with animation",

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

@@ -7,6 +7,6 @@ export type BrandLogoContainerProps = {
     brandingLinkComponent?: React.ElementType;
     subtext?: string;
 };
-declare const BrandLogoContainer: ({ logoSrc, brandingLinkHref, brandingLinkTo, brandingLinkComponent, subtext, }: BrandLogoContainerProps) => React.JSX.Element;
+declare const BrandLogoContainer: ({ logoSrc, brandingLinkHref, brandingLinkTo, brandingLinkComponent, subtext, }: BrandLogoContainerProps) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default BrandLogoContainer;

package/dist/src/BrandedNavBar/BrandLogoContainer.js

@@ -1,14 +1,11 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "../Box";
 import { Link } from "../Link";
 import { Branding } from "../Branding";
 const MAX_LOGO_WIDTH = "184px";
 const MAX_LOGO_HEIGHT = "36px";
 const BrandLogoContainer = ({ logoSrc, brandingLinkHref, brandingLinkTo, brandingLinkComponent, subtext, }) => {
-    return (React.createElement(Box, { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT },
-        React.createElement(Link, { "aria-label": "Home", href: brandingLinkHref, to: brandingLinkTo, as: brandingLinkComponent, underline: false, variant: "desktop", style: { display: "block" } },
-            logoSrc && React.createElement("img", { src: logoSrc, style: { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT }, alt: "" }),
-            !logoSrc && React.createElement(Branding, { size: subtext ? "small" : "medium", logoColor: "blue", subtext: subtext }))));
+    return (_jsx(Box, { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT, children: _jsxs(Link, { "aria-label": "Home", href: brandingLinkHref, to: brandingLinkTo, as: brandingLinkComponent, underline: false, variant: "desktop", style: { display: "block" }, children: [logoSrc && _jsx("img", { src: logoSrc, style: { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT }, alt: "" }), !logoSrc && _jsx(Branding, { size: subtext ? "small" : "medium", logoColor: "blue", subtext: subtext })] }) }));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default BrandLogoContainer;

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

@@ -7,5 +7,7 @@ export type DesktopMenuProps = {
     themeColorObject: any;
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-declare const DesktopMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DesktopMenuProps & React.RefAttributes<HTMLElement>, never>> & string & Omit<React.ForwardRefExoticComponent<DesktopMenuProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
+declare const DesktopMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<DesktopMenuProps & React.RefAttributes<HTMLElement>, "ref"> & {
+    ref?: React.Ref<HTMLElement>;
+}, never>> & string & Omit<React.ForwardRefExoticComponent<DesktopMenuProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
 export default DesktopMenu;

package/dist/src/BrandedNavBar/DesktopMenu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { Icon } from "../Icon";
@@ -43,8 +44,7 @@ const Nav = styled.nav({
     display: "flex",
     alignItems: "center",
 });
-const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => (React.createElement("div", { key: menuItem.key ?? menuItem.name },
-    React.createElement(MenuTrigger, { menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer, ...themeColorObject })));
+const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => (_jsx("div", { children: _jsx(MenuTrigger, { menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer, ...themeColorObject }) }, menuItem.key ?? menuItem.name));
 const renderMenuLink = (menuItem, themeColorObject) => {
     const linkProps = {
         href: menuItem.href,
@@ -52,13 +52,10 @@ const renderMenuLink = (menuItem, themeColorObject) => {
         as: menuItem.as,
         target: menuItem.openInNew ? "_blank" : undefined,
     };
-    return (React.createElement("div", { key: menuItem.key ?? menuItem.name },
-        React.createElement(MenuLink, { ...linkProps, ...themeColorObject },
-            menuItem.name,
-            menuItem.openInNew && React.createElement(Icon, { size: "x2", icon: "openInNew" }))));
+    return (_jsx("div", { children: _jsxs(MenuLink, { ...linkProps, ...themeColorObject, children: [menuItem.name, menuItem.openInNew && _jsx(Icon, { size: "x2", icon: "openInNew" })] }) }, menuItem.key ?? menuItem.name));
 };
-const renderCustom = (menuItem, _themeColorObject, layer) => (React.createElement("div", { key: menuItem.key ?? menuItem.name }, menuItem.render({ size: "medium", layer })));
-const renderText = (menuItem, themeColorObject) => (React.createElement(MenuText, { key: menuItem.key ?? menuItem.name, ...themeColorObject }, menuItem.name));
+const renderCustom = (menuItem, _themeColorObject, layer) => (_jsx("div", { children: menuItem.render({ size: "medium", layer }) }, menuItem.key ?? menuItem.name));
+const renderText = (menuItem, themeColorObject) => (_jsx(MenuText, { ...themeColorObject, children: menuItem.name }, menuItem.key ?? menuItem.name));
 const getRenderFunction = (menuItem) => {
     if (menuItem.items) {
         return renderMenuTrigger;
@@ -72,7 +69,7 @@ const getRenderFunction = (menuItem) => {
     return renderText;
 };
 const renderMenuItem = (menuItem, themeColorObject, layer, menuType) => getRenderFunction(menuItem)(menuItem, themeColorObject, layer, menuType);
-const BaseDesktopMenu = React.forwardRef(({ menuData, menuType, themeColorObject, ...props }, ref) => (React.createElement(Nav, { ...props, ref: ref }, menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType)))));
+const BaseDesktopMenu = React.forwardRef(({ menuData, menuType, themeColorObject, ...props }, ref) => (_jsx(Nav, { ...props, ref: ref, children: menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType)) })));
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const DesktopMenu = styled(BaseDesktopMenu)({
     "& > div": {

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

@@ -14,6 +14,6 @@ export type MenuTriggerProps = {
     layer: number;
     menuType: MenuType;
 };
-declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }: MenuTriggerProps) => React.JSX.Element;
+declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }: MenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default MenuTrigger;

package/dist/src/BrandedNavBar/MenuTrigger.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import NavBarDropdownMenu from "./NavBarDropdownMenu";
 import SubMenuTrigger from "./SubMenuTrigger";
 import renderSubMenuItems from "./renderSubMenuItems";
@@ -17,7 +17,7 @@ const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria
         name,
         "aria-label": ariaLabel,
     };
-    return (React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
+    return (_jsx(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
             flip: { behavior: ["bottom"] },
             setPopperWidth: {
                 enabled: true,
@@ -29,17 +29,17 @@ const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria
                 boundariesElement: "viewport",
             },
         }, trigger: () => {
-            const defaultRender = () => React.createElement(MenuTriggerButton, { ...triggerProps });
+            const defaultRender = () => _jsx(MenuTriggerButton, { ...triggerProps });
             return trigger ? trigger({ size: "medium", defaultRender, layer }) : defaultRender();
-        } }, ({ closeMenu }) => (React.createElement("ul", { style: {
-            listStyle: "none",
-            margin: "0",
-            padding: "0",
-            minWidth: dropdownMinWidth,
-        } }, renderSubMenuItems(menuData, (e) => {
-        closeMenu(e);
-        e.stopPropagation();
-    }, SubMenuTrigger, layer + 1, menuType)))));
+        }, children: ({ closeMenu }) => (_jsx("ul", { style: {
+                listStyle: "none",
+                margin: "0",
+                padding: "0",
+                minWidth: dropdownMinWidth,
+            }, children: renderSubMenuItems(menuData, (e) => {
+                closeMenu(e);
+                e.stopPropagation();
+            }, SubMenuTrigger, layer + 1, menuType) })) }));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default MenuTrigger;

package/dist/src/BrandedNavBar/MenuTriggerButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
@@ -29,14 +30,12 @@ const StyledButton = styled.button(({ color = "white", hoverColor = "lightBlue",
         opacity: ".5",
     },
 }));
-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" }))));
+const MenuTriggerButton = React.forwardRef(({ name, color, hoverColor, hoverBackground, ...props }, ref) => (_jsxs(StyledButton, { color: color, hoverColor: hoverColor, hoverBackground: hoverBackground, ref: ref, ...props, children: [name, _jsx(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.d.ts

@@ -16,5 +16,5 @@ type BaseMobileMenuProps = {
     showNulogyLogo?: boolean;
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-declare const MobileMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseMobileMenuProps, never>> & string & Omit<({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }: BaseMobileMenuProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const MobileMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseMobileMenuProps, never>> & string & Omit<({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }: BaseMobileMenuProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default MobileMenu;

package/dist/src/BrandedNavBar/MobileMenu.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { display } from "styled-system";
 import { Text } from "../Type";
@@ -71,19 +71,13 @@ const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
         target: menuItem.openInNew ? "_blank" : undefined,
     };
     const topLevel = layer === 0;
-    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, { ...sharedLinkProps },
-        menuItem.name,
-        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })))));
+    return (_jsx("li", { children: topLevel ? (_jsxs(TopLevelLink, { ...sharedLinkProps, children: [menuItem.name, menuItem.openInNew && _jsx(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })] })) : (_jsxs(DropdownLink, { ...sharedLinkProps, children: [menuItem.name, menuItem.openInNew && _jsx(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })] })) }, menuItem.key ?? menuItem.name));
 };
-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 renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => (_jsx("li", { children: menuItem.render({ size: "small", onItemClick: linkOnClick, layer }) }, menuItem.key ?? menuItem.name));
+const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => (_jsx("li", { style: { display: "block" }, children: _jsx(SubMenu, { menuItem: menuItem, layer: layer, themeColorObject: themeColorObject, linkOnClick: linkOnClick }) }, menuItem.key ?? menuItem.name));
 const renderText = (menuItem, linkOnClick, themeColorObject, layer) => {
     const MenuText = layer === 0 ? TopLevelText : DropdownText;
-    return (React.createElement("li", { key: menuItem.key ?? menuItem.name },
-        React.createElement(MenuText, { pl: getPaddingLeft(layer), mb: "x1" }, menuItem.name)));
+    return (_jsx("li", { children: _jsx(MenuText, { pl: getPaddingLeft(layer), mb: "x1", children: menuItem.name }) }, menuItem.key ?? menuItem.name));
 };
 const getRenderFunction = (menuItem) => {
     if (menuItem.items) {
@@ -104,12 +98,10 @@ const renderMenuItems = (menuItems, linkOnClick, themeColorObject, layer) => men
     return render(menuItem, linkOnClick, themeColorObject, layer);
 });
 const renderTopLayerMenuItems = (menuData, linkOnClick, themeColorObject) => renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
-const getSubMenuHeading = (layer, name) => layer === 0 ? (React.createElement(TopLevelText, { as: "h3", mb: "x1" }, name)) : (React.createElement(DropdownText, { mb: "x1", pl: getPaddingLeft(layer) }, name));
+const getSubMenuHeading = (layer, name) => layer === 0 ? (_jsx(TopLevelText, { as: "h3", mb: "x1", children: name })) : (_jsx(DropdownText, { mb: "x1", pl: getPaddingLeft(layer), children: name }));
 const SubMenu = ({ menuItem, linkOnClick, themeColorObject, layer }) => {
     const defaultRender = () => getSubMenuHeading(layer, menuItem.name);
-    return (React.createElement(React.Fragment, null,
-        menuItem.trigger ? menuItem.trigger({ size: "small", defaultRender, layer }) : defaultRender(),
-        React.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1))));
+    return (_jsxs(_Fragment, { children: [menuItem.trigger ? menuItem.trigger({ size: "small", defaultRender, layer }) : defaultRender(), _jsx(SubMenuItemsList, { children: renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1) })] }));
 };
 const Menu = styled.ul(({ theme }) => ({
     listStyle: "none",
@@ -129,15 +121,7 @@ const Nav = styled.nav(({ backgroundColor }) => ({
 });
 const BaseMobileMenu = ({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }) => {
     useScrollLock();
-    return (React.createElement(Nav, { backgroundColor: themeColorObject && themeColorObject.background, ...props },
-        React.createElement(BrandingWrap, null,
-            React.createElement(BrandingText, { logoColor: themeColorObject?.logoColor })),
-        React.createElement(Menu, null,
-            menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject),
-            menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)),
-        showNulogyLogo && (React.createElement(Flex, { textAlign: "center", borderTop: borderStyle, height: "40px", alignItems: "center", justifyContent: "center" },
-            React.createElement(NulogyLogo, null),
-            subtext && (React.createElement(Text, { fontSize: "8px", lineHeight: "0", color: "darkGrey", fontWeight: "medium", textTransform: "uppercase", letterSpacing: ".5px" }, subtext))))));
+    return (_jsxs(Nav, { backgroundColor: themeColorObject && themeColorObject.background, ...props, children: [_jsx(BrandingWrap, { children: _jsx(BrandingText, { logoColor: themeColorObject?.logoColor }) }), _jsxs(Menu, { children: [menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)] }), showNulogyLogo && (_jsxs(Flex, { textAlign: "center", borderTop: borderStyle, height: "40px", alignItems: "center", justifyContent: "center", children: [_jsx(NulogyLogo, {}), subtext && (_jsx(Text, { fontSize: "8px", lineHeight: "0", color: "darkGrey", fontWeight: "medium", textTransform: "uppercase", letterSpacing: ".5px", children: subtext }))] }))] }));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const MobileMenu = styled(BaseMobileMenu)(display);

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

@@ -11,5 +11,5 @@ type BaseNavBarProps = {
     logoSrc?: string;
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-declare const NavBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseNavBarProps, never>> & string & Omit<({ environment, breakpointUpper, ...props }: BaseNavBarProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const NavBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseNavBarProps, never>> & string & Omit<({ environment, breakpointUpper, ...props }: BaseNavBarProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default NavBar;