@nulogy/components 16.0.0 → 16.0.2

package/dist/src/AsyncSelect/AsyncSelectComponents.js

@@ -1,42 +1,32 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { components as selectComponents, } from "react-select";
 import { components } from "react-select";
 import { StyledOption } from "../Select/SelectOption";
 import { InputIcon } from "../Icon/Icon";
 export const SelectControl = ({ isFocused, children, ...props }) => {
-    return (React.createElement("div", { "data-testid": "select-control" },
-        React.createElement(selectComponents.Control, { className: isFocused ? "nds-select--is-focused" : null, isFocused: isFocused, ...props },
-            props.selectProps.iconLeft && React.createElement(InputIcon, { left: "x1", icon: props.selectProps.iconLeft, size: "x3" }),
-            children)));
+    return (_jsx("div", { "data-testid": "select-control", children: _jsxs(selectComponents.Control, { className: isFocused ? "nds-select--is-focused" : null, isFocused: isFocused, ...props, children: [props.selectProps.iconLeft && _jsx(InputIcon, { left: "x1", icon: props.selectProps.iconLeft, size: "x3" }), children] }) }));
 };
 export const SelectMultiValue = (props) => {
-    return (React.createElement("div", { "data-testid": "select-multivalue" },
-        React.createElement(selectComponents.MultiValue, { ...props }, props.children)));
+    return (_jsx("div", { "data-testid": "select-multivalue", children: _jsx(selectComponents.MultiValue, { ...props, children: props.children }) }));
 };
 export const SelectClearIndicator = (props) => {
-    return (React.createElement("div", { "data-testid": "select-clear" },
-        React.createElement(selectComponents.ClearIndicator, { ...props }, props.children)));
+    return (_jsx("div", { "data-testid": "select-clear", children: _jsx(selectComponents.ClearIndicator, { ...props, children: props.children }) }));
 };
 export const SelectDropdownIndicator = (props) => {
-    return (React.createElement("div", { "data-testid": "select-arrow" },
-        React.createElement(selectComponents.DropdownIndicator, { ...props }, props.children)));
+    return (_jsx("div", { "data-testid": "select-arrow", children: _jsx(selectComponents.DropdownIndicator, { ...props, children: props.children }) }));
 };
 export const SelectContainer = (props) => {
-    return (React.createElement("div", { "data-testid": "select-container" },
-        React.createElement(selectComponents.SelectContainer, { ...props }, props.children)));
+    return (_jsx("div", { "data-testid": "select-container", children: _jsx(selectComponents.SelectContainer, { ...props, children: props.children }) }));
 };
 export const SelectInput = (props) => {
-    return (React.createElement("div", { "data-testid": "select-input" },
-        React.createElement(selectComponents.Input, { ...props }, props.children)));
+    return (_jsx("div", { "data-testid": "select-input", children: _jsx(selectComponents.Input, { ...props, children: props.children }) }));
 };
 export const SelectMenu = (props) => {
     if (!props.selectProps.inputValue && props.options.length === 0) {
         return null;
     }
-    return (React.createElement("div", { "data-testid": "select-dropdown" },
-        React.createElement(components.Menu, { ...props }, props.children)));
+    return (_jsx("div", { "data-testid": "select-dropdown", children: _jsx(components.Menu, { ...props, children: props.children }) }));
 };
 export function SelectOption(props) {
-    return (React.createElement(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option" },
-        React.createElement(components.Option, { ...props }, props.children)));
+    return (_jsx(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option", children: _jsx(components.Option, { ...props, children: props.children }) }));
 }

package/dist/src/Banner/Banner.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { Alert } from "../Alert";
-declare const Banner: ({ ...props }: ComponentProps<typeof Alert>) => React.JSX.Element;
+declare const Banner: ({ ...props }: ComponentProps<typeof Alert>) => import("react/jsx-runtime").JSX.Element;
 export default Banner;

package/dist/src/Banner/Banner.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert } from "../Alert";
-const Banner = ({ ...props }) => (React.createElement(Alert, { borderStyle: "none", borderRadius: "0", px: "x3", ...props }));
+const Banner = ({ ...props }) => (_jsx(Alert, { borderStyle: "none", borderRadius: "0", px: "x3", ...props }));
 export default Banner;

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

@@ -1,10 +1,9 @@
-import React from "react";
-export declare const WithCallToAction: () => React.JSX.Element;
-export declare const Dismissible: () => React.JSX.Element;
-export declare const AboveTheNavbar: () => React.JSX.Element;
-export declare const BellowTheNavbar: () => React.JSX.Element;
-export declare const BellowTheHeader: () => React.JSX.Element;
-export declare const BannerTypes: () => React.JSX.Element;
+export declare const WithCallToAction: () => import("react/jsx-runtime").JSX.Element;
+export declare const Dismissible: () => import("react/jsx-runtime").JSX.Element;
+export declare const AboveTheNavbar: () => import("react/jsx-runtime").JSX.Element;
+export declare const BellowTheNavbar: () => import("react/jsx-runtime").JSX.Element;
+export declare const BellowTheHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const BannerTypes: () => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
     title: string;
     parameters: {

package/dist/src/Banner/Banner.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "../Link";
 import { Box } from "../Box";
 import { PrimaryButton } from "../Button";
@@ -6,30 +6,13 @@ import { WithSummary as Header } from "../Layout/Header.story";
 import { Flex } from "../Flex";
 import { Navigation } from "../Navigation";
 import Banner from "./Banner";
-export const WithCallToAction = () => (React.createElement(Banner, { title: "Link all your accounts", isCloseable: true },
-    "Nulogy Digital Quality Inspections now allows users to access all their different accounts using a single email.",
-    React.createElement(Box, { mt: "x2" },
-        React.createElement(PrimaryButton, null, "Learn more"))));
-export const Dismissible = () => (React.createElement(Banner, { title: "This banner is dismissable", isCloseable: true }, "You can click on the close button to dismiss the Banner"));
-export const AboveTheNavbar = () => (React.createElement(React.Fragment, null,
-    React.createElement(Banner, { title: "Action required" }, "We have detected unauthorized access attempts on your account. Please change your password immediately to secure your account."),
-    React.createElement(Navigation, null)));
-export const BellowTheNavbar = () => (React.createElement(React.Fragment, null,
-    React.createElement(Navigation, null),
-    React.createElement(WithCallToAction, null)));
-export const BellowTheHeader = () => (React.createElement(React.Fragment, null,
-    React.createElement(Navigation, null),
-    React.createElement(Header, null),
-    React.createElement(Banner, { type: "warning" },
-        React.createElement("strong", null, "Page refresh required"),
-        " To obtain the most recent data, ",
-        React.createElement(Link, { href: "/" }, "click here"),
-        ".")));
+export const WithCallToAction = () => (_jsxs(Banner, { title: "Link all your accounts", isCloseable: true, children: ["Nulogy Digital Quality Inspections now allows users to access all their different accounts using a single email.", _jsx(Box, { mt: "x2", children: _jsx(PrimaryButton, { children: "Learn more" }) })] }));
+export const Dismissible = () => (_jsx(Banner, { title: "This banner is dismissable", isCloseable: true, children: "You can click on the close button to dismiss the Banner" }));
+export const AboveTheNavbar = () => (_jsxs(_Fragment, { children: [_jsx(Banner, { title: "Action required", children: "We have detected unauthorized access attempts on your account. Please change your password immediately to secure your account." }), _jsx(Navigation, {})] }));
+export const BellowTheNavbar = () => (_jsxs(_Fragment, { children: [_jsx(Navigation, {}), _jsx(WithCallToAction, {})] }));
+export const BellowTheHeader = () => (_jsxs(_Fragment, { children: [_jsx(Navigation, {}), _jsx(Header, {}), _jsxs(Banner, { type: "warning", children: [_jsx("strong", { children: "Page refresh required" }), " To obtain the most recent data, ", _jsx(Link, { href: "/", children: "click here" }), "."] })] }));
 const bannerTypes = ["danger", "informative", "success", "warning"];
-export const BannerTypes = () => (React.createElement(Flex, { flexDirection: "column" }, bannerTypes.map((type) => (React.createElement(Banner, { key: type, type: type, title: type },
-    "This is a banner with type \"",
-    type,
-    "\"")))));
+export const BannerTypes = () => (_jsx(Flex, { flexDirection: "column", children: bannerTypes.map((type) => (_jsxs(Banner, { type: type, title: type, children: ["This is a banner with type \"", type, "\""] }, type))) }));
 export default {
     title: "Components/Banner",
     parameters: {

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

@@ -19,4 +19,4 @@ export interface Props {
     contentWidth?: WidthProps["width"];
     children?: React.ReactNode;
 }
-export default function BottomSheet({ title, helpText, closeButtonLabel, secondaryAction, primaryAction, isOpen, onClose, sheetWidth, contentWidth, disableCloseOnOverlayClick, hideCloseButton, children, ...props }: Props): React.JSX.Element;
+export default function BottomSheet({ title, helpText, closeButtonLabel, secondaryAction, primaryAction, isOpen, onClose, sheetWidth, contentWidth, disableCloseOnOverlayClick, hideCloseButton, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
 import { Box } from "../Box";
@@ -17,20 +17,6 @@ export default function BottomSheet({ title, helpText, closeButtonLabel, seconda
       x4: To match the top padding of the content
     */
     const footerHeight = `calc(${theme.space.x5} + (${theme.space.x2} * 2) + ${theme.space.x4})`;
-    return (React.createElement(BottomSheetParts.Root, { isOpen: isOpen, onClose: onClose },
-        React.createElement(BottomSheetParts.Overlay, { closeOnClick: closeOnClick },
-            React.createElement(BottomSheetParts.Sheet, { width: sheetWidth, maxWidth: { small: `calc(100% - ${theme.space.x8})` }, maxHeight: { small: `calc(100dvh - ${theme.space.x7})`, medium: "85.4dvh" }, "aria-label": props["aria-label"] ?? title },
-                React.createElement(BottomSheetParts.ContentContainer, null,
-                    React.createElement(Box, { width: contentWidth, margin: "0 auto" },
-                        React.createElement(BottomSheetParts.Header, null,
-                            title && React.createElement(BottomSheetParts.Title, null, title),
-                            helpText &&
-                                (typeof helpText === "string" ? (React.createElement(BottomSheetParts.HelpText, null, helpText)) : (helpText))),
-                        React.createElement(Box, { px: "x3", pt: "x4", pb: footerHeight }, children)),
-                    React.createElement(BottomSheetParts.Footer, null,
-                        React.createElement(Flex, { alignItems: "center", justifyContent: "space-between", gap: "x2" },
-                            !hideCloseButton && React.createElement(QuietButton, { onClick: onClose }, closeButtonLabel),
-                            React.createElement(Flex, { gap: "x2", alignItems: "center", ml: "auto" },
-                                secondaryAction && secondaryAction({ onClose }),
-                                primaryAction && primaryAction({ onClose })))))))));
+    return (_jsx(BottomSheetParts.Root, { isOpen: isOpen, onClose: onClose, children: _jsx(BottomSheetParts.Overlay, { closeOnClick: closeOnClick, children: _jsx(BottomSheetParts.Sheet, { width: sheetWidth, maxWidth: { small: `calc(100% - ${theme.space.x8})` }, maxHeight: { small: `calc(100dvh - ${theme.space.x7})`, medium: "85.4dvh" }, "aria-label": props["aria-label"] ?? title, children: _jsxs(BottomSheetParts.ContentContainer, { children: [_jsxs(Box, { width: contentWidth, margin: "0 auto", children: [_jsxs(BottomSheetParts.Header, { children: [title && _jsx(BottomSheetParts.Title, { children: title }), helpText &&
+                                            (typeof helpText === "string" ? (_jsx(BottomSheetParts.HelpText, { children: helpText })) : (helpText))] }), _jsx(Box, { px: "x3", pt: "x4", pb: footerHeight, children: children })] }), _jsx(BottomSheetParts.Footer, { children: _jsxs(Flex, { alignItems: "center", justifyContent: "space-between", gap: "x2", children: [!hideCloseButton && _jsx(QuietButton, { onClick: onClose, children: closeButtonLabel }), _jsxs(Flex, { gap: "x2", alignItems: "center", ml: "auto", children: [secondaryAction && secondaryAction({ onClose }), primaryAction && primaryAction({ onClose })] })] }) })] }) }) }) }));
 }

package/dist/src/BottomSheet/BottomSheet.parts.d.ts

@@ -7,23 +7,23 @@ interface RootProps extends AnimatePresenceProps {
     onClose: () => void;
     children: React.ReactNode;
 }
-declare function Root({ isOpen, onClose, children, ...props }: RootProps): React.JSX.Element;
+declare function Root({ isOpen, onClose, children, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 interface OverlayPartProps extends DialogOverlayProps {
     closeOnClick?: boolean;
 }
-declare function OverlayPart({ closeOnClick, children, ...props }: OverlayPartProps): React.JSX.Element;
+declare function OverlayPart({ closeOnClick, children, ...props }: OverlayPartProps): import("react/jsx-runtime").JSX.Element;
 interface SheetPartProps extends DialogContentProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
     children: React.ReactNode;
     "aria-label": string;
 }
-declare function SheetPart({ children, ...props }: SheetPartProps): React.JSX.Element;
+declare function SheetPart({ children, ...props }: SheetPartProps): import("react/jsx-runtime").JSX.Element;
 export declare const BottomSheetParts: {
     Root: typeof Root;
     Overlay: typeof OverlayPart;
     Sheet: typeof SheetPart;
     ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
         variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
         inline?: boolean;
         compact?: boolean;
@@ -35,7 +35,7 @@ export declare const BottomSheetParts: {
     }, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
         ref?: React.Ref<HTMLHeadingElement>;
     }>, never>, never>, never>> & string;
-    HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+    HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
         variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
         inline?: boolean;
         compact?: boolean;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { AnimatePresence } from "framer-motion";
 import React from "react";
 import { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText } from "./BottomSheet.styled";
@@ -15,16 +16,16 @@ const transition = {
     ease: [0.32, 0.72, 0, 1],
 };
 function Root({ isOpen, onClose, children, ...props }) {
-    return (React.createElement(AnimatePresence, { ...props }, isOpen && (React.createElement(BottomSheetProvider, { isOpen: isOpen, onClose: onClose }, children))));
+    return (_jsx(AnimatePresence, { ...props, children: isOpen && (_jsx(BottomSheetProvider, { isOpen: isOpen, onClose: onClose, children: children })) }));
 }
 function OverlayPart({ closeOnClick, children, ...props }) {
     const { onClose, isOpen } = useBottomSheet();
     const [isAnimationComplete, setAnimationComplete] = React.useState(false);
-    return (React.createElement(Overlay, { "data-testid": "bottom-sheet-overlay", "data-visible": isAnimationComplete ? true : undefined, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
+    return (_jsx(Overlay, { "data-testid": "bottom-sheet-overlay", "data-visible": isAnimationComplete ? true : undefined, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
             if (isOpen) {
                 setAnimationComplete(true);
             }
-        }, onClick: closeOnClick ? onClose : undefined, isOpen: isOpen, ...props }, children));
+        }, onClick: closeOnClick ? onClose : undefined, isOpen: isOpen, ...props, children: children }));
 }
 function SheetPart({ children, ...props }) {
     const { isOpen } = useBottomSheet();
@@ -32,11 +33,11 @@ function SheetPart({ children, ...props }) {
     function handleSheetClick(e) {
         e.stopPropagation();
     }
-    return (React.createElement(Sheet, { "data-testid": "bottom-sheet-body", "aria-label": props["aria-label"], "data-visible": isAnimationComplete ? true : undefined, variants: sheetVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
+    return (_jsx(Sheet, { "data-testid": "bottom-sheet-body", "aria-label": props["aria-label"], "data-visible": isAnimationComplete ? true : undefined, variants: sheetVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
             if (isOpen) {
                 setAnimationComplete(true);
             }
-        }, onClick: handleSheetClick, ...props }, children));
+        }, onClick: handleSheetClick, ...props, children: children }));
 }
 export const BottomSheetParts = {
     Root,

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

@@ -1,22 +1,26 @@
 import { DialogContentProps } from "@reach/dialog";
 import type { AnimationProps } from "framer-motion";
 import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
-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>>;
 interface SheetProps extends DialogContentProps, AnimationProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
 }
-declare const Sheet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const Sheet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, "children" | "as"> & {
     as?: "div";
-} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, SheetProps>> & 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>;
+}, SheetProps>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, "children" | "as"> & {
     as?: "div";
@@ -24,26 +28,26 @@ declare const Sheet: import("styled-components/dist/types").IStyledComponentBase
 declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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> & {
+declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "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>, never>> & string;
-declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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> & {
+declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "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>;
 }, never>> & string;
 export { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText };

package/dist/src/BottomSheet/BottomSheetProvider.d.ts

@@ -8,5 +8,5 @@ declare function BottomSheetProvider({ isOpen, onClose, children, }: {
     isOpen: boolean;
     onClose: () => void;
     children: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export { BottomSheetProvider, useBottomSheet };

package/dist/src/BottomSheet/BottomSheetProvider.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { noop } from "../utils/noop";
 const BottomSheetContext = createContext(undefined);
@@ -10,6 +10,6 @@ function useBottomSheet() {
     return context;
 }
 function BottomSheetProvider({ isOpen = false, onClose = noop, children, }) {
-    return React.createElement(BottomSheetContext.Provider, { value: { isOpen, onClose } }, children);
+    return _jsx(BottomSheetContext.Provider, { value: { isOpen, onClose }, children: children });
 }
 export { BottomSheetProvider, useBottomSheet };

package/dist/src/BottomSheet/stories/BottomSheet.actions.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,5 +8,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const WithAHiddenCloseButton: () => React.JSX.Element;
-export declare const WithButtons: () => React.JSX.Element;
+export declare const WithAHiddenCloseButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithButtons: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,25 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Button, PrimaryButton, QuietButton } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
 export default {
     title: "Components/BottomSheet/Actions",
-    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 WithAHiddenCloseButton = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { title: "User Feedback", helpText: "Please provide your feedback to help us improve our services", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: ({ onClose }) => React.createElement(PrimaryButton, { onClick: onClose }, "Submit"), hideCloseButton: true },
-            React.createElement(Placeholder, null))));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "User Feedback", helpText: "Please provide your feedback to help us improve our services", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: ({ onClose }) => _jsx(PrimaryButton, { onClick: onClose, children: "Submit" }), hideCloseButton: true, children: _jsx(Placeholder, {}) })] }));
 };
 export const WithButtons = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: () => React.createElement(QuietButton, null, "Next"), secondaryAction: () => React.createElement(QuietButton, null, "Previous") },
-            React.createElement(Placeholder, null))));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: () => _jsx(QuietButton, { children: "Next" }), secondaryAction: () => _jsx(QuietButton, { children: "Previous" }), children: _jsx(Placeholder, {}) })] }));
 };

package/dist/src/BottomSheet/stories/BottomSheet.content.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,5 +8,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const WithHelpText: () => React.JSX.Element;
-export declare const WithHelpContent: () => React.JSX.Element;
+export declare const WithHelpText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithHelpContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.content.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 { Button } from "../../Button";
 import { Link } from "../../Link";
@@ -6,24 +7,16 @@ import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
 export default {
     title: "Components/BottomSheet/Content",
-    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 WithHelpText = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: "Update your profile information to access exclusive features.", isOpen: isOpen, onClose: () => setIsOpen(false) },
-            React.createElement(Placeholder, null))));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: "Update your profile information to access exclusive features.", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
 };
 export const WithHelpContent = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: React.createElement(Text, null,
-                "Update your profile information to access exclusive features. ",
-                React.createElement(Link, { href: "#learn-more" }, "Learn more")), isOpen: isOpen, onClose: () => setIsOpen(false) },
-            React.createElement(Placeholder, null))));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: _jsxs(Text, { children: ["Update your profile information to access exclusive features. ", _jsx(Link, { href: "#learn-more", children: "Learn more" })] }), isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
 };

package/dist/src/BottomSheet/stories/BottomSheet.features.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,12 +8,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const WithCustomWidths: () => React.JSX.Element;
+export declare const WithCustomWidths: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAnApplicationFrame: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
 };
-export declare const DisableCloseOnOverlayClick: () => React.JSX.Element;
-export declare const AdvancedUsage: () => React.JSX.Element;
+export declare const DisableCloseOnOverlayClick: () => import("react/jsx-runtime").JSX.Element;
+export declare const AdvancedUsage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.features.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, IconicButton } from "../../Button";
@@ -14,64 +15,33 @@ import { ApplicationFrame, Page } from "../../Layout";
 import { TopBar } from "../../TopBar";
 export default {
     title: "Components/BottomSheet/Features",
-    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 WithCustomWidths = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", sheetWidth: { extraSmall: "100%", small: 480, medium: 640, large: 768 }, contentWidth: { small: 320, medium: 420, large: 600 }, isOpen: isOpen, onClose: () => setIsOpen(false) },
-            React.createElement(Placeholder, null))));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", sheetWidth: { extraSmall: "100%", small: 480, medium: 640, large: 768 }, contentWidth: { small: 320, medium: 420, large: 600 }, isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
 };
 export const WithAnApplicationFrame = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    const 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,
-            React.createElement(TopBar.MenuItem, null,
-                React.createElement(TopBar.MenuItemLink, { title: "Home", description: "Go to the home page", icon: "home", href: "/home" })))));
-    return (React.createElement(ApplicationFrame, { navBar: navBar },
-        React.createElement(Page, null,
-            React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-            React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: "Update your profile information to access exclusive features.", isOpen: isOpen, onClose: () => setIsOpen(false) },
-                React.createElement(Placeholder, null)))));
+    const 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: _jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { title: "Home", description: "Go to the home page", icon: "home", href: "/home" }) }) })] }));
+    return (_jsx(ApplicationFrame, { navBar: navBar, children: _jsxs(Page, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: "Update your profile information to access exclusive features.", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }) }));
 };
 WithAnApplicationFrame.parameters = {
     layout: "fullscreen",
 };
 export const DisableCloseOnOverlayClick = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(Box, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { disableCloseOnOverlayClick: true, "aria-label": "Example BottomSheet", title: "Disabled overlay", helpText: "This BottomSheet can not be dismissed by clicking on the overlay", isOpen: isOpen, onClose: () => {
-                setIsOpen(false);
-            } },
-            React.createElement(Placeholder, null))));
+    return (_jsxs(Box, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { disableCloseOnOverlayClick: true, "aria-label": "Example BottomSheet", title: "Disabled overlay", helpText: "This BottomSheet can not be dismissed by clicking on the overlay", isOpen: isOpen, onClose: () => {
+                    setIsOpen(false);
+                }, children: _jsx(Placeholder, {}) })] }));
 };
 export const AdvancedUsage = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ToastContainer, null),
-        React.createElement(Box, null,
-            React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open BottomSheet"),
-            React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit profile", helpText: React.createElement(Flex, { color: "darkGrey", alignItems: "flex-start", gap: "half" },
-                    React.createElement(Icon, { icon: "warning", color: "yellow" }),
-                    "Not everything demonstrated in this story is recommended as best practice usage."), primaryAction: ({ onClose }) => (React.createElement(IconicButton, { icon: "arrowForward", onClick: () => {
-                        toast.informative("Primary action clicked");
-                        onClose();
-                    } }, "Get started")), secondaryAction: () => (React.createElement(Text, { fontSize: "smaller" },
-                    "Need more information? ",
-                    React.createElement(Link, { href: "#story" }, "Ask for help"))), closeButtonLabel: "Dismiss", isOpen: isOpen, onClose: () => setIsOpen(false), sheetWidth: { small: "100%" }, contentWidth: "100%" },
-                React.createElement(Form, null,
-                    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" })))))));
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, {}), _jsxs(Box, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open BottomSheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit profile", helpText: _jsxs(Flex, { color: "darkGrey", alignItems: "flex-start", gap: "half", children: [_jsx(Icon, { icon: "warning", color: "yellow" }), "Not everything demonstrated in this story is recommended as best practice usage."] }), primaryAction: ({ onClose }) => (_jsx(IconicButton, { icon: "arrowForward", onClick: () => {
+                                toast.informative("Primary action clicked");
+                                onClose();
+                            }, children: "Get started" })), secondaryAction: () => (_jsxs(Text, { fontSize: "smaller", children: ["Need more information? ", _jsx(Link, { href: "#story", children: "Ask for help" })] })), closeButtonLabel: "Dismiss", isOpen: isOpen, onClose: () => setIsOpen(false), sheetWidth: { small: "100%" }, contentWidth: "100%", children: _jsxs(Form, { 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" })] })] }) })] })] }));
 };

package/dist/src/BottomSheet/stories/BottomSheet.parts.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 RenderedUsingCompositionalAPI: () => React.JSX.Element;
+export declare const RenderedUsingCompositionalAPI: () => import("react/jsx-runtime").JSX.Element;