@nulogy/components 16.0.0 → 16.0.2

package/dist/src/TopBar/TopBar.styled.d.ts

@@ -9,26 +9,28 @@ declare const MenuButton: import("styled-components/dist/types").IStyledComponen
 declare const NavigationItemsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 declare const StyledBackLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 declare const StyledPageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
     as?: "div";
-} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLElement | SVGElement>;
+}, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
     as?: "div";
 }>, keyof import("react").Component<any, {}, any>>;
 declare const TileLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-declare const StyledMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
-    children?: import("react").ReactNode | Record<string, unknown>;
+declare const StyledMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[];
-    slot?: string;
-    title?: string;
     property?: string;
     color?: string;
     content?: string;
     translate?: "yes" | "no";
     hidden?: boolean;
+    slot?: string;
+    title?: string;
     defaultChecked?: boolean;
     defaultValue?: string | number | readonly string[];
     suppressContentEditableWarning?: boolean;
@@ -37,7 +39,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     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";
@@ -45,7 +47,6 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     id?: string;
     lang?: string;
     nonce?: string;
-    placeholder?: string;
     spellCheck?: boolean | "true" | "false";
     tabIndex?: number;
     radioGroup?: string;
@@ -69,7 +70,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     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;
@@ -85,7 +86,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "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;
@@ -95,7 +96,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "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;
@@ -112,7 +113,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "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;
@@ -263,9 +264,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     onPointerCancel?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerEnter?: import("react").PointerEventHandler<HTMLLIElement>;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerLeave?: import("react").PointerEventHandler<HTMLLIElement>;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerOver?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerOut?: import("react").PointerEventHandler<HTMLLIElement>;
@@ -285,5 +284,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement>;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement>;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement>;
-} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLIElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, keyof import("react").Component<any, {}, any>>;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLLIElement>;
+}, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, keyof import("react").Component<any, {}, any>>;
 export { Navigation, Header, NavigationItemsList, StyledBackLink, StyledPageTitle, Overlay, TileLink, StylelessButton, MenuItemList, MenuButton, StyledMenuItem, };

package/dist/src/TopBar/components/BackLink.d.ts

@@ -2,6 +2,8 @@ import React, { ComponentProps } from "react";
 import { MaxWidthProps } from "styled-system";
 import { StyledBackLink } from "../TopBar.styled";
 interface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {
+    as?: React.ElementType;
+    to?: string;
 }
-export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): React.JSX.Element;
+export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/TopBar/components/BackLink.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "../../Box";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import { Icon } from "../../Icon";
@@ -12,8 +12,5 @@ const BACK_LINK_MAX_WIDTH = {
 };
 export function BackLink({ children, maxWidth = BACK_LINK_MAX_WIDTH, ...props }) {
     const md = useMediaQuery("phoneLandscape");
-    return (React.createElement(Box, { as: "li", flex: "1 1" },
-        React.createElement(StyledBackLink, { ...props, "data-testid": "topbar-back-link" },
-            React.createElement(Icon, { icon: "arrowBack" }),
-            md && (React.createElement(Text, { maxWidth: maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small" }, children)))));
+    return (_jsx(Box, { as: "li", flex: "1 1", children: _jsxs(StyledBackLink, { ...props, "data-testid": "topbar-back-link", children: [_jsx(Icon, { icon: "arrowBack" }), md && (_jsx(Text, { maxWidth: maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small", children: children }))] }) }));
 }

package/dist/src/TopBar/components/Menu.d.ts

@@ -3,4 +3,4 @@ export declare function Menu({ children, defaultOpened, ...props }: {
     defaultOpened?: boolean;
     children: React.ReactNode;
     "aria-label"?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/Menu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DialogContent } from "@reach/dialog";
 import { AnimatePresence } from "framer-motion";
 import React from "react";
@@ -41,14 +42,9 @@ export function Menu({ children, defaultOpened = false, ...props }) {
         }
         setShowMenu((s) => !s);
     }
-    return (React.createElement(Flex, { justifyContent: "flex-end", as: "li", color: "black", flex: "1 1" },
-        React.createElement(MenuButton, { onClick: toggle, "data-testid": "topbar-menu-button" },
-            React.createElement(Icon, { size: "x3", color: "midGrey", icon: showMenu ? "close" : "apps" })),
-        React.createElement(AnimatePresence, null, showMenu && (React.createElement(Overlay, { "data-testid": "topbar-menu-overlay", "data-visible": animationComplete ? "true" : undefined, initial: "hidden", animate: "visible", exit: "exit", variants: blurVariants, isOpen: showMenu, onAnimationComplete: () => {
-                if (showMenu) {
-                    setAnimationComplete(true);
-                }
-            }, onDismiss: close },
-            React.createElement(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": props["aria-label"] ?? t("menu options") },
-                React.createElement(MenuItemList, null, children)))))));
+    return (_jsxs(Flex, { justifyContent: "flex-end", as: "li", color: "black", flex: "1 1", children: [_jsx(MenuButton, { onClick: toggle, "data-testid": "topbar-menu-button", children: _jsx(Icon, { size: "x3", color: "midGrey", icon: showMenu ? "close" : "apps" }) }), _jsx(AnimatePresence, { children: showMenu && (_jsx(Overlay, { "data-testid": "topbar-menu-overlay", "data-visible": animationComplete ? "true" : undefined, initial: "hidden", animate: "visible", exit: "exit", variants: blurVariants, isOpen: showMenu, onAnimationComplete: () => {
+                        if (showMenu) {
+                            setAnimationComplete(true);
+                        }
+                    }, onDismiss: close, children: _jsx(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": props["aria-label"] ?? t("menu options"), children: _jsx(MenuItemList, { children: children }) }) })) })] }));
 }

package/dist/src/TopBar/components/MenuItem.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare function MenuItem({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
+export declare function MenuItem({ children }: React.PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/MenuItem.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledMenuItem } from "../TopBar.styled";
 const fadeInVariants = {
     hidden: {
@@ -23,5 +23,5 @@ const fadeInVariants = {
     },
 };
 export function MenuItem({ children }) {
-    return (React.createElement(StyledMenuItem, { "data-testid": "topbar-menu-item", initial: "hidden", animate: "visible", exit: "hidden", variants: fadeInVariants }, children));
+    return (_jsx(StyledMenuItem, { "data-testid": "topbar-menu-item", initial: "hidden", animate: "visible", exit: "hidden", variants: fadeInVariants, children: children }));
 }

package/dist/src/TopBar/components/MenuItemLink.d.ts

@@ -2,8 +2,10 @@ import { IconName } from "@nulogy/icons";
 import React, { ComponentProps } from "react";
 import { TileLink } from "../TopBar.styled";
 export interface MenuItemLinkProps extends ComponentProps<typeof TileLink> {
+    as?: React.ElementType;
+    to?: string;
     title: string;
     description?: string;
     icon: IconName;
 }
-export declare function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps): React.JSX.Element;
+export declare function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/MenuItemLink.js

@@ -1,14 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
-import React from "react";
 import { Flex } from "../../Flex";
 import { Icon } from "../../Icon";
 import { Text } from "../../Type";
 import { TileLink } from "../TopBar.styled";
 const MotionText = motion(Text);
 export function MenuItemLink({ description, title, icon, ...props }) {
-    return (React.createElement(TileLink, { ...props },
-        React.createElement(Icon, { icon: icon, size: "x3" }),
-        React.createElement(Flex, { flexDirection: "column", justifyContent: "center" },
-            React.createElement(MotionText, { fontWeight: "medium", fontSize: "md", lineHeight: "base" }, title),
-            React.createElement(MotionText, { fontSize: "xs" }, description))));
+    return (_jsxs(TileLink, { ...props, children: [_jsx(Icon, { icon: icon, size: "x3" }), _jsxs(Flex, { flexDirection: "column", justifyContent: "center", children: [_jsx(MotionText, { fontWeight: "medium", fontSize: "md", lineHeight: "base", children: title }), _jsx(MotionText, { fontSize: "xs", children: description })] })] }));
 }

package/dist/src/TopBar/components/PageTitle.d.ts

@@ -1,3 +1,3 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { StyledPageTitle } from "../TopBar.styled";
-export declare function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>): React.JSX.Element;
+export declare function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>): import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/components/PageTitle.js

@@ -1,5 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledPageTitle } from "../TopBar.styled";
 export function PageTitle({ children, ...props }) {
-    return (React.createElement(StyledPageTitle, { "data-testid": "topbar-page-title", ...props }, children));
+    return (_jsx(StyledPageTitle, { "data-testid": "topbar-page-title", ...props, children: children }));
 }

package/dist/src/TopBar/stories/TopBar.backButton.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     parameters: {
         layout: string;
@@ -14,6 +13,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const WithNoLabel: () => React.JSX.Element;
-export declare const WithACustomMaxWidth: () => React.JSX.Element;
-export declare const WithARouterLink: () => React.JSX.Element;
+export declare const WithNoLabel: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomMaxWidth: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithARouterLink: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/stories/TopBar.backButton.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link, BrowserRouter } from "react-router-dom";
 import { TopBar } from "../TopBar";
 import { legacy as theme } from "../../theme/theme";
@@ -18,23 +18,11 @@ export default {
     },
     title: "Components/TopBar/BackLink",
 };
-export const WithNoLabel = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "/cycle-counts" }),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title, ...props }))))));
-export const WithACustomMaxWidth = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "/cycle-counts", maxWidth: {
-            small: "10ch",
-            medium: "8ch",
-            large: "12ch",
-            extraLarge: "16ch",
-        } }, "Cycle counts"),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
-export const WithARouterLink = () => (React.createElement(BrowserRouter, null,
-    React.createElement(TopBar.Root, null,
-        React.createElement(Link, { component: TopBar.BackLink, to: "/cycle-counts" }, "Cycle counts"),
-        React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-        React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-            React.createElement(TopBar.MenuItemLink, { ...props }))))))));
+export const WithNoLabel = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { ...props }, props.title))) })] }));
+export const WithACustomMaxWidth = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", maxWidth: {
+                small: "10ch",
+                medium: "8ch",
+                large: "12ch",
+                extraLarge: "16ch",
+            }, children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const WithARouterLink = () => (_jsx(BrowserRouter, { children: _jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { as: Link, to: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }) }));

package/dist/src/TopBar/stories/TopBar.menu.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     parameters: {
         layout: string;
@@ -15,8 +14,8 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const withDefaultOpenMenu: () => React.JSX.Element;
-export declare const WithOneMenuItem: () => React.JSX.Element;
-export declare const WithTwoItems: () => React.JSX.Element;
-export declare const WithThreeItems: () => React.JSX.Element;
-export declare const WithRouterLinks: () => React.JSX.Element;
+export declare const withDefaultOpenMenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithOneMenuItem: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTwoItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithThreeItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithRouterLinks: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/TopBar/stories/TopBar.menu.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link, BrowserRouter } from "react-router-dom";
 import { TopBar } from "../TopBar";
 import { legacy as theme } from "../../theme/theme";
@@ -19,35 +19,14 @@ export default {
     },
     title: "Components/TopBar/Menu",
 };
-export const withDefaultOpenMenu = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
-export const WithOneMenuItem = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 1).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
-export const WithTwoItems = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 2).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
-export const WithThreeItems = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 3).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
+export const withDefaultOpenMenu = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "#", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { defaultOpened: true, children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const WithOneMenuItem = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "#", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { defaultOpened: true, children: menuItems.slice(0, 1).map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const WithTwoItems = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "#", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { defaultOpened: true, children: menuItems.slice(0, 2).map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const WithThreeItems = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "#", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { defaultOpened: true, children: menuItems.slice(0, 3).map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
 export const WithRouterLinks = () => {
     const routerMenuItems = menuItems.map(({ href, ...item }) => ({
         ...item,
         to: href,
     }));
-    return (React.createElement(TopBar.Root, null,
-        React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
-        React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-        React.createElement(TopBar.Menu, { defaultOpened: true },
-            React.createElement(BrowserRouter, { basename: "/" }, routerMenuItems.map((item) => (React.createElement(TopBar.MenuItem, { key: item.title },
-                React.createElement(Link, { component: TopBar.MenuItemLink, ...item }))))))));
+    return (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "#", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { defaultOpened: true, children: _jsx(BrowserRouter, { basename: "/", children: routerMenuItems.map((item) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { as: Link, ...item }) }, item.title))) }) })] }));
 };

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

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     parameters: {
@@ -14,6 +13,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithALongTitle: () => React.JSX.Element;
-export declare const WithAnApplicationFrame: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithALongTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAnApplicationFrame: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormSection } from "../../Form";
 import { Input } from "../../Input";
 import { ApplicationFrame, Page } from "../../Layout";
@@ -20,40 +20,6 @@ export default {
         },
     },
 };
-export const Default = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Cycle counts"),
-    React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
-export const WithALongTitle = () => (React.createElement(TopBar.Root, null,
-    React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Previous page title"),
-    React.createElement(TopBar.PageTitle, null, "A long title that can not fit on smaller screens"),
-    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, { ...props })))))));
-export const WithAnApplicationFrame = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(TopBar.Root, null,
-        React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Cycle counts"),
-        React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-        React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-            React.createElement(TopBar.MenuItemLink, { ...props })))))) },
-    React.createElement(Page, { fullHeight: true },
-        React.createElement(FormSection, { title: "Personal Information" },
-            React.createElement(Input, { id: "name", labelText: "Name" }),
-            React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-            React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })),
-        React.createElement(FormSection, { title: "General Information" },
-            React.createElement(Input, { id: "gender", labelText: "Gender" }),
-            React.createElement(Input, { id: "occupation", labelText: "Occupation" })),
-        React.createElement(FormSection, { title: "Personal Information" },
-            React.createElement(Input, { id: "name", labelText: "Name" }),
-            React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-            React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })),
-        React.createElement(FormSection, { title: "General Information" },
-            React.createElement(Input, { id: "gender", labelText: "Gender" }),
-            React.createElement(Input, { id: "occupation", labelText: "Occupation" })),
-        React.createElement(FormSection, { title: "Personal Information" },
-            React.createElement(Input, { id: "name", labelText: "Name" }),
-            React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-            React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })),
-        React.createElement(FormSection, { title: "General Information" },
-            React.createElement(Input, { id: "gender", labelText: "Gender" }),
-            React.createElement(Input, { id: "occupation", labelText: "Occupation" })))));
+export const Default = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const WithALongTitle = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Previous page title" }), _jsx(TopBar.PageTitle, { children: "A long title that can not fit on smaller screens" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const WithAnApplicationFrame = () => (_jsx(ApplicationFrame, { navBar: _jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }), children: _jsxs(Page, { fullHeight: true, children: [_jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] }), _jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] }), _jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }) }));

package/dist/src/TruncatedText/TruncatedText.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { TruncatedTextProps } from "./types";
-declare const TruncatedText: ({ indicator, element, maxCharacters, fullWidth, showTooltip, "data-testid": dataTestId, children, ...rest }: TruncatedTextProps) => React.JSX.Element;
+declare const TruncatedText: ({ indicator, element, maxCharacters, fullWidth, showTooltip, "data-testid": dataTestId, children, ...rest }: TruncatedTextProps) => import("react/jsx-runtime").JSX.Element;
 export default TruncatedText;

package/dist/src/TruncatedText/TruncatedText.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "../Type";
 import TruncatedTextFillWidth from "./components/TruncatedTextFillWidth";
 import TruncatedTextMaxCharacters from "./components/TruncatedTextMaxCharacters";
-const TruncatedText = ({ indicator = "...", element = React.createElement(Text, null), maxCharacters = 20, fullWidth = false, showTooltip = true, "data-testid": dataTestId = "truncated-text", children, ...rest }) => {
+const TruncatedText = ({ indicator = "...", element = _jsx(Text, {}), maxCharacters = 20, fullWidth = false, showTooltip = true, "data-testid": dataTestId = "truncated-text", children, ...rest }) => {
     const props = {
         indicator,
         element,
@@ -11,6 +11,6 @@ const TruncatedText = ({ indicator = "...", element = React.createElement(Text,
         "data-testid": dataTestId,
         ...rest,
     };
-    return fullWidth ? (React.createElement(TruncatedTextFillWidth, { ...props }, children)) : (React.createElement(TruncatedTextMaxCharacters, { ...props }, children));
+    return fullWidth ? (_jsx(TruncatedTextFillWidth, { ...props, children: children })) : (_jsx(TruncatedTextMaxCharacters, { ...props, children: children }));
 };
 export default TruncatedText;

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

@@ -1,57 +1,56 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const _TruncatedText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithoutTooltip: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const UnderMaxCharacters: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithMaxCharacters10: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomTruncationIndicator: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const AsTitle: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const FullWidth: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithoutChildren: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const TooltipInsideModal: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };

package/dist/src/TruncatedText/TruncatedText.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading1 } from "../Type";
 import { Box } from "../Box";
 import { Modal } from "../Modal";
@@ -6,46 +6,39 @@ import { TruncatedText } from ".";
 export default {
     title: "Components/TruncatedText",
 };
-export const _TruncatedText = () => (React.createElement(TruncatedText, { fontSize: "small" }, "Special instructions are provided for the shipment"));
+export const _TruncatedText = () => (_jsx(TruncatedText, { fontSize: "small", children: "Special instructions are provided for the shipment" }));
 _TruncatedText.story = {
     name: "TruncatedText",
 };
-export const WithoutTooltip = () => (React.createElement(TruncatedText, { showTooltip: false }, "Special instructions are provided for the shipment"));
+export const WithoutTooltip = () => (_jsx(TruncatedText, { showTooltip: false, children: "Special instructions are provided for the shipment" }));
 WithoutTooltip.story = {
     name: "without tooltip",
 };
-export const UnderMaxCharacters = () => React.createElement(TruncatedText, null, "Item is available");
+export const UnderMaxCharacters = () => _jsx(TruncatedText, { children: "Item is available" });
 UnderMaxCharacters.story = {
     name: "under max characters",
 };
-export const WithMaxCharacters10 = () => React.createElement(TruncatedText, { maxCharacters: 10 }, "Item is available");
+export const WithMaxCharacters10 = () => _jsx(TruncatedText, { maxCharacters: 10, children: "Item is available" });
 WithMaxCharacters10.story = {
     name: "with max characters 10",
 };
-export const WithCustomTruncationIndicator = () => (React.createElement(TruncatedText, { indicator: " + 2..." }, "Special instructions are provided for the shipment"));
+export const WithCustomTruncationIndicator = () => (_jsx(TruncatedText, { indicator: " + 2...", children: "Special instructions are provided for the shipment" }));
 WithCustomTruncationIndicator.story = {
     name: "with custom truncation indicator",
 };
-export const AsTitle = () => (React.createElement(TruncatedText, { element: React.createElement(Heading1, null) }, "Special instructions are provided for the shipment"));
+export const AsTitle = () => (_jsx(TruncatedText, { element: _jsx(Heading1, {}), children: "Special instructions are provided for the shipment" }));
 AsTitle.story = {
     name: "as title",
 };
-export const FullWidth = () => (React.createElement(Box, { width: "200px" },
-    React.createElement(TruncatedText, { fullWidth: true }, "Special instructions are truncated because there is not enough space to show them."),
-    React.createElement(TruncatedText, { fullWidth: true }, "Instructions fit here.")));
+export const FullWidth = () => (_jsxs(Box, { width: "200px", children: [_jsx(TruncatedText, { fullWidth: true, children: "Special instructions are truncated because there is not enough space to show them." }), _jsx(TruncatedText, { fullWidth: true, children: "Instructions fit here." })] }));
 FullWidth.story = {
     name: "full width",
 };
-export const WithoutChildren = () => (React.createElement(Box, null,
-    React.createElement(Heading1, null, "No text should appear after this sentence, neither should the page crash."),
-    React.createElement(TruncatedText, null, null),
-    React.createElement(TruncatedText, null, undefined),
-    React.createElement(TruncatedText, null)));
+export const WithoutChildren = () => (_jsxs(Box, { children: [_jsx(Heading1, { children: "No text should appear after this sentence, neither should the page crash." }), _jsx(TruncatedText, { children: null }), _jsx(TruncatedText, { children: undefined }), _jsx(TruncatedText, {})] }));
 WithoutChildren.story = {
     name: "Without children",
 };
 export const TooltipInsideModal = () => {
-    return (React.createElement(Modal, { title: "Modal Title" },
-        React.createElement(TruncatedText, { tooltipProps: { defaultOpen: true } }, "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay")));
+    return (_jsx(Modal, { title: "Modal Title", children: _jsx(TruncatedText, { tooltipProps: { defaultOpen: true }, children: "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay" }) }));
 };
 TooltipInsideModal.storyName = "Tooltip inside modal";

package/dist/src/TruncatedText/components/TruncatedTextFillWidth.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { TruncatedTextProps } from "../types";
-declare const TruncatedTextFillWidth: ({ element, showTooltip, tooltipProps, children, "data-testid": testId, ...props }: TruncatedTextProps) => React.JSX.Element;
+declare const TruncatedTextFillWidth: ({ element, showTooltip, tooltipProps, children, "data-testid": testId, ...props }: TruncatedTextProps) => import("react/jsx-runtime").JSX.Element;
 export default TruncatedTextFillWidth;