@nulogy/components 15.2.2 → 15.3.0

package/dist/src/Alert/Alert.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 } from "react";
 import styled from "styled-components";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
@@ -46,8 +35,7 @@ const alertColours = {
         backgroundColor: "lightYellow",
     },
 };
-const Alert = (_a) => {
-    var { children, isCloseable = false, title, type = "informative", closeAriaLabel, onClose, controlled = false } = _a, props = __rest(_a, ["children", "isCloseable", "title", "type", "closeAriaLabel", "onClose", "controlled"]);
+const Alert = ({ children, isCloseable = false, title, type = "informative", closeAriaLabel, onClose, controlled = false, ...props }) => {
     const [isVisible, setIsVisible] = useState(true);
     const componentVariant = useComponentVariant();
     const hideAlert = () => {
@@ -59,7 +47,7 @@ const Alert = (_a) => {
     };
     if (!isVisible)
         return null;
-    return (React.createElement(Flex, Object.assign({ bg: alertColours[type].backgroundColor, p: "x2", borderRadius: "medium", borderLeftWidth: "4px", borderLeftColor: alertColours[type].borderColor, borderLeftStyle: "solid", role: "alert", alignItems: children ? "flex-start" : undefined }, props),
+    return (React.createElement(Flex, { bg: alertColours[type].backgroundColor, p: "x2", borderRadius: "medium", borderLeftWidth: "4px", borderLeftColor: alertColours[type].borderColor, borderLeftStyle: "solid", role: "alert", alignItems: children ? "flex-start" : undefined, ...props },
         type === "danger" && React.createElement(Icon, { size: "x3", icon: "error", mr: "x1", color: alertColours[type].borderColor }),
         type === "success" && React.createElement(Icon, { size: "x3", icon: "check", mr: "x1", color: alertColours[type].borderColor }),
         React.createElement(Flex, { flexDirection: "column", gap: componentVariant === "touch" ? "half" : "none", mr: "auto" },

package/dist/src/AppTag/components/LogoWrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppTagType } from "../types";
 export declare const LogoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $type?: AppTagType;

package/dist/src/AppTag/components/NulogyLogo.js

@@ -1,17 +1,5 @@
-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";
-export default function NulogyLogo(_a) {
-    var { width = 8, height = 8 } = _a, props = __rest(_a, ["width", "height"]);
-    return (React.createElement("svg", Object.assign({ width: width, height: height, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+export default function NulogyLogo({ width = 8, height = 8, ...props }) {
+    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
         React.createElement("path", { d: "M6.75004 0.290783L8 0.872348V6.10892C8 7.23335 6.80591 7.43084 5.99989 7.56333C6.4609 7.43084 6.7526 7.28197 6.75004 6.10892V1.45441L5.50008 0.872348L6.75004 0.290783ZM1.49987 7.27255V4.07344C1.49987 3.7514 1.70755 3.38717 1.95959 3.26163L3.25007 2.61655V4.65104L4.50003 5.52785C4.75207 5.67671 5.25017 5.68019 5.25017 5.23657V4.36373L4.74951 4.07245V0L0.938216 1.63404C0.420065 1.85585 0 2.55502 0 3.2001V8L1.49987 7.27255Z", fill: "white" })));
 }

package/dist/src/AsyncSelect/AsyncSelect.graphql.story.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { gql, useLazyQuery } from "@apollo/client";
 import { MockedProvider } from "@apollo/client/testing";
 import React, { useCallback } from "react";
@@ -43,9 +34,9 @@ const mocks = [
 ];
 const AsyncSelectWithApollo = () => {
     const [getCountries, { data }] = useLazyQuery(GET_COUNTRIES);
-    const loadOptions = useCallback((inputValue) => __awaiter(void 0, void 0, void 0, function* () {
-        yield getCountries();
-        if (data === null || data === void 0 ? void 0 : data.countries) {
+    const loadOptions = useCallback(async (inputValue) => {
+        await getCountries();
+        if (data?.countries) {
             return data.countries
                 .filter((country) => country.name.toLowerCase().includes(inputValue.toLowerCase()))
                 .map((country) => ({
@@ -54,7 +45,7 @@ const AsyncSelectWithApollo = () => {
             }));
         }
         return [];
-    }), [data, getCountries]);
+    }, [data, getCountries]);
     return React.createElement(AsyncSelect, { placeholder: "Search for a country", loadOptions: loadOptions, labelText: "Country" });
 };
 export const WithApolloClientExample = () => (React.createElement(MockedProvider, { mocks: mocks, addTypename: false },

package/dist/src/AsyncSelect/AsyncSelect.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, { forwardRef } from "react";
 import AsyncReactSelect from "react-select/async";
 import { useTranslation } from "react-i18next";
@@ -21,8 +10,7 @@ import customStyles from "../Select/customReactSelectStyles";
 import { getSubset } from "../utils/subset";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { SelectControl, SelectMultiValue, SelectClearIndicator, SelectContainer, SelectInput, SelectDropdownIndicator, SelectMenu, SelectOption, } from "./AsyncSelectComponents";
-const AsyncSelect = forwardRef((_a, ref) => {
-    var { autocomplete, labelText, required, requirementText, helpText, noOptionsMessage, disabled, errorMessage, errorList, id, initialIsOpen, maxHeight, menuPosition, multiselect, name, onChange, placeholder, value, defaultValue, className, classNamePrefix, onBlur, menuIsOpen, onMenuOpen, onMenuClose, onInputChange, components, "aria-label": ariaLabel, cacheOptions = false, defaultOptions, loadOptions, isClearable } = _a, props = __rest(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable"]);
+const AsyncSelect = forwardRef(({ autocomplete, labelText, required, requirementText, helpText, noOptionsMessage, disabled, errorMessage, errorList, id, initialIsOpen, maxHeight, menuPosition, multiselect, name, onChange, placeholder, value, defaultValue, className, classNamePrefix, onBlur, menuIsOpen, onMenuOpen, onMenuClose, onInputChange, components, "aria-label": ariaLabel, cacheOptions = false, defaultOptions, loadOptions, isClearable, ...props }, ref) => {
     const { t } = useTranslation();
     const variant = useComponentVariant();
     const theme = useTheme();
@@ -30,9 +18,9 @@ const AsyncSelect = forwardRef((_a, ref) => {
     const error = !!(errorMessage || errorList);
     const componentVariant = useComponentVariant(variant);
     noOptionsMessage || (noOptionsMessage = () => t("no options"));
-    return (React.createElement(Field, Object.assign({}, spaceProps),
+    return (React.createElement(Field, { ...spaceProps },
         React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
-            React.createElement(AsyncReactSelect, Object.assign({ className: className, classNamePrefix: classNamePrefix, noOptionsMessage: noOptionsMessage || t("no options"), value: value, ref: ref, defaultInputValue: defaultValue, placeholder: placeholder || t("start typing"), styles: customStyles({
+            React.createElement(AsyncReactSelect, { className: className, classNamePrefix: classNamePrefix, noOptionsMessage: noOptionsMessage || t("no options"), value: value, ref: ref, defaultInputValue: defaultValue, placeholder: placeholder || t("start typing"), styles: customStyles({
                     hasIcon: Boolean(props.iconLeft),
                     theme,
                     error,
@@ -40,7 +28,17 @@ const AsyncSelect = forwardRef((_a, ref) => {
                     maxHeight,
                     windowed: false,
                     hasDefaultOptions: Boolean(defaultOptions),
-                }), isDisabled: disabled, isSearchable: autocomplete, "aria-required": required, required: required, "aria-invalid": error, defaultMenuIsOpen: initialIsOpen, inputId: id, onBlur: onBlur, onChange: onChange, name: name, isMulti: multiselect, menuIsOpen: menuIsOpen, onMenuOpen: onMenuOpen, onMenuClose: onMenuClose, menuPosition: menuPosition, onInputChange: onInputChange, components: Object.assign({ Option: (props) => (React.createElement(SelectOption, Object.assign({ variant: componentVariant }, props), props.children)), Control: SelectControl, MultiValue: SelectMultiValue, ClearIndicator: SelectClearIndicator, DropdownIndicator: SelectDropdownIndicator, SelectContainer: SelectContainer, Menu: SelectMenu, Input: SelectInput }, components), "aria-label": ariaLabel, cacheOptions: cacheOptions, defaultOptions: defaultOptions, loadOptions: loadOptions, isClearable: isClearable }, props)),
+                }), isDisabled: disabled, isSearchable: autocomplete, "aria-required": required, required: required, "aria-invalid": error, defaultMenuIsOpen: initialIsOpen, inputId: id, onBlur: onBlur, onChange: onChange, name: name, isMulti: multiselect, menuIsOpen: menuIsOpen, onMenuOpen: onMenuOpen, onMenuClose: onMenuClose, menuPosition: menuPosition, onInputChange: onInputChange, components: {
+                    Option: (props) => (React.createElement(SelectOption, { variant: componentVariant, ...props }, props.children)),
+                    Control: SelectControl,
+                    MultiValue: SelectMultiValue,
+                    ClearIndicator: SelectClearIndicator,
+                    DropdownIndicator: SelectDropdownIndicator,
+                    SelectContainer: SelectContainer,
+                    Menu: SelectMenu,
+                    Input: SelectInput,
+                    ...components,
+                }, "aria-label": ariaLabel, cacheOptions: cacheOptions, defaultOptions: defaultOptions, loadOptions: loadOptions, isClearable: isClearable, ...props }),
             React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList }))));
 });
 export default AsyncSelect;

package/dist/src/AsyncSelect/AsyncSelectComponents.js

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

package/dist/src/AsyncSelect/fixtures.js

@@ -1,17 +1,8 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { filterOptions } from "../utils/story/simulatedAPIRequests";
-export const loadMatchingProvinces = (inputValue) => __awaiter(void 0, void 0, void 0, function* () {
-    const data = yield filterOptions(inputValue, provinces);
-    return yield data.json();
-});
+export const loadMatchingProvinces = async (inputValue) => {
+    const data = await filterOptions(inputValue, provinces);
+    return await data.json();
+};
 export const provinces = [
     {
         label: "Alberta",

package/dist/src/Banner/Banner.js

@@ -1,18 +1,4 @@
-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 { Alert } from "../Alert";
-const Banner = (_a) => {
-    var props = __rest(_a, []);
-    return (React.createElement(Alert, Object.assign({ borderStyle: "none", borderRadius: "0", px: "x3" }, props)));
-};
+const Banner = ({ ...props }) => (React.createElement(Alert, { borderStyle: "none", borderRadius: "0", px: "x3", ...props }));
 export default Banner;

package/dist/src/BottomSheet/BottomSheet.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 { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
@@ -17,9 +6,7 @@ import { QuietButton } from "../Button";
 import { Flex } from "../Flex";
 import { noop } from "../utils/noop";
 import { BottomSheetParts } from "./BottomSheet.parts";
-export default function BottomSheet(_a) {
-    var _b;
-    var { title, helpText, closeButtonLabel, secondaryAction, primaryAction, isOpen = false, onClose = noop, sheetWidth = "100%", contentWidth = { small: "100%", medium: 704 }, disableCloseOnOverlayClick = false, hideCloseButton = false, children } = _a, props = __rest(_a, ["title", "helpText", "closeButtonLabel", "secondaryAction", "primaryAction", "isOpen", "onClose", "sheetWidth", "contentWidth", "disableCloseOnOverlayClick", "hideCloseButton", "children"]);
+export default function BottomSheet({ title, helpText, closeButtonLabel, secondaryAction, primaryAction, isOpen = false, onClose = noop, sheetWidth = "100%", contentWidth = { small: "100%", medium: 704 }, disableCloseOnOverlayClick = false, hideCloseButton = false, children, ...props }) {
     const { t } = useTranslation();
     const theme = useTheme();
     closeButtonLabel || (closeButtonLabel = t("close"));
@@ -32,7 +19,7 @@ export default function BottomSheet(_a) {
     const footerHeight = `calc(${theme.space.x5} + (${theme.space.x2} * 2) + ${theme.space.x4})`;
     return (React.createElement(BottomSheetParts.Root, { isOpen: isOpen, onClose: onClose },
         React.createElement(BottomSheetParts.Overlay, { closeOnClick: closeOnClick },
-            React.createElement(BottomSheetParts.Sheet, { width: sheetWidth, maxWidth: { small: `calc(100% - ${theme.space.x8})` }, maxHeight: { small: `calc(100dvh - ${theme.space.x7})`, medium: "85.4dvh" }, "aria-label": (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : title },
+            React.createElement(BottomSheetParts.Sheet, { width: sheetWidth, maxWidth: { small: `calc(100% - ${theme.space.x8})` }, maxHeight: { small: `calc(100dvh - ${theme.space.x7})`, medium: "85.4dvh" }, "aria-label": props["aria-label"] ?? title },
                 React.createElement(BottomSheetParts.ContentContainer, null,
                     React.createElement(Box, { width: contentWidth, margin: "0 auto" },
                         React.createElement(BottomSheetParts.Header, null,

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

@@ -28,7 +28,7 @@ export declare const BottomSheetParts: {
         inline?: boolean;
         compact?: boolean;
         disabled?: boolean;
-        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
         fontSize?: string;
     } & import("..").StyledProps, "ref"> & {
         ref?: React.Ref<HTMLParagraphElement>;
@@ -40,7 +40,7 @@ export declare const BottomSheetParts: {
         inline?: boolean;
         compact?: boolean;
         disabled?: boolean;
-        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
         fontSize?: string;
     } & import("..").StyledProps, "ref"> & {
         ref?: React.Ref<HTMLParagraphElement>;

package/dist/src/BottomSheet/BottomSheet.parts.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 { AnimatePresence } from "framer-motion";
 import React from "react";
 import { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText } from "./BottomSheet.styled";
@@ -25,32 +14,29 @@ const transition = {
     duration: 0.5,
     ease: [0.32, 0.72, 0, 1],
 };
-function Root(_a) {
-    var { isOpen, onClose, children } = _a, props = __rest(_a, ["isOpen", "onClose", "children"]);
-    return (React.createElement(AnimatePresence, Object.assign({}, props), isOpen && (React.createElement(BottomSheetProvider, { isOpen: isOpen, onClose: onClose }, children))));
+function Root({ isOpen, onClose, children, ...props }) {
+    return (React.createElement(AnimatePresence, { ...props }, isOpen && (React.createElement(BottomSheetProvider, { isOpen: isOpen, onClose: onClose }, children))));
 }
-function OverlayPart(_a) {
-    var { closeOnClick, children } = _a, props = __rest(_a, ["closeOnClick", "children"]);
+function OverlayPart({ closeOnClick, children, ...props }) {
     const { onClose, isOpen } = useBottomSheet();
     const [isAnimationComplete, setAnimationComplete] = React.useState(false);
-    return (React.createElement(Overlay, Object.assign({ "data-testid": "bottom-sheet-overlay", "data-visible": isAnimationComplete ? true : undefined, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
+    return (React.createElement(Overlay, { "data-testid": "bottom-sheet-overlay", "data-visible": isAnimationComplete ? true : undefined, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
             if (isOpen) {
                 setAnimationComplete(true);
             }
-        }, onClick: closeOnClick ? onClose : undefined, isOpen: isOpen }, props), children));
+        }, onClick: closeOnClick ? onClose : undefined, isOpen: isOpen, ...props }, children));
 }
-function SheetPart(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
+function SheetPart({ children, ...props }) {
     const { isOpen } = useBottomSheet();
     const [isAnimationComplete, setAnimationComplete] = React.useState(false);
     function handleSheetClick(e) {
         e.stopPropagation();
     }
-    return (React.createElement(Sheet, Object.assign({ "data-testid": "bottom-sheet-body", "aria-label": props["aria-label"], "data-visible": isAnimationComplete ? true : undefined, variants: sheetVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
+    return (React.createElement(Sheet, { "data-testid": "bottom-sheet-body", "aria-label": props["aria-label"], "data-visible": isAnimationComplete ? true : undefined, variants: sheetVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
             if (isOpen) {
                 setAnimationComplete(true);
             }
-        }, onClick: handleSheetClick }, props), children));
+        }, onClick: handleSheetClick, ...props }, children));
 }
 export const BottomSheetParts = {
     Root,

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

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 import { DialogContentProps } from "@reach/dialog";
 import type { AnimationProps } from "framer-motion";
 import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
 declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     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>>;
 interface SheetProps extends DialogContentProps, AnimationProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
@@ -30,7 +29,7 @@ declare const Title: import("styled-components/dist/types").IStyledComponentBase
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
-    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
 } & import("../StyledProps").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;
@@ -42,7 +41,7 @@ declare const HelpText: import("styled-components/dist/types").IStyledComponentB
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
-    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
 } & import("../StyledProps").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;

package/dist/src/Box/Box.d.ts

@@ -21,12 +21,14 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     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;
@@ -44,7 +46,6 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     rev?: string;
     typeof?: string;
     vocab?: string;
-    autoCapitalize?: string;
     autoCorrect?: string;
     autoSave?: string;
     itemProp?: string;
@@ -54,20 +55,26 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     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";
@@ -97,6 +104,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     "aria-roledescription"?: string;
     "aria-rowcount"?: number;
     "aria-rowindex"?: number;
+    "aria-rowindextext"?: string;
     "aria-rowspan"?: number;
     "aria-selected"?: boolean | "true" | "false";
     "aria-setsize"?: number;
@@ -126,7 +134,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement>;
     onChange?: import("react").FormEventHandler<HTMLDivElement>;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement>;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
     onInput?: import("react").FormEventHandler<HTMLDivElement>;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement>;

package/dist/src/BrandedNavBar/DesktopMenu.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 styled from "styled-components";
 import { Icon } from "../Icon";
@@ -29,47 +18,47 @@ const getSharedStyles = (color, theme) => {
         borderRadius: theme.radii.medium,
     };
 };
-const MenuLink = styled.a(({ color, hoverColor, hoverBackground, theme }) => (Object.assign(Object.assign({}, getSharedStyles(color, theme)), { fontWeight: theme.fontWeights.medium, transition: ".2s", "&:hover, &:focus": {
+const MenuLink = styled.a(({ color, hoverColor, hoverBackground, theme }) => ({
+    ...getSharedStyles(color, theme),
+    fontWeight: theme.fontWeights.medium,
+    transition: ".2s",
+    "&:hover, &:focus": {
         outline: "none",
         color: theme.colors[hoverColor] || hoverColor,
         backgroundColor: theme.colors[hoverBackground] || hoverBackground,
         cursor: "pointer",
-    }, "&:disabled": {
+    },
+    "&:disabled": {
         opacity: ".5",
-    }, "&:focus": {
+    },
+    "&:focus": {
         boxShadow: theme.shadows.focus,
-    } })));
-const MenuText = styled.div(({ textColor, theme }) => (Object.assign(Object.assign({}, getSharedStyles(textColor, theme)), { fontWeight: theme.fontWeights.medium })));
+    },
+}));
+const MenuText = styled.div(({ textColor, theme }) => ({
+    ...getSharedStyles(textColor, theme),
+    fontWeight: theme.fontWeights.medium,
+}));
 const Nav = styled.nav({
     display: "flex",
     alignItems: "center",
 });
-const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => {
-    var _a;
-    return (React.createElement("div", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name },
-        React.createElement(MenuTrigger, Object.assign({ menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer }, themeColorObject))));
-};
+const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => (React.createElement("div", { key: menuItem.key ?? menuItem.name },
+    React.createElement(MenuTrigger, { menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer, ...themeColorObject })));
 const renderMenuLink = (menuItem, themeColorObject) => {
-    var _a;
     const linkProps = {
         href: menuItem.href,
         to: menuItem.to,
         as: menuItem.as,
         target: menuItem.openInNew ? "_blank" : undefined,
     };
-    return (React.createElement("div", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name },
-        React.createElement(MenuLink, Object.assign({}, linkProps, themeColorObject),
+    return (React.createElement("div", { key: menuItem.key ?? menuItem.name },
+        React.createElement(MenuLink, { ...linkProps, ...themeColorObject },
             menuItem.name,
             menuItem.openInNew && React.createElement(Icon, { size: "x2", icon: "openInNew" }))));
 };
-const renderCustom = (menuItem, _themeColorObject, layer) => {
-    var _a;
-    return (React.createElement("div", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, menuItem.render({ size: "medium", layer })));
-};
-const renderText = (menuItem, themeColorObject) => {
-    var _a;
-    return (React.createElement(MenuText, Object.assign({ key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, themeColorObject), menuItem.name));
-};
+const renderCustom = (menuItem, _themeColorObject, layer) => (React.createElement("div", { key: menuItem.key ?? menuItem.name }, menuItem.render({ size: "medium", layer })));
+const renderText = (menuItem, themeColorObject) => (React.createElement(MenuText, { key: menuItem.key ?? menuItem.name, ...themeColorObject }, menuItem.name));
 const getRenderFunction = (menuItem) => {
     if (menuItem.items) {
         return renderMenuTrigger;
@@ -83,10 +72,7 @@ const getRenderFunction = (menuItem) => {
     return renderText;
 };
 const renderMenuItem = (menuItem, themeColorObject, layer, menuType) => getRenderFunction(menuItem)(menuItem, themeColorObject, layer, menuType);
-const BaseDesktopMenu = React.forwardRef((_a, ref) => {
-    var { menuData, menuType, themeColorObject } = _a, props = __rest(_a, ["menuData", "menuType", "themeColorObject"]);
-    return (React.createElement(Nav, Object.assign({}, props, { ref: ref }), menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType))));
-});
+const BaseDesktopMenu = React.forwardRef(({ menuData, menuType, themeColorObject, ...props }, ref) => (React.createElement(Nav, { ...props, ref: ref }, menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType)))));
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const DesktopMenu = styled(BaseDesktopMenu)({
     "& > div": {

package/dist/src/BrandedNavBar/MenuTrigger.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 from "react";
 import NavBarDropdownMenu from "./NavBarDropdownMenu";
 import SubMenuTrigger from "./SubMenuTrigger";
 import renderSubMenuItems from "./renderSubMenuItems";
 import MenuTriggerButton from "./MenuTriggerButton";
-const MenuTrigger = (_a) => {
-    var { menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType } = _a, props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer", "menuType"]);
+const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }) => {
     let dropdownMinWidth = "auto";
     const setDropdownMinWidth = (popperData) => {
         // Popper.js throws an error if popperData is not returned from this fn
@@ -31,7 +19,7 @@ const MenuTrigger = (_a) => {
     };
     return (
     // @ts-ignore
-    React.createElement(NavBarDropdownMenu, Object.assign({}, props, { placement: "bottom-start", modifiers: {
+    React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
             flip: { behavior: ["bottom"] },
             setPopperWidth: {
                 enabled: true,
@@ -43,9 +31,9 @@ const MenuTrigger = (_a) => {
                 boundariesElement: "viewport",
             },
         }, trigger: () => {
-            const defaultRender = () => React.createElement(MenuTriggerButton, Object.assign({}, triggerProps));
+            const defaultRender = () => React.createElement(MenuTriggerButton, { ...triggerProps });
             return trigger ? trigger({ size: "medium", defaultRender, layer }) : defaultRender();
-        } }), ({ closeMenu }) => (React.createElement("ul", { style: {
+        } }, ({ closeMenu }) => (React.createElement("ul", { style: {
             listStyle: "none",
             margin: "0",
             padding: "0",