@nulogy/components 15.2.2 → 15.3.0

package/dist/src/TimeRange/TimeRange.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, forwardRef, useImperativeHandle, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { TimePicker } from "../TimePicker";
@@ -17,8 +6,10 @@ import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { getDuration } from "./TimeRange.utils";
 const DEFAULT_LABEL = "Time Range";
-const TimeRange = forwardRef((_a, ref) => {
-    var { timeFormat, onRangeChange, onStartTimeChange, onEndTimeChange, errorMessage, defaultStartTime, defaultEndTime, minTime, maxTime, interval, startAriaLabel, endAriaLabel, endTimeProps, startTimeProps, variant, disableRangeValidation = false, labelProps = Object.assign(Object.assign({}, FieldLabelDefaultProps), { labelText: DEFAULT_LABEL }) } = _a, props = __rest(_a, ["timeFormat", "onRangeChange", "onStartTimeChange", "onEndTimeChange", "errorMessage", "defaultStartTime", "defaultEndTime", "minTime", "maxTime", "interval", "startAriaLabel", "endAriaLabel", "endTimeProps", "startTimeProps", "variant", "disableRangeValidation", "labelProps"]);
+const TimeRange = forwardRef(({ timeFormat, onRangeChange, onStartTimeChange, onEndTimeChange, errorMessage, defaultStartTime, defaultEndTime, minTime, maxTime, interval, startAriaLabel, endAriaLabel, endTimeProps, startTimeProps, variant, disableRangeValidation = false, labelProps = {
+    ...FieldLabelDefaultProps,
+    labelText: DEFAULT_LABEL,
+}, ...props }, ref) => {
     const [startTime, setStartTime] = useState();
     const [endTime, setEndTime] = useState();
     const [rangeError, setRangeError] = useState();
@@ -27,18 +18,24 @@ const TimeRange = forwardRef((_a, ref) => {
     const { t } = useTranslation();
     const componentVariant = useComponentVariant(variant);
     useImperativeHandle(ref, () => ({
-        inputRef1: Object.assign(Object.assign({}, inputRef1), { focus: () => {
+        inputRef1: {
+            ...inputRef1,
+            focus: () => {
                 if (inputRef1.current) {
                     // @ts-ignore
                     inputRef1.current.focus();
                 }
-            } }),
-        inputRef2: Object.assign(Object.assign({}, inputRef2), { focus: () => {
+            },
+        },
+        inputRef2: {
+            ...inputRef2,
+            focus: () => {
                 if (inputRef2.current) {
                     // @ts-ignore
                     inputRef2.current.focus();
                 }
-            } }),
+            },
+        },
     }));
     useEffect(() => {
         validateTimeRange();
@@ -74,8 +71,11 @@ const TimeRange = forwardRef((_a, ref) => {
             });
         }
     };
-    const startInput = (React.createElement(TimePicker, Object.assign({ timeFormat: timeFormat, defaultValue: defaultStartTime, selected: startTime, onChange: changeStartTimeHandler, minTime: minTime, maxTime: endTime || maxTime, interval: interval, "aria-label": startAriaLabel || t("select a start time"), "data-testid": "timerange-start-time", ref: inputRef1, error: rangeError, variant: componentVariant }, startTimeProps)));
-    const endInput = (React.createElement(TimePicker, Object.assign({ timeFormat: timeFormat, defaultValue: defaultEndTime, selected: endTime, onChange: changeEndTimeHandler, maxTime: maxTime, minTime: startTime || minTime, interval: interval, "aria-label": endAriaLabel || t("select an end time"), "data-testid": "timerange-end-time", ref: inputRef2, error: rangeError, variant: componentVariant }, endTimeProps)));
-    return (React.createElement(RangeContainer, Object.assign({ labelProps: Object.assign(Object.assign({}, labelProps), { labelText: labelProps.labelText === DEFAULT_LABEL ? t("time range") : labelProps.labelText }), startComponent: startInput, endComponent: endInput, errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage], variant: componentVariant }, props)));
+    const startInput = (React.createElement(TimePicker, { timeFormat: timeFormat, defaultValue: defaultStartTime, selected: startTime, onChange: changeStartTimeHandler, minTime: minTime, maxTime: endTime || maxTime, interval: interval, "aria-label": startAriaLabel || t("select a start time"), "data-testid": "timerange-start-time", ref: inputRef1, error: rangeError, variant: componentVariant, ...startTimeProps }));
+    const endInput = (React.createElement(TimePicker, { timeFormat: timeFormat, defaultValue: defaultEndTime, selected: endTime, onChange: changeEndTimeHandler, maxTime: maxTime, minTime: startTime || minTime, interval: interval, "aria-label": endAriaLabel || t("select an end time"), "data-testid": "timerange-end-time", ref: inputRef2, error: rangeError, variant: componentVariant, ...endTimeProps }));
+    return (React.createElement(RangeContainer, { labelProps: {
+            ...labelProps,
+            labelText: labelProps.labelText === DEFAULT_LABEL ? t("time range") : labelProps.labelText,
+        }, startComponent: startInput, endComponent: endInput, errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage], variant: componentVariant, ...props }));
 });
 export default TimeRange;

package/dist/src/Toast/Toast.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 } from "react";
 import { AnimatePresence } from "framer-motion";
 import Alert from "../Alert/Alert";
@@ -31,8 +20,7 @@ export const toastAnimationConfig = {
         transition: { ease: "easeOut", duration: 0.15 },
     },
 };
-export const Toast = (_a) => {
-    var { triggered = false, isCloseable = false, showDuration = TOAST_SHOW_DURATION, onHide, onShow, children, onHidden, zIndex } = _a, props = __rest(_a, ["triggered", "isCloseable", "showDuration", "onHide", "onShow", "children", "onHidden", "zIndex"]);
+export const Toast = ({ triggered = false, isCloseable = false, showDuration = TOAST_SHOW_DURATION, onHide, onShow, children, onHidden, zIndex, ...props }) => {
     const [visible, setVisible] = useState(triggered);
     const [timeoutID, setTimeoutID] = useState(undefined);
     const cancelHidingToast = () => {
@@ -85,9 +73,9 @@ export const Toast = (_a) => {
     const handleCloseButtonClick = () => {
         hideToast(0);
     };
-    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, Object.assign({ onMouseEnter: onMouseIn, 
+    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, { onMouseEnter: onMouseIn, 
         /* @ts-ignore */
-        onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true }, toastAnimationConfig),
-        React.createElement(Alert, Object.assign({ minWidth: "200px", maxWidth: "600px", isCloseable: isCloseable, onClose: handleCloseButtonClick, controlled: true }, props), children)))));
+        onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true, ...toastAnimationConfig },
+        React.createElement(Alert, { minWidth: "200px", maxWidth: "600px", isCloseable: isCloseable, onClose: handleCloseButtonClick, controlled: true, ...props }, children)))));
 };
 export default Toast;

package/dist/src/ToastContainer/ToastContainer.js

@@ -1,21 +1,9 @@
-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, { useEffect } from "react";
 import { toast as _toast, Toaster, useToasterStore } from "react-hot-toast";
 import { useTheme } from "styled-components";
 import { TOAST_SHOW_DURATION } from "../Toast/Toast";
 import numberFromDimension from "../utils/numberFromDimension";
-const ToastContainer = (_a) => {
-    var { gap, position = "bottom-center", reverseOrder = false, containerClassName = "nds-toast-container", toastOptions = { duration: TOAST_SHOW_DURATION }, maxVisibleToasts = 8 } = _a, props = __rest(_a, ["gap", "position", "reverseOrder", "containerClassName", "toastOptions", "maxVisibleToasts"]);
+const ToastContainer = ({ gap, position = "bottom-center", reverseOrder = false, containerClassName = "nds-toast-container", toastOptions = { duration: TOAST_SHOW_DURATION }, maxVisibleToasts = 8, ...props }) => {
     const theme = useTheme();
     const { toasts } = useToasterStore();
     useEffect(() => {
@@ -24,8 +12,8 @@ const ToastContainer = (_a) => {
             .filter((_, i) => i >= maxVisibleToasts)
             .forEach((t) => _toast.dismiss(t.id));
     }, [toasts, maxVisibleToasts]);
-    return (React.createElement(Toaster, Object.assign({ gutter: gap || numberFromDimension(theme.space.x1), toastOptions: {
-            custom: Object.assign({}, toastOptions),
-        }, position: position, reverseOrder: reverseOrder, containerClassName: containerClassName }, props)));
+    return (React.createElement(Toaster, { gutter: gap || numberFromDimension(theme.space.x1), toastOptions: {
+            custom: { ...toastOptions },
+        }, position: position, reverseOrder: reverseOrder, containerClassName: containerClassName, ...props }));
 };
 export default ToastContainer;

package/dist/src/ToastContainer/ToastContainer.story.js

@@ -59,7 +59,7 @@ export const WithEverything = () => {
                 React.createElement(Flex, { flexDirection: "column" },
                     React.createElement(Text, { fontWeight: "bold" }, "Trigger toasts from anywhere using the `toast` function"),
                     React.createElement("pre", null, `import { toast } from "@nulogy/components"`),
-                    React.createElement("pre", null, toastFunctionTemplate !== null && toastFunctionTemplate !== void 0 ? toastFunctionTemplate : getToastFunctionTemplate())),
+                    React.createElement("pre", null, toastFunctionTemplate ?? getToastFunctionTemplate())),
                 React.createElement(Flex, { gap: "x2", flexDirection: "column" },
                     React.createElement(Select, { defaultValue: type, options: [{ value: "random", label: "Random" }, ...types], labelText: "Type", onChange: (value) => setType(value) }),
                     React.createElement(Select, { defaultValue: behavior, options: [

package/dist/src/ToastContainer/ToastFunction.js

@@ -1,32 +1,20 @@
-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 { AnimatePresence } from "framer-motion";
 import { toast as _toast } from "react-hot-toast";
 import { Alert } from "../Alert";
 import { AnimatedBox } from "../Box";
 import { toastAnimationConfig } from "../Toast/Toast";
-const CustomToast = (_a) => {
-    var { isVisible, id, children } = _a, props = __rest(_a, ["isVisible", "id", "children"]);
+const CustomToast = ({ isVisible, id, children, ...props }) => {
     const handleClose = () => {
         _toast.dismiss(id);
     };
-    return (React.createElement(AnimatePresence, null, isVisible && (React.createElement(AnimatedBox, Object.assign({ key: "notification", role: "alert" }, toastAnimationConfig),
-        React.createElement(Alert, Object.assign({ controlled: true, onClose: handleClose }, props), children)))));
+    return (React.createElement(AnimatePresence, null, isVisible && (React.createElement(AnimatedBox, { key: "notification", role: "alert", ...toastAnimationConfig },
+        React.createElement(Alert, { controlled: true, onClose: handleClose, ...props }, children)))));
 };
 const toast = {
-    danger: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "danger" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
-    informative: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "informative" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
-    success: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "success" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
-    warning: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "warning" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
+    danger: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "danger", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
+    informative: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "informative", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
+    success: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "success", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
+    warning: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, { id: t.id, isVisible: t.visible, type: "warning", ...props }, children)), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
 };
 export default toast;

package/dist/src/Toggle/Toggle.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, { useCallback, useEffect } from "react";
 import propTypes from "@styled-system/prop-types";
 import { FieldLabel } from "../FieldLabel";
@@ -18,9 +7,7 @@ import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { getSubset, omitSubset } from "../utils/subset";
 import { Flex } from "../Flex";
 import ToggleButton from "./ToggleButton";
-const Toggle = React.forwardRef((_a, ref) => {
-    var _b;
-    var { checked, variant, className, labelText, requirementText, helpText, hint, disabled, toggled, onChange, onText, offText, required, error, id, defaultToggled, onClick, "data-testid": dataTestId } = _a, props = __rest(_a, ["checked", "variant", "className", "labelText", "requirementText", "helpText", "hint", "disabled", "toggled", "onChange", "onText", "offText", "required", "error", "id", "defaultToggled", "onClick", "data-testid"]);
+const Toggle = React.forwardRef(({ checked, variant, className, labelText, requirementText, helpText, hint, disabled, toggled, onChange, onText, offText, required, error, id, defaultToggled, onClick, "data-testid": dataTestId, ...props }, ref) => {
     const componentVariant = useComponentVariant(variant);
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
@@ -36,7 +23,7 @@ const Toggle = React.forwardRef((_a, ref) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const _checked = (_b = checked !== null && checked !== void 0 ? checked : defaultToggled) !== null && _b !== void 0 ? _b : toggled;
+    const _checked = checked ?? defaultToggled ?? toggled;
     const _onChange = useCallback((e) => {
         if (onClick) {
             onClick(e);
@@ -51,10 +38,10 @@ const Toggle = React.forwardRef((_a, ref) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(Field, Object.assign({ className: className, alignItems: "flex-start", py: "half" }, spaceProps),
+    return (React.createElement(Field, { className: className, alignItems: "flex-start", py: "half", ...spaceProps },
         React.createElement(FieldLabel, { htmlFor: id, labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint, disabled: disabled, variant: componentVariant, "data-testid": dataTestId },
             React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                React.createElement(ToggleButton, Object.assign({ id: id, checked: _checked, onChange: _onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error }, restProps, { ref: ref })),
+                React.createElement(ToggleButton, { id: id, checked: _checked, onChange: _onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error, ...restProps, ref: ref }),
                 (onText || offText) && (React.createElement(Text, { disabled: disabled, mb: "none", ml: "x1", "aria-hidden": true }, _checked ? onText : offText))))));
 });
 export default Toggle;

package/dist/src/Toggle/ToggleButton.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 from "react";
 import { motion } from "framer-motion";
 import styled, { useTheme } from "styled-components";
@@ -61,10 +50,9 @@ const ToggleInput = styled.input(({ disabled, theme }) => ({
         boxShadow: disabled ? undefined : theme.shadows.focus,
     },
 }));
-const ToggleButton = React.forwardRef((_a, ref) => {
-    var { disabled, checked } = _a, props = __rest(_a, ["disabled", "checked"]);
+const ToggleButton = React.forwardRef(({ disabled, checked, ...props }, ref) => {
     return (React.createElement(Switch, { disabled: disabled, checked: checked },
-        React.createElement(ToggleInput, Object.assign({ type: "checkbox", role: "switch", checked: checked, ref: ref, value: checked ? "on" : "off", disabled: disabled }, props)),
+        React.createElement(ToggleInput, { type: "checkbox", role: "switch", checked: checked, ref: ref, value: checked ? "on" : "off", disabled: disabled, ...props }),
         React.createElement(Slider, { disabled: disabled })));
 });
 export default ToggleButton;

package/dist/src/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { MaxWidthProps } from "styled-system";
-export type TooltipProps = {
+export interface TooltipProps {
     /** Delay before showing (in ms) */
     showDelay?: string | number;
     /** Whether the tooltip is open by default */
@@ -15,5 +15,5 @@ export type TooltipProps = {
     tooltip?: React.ReactNode;
     /** Child element that triggers the tooltip */
     children?: React.ReactNode;
-};
+}
 export default function Tooltip({ showDelay, defaultOpen, placement, maxWidth, className, tooltip, children, }: TooltipProps): React.JSX.Element;

package/dist/src/Tooltip/Tooltip.story.js

@@ -20,7 +20,7 @@ export const WithWrappedText = {
 };
 export const WithCustomMaxWidth = {
     render: (args) => (React.createElement(Flex, { p: "x8" },
-        React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true }),
+        React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true },
             React.createElement(Button, null, " Button ")))),
     name: "with custom maxWidth",
 };
@@ -57,17 +57,17 @@ export const WithPlacement = {
     name: "with placement",
 };
 export const WithLinkPassedIn = {
-    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true }),
+    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true },
         React.createElement(Button, null, " Button "))),
     name: "with Link passed in",
 };
 export const WithButtonPassedIn = {
-    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true }),
+    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true },
         React.createElement(Button, null, " Button "))),
     name: "with Button passed in",
 };
 export const WithCustomShowDelay = {
-    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: "Tooltip", showDelay: "1000" }),
+    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: "Tooltip", showDelay: "1000" },
         React.createElement(Button, null, " Button "))),
     name: "with custom showDelay",
 };
@@ -86,15 +86,15 @@ export const WithOtherFocusableElements = {
     name: "with other focusable elements",
 };
 export const OpenByDefault = {
-    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { tooltip: "I am an open Tooltip!", defaultOpen: true }),
+    render: (args) => (React.createElement(Tooltip, { ...args, tooltip: "I am an open Tooltip!", defaultOpen: true },
         React.createElement(Button, null, "Hover me"))),
     name: "open by default",
 };
 export const WithCustomComponent = {
-    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { tooltip: "See me on hover!", defaultOpen: true }),
+    render: (args) => (React.createElement(Tooltip, { ...args, tooltip: "See me on hover!", defaultOpen: true },
         React.createElement(CustomComponent, null))),
 };
-const CustomComponent = React.forwardRef((props, forwardedRef) => (React.createElement("span", Object.assign({ ref: forwardedRef }, props),
+const CustomComponent = React.forwardRef((props, forwardedRef) => (React.createElement("span", { ref: forwardedRef, ...props },
     React.createElement(Text, { inline: true }, "This component uses the forwardedRef from the Tooltip wrapping it"))));
 const CustomTooltip = () => (React.createElement(Flex, { flexDirection: "column", width: "320px", p: "x1_5" },
     React.createElement(Text, { fontSize: "smaller", fontWeight: "medium", textTransform: "uppercase", color: "midGrey" }, "Purchase Order"),

package/dist/src/Tooltip/TooltipContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PositionProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme";
 type TooltipContainerProps = PositionProps & {

package/dist/src/Tooltip/TooltipContainer.js

@@ -27,5 +27,20 @@ const getTooltipMargin = (placement) => {
             };
     }
 };
-const TooltipContainer = styled(Box)(({ theme, dataPlacement, open, position }) => (Object.assign(Object.assign({ color: tooltipStyles(theme).textColor, display: "flex", flexDirection: "column", fontSize: theme.fontSizes.small, backgroundColor: tooltipStyles(theme).backgroundColor, borderRadius: theme.radii.medium, border: `1px solid ${tooltipStyles(theme).borderColor}`, boxShadow: theme.shadows.medium, padding: theme.space.x1, transition: "opacity 0.3s", zIndex: theme.zIndices.content }, getTooltipMargin(dataPlacement)), { position, top: open ? 0 : "-9999px" })));
+const TooltipContainer = styled(Box)(({ theme, dataPlacement, open, position }) => ({
+    color: tooltipStyles(theme).textColor,
+    display: "flex",
+    flexDirection: "column",
+    fontSize: theme.fontSizes.small,
+    backgroundColor: tooltipStyles(theme).backgroundColor,
+    borderRadius: theme.radii.medium,
+    border: `1px solid ${tooltipStyles(theme).borderColor}`,
+    boxShadow: theme.shadows.medium,
+    padding: theme.space.x1,
+    transition: "opacity 0.3s",
+    zIndex: theme.zIndices.content,
+    ...getTooltipMargin(dataPlacement),
+    position,
+    top: open ? 0 : "-9999px",
+}));
 export default TooltipContainer;

package/dist/src/Tooltip/components/TooltipComponents.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 * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import styled, { keyframes, useTheme } from "styled-components";
@@ -18,7 +7,7 @@ function useHasHover() {
     try {
         return matchMedia("(hover: hover)").matches;
     }
-    catch (_a) {
+    catch {
         // Assume that if the browser is too old to support matchMedia, it's likely not a touch device
         return true;
     }
@@ -29,21 +18,18 @@ const TooltipTriggerContext = React.createContext({
     setOpen: () => { },
 });
 const TooltipProvider = TooltipPrimitive.Provider;
-function Tooltip(_a) {
-    var _b, _c;
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const [open, setOpen] = React.useState((_b = props.defaultOpen) !== null && _b !== void 0 ? _b : false);
+function Tooltip({ children, ...props }) {
+    const [open, setOpen] = React.useState(props.defaultOpen ?? false);
     const hasHover = useHasHover();
     return (React.createElement(TooltipPrimitive.Root, { delayDuration: !hasHover && props.supportMobileTap ? 0 : props.delayDuration, onOpenChange: setOpen, open: open },
         React.createElement(TooltipTriggerContext.Provider, { value: {
                 open,
                 setOpen,
-                supportMobileTap: (_c = props.supportMobileTap) !== null && _c !== void 0 ? _c : false,
+                supportMobileTap: props.supportMobileTap ?? false,
             } }, children)));
 }
 Tooltip.displayName = TooltipPrimitive.Root.displayName;
-const TooltipTrigger = React.forwardRef((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+const TooltipTrigger = React.forwardRef(({ children, ...props }, ref) => {
     const hasHover = useHasHover();
     const { setOpen, supportMobileTap } = React.useContext(TooltipTriggerContext);
     const { onClick: onClickProp } = props;
@@ -53,10 +39,10 @@ const TooltipTrigger = React.forwardRef((_a, ref) => {
             setOpen(true);
         }
         else {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+            onClickProp?.(e);
         }
     }, [setOpen, hasHover, supportMobileTap, onClickProp]);
-    return (React.createElement(TooltipPrimitive.Trigger, Object.assign({ ref: ref }, props, { onClick: onClick }), children));
+    return (React.createElement(TooltipPrimitive.Trigger, { ref: ref, ...props, onClick: onClick }, children));
 });
 TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
 const slideUpAndFade = keyframes `
@@ -132,10 +118,9 @@ const StyledArrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
     fill: theme.colors.white,
     filter: `drop-shadow(0px 1px 0px ${theme.colors.grey})`,
 }));
-const TooltipContent = React.forwardRef((_a, ref) => {
-    var { sideOffset = 4, children } = _a, props = __rest(_a, ["sideOffset", "children"]);
+const TooltipContent = React.forwardRef(({ sideOffset = 4, children, ...props }, ref) => {
     const theme = useTheme();
-    return (React.createElement(StyledContent, Object.assign({ ref: ref, sideOffset: sideOffset }, props),
+    return (React.createElement(StyledContent, { ref: ref, sideOffset: sideOffset, ...props },
         children,
         React.createElement(StyledArrow, { width: theme.space.x1_5, height: theme.space.x0_75 })));
 });

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledProps } from "../StyledProps";
 declare const MenuItemList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
@@ -12,11 +11,11 @@ declare const StyledBackLink: import("styled-components/dist/types").IStyledComp
 declare const StyledPageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+}, "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"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+}, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
     as?: "div";
 }>, keyof import("react").Component<any, {}, any>>;
 declare const TileLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
@@ -35,12 +34,14 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     suppressContentEditableWarning?: boolean;
     suppressHydrationWarning?: boolean;
     accessKey?: string;
+    autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus?: boolean;
     className?: string;
     contentEditable?: "inherit" | (boolean | "true" | "false");
     contextMenu?: string;
     dir?: string;
     draggable?: boolean | "true" | "false";
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send";
     id?: string;
     lang?: string;
     nonce?: string;
@@ -58,7 +59,6 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     rev?: string;
     typeof?: string;
     vocab?: string;
-    autoCapitalize?: string;
     autoCorrect?: string;
     autoSave?: string;
     itemProp?: string;
@@ -68,20 +68,26 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     itemRef?: string;
     results?: number;
     security?: string;
-    unselectable?: "on" | "off";
+    unselectable?: "off" | "on";
     inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
     is?: string;
+    exportparts?: string;
+    part?: string;
     "aria-activedescendant"?: string;
     "aria-atomic"?: boolean | "true" | "false";
     "aria-autocomplete"?: "none" | "list" | "inline" | "both";
+    "aria-braillelabel"?: string;
+    "aria-brailleroledescription"?: string;
     "aria-busy"?: boolean | "true" | "false";
     "aria-checked"?: boolean | "true" | "false" | "mixed";
     "aria-colcount"?: number;
     "aria-colindex"?: number;
+    "aria-colindextext"?: string;
     "aria-colspan"?: number;
     "aria-controls"?: string;
-    "aria-current"?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date";
+    "aria-current"?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date";
     "aria-describedby"?: string;
+    "aria-description"?: string;
     "aria-details"?: string;
     "aria-disabled"?: boolean | "true" | "false";
     "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup";
@@ -111,6 +117,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "aria-roledescription"?: string;
     "aria-rowcount"?: number;
     "aria-rowindex"?: number;
+    "aria-rowindextext"?: string;
     "aria-rowspan"?: number;
     "aria-selected"?: boolean | "true" | "false";
     "aria-setsize"?: number;
@@ -140,7 +147,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     onBlurCapture?: import("react").FocusEventHandler<HTMLLIElement>;
     onChange?: import("react").FormEventHandler<HTMLLIElement>;
     onChangeCapture?: import("react").FormEventHandler<HTMLLIElement>;
-    onBeforeInput?: import("react").FormEventHandler<HTMLLIElement>;
+    onBeforeInput?: import("react").InputEventHandler<HTMLLIElement>;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLLIElement>;
     onInput?: import("react").FormEventHandler<HTMLLIElement>;
     onInputCapture?: import("react").FormEventHandler<HTMLLIElement>;

package/dist/src/TopBar/components/BackLink.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 from "react";
 import { Box } from "../../Box";
 import useMediaQuery from "../../hooks/useMediaQuery";
@@ -21,11 +10,10 @@ const BACK_LINK_MAX_WIDTH = {
     tabletLandscape: "20ch",
     laptop: "24ch",
 };
-export function BackLink(_a) {
-    var { children, maxWidth = BACK_LINK_MAX_WIDTH } = _a, props = __rest(_a, ["children", "maxWidth"]);
+export function BackLink({ children, maxWidth = BACK_LINK_MAX_WIDTH, ...props }) {
     const md = useMediaQuery("phoneLandscape");
     return (React.createElement(Box, { as: "li", flex: "1 1" },
-        React.createElement(StyledBackLink, Object.assign({}, props, { "data-testid": "topbar-back-link" }),
+        React.createElement(StyledBackLink, { ...props, "data-testid": "topbar-back-link" },
             React.createElement(Icon, { icon: "arrowBack" }),
             md && (React.createElement(Text, { maxWidth: maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small" }, children)))));
 }

package/dist/src/TopBar/components/Menu.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 { DialogContent } from "@reach/dialog";
 import { AnimatePresence } from "framer-motion";
 import React from "react";
@@ -38,9 +27,7 @@ const blurVariants = {
         },
     },
 };
-export function Menu(_a) {
-    var _b;
-    var { children, defaultOpened = false } = _a, props = __rest(_a, ["children", "defaultOpened"]);
+export function Menu({ children, defaultOpened = false, ...props }) {
     const [showMenu, setShowMenu] = React.useState(defaultOpened);
     const [animationComplete, setAnimationComplete] = React.useState(false);
     const { t } = useTranslation();
@@ -62,6 +49,6 @@ export function Menu(_a) {
                     setAnimationComplete(true);
                 }
             }, onDismiss: close },
-            React.createElement(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : t("menu options") },
+            React.createElement(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": props["aria-label"] ?? t("menu options") },
                 React.createElement(MenuItemList, null, children)))))));
 }