@nulogy/components 16.0.0 → 16.0.2

package/dist/src/DateRange/DateRange.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
 import { isBefore, isSameDay } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { DatePicker } from "../DatePickers";
@@ -99,21 +100,15 @@ const DateRange = forwardRef(({ dateFormat, onRangeChange, onStartDateChange, on
         error: rangeError,
         ...startDateInputProps,
     };
-    const startDateInput = (React.createElement(React.Fragment, null,
-        React.createElement(DatePicker, { dateFormat: dateFormat, selected: startDate, onChange: changeStartDateHandler, inputProps: startInputProps, errorMessage: startDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef1 }),
-        showTimes && (React.createElement(StartTime, { variant: componentVariant, selected: startTime, defaultValue: defaultStartTime, "aria-label": t("select a start time"), minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeStartTimeHandler, locale: locale, "data-testid": "daterange-start-time", ref: timeRef1, error: !!rangeError, ...startTimeProps }))));
-    const endDateInput = (React.createElement(React.Fragment, null,
-        showTimes && (React.createElement(EndTime, { variant: componentVariant, selected: endTime, defaultValue: defaultEndTime, minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeEndTimeHandler, locale: locale, "aria-label": t("select an end time"), "data-testid": "daterange-end-time", ref: timeRef2, error: !!rangeError, ...endTimeProps })),
-        React.createElement(DatePicker, { dateFormat: dateFormat, selected: endDate, onChange: changeEndDateHandler, inputProps: {
-                "aria-label": t("select an end date"),
-                error: rangeError,
-                ...endDateInputProps,
-            }, errorMessage: endDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef2 })));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DateRangeStyles, null),
-        React.createElement(RangeContainer, { variant: componentVariant, labelProps: {
-                ...labelProps,
-                labelText: labelProps.labelText === DEFAULT_LABEL ? t("date range") : labelProps.labelText,
-            }, startComponent: startDateInput, endComponent: endDateInput, errorMessages: !disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage], ...props })));
+    const startDateInput = (_jsxs(_Fragment, { children: [_jsx(DatePicker, { dateFormat: dateFormat, selected: startDate, onChange: changeStartDateHandler, inputProps: startInputProps, errorMessage: startDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef1 }), showTimes && (_jsx(StartTime, { variant: componentVariant, selected: startTime, defaultValue: defaultStartTime, "aria-label": t("select a start time"), minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeStartTimeHandler, locale: locale, "data-testid": "daterange-start-time", ref: timeRef1, error: !!rangeError, ...startTimeProps }))] }));
+    const endDateInput = (_jsxs(_Fragment, { children: [showTimes && (_jsx(EndTime, { variant: componentVariant, selected: endTime, defaultValue: defaultEndTime, minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeEndTimeHandler, locale: locale, "aria-label": t("select an end time"), "data-testid": "daterange-end-time", ref: timeRef2, error: !!rangeError, ...endTimeProps })), _jsx(DatePicker, { dateFormat: dateFormat, selected: endDate, onChange: changeEndDateHandler, inputProps: {
+                    "aria-label": t("select an end date"),
+                    error: rangeError,
+                    ...endDateInputProps,
+                }, errorMessage: endDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef2 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DateRangeStyles, {}), _jsx(RangeContainer, { variant: componentVariant, labelProps: {
+                    ...labelProps,
+                    labelText: labelProps.labelText === DEFAULT_LABEL ? t("date range") : labelProps.labelText,
+                }, startComponent: startDateInput, endComponent: endDateInput, errorMessages: !disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage], ...props })] }));
 });
 export default DateRange;

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

@@ -1,17 +1,16 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const DefaultStartAndEndDate: () => React.JSX.Element;
-export declare const DisabledRangeValidation: () => React.JSX.Element;
-export declare const WithCustomError: () => React.JSX.Element;
-export declare const CustomizingInputProps: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const IndividualInputError: () => React.JSX.Element;
-export declare const WithTimes: () => React.JSX.Element;
-export declare const CustomizingInputPropsWithTimes: () => React.JSX.Element;
-export declare const WithDefaultStartAndEndTimes: () => React.JSX.Element;
-export declare const WithTimeError: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultStartAndEndDate: () => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledRangeValidation: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomError: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomizingInputProps: () => import("react/jsx-runtime").JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const IndividualInputError: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTimes: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomizingInputPropsWithTimes: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDefaultStartAndEndTimes: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTimeError: () => import("react/jsx-runtime").JSX.Element;
+export declare const UsingRefToControlFocus: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DateRange/DateRange.story.js

@@ -1,15 +1,16 @@
-import React, { useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { Button, Box, Flex, PrimaryButton } from "..";
 import DateRange from "./DateRange";
 export default {
     title: "Components/DateRange",
 };
-export const Default = () => (React.createElement(DateRange, { p: "x3", onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const DefaultStartAndEndDate = () => (React.createElement(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const DisabledRangeValidation = () => (React.createElement(DateRange, { disableRangeValidation: true, defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), defaultStartDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const WithCustomError = () => (React.createElement(DateRange, { errorMessage: "This range conflicts with another range", defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const CustomizingInputProps = () => (React.createElement(DateRange, { startDateInputProps: {
+export const Default = () => (_jsx(DateRange, { p: "x3", onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const DefaultStartAndEndDate = () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const DisabledRangeValidation = () => (_jsx(DateRange, { disableRangeValidation: true, defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), defaultStartDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const WithCustomError = () => (_jsx(DateRange, { errorMessage: "This range conflicts with another range", defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const CustomizingInputProps = () => (_jsx(DateRange, { startDateInputProps: {
         placeholder: "From (Mon YYYY)",
         inputWidth: "280px",
         labelText: "From",
@@ -21,7 +22,7 @@ export const CustomizingInputProps = () => (React.createElement(DateRange, { sta
     }, labelProps: { labelText: "" }, onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), errorMessage: "Start date is required." }));
 export const Disabled = () => {
     const NON_BREAKING_SPACE = "\u00A0";
-    return (React.createElement(DateRange, { startDateInputProps: {
+    return (_jsx(DateRange, { startDateInputProps: {
             placeholder: "From (Mon YYYY)",
             labelText: "From",
             disabled: true,
@@ -37,11 +38,11 @@ export const Disabled = () => {
             disabled: true,
         } }));
 };
-export const IndividualInputError = () => (React.createElement(DateRange, { errorMessage: "Start date is required", startDateInputProps: { required: true }, defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const WithTimes = () => (React.createElement(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
-export const CustomizingInputPropsWithTimes = () => (React.createElement(DateRange, { startDateInputProps: { placeholder: "From", inputWidth: "280px" }, endDateInputProps: { placeholder: "To", inputWidth: "280px" }, onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
-export const WithDefaultStartAndEndTimes = () => (React.createElement(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30" }));
-export const WithTimeError = () => (React.createElement(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), showTimes: true, defaultStartTime: "13:30", defaultEndTime: "10:30" }));
+export const IndividualInputError = () => (_jsx(DateRange, { errorMessage: "Start date is required", startDateInputProps: { required: true }, defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const WithTimes = () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
+export const CustomizingInputPropsWithTimes = () => (_jsx(DateRange, { startDateInputProps: { placeholder: "From", inputWidth: "280px" }, endDateInputProps: { placeholder: "To", inputWidth: "280px" }, onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
+export const WithDefaultStartAndEndTimes = () => (_jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30" }));
+export const WithTimeError = () => (_jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), showTimes: true, defaultStartTime: "13:30", defaultEndTime: "10:30" }));
 export const UsingRefToControlFocus = () => {
     const ref = useRef(null);
     const focusStartDate = () => {
@@ -56,12 +57,5 @@ export const UsingRefToControlFocus = () => {
     const focusEndTime = () => {
         ref.current.timeRef2.focus();
     };
-    return (React.createElement(Flex, { flexDirection: "column" },
-        React.createElement(Box, null,
-            React.createElement(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30", ref: ref })),
-        React.createElement(Flex, null,
-            React.createElement(Button, { onClick: focusStartDate }, "Focus Start Date"),
-            React.createElement(PrimaryButton, { onClick: focusStartTime, ml: "x2" }, "Focus Start Time"),
-            React.createElement(Button, { onClick: focusEndTime, ml: "x2" }, "Focus End Time"),
-            React.createElement(PrimaryButton, { onClick: focusEndDate, ml: "x2" }, "Focus End Date"))));
+    return (_jsxs(Flex, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30", ref: ref }) }), _jsxs(Flex, { children: [_jsx(Button, { onClick: focusStartDate, children: "Focus Start Date" }), _jsx(PrimaryButton, { onClick: focusStartTime, ml: "x2", children: "Focus Start Time" }), _jsx(Button, { onClick: focusEndTime, ml: "x2", children: "Focus End Time" }), _jsx(PrimaryButton, { onClick: focusEndDate, ml: "x2", children: "Focus End Date" })] })] }));
 };

package/dist/src/DateRange/EndTime.d.ts

@@ -1,4 +1,4 @@
-declare const EndTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+declare const EndTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
     value?: string;
@@ -19,11 +19,9 @@ declare const EndTime: import("styled-components/dist/types").IStyledComponentBa
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
-} & {
-    children?: import("react").ReactNode | undefined;
-}, "ref"> & {
-    ref?: any;
-}, never>> & string & Omit<import("react").FC<import("react").PropsWithChildren<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+}, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
     value?: string;
@@ -44,5 +42,5 @@ declare const EndTime: import("styled-components/dist/types").IStyledComponentBa
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
-}>>, keyof import("react").Component<any, {}, any>>;
+}, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
 export default EndTime;

package/dist/src/DateRange/StartTime.d.ts

@@ -1,4 +1,4 @@
-declare const StartTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+declare const StartTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
     value?: string;
@@ -19,11 +19,9 @@ declare const StartTime: import("styled-components/dist/types").IStyledComponent
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
-} & {
-    children?: import("react").ReactNode | undefined;
-}, "ref"> & {
-    ref?: any;
-}, never>> & string & Omit<import("react").FC<import("react").PropsWithChildren<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+}, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
     value?: string;
@@ -44,5 +42,5 @@ declare const StartTime: import("styled-components/dist/types").IStyledComponent
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
-}>>, keyof import("react").Component<any, {}, any>>;
+}, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
 export default StartTime;

package/dist/src/Decorations/index.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { BoxProps } from "../Box";
-export default function BackgroundTriangles(props: BoxProps): React.JSX.Element;
+export default function BackgroundTriangles(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Decorations/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 import { styled } from "styled-components";
 import { Box } from "../Box";
@@ -11,7 +11,5 @@ const RightAngleTriangle = styled(Box) `
 `;
 export default function BackgroundTriangles(props) {
     const theme = useTheme();
-    return (React.createElement(Box, { "aria-hidden": "true", transition: "max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)", position: "absolute", bottom: 0, right: 0, height: "100%", maxWidth: { extraSmall: "320px", small: "768px", medium: "1024px", large: "1280px" }, width: "90%", ...props },
-        React.createElement(RightAngleTriangle, { "aria-hidden": "true", height: "44.85%", opacity: "0.5", background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)" }),
-        React.createElement(RightAngleTriangle, { "aria-hidden": "true", height: "19.85%", opacity: "0.25", background: `linear-gradient(196.88deg, ${theme.colors.grey} 11.92%, rgba(0, 67, 143, 0) 88.36%)` })));
+    return (_jsxs(Box, { "aria-hidden": "true", transition: "max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)", position: "absolute", bottom: 0, right: 0, height: "100%", maxWidth: { extraSmall: "320px", small: "768px", medium: "1024px", large: "1280px" }, width: "90%", ...props, children: [_jsx(RightAngleTriangle, { "aria-hidden": "true", height: "44.85%", opacity: "0.5", background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)" }), _jsx(RightAngleTriangle, { "aria-hidden": "true", height: "19.85%", opacity: "0.25", background: `linear-gradient(196.88deg, ${theme.colors.grey} 11.92%, rgba(0, 67, 143, 0) 88.36%)` })] }));
 }

package/dist/src/DescriptionList/DescriptionList.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { DescriptionListProps } from "./lib/types";
-export default function DescriptionList({ descriptionTermMaxWidth, layout, autoLayoutBreakpoint, showDivider, density, fontSize, lineHeight, children, ...props }: DescriptionListProps): React.JSX.Element;
+export default function DescriptionList({ descriptionTermMaxWidth, layout, autoLayoutBreakpoint, showDivider, density, fontSize, lineHeight, children, ...props }: DescriptionListProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DescriptionList/DescriptionList.js

@@ -1,10 +1,8 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DescriptionListProvider } from "./DescriptionListContext";
 import { validateAndExtractGridProps } from "./lib/utils";
 import { DescriptionList as Dl, DescriptionListContainer } from "./DescriptionList.parts";
 export default function DescriptionList({ descriptionTermMaxWidth = "320px", layout = "stacked", autoLayoutBreakpoint = "640px", showDivider = false, density = "medium", fontSize = "medium", lineHeight = "base", children, ...props }) {
     const { columns, groupMinWidth } = validateAndExtractGridProps(props);
-    return (React.createElement(DescriptionListProvider, { descriptionTermMaxWidth: descriptionTermMaxWidth, layout: layout, autoLayoutBreakpoint: autoLayoutBreakpoint, showDivider: showDivider, density: density, fontSize: fontSize, lineHeight: lineHeight, columns: columns, groupMinWidth: groupMinWidth },
-        React.createElement(DescriptionListContainer, null,
-            React.createElement(Dl, null, children))));
+    return (_jsx(DescriptionListProvider, { descriptionTermMaxWidth: descriptionTermMaxWidth, layout: layout, autoLayoutBreakpoint: autoLayoutBreakpoint, showDivider: showDivider, density: density, fontSize: fontSize, lineHeight: lineHeight, columns: columns, groupMinWidth: groupMinWidth, children: _jsx(DescriptionListContainer, { children: _jsx(Dl, { children: children }) }) }));
 }

package/dist/src/DescriptionList/DescriptionListContext.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { Breakpoints } from "../theme/theme.type";
 import { DefaultNDSThemeType } from "../theme";
 import { Density } from "./lib/types";
@@ -14,6 +14,6 @@ interface DescriptionListContextProps {
     columns?: number | Partial<Record<keyof Breakpoints, number>>;
     groupMinWidth?: string;
 }
-export declare const DescriptionListProvider: ({ children, ...contextProps }: PropsWithChildren<DescriptionListContextProps>) => React.JSX.Element;
+export declare const DescriptionListProvider: ({ children, ...contextProps }: PropsWithChildren<DescriptionListContextProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const useDescriptionListContext: () => DescriptionListContextProps;
 export {};

package/dist/src/DescriptionList/DescriptionListContext.js

@@ -1,6 +1,7 @@
-import React, { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 const DescriptionListContext = createContext(undefined);
-export const DescriptionListProvider = ({ children, ...contextProps }) => (React.createElement(DescriptionListContext.Provider, { value: contextProps }, children));
+export const DescriptionListProvider = ({ children, ...contextProps }) => (_jsx(DescriptionListContext.Provider, { value: contextProps, children: children }));
 export const useDescriptionListContext = () => {
     const context = useContext(DescriptionListContext);
     if (!context) {

package/dist/src/DescriptionList/stories/DescriptionList.column.story.d.ts

@@ -1,14 +1,13 @@
-import React from "react";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;
     component: typeof DescriptionList;
 };
 export default _default;
-export declare const TwoColumns: () => React.JSX.Element;
-export declare const ThreeColumns: () => React.JSX.Element;
+export declare const TwoColumns: () => import("react/jsx-runtime").JSX.Element;
+export declare const ThreeColumns: () => import("react/jsx-runtime").JSX.Element;
 export declare const ResponsiveColumns: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             viewports: number[];

package/dist/src/DescriptionList/stories/DescriptionList.column.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Checkbox } from "../../Checkbox";
 import { Flex } from "../../Flex";
 import { Heading1, Text } from "../../Type";
@@ -16,32 +17,12 @@ export default {
 };
 const ColumnDemo = ({ resizable = false, columns, title, description, info, }) => {
     const [outlined, setOutlined] = useState(true);
-    const DescriptionListElement = (React.createElement(DescriptionList, { columns: columns }, [1, 2, 3, 4, 5, 6].map((i) => (React.createElement(DescriptionGroup, { key: i },
-        React.createElement(OutlinedDt, { "$outlined": outlined },
-            "Key ",
-            i),
-        React.createElement(OutlinedDd, { "$outlined": outlined },
-            "Value ",
-            i))))));
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
-            React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
-                React.createElement(Heading1, { compact: true }, title),
-                React.createElement(VerticalDivider, null),
-                React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
-            description && React.createElement(Text, { fontSize: "sm" }, description),
-            info && (React.createElement(Flex, { alignItems: "center", gap: "half" },
-                React.createElement(Icon, { icon: "info", color: "midGrey" }),
-                typeof info === "string" ? (React.createElement(Text, { fontSize: "sm", color: "darkGrey" }, info)) : (info)))),
-        resizable ? (React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true }, DescriptionListElement)) : (DescriptionListElement)));
+    const DescriptionListElement = (_jsx(DescriptionList, { columns: columns, children: [1, 2, 3, 4, 5, 6].map((i) => (_jsxs(DescriptionGroup, { children: [_jsxs(OutlinedDt, { "$outlined": outlined, children: ["Key ", i] }), _jsxs(OutlinedDd, { "$outlined": outlined, children: ["Value ", i] })] }, i))) }));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x4", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half", children: [_jsx(Heading1, { compact: true, children: title }), _jsx(VerticalDivider, {}), _jsx(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })] }), description && _jsx(Text, { fontSize: "sm", children: description }), info && (_jsxs(Flex, { alignItems: "center", gap: "half", children: [_jsx(Icon, { icon: "info", color: "midGrey" }), typeof info === "string" ? (_jsx(Text, { fontSize: "sm", color: "darkGrey", children: info })) : (info)] }))] }), resizable ? (_jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: DescriptionListElement })) : (DescriptionListElement)] }));
 };
-export const TwoColumns = () => React.createElement(ColumnDemo, { title: "Two Columns", columns: 2 });
-export const ThreeColumns = () => React.createElement(ColumnDemo, { title: "Three Columns", columns: 3 });
-export const ResponsiveColumns = () => (React.createElement(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
-        "The breakpoint is based on the container width, not the viewport width. See component",
-        " ",
-        React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md" }, "documentation"),
-        ".") }));
+export const TwoColumns = () => _jsx(ColumnDemo, { title: "Two Columns", columns: 2 });
+export const ThreeColumns = () => _jsx(ColumnDemo, { title: "Three Columns", columns: 3 });
+export const ResponsiveColumns = () => (_jsx(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] }) }));
 ResponsiveColumns.parameters = {
     chromatic: {
         viewports: [

package/dist/src/DescriptionList/stories/DescriptionList.group-min-width.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from "../../Flex";
 import { legacy } from "../../theme/theme";
 import { Heading1, Text } from "../../Type";
@@ -9,13 +9,7 @@ export default {
     title: "Components/DescriptionList/GroupMinWidth",
 };
 export const GroupMinWidth = {
-    render: () => (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-            React.createElement(Heading1, { compact: true }, "Group Min Width"),
-            React.createElement(Text, { fontSize: "sm", mb: "x4" }, "In this example the groupMinWidth is set to 200px, each group is given a minimum width of 200px with the remaining space distributed evenly between the groups."),
-            React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
-                React.createElement(DescriptionList, { groupMinWidth: "200px" },
-                    React.createElement(SampleContent, null)))))),
+    render: () => (_jsx(Flex, { flexDirection: "column", gap: "x4", children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "Group Min Width" }), _jsx(Text, { fontSize: "sm", mb: "x4", children: "In this example the groupMinWidth is set to 200px, each group is given a minimum width of 200px with the remaining space distributed evenly between the groups." }), _jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: _jsx(DescriptionList, { groupMinWidth: "200px", children: _jsx(SampleContent, {}) }) })] }) })),
     parameters: {
         chromatic: {
             viewports: [

package/dist/src/DescriptionList/stories/DescriptionList.layout.story.d.ts

@@ -1,14 +1,13 @@
-import React from "react";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;
     component: typeof DescriptionList;
 };
 export default _default;
-export declare const Inline: () => React.JSX.Element;
-export declare const Stacked: () => React.JSX.Element;
+export declare const Inline: () => import("react/jsx-runtime").JSX.Element;
+export declare const Stacked: () => import("react/jsx-runtime").JSX.Element;
 export declare const Auto: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             viewports: number[];

package/dist/src/DescriptionList/stories/DescriptionList.layout.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from "../../Flex";
 import { Heading1, Text } from "../../Type";
 import DescriptionList from "../DescriptionList";
@@ -13,39 +13,13 @@ export default {
     component: DescriptionList,
 };
 export const Inline = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Heading1, { compact: true }, "Inline Layout"),
-        React.createElement(DescriptionList, { layout: "inline" },
-            React.createElement(SampleContent, null))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "Inline Layout" }), _jsx(DescriptionList, { layout: "inline", children: _jsx(SampleContent, {}) })] }));
 };
 export const Stacked = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Heading1, { compact: true }, "Stacked Layout"),
-        React.createElement(DescriptionList, { layout: "stacked" },
-            React.createElement(SampleContent, null))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "Stacked Layout" }), _jsx(DescriptionList, { layout: "stacked", children: _jsx(SampleContent, {}) })] }));
 };
 export const Auto = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
-            React.createElement(Heading1, { compact: true }, "Auto Layout"),
-            React.createElement(Text, { fontSize: "sm" },
-                "Automatically switches between ",
-                React.createElement(Code, null, "stacked"),
-                " and ",
-                React.createElement(Code, null, "inline"),
-                " layouts based on the specified container width. Default breakpoint is set to ",
-                React.createElement(Code, null, "640px"),
-                "."),
-            React.createElement(Flex, { alignItems: "center", gap: "half", mb: "x2" },
-                React.createElement(Icon, { icon: "info", color: "midGrey" }),
-                React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
-                    "The breakpoint is based on the container width, not the viewport width. See component",
-                    " ",
-                    React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md" }, "documentation"),
-                    "."))),
-        React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
-            React.createElement(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px" },
-                React.createElement(SampleContent, null)))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: "Auto Layout" }), _jsxs(Text, { fontSize: "sm", children: ["Automatically switches between ", _jsx(Code, { children: "stacked" }), " and ", _jsx(Code, { children: "inline" }), " layouts based on the specified container width. Default breakpoint is set to ", _jsx(Code, { children: "640px" }), "."] }), _jsxs(Flex, { alignItems: "center", gap: "half", mb: "x2", children: [_jsx(Icon, { icon: "info", color: "midGrey" }), _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] })] })] }), _jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: _jsx(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px", children: _jsx(SampleContent, {}) }) })] }));
 };
 Auto.parameters = {
     chromatic: {