@nulogy/components 16.0.0 → 16.0.1

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(Link, { component: TopBar.MenuItemLink, ...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;

package/dist/src/TruncatedText/components/TruncatedTextFillWidth.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Text } from "../../Type";
 import MaybeTooltip from "../../MaybeTooltip/MaybeTooltip";
 const TruncatedTextFillWidth = ({ element, showTooltip, tooltipProps, children, "data-testid": testId, ...props }) => {
@@ -10,7 +11,6 @@ const TruncatedTextFillWidth = ({ element, showTooltip, tooltipProps, children,
             setHasOverflowText(true);
         }
     };
-    return (React.createElement(MaybeTooltip, { showTooltip: hasTooltip, tooltip: children, defaultOpen: true, ...tooltipProps },
-        React.createElement(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", onMouseEnter: updateOverflow, width: "100%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", "data-testid": testId, ...element.props, ...props }, children)));
+    return (_jsx(MaybeTooltip, { showTooltip: hasTooltip, tooltip: children, defaultOpen: true, ...tooltipProps, children: _jsx(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", onMouseEnter: updateOverflow, width: "100%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", "data-testid": testId, ...element.props, ...props, children: children }) }));
 };
 export default TruncatedTextFillWidth;

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

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

package/dist/src/TruncatedText/components/TruncatedTextMaxCharacters.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "../../Type";
 import MaybeTooltip from "../../MaybeTooltip/MaybeTooltip";
 const TruncatedTextMaxCharacters = ({ children, element, indicator, maxCharacters, showTooltip, tooltipProps, "data-testid": testId, ...props }) => {
@@ -6,7 +6,6 @@ const TruncatedTextMaxCharacters = ({ children, element, indicator, maxCharacter
     const requiresTruncation = innerText.length > maxCharacters;
     const truncatedText = requiresTruncation ? innerText.slice(0, maxCharacters) + indicator : innerText;
     const hasTooltip = showTooltip && requiresTruncation;
-    return (React.createElement(MaybeTooltip, { showTooltip: hasTooltip, tooltip: innerText, ...tooltipProps },
-        React.createElement(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", width: "fit-content", "data-testid": testId, ...element.props, ...props }, truncatedText)));
+    return (_jsx(MaybeTooltip, { showTooltip: hasTooltip, tooltip: innerText, ...tooltipProps, children: _jsx(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", width: "fit-content", "data-testid": testId, ...element.props, ...props, children: truncatedText }) }));
 };
 export default TruncatedTextMaxCharacters;

package/dist/src/Type/Headings.d.ts

@@ -1,48 +1,48 @@
 import { TextProps } from "./Text";
-export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
+} & import("..").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, TextProps>> & string;
-export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
+} & import("..").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, never>> & string;
-export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
+} & import("..").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, never>> & string;
-export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
+} & import("..").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;

package/dist/src/Type/Headings.story.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Headings: () => React.JSX.Element;
-export declare const WithACustomMargin: () => React.JSX.Element;
-export declare const Inline: () => React.JSX.Element;
+export declare const Headings: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomMargin: () => import("react/jsx-runtime").JSX.Element;
+export declare const Inline: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Type/Headings.story.js

@@ -1,17 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text, Heading1, Heading2, Heading3, Heading4, StatusIndicator } from "../index";
 import { Flex } from "../Flex";
 export default {
     title: "Components/Headings",
 };
-export const Headings = () => (React.createElement(Flex, { flexDirection: "column" },
-    React.createElement(Heading1, null, "Heading 1"),
-    React.createElement(Heading2, null, "Heading 2"),
-    React.createElement(Heading3, null, "Heading 3"),
-    React.createElement(Heading4, null, "Heading 4")));
-export const WithACustomMargin = () => (React.createElement(React.Fragment, null,
-    React.createElement(Heading1, { mb: "x6" }, "Heading1"),
-    React.createElement(Text, null, "Lorem ipsum")));
-export const Inline = () => (React.createElement(React.Fragment, null,
-    React.createElement(Heading1, { inline: true }, "Heading1"),
-    React.createElement(StatusIndicator, { ml: "x2", type: "informative" }, "Status")));
+export const Headings = () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(Heading1, { children: "Heading 1" }), _jsx(Heading2, { children: "Heading 2" }), _jsx(Heading3, { children: "Heading 3" }), _jsx(Heading4, { children: "Heading 4" })] }));
+export const WithACustomMargin = () => (_jsxs(_Fragment, { children: [_jsx(Heading1, { mb: "x6", children: "Heading1" }), _jsx(Text, { children: "Lorem ipsum" })] }));
+export const Inline = () => (_jsxs(_Fragment, { children: [_jsx(Heading1, { inline: true, children: "Heading1" }), _jsx(StatusIndicator, { ml: "x2", type: "informative", children: "Status" })] }));

package/dist/src/Type/Text.story.d.ts

@@ -1,35 +1,34 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Text: () => React.JSX.Element;
+export declare const _Text: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAColor: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithASize: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithACustomMargin: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToInline: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Type/Text.story.js

@@ -1,44 +1,27 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text } from ".";
 import { Box } from "../Box";
 export default {
     title: "Components/Text",
 };
-export const _Text = () => React.createElement(Text, null, "Default text");
-export const WithAColor = () => React.createElement(Text, { color: "blue" }, "Blue text");
+export const _Text = () => _jsx(Text, { children: "Default text" });
+export const WithAColor = () => _jsx(Text, { color: "blue", children: "Blue text" });
 WithAColor.story = {
     name: "With a color",
 };
-export const WithASize = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
-        React.createElement(Text, null, "Default (16px/24px)")),
-    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase" }, "Small (14px/24px)"),
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" }, "Small Compressed (14px/16px)")),
-    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
-        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText" }, "Smaller (12px/16px)"))));
+export const WithASize = () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { children: "Default (16px/24px)" }) }), _jsxs(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", children: "Small (14px/24px)" }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextCompressed", children: "Small Compressed (14px/16px)" })] }), _jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", children: "Smaller (12px/16px)" }) })] }));
 WithASize.story = {
     name: "With a size",
 };
-export const WithACustomMargin = () => (React.createElement(React.Fragment, null,
-    React.createElement(Text, { mb: "x3" }, "Text 24px bottom margin."),
-    React.createElement(Text, null, "Text with default (0px) bottom margin.")));
+export const WithACustomMargin = () => (_jsxs(_Fragment, { children: [_jsx(Text, { mb: "x3", children: "Text 24px bottom margin." }), _jsx(Text, { children: "Text with default (0px) bottom margin." })] }));
 WithACustomMargin.story = {
     name: "With a custom margin",
 };
-export const SetToInline = () => (React.createElement(React.Fragment, null,
-    React.createElement(Text, { inline: true, mr: "x1" }, "Inline text"),
-    React.createElement(Text, { inline: true }, "Inline text")));
+export const SetToInline = () => (_jsxs(_Fragment, { children: [_jsx(Text, { inline: true, mr: "x1", children: "Inline text" }), _jsx(Text, { inline: true, children: "Inline text" })] }));
 SetToInline.story = {
     name: "Set to inline",
 };
-export const SetToDisabled = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { bg: "white", p: "x2", m: "x2" },
-        React.createElement(Text, { disabled: true }, "Disabled text")),
-    React.createElement(Box, { bg: "darkBlue", p: "x2", m: "x2" },
-        React.createElement(Text, { color: "white", disabled: true }, "Disabled text")),
-    React.createElement(Box, { bg: "black", p: "x2", m: "x2" },
-        React.createElement(Text, { color: "white", disabled: true }, "Disabled text"))));
+export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "white", p: "x2", m: "x2", children: _jsx(Text, { disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "darkBlue", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "black", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) })] }));
 SetToDisabled.story = {
     name: "Set to disabled",
 };

package/dist/src/Type/Typography.story.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Article: () => React.JSX.Element;
-export declare const AllTypographyValues: () => React.JSX.Element;
+export declare const Article: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllTypographyValues: () => import("react/jsx-runtime").JSX.Element;