@nulogy/components 15.2.2 → 15.3.0

package/dist/src/DateRange/DateRange.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
 import { isBefore, isSameDay } from "date-fns";
 import { useTranslation } from "react-i18next";
@@ -21,8 +10,10 @@ import EndTime from "./EndTime";
 import StartTime from "./StartTime";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 const DEFAULT_LABEL = "Date Range";
-const DateRange = forwardRef((_a, ref) => {
-    var { dateFormat, onRangeChange, onStartDateChange, onEndDateChange, errorMessage, startDateErrorMessage, endDateErrorMessage, defaultStartDate = null, defaultEndDate = null, endDateInputProps, startDateInputProps, disableRangeValidation, labelProps = Object.assign(Object.assign({}, FieldLabelDefaultProps), { labelText: DEFAULT_LABEL }), minDate, maxDate, showTimes, minTime, maxTime, defaultStartTime, defaultEndTime, onStartTimeChange, onEndTimeChange, timeFormat, interval, disableFlipping = false, locale, endTimeProps, startTimeProps, variant } = _a, props = __rest(_a, ["dateFormat", "onRangeChange", "onStartDateChange", "onEndDateChange", "errorMessage", "startDateErrorMessage", "endDateErrorMessage", "defaultStartDate", "defaultEndDate", "endDateInputProps", "startDateInputProps", "disableRangeValidation", "labelProps", "minDate", "maxDate", "showTimes", "minTime", "maxTime", "defaultStartTime", "defaultEndTime", "onStartTimeChange", "onEndTimeChange", "timeFormat", "interval", "disableFlipping", "locale", "endTimeProps", "startTimeProps", "variant"]);
+const DateRange = forwardRef(({ dateFormat, onRangeChange, onStartDateChange, onEndDateChange, errorMessage, startDateErrorMessage, endDateErrorMessage, defaultStartDate = null, defaultEndDate = null, endDateInputProps, startDateInputProps, disableRangeValidation, labelProps = {
+    ...FieldLabelDefaultProps,
+    labelText: DEFAULT_LABEL,
+}, minDate, maxDate, showTimes, minTime, maxTime, defaultStartTime, defaultEndTime, onStartTimeChange, onEndTimeChange, timeFormat, interval, disableFlipping = false, locale, endTimeProps, startTimeProps, variant, ...props }, ref) => {
     const dateRef1 = useRef(null);
     const dateRef2 = useRef(null);
     const timeRef1 = useRef(null);
@@ -35,10 +26,22 @@ const DateRange = forwardRef((_a, ref) => {
     const { t } = useTranslation();
     const componentVariant = useComponentVariant(variant);
     useImperativeHandle(ref, () => ({
-        dateRef1: Object.assign(Object.assign({}, dateRef1), { focus: () => { var _a; return (_a = dateRef1.current) === null || _a === void 0 ? void 0 : _a.setFocus(); } }),
-        dateRef2: Object.assign(Object.assign({}, dateRef2), { focus: () => { var _a; return (_a = dateRef2.current) === null || _a === void 0 ? void 0 : _a.setFocus(); } }),
-        timeRef1: Object.assign(Object.assign({}, timeRef1), { focus: () => { var _a; return (_a = timeRef1.current) === null || _a === void 0 ? void 0 : _a.focus(); } }),
-        timeRef2: Object.assign(Object.assign({}, timeRef2), { focus: () => { var _a; return (_a = timeRef2.current) === null || _a === void 0 ? void 0 : _a.focus(); } }),
+        dateRef1: {
+            ...dateRef1,
+            focus: () => dateRef1.current?.setFocus(),
+        },
+        dateRef2: {
+            ...dateRef2,
+            focus: () => dateRef2.current?.setFocus(),
+        },
+        timeRef1: {
+            ...timeRef1,
+            focus: () => timeRef1.current?.focus(),
+        },
+        timeRef2: {
+            ...timeRef2,
+            focus: () => timeRef2.current?.focus(),
+        },
     }));
     useEffect(() => {
         validateDateRange();
@@ -91,15 +94,26 @@ const DateRange = forwardRef((_a, ref) => {
             });
         }
     };
-    const startInputProps = Object.assign({ "aria-label": t("select a start date"), error: rangeError }, startDateInputProps);
+    const startInputProps = {
+        "aria-label": t("select a start date"),
+        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, Object.assign({ 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)))));
+        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, Object.assign({ 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: Object.assign({ "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 })));
+        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, Object.assign({ variant: componentVariant, labelProps: Object.assign(Object.assign({}, labelProps), { labelText: labelProps.labelText === DEFAULT_LABEL ? t("date range") : labelProps.labelText }), startComponent: startDateInput, endComponent: endDateInput, errorMessages: !disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage] }, props))));
+        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 })));
 });
 export default DateRange;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const highlightDates: (startDate: Date, endDate: Date) => ({
     "nds-datepicker-day--start-date": Date[];
     "nds-datepicker-day--end-date"?: undefined;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
@@ -14,14 +13,14 @@ declare const EndTime: import("styled-components/dist/types").IStyledComponentBa
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
 } & {
-    children?: import("react").ReactNode;
+    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> & {
@@ -39,7 +38,7 @@ declare const EndTime: import("styled-components/dist/types").IStyledComponentBa
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
@@ -14,14 +13,14 @@ declare const StartTime: import("styled-components/dist/types").IStyledComponent
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
 } & {
-    children?: import("react").ReactNode;
+    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> & {
@@ -39,7 +38,7 @@ declare const StartTime: import("styled-components/dist/types").IStyledComponent
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;

package/dist/src/Decorations/index.js

@@ -11,7 +11,7 @@ const RightAngleTriangle = styled(Box) `
 `;
 export default function BackgroundTriangles(props) {
     const theme = useTheme();
-    return (React.createElement(Box, Object.assign({ "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),
+    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%)` })));
 }

package/dist/src/DescriptionList/DescriptionList.js

@@ -1,20 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { DescriptionListProvider } from "./DescriptionListContext";
 import { validateAndExtractGridProps } from "./lib/utils";
 import { DescriptionList as Dl, DescriptionListContainer } from "./DescriptionList.parts";
-export default function DescriptionList(_a) {
-    var { descriptionTermMaxWidth = "320px", layout = "stacked", autoLayoutBreakpoint = "640px", showDivider = false, density = "medium", fontSize = "medium", lineHeight = "base", children } = _a, props = __rest(_a, ["descriptionTermMaxWidth", "layout", "autoLayoutBreakpoint", "showDivider", "density", "fontSize", "lineHeight", "children"]);
+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,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseDescriptionListProps, Columns, GroupMinWidth } from "./lib/types";
 export type DescriptionListPartsProps = BaseDescriptionListProps & {
     columns?: Columns;

package/dist/src/DescriptionList/DescriptionList.parts.js

@@ -10,100 +10,179 @@ export const DescriptionListContainer = styled.div({
     width: "100%",
 });
 export const DescriptionList = styled.dl(({ theme }) => {
-    var _a, _b;
     const { fontSize, lineHeight, density, columns, groupMinWidth } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign({ containerType: "inline-size", width: "100%", margin: 0, display: "grid", columnGap: theme.space[gapConfig[density]], fontSize: (_a = theme.fontSizes[fontSize]) !== null && _a !== void 0 ? _a : theme.fontSizes.medium, lineHeight: (_b = theme.lineHeights[lineHeight]) !== null && _b !== void 0 ? _b : theme.lineHeights.base }, (typeof columns === "number" && {
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-    })), { "a, p": {
+    return {
+        containerType: "inline-size",
+        width: "100%",
+        margin: 0,
+        display: "grid",
+        columnGap: theme.space[gapConfig[density]],
+        fontSize: theme.fontSizes[fontSize] ?? theme.fontSizes.medium,
+        lineHeight: theme.lineHeights[lineHeight] ?? theme.lineHeights.base,
+        ...(typeof columns === "number" && {
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        }),
+        "a, p": {
             fontSize: "inherit",
             lineHeight: "inherit",
-        } }), (groupMinWidth && {
-        gridTemplateColumns: `repeat(auto-fit, minmax(${groupMinWidth}, 1fr))`,
-    })), (typeof columns === "object" && Object.assign({}, Object.fromEntries(Object.entries(columns).map(([key, value]) => [
-        `@container (min-width: ${theme.breakpoints[key]})`,
-        { gridTemplateColumns: `repeat(${value}, minmax(0, 1fr))` },
-    ])))));
+        },
+        ...(groupMinWidth && {
+            gridTemplateColumns: `repeat(auto-fit, minmax(${groupMinWidth}, 1fr))`,
+        }),
+        ...(typeof columns === "object" && {
+            ...Object.fromEntries(Object.entries(columns).map(([key, value]) => [
+                `@container (min-width: ${theme.breakpoints[key]})`,
+                { gridTemplateColumns: `repeat(${value}, minmax(0, 1fr))` },
+            ])),
+        }),
+    };
 });
 export const DescriptionGroup = styled.div(({ theme, rowSpan, columnSpan }) => {
     const { descriptionTermMaxWidth, layout, showDivider, autoLayoutBreakpoint } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: "grid", gridTemplateRows: "auto 1fr" }, (showDivider && {
-        borderBottom: `1px solid ${theme.colors.lightGrey}`,
-    })), (layout === "inline" && {
-        gridTemplateColumns: `minmax(0, ${descriptionTermMaxWidth}) 1fr`,
-    })), ((layout === "stacked" || layout === "auto") && {
-        gridTemplateColumns: "1fr",
-    })), (columnSpan && {
-        gridColumn: `span ${columnSpan} / span ${columnSpan}`,
-    })), (rowSpan && {
-        gridRow: `span ${rowSpan} / span ${rowSpan}`,
-    })), { [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign({}, (layout === "auto" && {
-            gridTemplateColumns: `minmax(0, min(50%, ${descriptionTermMaxWidth})) 1fr`,
-        })) });
+    return {
+        display: "grid",
+        gridTemplateRows: "auto 1fr",
+        ...(showDivider && {
+            borderBottom: `1px solid ${theme.colors.lightGrey}`,
+        }),
+        ...(layout === "inline" && {
+            gridTemplateColumns: `minmax(0, ${descriptionTermMaxWidth}) 1fr`,
+        }),
+        ...((layout === "stacked" || layout === "auto") && {
+            gridTemplateColumns: "1fr",
+        }),
+        ...(columnSpan && {
+            gridColumn: `span ${columnSpan} / span ${columnSpan}`,
+        }),
+        ...(rowSpan && {
+            gridRow: `span ${rowSpan} / span ${rowSpan}`,
+        }),
+        [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+            ...(layout === "auto" && {
+                gridTemplateColumns: `minmax(0, min(50%, ${descriptionTermMaxWidth})) 1fr`,
+            }),
+        },
+    };
 });
 export const DescriptionTerm = styled.dt(({ theme }) => {
     const { showDivider, layout, density, autoLayoutBreakpoint } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ gridColumnStart: 1, color: theme.colors.midGrey, paddingLeft: theme.space.none, paddingRight: theme.space.none }, (layout !== "inline" && {
-        paddingBottom: theme.space.none,
-    })), (density === "compact" && Object.assign({ paddingTop: theme.space.x0_25 }, (layout === "inline" && {
-        paddingBottom: theme.space.x0_25,
-    })))), (density === "medium" && Object.assign({ paddingTop: theme.space.x0_75 }, (layout === "inline" && {
-        paddingBottom: theme.space.x0_75,
-    })))), (density === "relaxed" && Object.assign({ paddingTop: theme.space.x1_5, paddingBottom: theme.space.x0_25 }, (layout === "inline" && {
-        paddingBottom: theme.space.x1_5,
-    })))), (showDivider && {
-        borderTopWidth: "1px",
-        borderTopStyle: "solid",
-        borderTopColor: theme.colors.lightGrey,
-    })), { "&:first-child": {
-            border: "none",
-        }, [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign(Object.assign(Object.assign(Object.assign({}, (showDivider &&
-            layout !== "stacked" && {
+    return {
+        gridColumnStart: 1,
+        color: theme.colors.midGrey,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none,
+        ...(layout !== "inline" && {
+            paddingBottom: theme.space.none,
+        }),
+        ...(density === "compact" && {
+            paddingTop: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingBottom: theme.space.x0_25,
+            }),
+        }),
+        ...(density === "medium" && {
+            paddingTop: theme.space.x0_75,
+            ...(layout === "inline" && {
+                paddingBottom: theme.space.x0_75,
+            }),
+        }),
+        ...(density === "relaxed" && {
+            paddingTop: theme.space.x1_5,
+            paddingBottom: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingBottom: theme.space.x1_5,
+            }),
+        }),
+        ...(showDivider && {
             borderTopWidth: "1px",
             borderTopStyle: "solid",
             borderTopColor: theme.colors.lightGrey,
-        })), (density === "compact" &&
-            layout !== "stacked" && {
-            paddingBottom: theme.space.x0_25,
-        })), (density === "medium" &&
-            layout !== "stacked" && {
-            paddingBottom: theme.space.x0_75,
-        })), (density === "relaxed" &&
-            layout !== "stacked" && {
-            paddingBottom: theme.space.x1_5,
-        })) });
+        }),
+        "&:first-child": {
+            border: "none",
+        },
+        [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+            // wide auto layout
+            ...(showDivider &&
+                layout !== "stacked" && {
+                borderTopWidth: "1px",
+                borderTopStyle: "solid",
+                borderTopColor: theme.colors.lightGrey,
+            }),
+            ...(density === "compact" &&
+                layout !== "stacked" && {
+                paddingBottom: theme.space.x0_25,
+            }),
+            ...(density === "medium" &&
+                layout !== "stacked" && {
+                paddingBottom: theme.space.x0_75,
+            }),
+            ...(density === "relaxed" &&
+                layout !== "stacked" && {
+                paddingBottom: theme.space.x1_5,
+            }),
+        },
+    };
 });
 export const DescriptionDetails = styled.dd(({ theme }) => {
     const { autoLayoutBreakpoint, showDivider, density, layout } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 
+    return {
         // narrow stuff + non-auto layout
-        margin: 0, color: theme.colors.black, paddingLeft: theme.space.none, paddingRight: theme.space.none }, (layout !== "inline" && {
-        paddingTop: theme.space.none,
-    })), (density === "compact" && Object.assign({ paddingBottom: theme.space.x0_25 }, (layout === "inline" && {
-        paddingTop: theme.space.x0_25,
-    })))), (density === "medium" && Object.assign({ paddingBottom: theme.space.x0_75 }, (layout === "inline" && {
-        paddingTop: theme.space.x0_75,
-    })))), (density === "relaxed" && Object.assign({ paddingBottom: theme.space.x1_5, paddingTop: theme.space.x0_25 }, (layout === "inline" && {
-        paddingTop: theme.space.x1_5,
-    })))), (showDivider &&
-        layout === "inline" && {
-        borderTopWidth: "1px",
-        borderTopStyle: "solid",
-        borderTopColor: theme.colors.lightGrey,
-    })), { "&:nth-child(2)": {
-            border: "none",
-        }, [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign(Object.assign(Object.assign(Object.assign({}, (showDivider &&
-            layout !== "stacked" && {
+        margin: 0,
+        color: theme.colors.black,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none,
+        ...(layout !== "inline" && {
+            paddingTop: theme.space.none,
+        }),
+        ...(density === "compact" && {
+            paddingBottom: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingTop: theme.space.x0_25,
+            }),
+        }),
+        ...(density === "medium" && {
+            paddingBottom: theme.space.x0_75,
+            ...(layout === "inline" && {
+                paddingTop: theme.space.x0_75,
+            }),
+        }),
+        ...(density === "relaxed" && {
+            paddingBottom: theme.space.x1_5,
+            paddingTop: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingTop: theme.space.x1_5,
+            }),
+        }),
+        ...(showDivider &&
+            layout === "inline" && {
             borderTopWidth: "1px",
             borderTopStyle: "solid",
             borderTopColor: theme.colors.lightGrey,
-        })), (density === "compact" &&
-            layout !== "stacked" && {
-            paddingTop: theme.space.x0_25,
-        })), (density === "medium" &&
-            layout !== "stacked" && {
-            paddingTop: theme.space.x0_75,
-        })), (density === "relaxed" &&
-            layout !== "stacked" && {
-            paddingTop: theme.space.x1_5,
-        })) });
+        }),
+        "&:nth-child(2)": {
+            border: "none",
+        },
+        [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+            // wide auto layout
+            ...(showDivider &&
+                layout !== "stacked" && {
+                borderTopWidth: "1px",
+                borderTopStyle: "solid",
+                borderTopColor: theme.colors.lightGrey,
+            }),
+            ...(density === "compact" &&
+                layout !== "stacked" && {
+                paddingTop: theme.space.x0_25,
+            }),
+            ...(density === "medium" &&
+                layout !== "stacked" && {
+                paddingTop: theme.space.x0_75,
+            }),
+            ...(density === "relaxed" &&
+                layout !== "stacked" && {
+                paddingTop: theme.space.x1_5,
+            }),
+        },
+    };
 });

package/dist/src/DescriptionList/DescriptionListContext.js

@@ -1,20 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { createContext, useContext } from "react";
 const DescriptionListContext = createContext(undefined);
-export const DescriptionListProvider = (_a) => {
-    var { children } = _a, contextProps = __rest(_a, ["children"]);
-    return (React.createElement(DescriptionListContext.Provider, { value: contextProps }, children));
-};
+export const DescriptionListProvider = ({ children, ...contextProps }) => (React.createElement(DescriptionListContext.Provider, { value: contextProps }, children));
 export const useDescriptionListContext = () => {
     const context = useContext(DescriptionListContext);
     if (!context) {

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

@@ -45,7 +45,7 @@ export const Playground = {
         const updateGroup = (index, updates) => {
             setAdditionalGroups((groups) => groups.map((group, i) => {
                 if (i === index) {
-                    return Object.assign(Object.assign({}, group), updates);
+                    return { ...group, ...updates };
                 }
                 return group;
             }));
@@ -66,7 +66,7 @@ export const Playground = {
             ]);
         };
         const toggleGroupExpansion = (index) => {
-            setAdditionalGroups((groups) => groups.map((group, i) => (i === index ? Object.assign(Object.assign({}, group), { isExpanded: !group.isExpanded }) : group)));
+            setAdditionalGroups((groups) => groups.map((group, i) => (i === index ? { ...group, isExpanded: !group.isExpanded } : group)));
         };
         const DescriptionListElement = (
         // @ts-expect-error - This is not a valid use of the component, since we're passing both columns and groupMinWidth,
@@ -144,7 +144,7 @@ export const Playground = {
                         React.createElement(Flex, { flexDirection: "column", gap: "x2" }, breakpointColumns.map((breakpointColumn, index) => (React.createElement(Flex, { key: index, gap: "x2", alignItems: "flex-end" },
                             breakpointColumns.length > 1 && (React.createElement(Select, { minWidth: "240px", value: breakpointColumn.breakpoint, onChange: (value) => {
                                     const newBreakpointColumns = [...breakpointColumns];
-                                    newBreakpointColumns[index] = Object.assign(Object.assign({}, breakpointColumn), { breakpoint: value });
+                                    newBreakpointColumns[index] = { ...breakpointColumn, breakpoint: value };
                                     setBreakpointColumns(newBreakpointColumns);
                                     setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
                                 }, options: Object.keys(theme.breakpoints)
@@ -157,7 +157,10 @@ export const Playground = {
                             React.createElement(Input, { inputWidth: breakpointColumns.length === 1 ? undefined : "95px", type: "number", value: breakpointColumn.columns, onChange: (e) => {
                                     const newValue = Math.max(1, Number(e.target.value));
                                     const newBreakpointColumns = [...breakpointColumns];
-                                    newBreakpointColumns[index] = Object.assign(Object.assign({}, breakpointColumn), { columns: newValue });
+                                    newBreakpointColumns[index] = {
+                                        ...breakpointColumn,
+                                        columns: newValue,
+                                    };
                                     setBreakpointColumns(newBreakpointColumns);
                                     if (breakpointColumns.length === 1) {
                                         setColumns(newValue);
@@ -178,7 +181,7 @@ export const Playground = {
                                         setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
                                     }
                                 } }))))))),
-                    React.createElement(Input, { value: groupMinWidth !== null && groupMinWidth !== void 0 ? groupMinWidth : "", onChange: (e) => {
+                    React.createElement(Input, { value: groupMinWidth ?? "", onChange: (e) => {
                             const value = e.target.value || undefined;
                             setGroupMinWidth(value);
                             if (value)

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

@@ -12,6 +12,6 @@ export declare const OutlinedDd: import("styled-components/dist/types").IStyledC
     $highlighted?: boolean;
 }>> & string;
 export declare const DashedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Record<string, unknown> & {
-    children?: React.ReactNode;
-}) | (Omit<Record<string, unknown>, "ref"> & React.RefAttributes<React.Component<Record<string, unknown>, any, any>>), import("styled-components/dist/types").BaseObject>> & string & (Omit<React.ComponentClass<Record<string, unknown>, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<Record<string, unknown>>, keyof React.Component<any, {}, any>>);
+    children?: React.ReactNode | undefined;
+}) | (Omit<Record<string, unknown>, "ref"> & React.RefAttributes<React.Component<Record<string, unknown>, any, any>>), import("styled-components/dist/types").BaseObject>> & (string & (Omit<React.ComponentClass<Record<string, unknown>, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<Record<string, unknown>>, keyof React.Component<any, {}, any>>));
 export declare const SampleContent: () => React.JSX.Element;

package/dist/src/Divider/Divider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledProps } from "../StyledProps";
 export interface DividerProps extends StyledProps, React.HTMLAttributes<HTMLHRElement> {
     secondary?: boolean;

package/dist/src/DropdownMenu/DropdownItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     color?: string;
     hoverColor?: string;

package/dist/src/DropdownMenu/DropdownMenu.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useMemo } from "react";
 import propTypes from "@styled-system/prop-types";
 import { IconicButton } from "../Button";
@@ -19,21 +8,28 @@ import DropdownMenuContainer from "./DropdownMenuContainer";
 const DEFAULT_POPPER_MODIFIERS = {
     preventOverflow: { enabled: true, padding: 8, boundariesElement: "viewport" },
 };
-const transformPropsToModifiers = ({ boundariesElement }) => (Object.assign(Object.assign({}, DEFAULT_POPPER_MODIFIERS), { boundariesElement }));
-const DropdownMenu = React.forwardRef((_a, ref) => {
-    var { trigger = () => React.createElement(IconicButton, { icon: "more" }), children, showArrow = true, variant, disabled, defaultOpen, backgroundColor = "white", placement = "bottom-start", className, id, boundariesElement = "viewport", showDelay = "100", hideDelay = "200", openAriaLabel, closeAriaLabel, openOnHover = false } = _a, props = __rest(_a, ["trigger", "children", "showArrow", "variant", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel", "openOnHover"]);
+const transformPropsToModifiers = ({ boundariesElement }) => ({
+    ...DEFAULT_POPPER_MODIFIERS,
+    boundariesElement,
+});
+const DropdownMenu = React.forwardRef(({ trigger = () => React.createElement(IconicButton, { icon: "more" }), children, showArrow = true, variant, disabled, defaultOpen, backgroundColor = "white", placement = "bottom-start", className, id, boundariesElement = "viewport", showDelay = "100", hideDelay = "200", openAriaLabel, closeAriaLabel, openOnHover = false, ...props }, ref) => {
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
     const modifiers = useMemo(() => {
         return transformPropsToModifiers({ boundariesElement });
     }, [boundariesElement]);
     const componentVariant = useComponentVariant(variant);
-    return (React.createElement(Popper, { trigger: React.cloneElement(trigger(), Object.assign({ type: "button", disabled: disabled ? true : null, "aria-haspopup": true }, spaceProps)), showDelay: showDelay, hideDelay: hideDelay, popperPlacement: placement, defaultOpen: defaultOpen, showArrow: showArrow, openOnClick: !openOnHover, ref: ref, openOnHover: openOnHover, modifiers: modifiers, backgroundColor: backgroundColor, borderColor: backgroundColor, openAriaLabel: openAriaLabel, closeAriaLabel: closeAriaLabel },
-        React.createElement(DropdownMenuContainer, Object.assign({ className: className, id: id, backgroundColor: backgroundColor, showArrow: showArrow }, restProps), typeof children === "function"
+    return (React.createElement(Popper, { trigger: React.cloneElement(trigger(), {
+            type: "button",
+            disabled: disabled ? true : null,
+            "aria-haspopup": true,
+            ...spaceProps,
+        }), showDelay: showDelay, hideDelay: hideDelay, popperPlacement: placement, defaultOpen: defaultOpen, showArrow: showArrow, openOnClick: !openOnHover, ref: ref, openOnHover: openOnHover, modifiers: modifiers, backgroundColor: backgroundColor, borderColor: backgroundColor, openAriaLabel: openAriaLabel, closeAriaLabel: closeAriaLabel },
+        React.createElement(DropdownMenuContainer, { className: className, id: id, backgroundColor: backgroundColor, showArrow: showArrow, ...restProps }, typeof children === "function"
             ? children
             : React.Children.map(children, (child) => {
                 if (React.isValidElement(child)) {
-                    return React.cloneElement(child, Object.assign({ size: componentVariant }, child.props), child.props.children);
+                    return React.cloneElement(child, { size: componentVariant, ...child.props }, child.props.children);
                 }
             }))));
 });

package/dist/src/DropdownMenu/DropdownMenu.story.js

@@ -24,8 +24,8 @@ WithCustomTrigger.story = {
     name: "with custom trigger",
 };
 export const WithCustomColors = () => (React.createElement(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, Object.assign({ href: "/never_been" }, customColors), "Dropdown Link"),
-    React.createElement(DropdownButton, Object.assign({ onClick: () => { } }, customColors), "Dropdown Button")));
+    React.createElement(DropdownLink, { href: "/never_been", ...customColors }, "Dropdown Link"),
+    React.createElement(DropdownButton, { onClick: () => { }, ...customColors }, "Dropdown Button")));
 WithCustomColors.story = {
     name: "with custom colors",
 };