@homebound/beam 2.226.0 → 2.227.1

package/dist/components/Tabs.js

@@ -24,7 +24,7 @@ const Icon_1 = require("./Icon");
 function TabsWithContent(props) {
     // Do not apply default top padding styles if the tabs are being hidden. This avoids unnecessary white space being added
     const styles = hideTabs(props) ? {} : Css_1.Css.pt3.$;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props, { contentXss: { ...styles, ...props.contentXss } }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tabs, { ...props }), (0, jsx_runtime_1.jsx)(TabContent, { ...props, contentXss: { ...styles, ...props.contentXss } })] }));
 }
 exports.TabsWithContent = TabsWithContent;
 function TabContent(props) {
@@ -40,7 +40,7 @@ function TabContent(props) {
     const uniqueValue = uniqueTabValue(selectedTab);
     return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
-    (0, jsx_runtime_1.jsx)(components_1.FullBleed, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0 }, tid.panel, { css: contentXss }, { children: isRouteTab(selectedTab) ? (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: selectedTab.path, render: selectedTab.render }, void 0) : selectedTab.render() }), void 0) }, void 0));
+    (0, jsx_runtime_1.jsx)(components_1.FullBleed, { children: (0, jsx_runtime_1.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, css: contentXss, children: isRouteTab(selectedTab) ? (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: selectedTab.path, render: selectedTab.render }) : selectedTab.render() }) }));
 }
 exports.TabContent = TabContent;
 /** The top list of tabs. */
@@ -79,10 +79,10 @@ function Tabs(props) {
             setActive(selected);
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.df.aic.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) } }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.gap1.asfe.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: { ...Css_1.Css.df.aic.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", { ref: ref, css: Css_1.Css.dif.gap1.asfe.$, "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
                     const uniqueValue = uniqueTabValue(tab);
-                    return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
-                }) }), void 0)), right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.ml("auto").df.aic.gap1.pb1.$ }, { children: right }), void 0)] }), void 0));
+                    return ((0, jsx_runtime_1.jsx)(TabImpl, { active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab, ...tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)] }, uniqueValue));
+                }) })), right && (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.ml("auto").df.aic.gap1.pb1.$, children: right })] }));
 }
 exports.Tabs = Tabs;
 function TabImpl(props) {
@@ -113,8 +113,8 @@ function TabImpl(props) {
         onBlur,
         ...(isRouteTab(tab) ? {} : { onClick: () => onClick(tab.value) }),
     });
-    const tabLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, (icon || endAdornment) && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: icon ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0) : endAdornment }), void 0)] }, void 0));
-    return isDisabled ? ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tabProps, { children: tabLabel }), void 0)) : isRouteTab(tab) ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, { ...tabProps, ...interactiveProps }, { className: "navLink", to: tab.href }, { children: tabLabel }), void 0)) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, { ...tabProps, ...interactiveProps }, { children: tabLabel }), void 0));
+    const tabLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, (icon || endAdornment) && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.ml1.$, children: icon ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }) : endAdornment })] }));
+    return isDisabled ? ((0, jsx_runtime_1.jsx)("div", { ...tabProps, children: tabLabel })) : isRouteTab(tab) ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { ...{ ...tabProps, ...interactiveProps }, className: "navLink", to: tab.href, children: tabLabel })) : ((0, jsx_runtime_1.jsx)("button", { ...{ ...tabProps, ...interactiveProps }, children: tabLabel }));
 }
 function getTabStyles() {
     const borderBottomWidthPx = 4;

package/dist/components/Tag.d.ts

@@ -1,7 +1,7 @@
 import { IconKey } from "./";
 import { Margin, Only, Xss } from "../Css";
-declare type TagXss = Margin;
-export declare type TagType = "info" | "caution" | "warning" | "success" | "neutral";
+type TagXss = Margin;
+export type TagType = "info" | "caution" | "warning" | "success" | "neutral";
 interface TagProps<X> {
     text: string;
     type?: TagType;

package/dist/components/Tag.js

@@ -9,7 +9,7 @@ const utils_1 = require("../utils");
 function Tag({ text, type, xss, ...otherProps }) {
     const typeStyles = getStyles(type);
     const tid = (0, utils_1.useTestIds)(otherProps);
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({}, tid, { css: { ...Css_1.Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles, ...xss }, title: text }, { children: [otherProps.icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: otherProps.icon, inc: 1.5 }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("span", { ...tid, css: { ...Css_1.Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles, ...xss }, title: text, children: [otherProps.icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: otherProps.icon, inc: 1.5 }) })), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp1.breakAll.$, children: text })] }));
 }
 exports.Tag = Tag;
 function getStyles(type) {

package/dist/components/Toast/Toast.d.ts

@@ -1,2 +1,2 @@
 export declare function Toast(): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare type ToastTypes = "error" | "warning" | "success" | "info" | "alert";
+export type ToastTypes = "error" | "warning" | "success" | "info" | "alert";

package/dist/components/Toast/Toast.js

@@ -10,7 +10,7 @@ const ToastContext_1 = require("./ToastContext");
 function Toast() {
     const { setNotice, notice } = (0, ToastContext_1.useToastContext)();
     const tid = (0, utils_1.useTestIds)({}, "toast");
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: notice && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...variantStyles[notice.type], ...Css_1.Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ } }, tid, { role: "alert" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: typeToIcon[notice.type] }, tid.type, { color: Css_1.Palette.Gray900 }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fg1.$ }, tid.message, { children: notice.message }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lh(0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: () => setNotice(undefined) }, tid.close, { color: Css_1.Palette.Gray900 }), void 0) }), void 0)] }), void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: notice && ((0, jsx_runtime_1.jsxs)("div", { css: { ...variantStyles[notice.type], ...Css_1.Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ }, ...tid, role: "alert", children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: typeToIcon[notice.type], ...tid.type, color: Css_1.Palette.Gray900 }) }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fg1.$, ...tid.message, children: notice.message }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lh(0).$, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", onClick: () => setNotice(undefined), ...tid.close, color: Css_1.Palette.Gray900 }) })] })) }));
 }
 exports.Toast = Toast;
 const typeToIcon = {

package/dist/components/Toast/ToastContext.d.ts

@@ -4,7 +4,7 @@ export interface ToastNoticeProps {
     type: ToastTypes;
     message: ReactNode;
 }
-export declare type ToastContextProps = {
+export type ToastContextProps = {
     notice: ToastNoticeProps | undefined;
     setNotice: React.Dispatch<React.SetStateAction<ToastNoticeProps | undefined>>;
 };

package/dist/components/Toast/ToastContext.js

@@ -12,7 +12,7 @@ exports.ToastContext = (0, react_1.createContext)({
 function ToastProvider(props) {
     const [notice, setNotice] = (0, react_1.useState)();
     const contextValue = (0, react_1.useMemo)(() => ({ setNotice, notice }), [setNotice, notice]);
-    return (0, jsx_runtime_1.jsx)(exports.ToastContext.Provider, Object.assign({ value: contextValue }, { children: props.children }), void 0);
+    return (0, jsx_runtime_1.jsx)(exports.ToastContext.Provider, { value: contextValue, children: props.children });
 }
 exports.ToastProvider = ToastProvider;
 function useToastContext() {

package/dist/components/ToggleChip.d.ts

@@ -1,5 +1,5 @@
 import { Margin, Only, Xss } from "../Css";
-declare type ToggleChipXss = Xss<Margin>;
+type ToggleChipXss = Xss<Margin>;
 export interface ToggleChipProps<X> {
     text: string;
     onClick: () => void;

package/dist/components/ToggleChip.js

@@ -12,7 +12,7 @@ function ToggleChip(props) {
     // If compact, then use a smaller type scale
     const compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact;
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", css: {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", css: {
             ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1
                 // Use a lower right-padding to get closer to the `X` circle when not disabled
                 .prPx(2)
@@ -22,6 +22,6 @@ function ToggleChip(props) {
             ":hover:not(:disabled)": Css_1.Css.bgGray300.$,
             ":disabled": Css_1.Css.cursorNotAllowed.$,
             ...xss,
-        }, disabled: disabled, onClick: onClick }, tid, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.prPx(6).tl.lineClamp1.breakAll.if(disabled).pr0.$, title: text }, { children: text }), void 0), !disabled && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.br16.bgGray400.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700, inc: compact ? 2 : undefined }, void 0) }), void 0))] }), void 0));
+        }, disabled: disabled, onClick: onClick, ...tid, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.prPx(6).tl.lineClamp1.breakAll.if(disabled).pr0.$, title: text, children: text }), !disabled && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.br16.bgGray400.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700, inc: compact ? 2 : undefined }) }))] }));
 }
 exports.ToggleChip = ToggleChip;

package/dist/components/ToggleChips.d.ts

@@ -1,5 +1,5 @@
 import { Margin, Only, Xss } from "../Css";
-declare type ToggleChipXss = Xss<Margin>;
+type ToggleChipXss = Xss<Margin>;
 export interface ToggleChipsProps<T, X> {
     values: T[];
     getLabel: (value: T) => string;

package/dist/components/ToggleChips.js

@@ -9,6 +9,6 @@ const useTestIds_1 = require("../utils/useTestIds");
 function ToggleChips(props) {
     const { values, getLabel, onRemove, xss } = props;
     const tid = (0, useTestIds_1.useTestIds)(props, "toggleChips");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.df.add("flexWrap", "wrap").gap1.$, ...xss } }, tid, { children: values.map((value) => ((0, jsx_runtime_1.jsx)(ToggleChip_1.ToggleChip, Object.assign({ text: getLabel(value), onClick: () => onRemove(value) }, tid.chip), getLabel(value)))) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { css: { ...Css_1.Css.df.add("flexWrap", "wrap").gap1.$, ...xss }, ...tid, children: values.map((value) => ((0, jsx_runtime_1.jsx)(ToggleChip_1.ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value)))) }));
 }
 exports.ToggleChips = ToggleChips;

package/dist/components/Tooltip.d.ts

@@ -8,7 +8,7 @@ interface TooltipProps {
     disabled?: boolean;
 }
 export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare type Placement = "top" | "bottom" | "left" | "right" | "auto";
+export type Placement = "top" | "bottom" | "left" | "right" | "auto";
 export declare function maybeTooltip(props: Omit<TooltipProps, "children"> & {
     children: ReactElement;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -35,12 +39,12 @@ function Tooltip(props) {
     const { triggerProps, tooltipProps: _tooltipProps } = (0, react_aria_1.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
     const { tooltipProps } = (0, react_aria_1.useTooltip)(_tooltipProps, state);
     const tid = (0, utils_1.useTestIds)(props, "tooltip");
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: triggerRef }, triggerProps, (!state.isOpen && typeof title === "string" ? { title } : {}), tid, { 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: triggerRef, ...triggerProps, ...(!state.isOpen && typeof title === "string" ? { title } : {}), ...tid, 
                 // Adding `draggable` as a hack to allow focus to continue through this element and into its children.
                 // This is due to some code in React-Aria that prevents default due ot mobile browser inconsistencies,
                 // and the only way they don't prevent default is if the element is draggable.
                 // See https://github.com/adobe/react-spectrum/discussions/3058 for discussion related to this issue.
-                draggable: true, onDragStart: (e) => e.preventDefault() }, { children: children }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, Object.assign({}, (0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), { triggerRef: triggerRef, content: title, placement: placement }), void 0))] }, void 0));
+                draggable: true, onDragStart: (e) => e.preventDefault(), children: children }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, { ...(0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), triggerRef: triggerRef, content: title, placement: placement }))] }));
 }
 exports.Tooltip = Tooltip;
 function Popper({ triggerRef, content, placement = "auto" }) {
@@ -53,12 +57,12 @@ function Popper({ triggerRef, content, placement = "auto" }) {
         ],
         placement,
     });
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: popperRef, style: styles.popper }, attributes.popper, { css: Css_1.Css.maxw("320px").bgGray900.white.px1.py("4px").br4.xs.add("zIndex", 999999).$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }, void 0), content] }), void 0), document.body);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: popperRef, style: styles.popper, ...attributes.popper, css: Css_1.Css.maxw("320px").bgGray900.white.px1.py("4px").br4.xs.add("zIndex", 999999).$, children: [(0, jsx_runtime_1.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }), content] }), document.body);
 }
 // Helper function to conditionally wrap component with Tooltip if necessary.
 // `maybeTooltip` requires that the `children` prop be a ReactElement, even though <Tooltip /> allows for ReactNode.
 function maybeTooltip(props) {
-    return props.title ? (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({}, props), void 0) : props.children;
+    return props.title ? (0, jsx_runtime_1.jsx)(Tooltip, { ...props }) : props.children;
 }
 exports.maybeTooltip = maybeTooltip;
 // Helper function for resolving showing the Tooltip text via a 'disabled' prop, or the 'tooltip' prop.

package/dist/components/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/components/internal/CompoundField.js

@@ -11,21 +11,21 @@ function CompoundField({ children }) {
     }
     const commonStyles = Css_1.Css.df.aic.fs1.maxwPx(550).bt.bb.bGray300.$;
     const internalProps = { compound: true };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: {
             ...Css_1.Css.df.$,
             "&:focus-within > div:nth-of-type(2)": Css_1.Css.bgLightBlue700.$, // Separation line when inputs are focused
-        } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+        }, children: [(0, jsx_runtime_1.jsx)("div", { css: {
                     ...commonStyles,
                     ...Css_1.Css.bl.borderRadius("4px 0 0 4px").$,
                     "&:focus-within": Css_1.Css.bLightBlue700.$,
-                } }, { children: (0, react_1.cloneElement)(children[0], {
+                }, children: (0, react_1.cloneElement)(children[0], {
                     internalProps,
-                }) }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.$ }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.$ }), (0, jsx_runtime_1.jsx)("div", { css: {
                     ...commonStyles,
                     ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").$,
                     "&:focus-within": Css_1.Css.bLightBlue700.$,
-                } }, { children: (0, react_1.cloneElement)(children[1], {
+                }, children: (0, react_1.cloneElement)(children[1], {
                     internalProps,
-                }) }), void 0)] }), void 0));
+                }) })] }));
 }
 exports.CompoundField = CompoundField;

package/dist/components/internal/ContextualModal.js

@@ -8,6 +8,6 @@ const utils_1 = require("../../utils");
 function ContextualModal(props) {
     const { content, title, close } = props;
     const tid = (0, utils_1.useTestIds)(props, "popup");
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, Object.assign({ restoreFocus: true, autoFocus: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.p3.df.fdc.gap3.bgWhite.bshModal.br4.maxh("inherit").overflowAuto.$ }, tid, { children: [title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.lg.tc.$ }, tid.title, { children: title }), void 0)), (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.content, { children: typeof content === "function" ? content(close) : content }), void 0)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.p3.df.fdc.gap3.bgWhite.bshModal.br4.maxh("inherit").overflowAuto.$, ...tid, children: [title && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.lg.tc.$, ...tid.title, children: title })), (0, jsx_runtime_1.jsx)("div", { ...tid.content, children: typeof content === "function" ? content(close) : content })] }) }));
 }
 exports.ContextualModal = ContextualModal;

package/dist/components/internal/DatePicker/DatePicker.js

@@ -12,13 +12,13 @@ require("./DatePicker.css");
 function DatePicker(props) {
     const { value, onSelect, disabledDays, dottedDays } = props;
     const tid = (0, utils_1.useTestIds)(props, "datePicker");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dib.bgWhite.xs.$ }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { components: { Caption: Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, 
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dib.bgWhite.xs.$, ...tid, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { components: { Caption: Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, 
             // DatePicker only allows for a single date to be `selected` (per our props) though DayPicker expects an array of dates
             selected: value ? [value] : [], defaultMonth: value !== null && value !== void 0 ? value : new Date(), onDayClick: (day, modifiers) => {
                 if (modifiers.disabled)
                     return;
                 // Set the day value
                 onSelect(day);
-            }, disabled: disabledDays, modifiers: { indicatorDot: dottedDays !== null && dottedDays !== void 0 ? dottedDays : [] } }, void 0) }), void 0));
+            }, disabled: disabledDays, modifiers: { indicatorDot: dottedDays !== null && dottedDays !== void 0 ? dottedDays : [] } }) }));
 }
 exports.DatePicker = DatePicker;

package/dist/components/internal/DatePicker/DatePickerOverlay.js

@@ -8,6 +8,6 @@ function DatePickerOverlay({ overlayProps, children }) {
     return (
     // Adds `tabIndex` so clicking within the DatePicker will provide a `e.relatedTarget` on blur and focus events.
     // This allows for components such as the DateField to conditionally trigger their 'onBlur' prop. E.g. If the user leaves the field to interact with the DatePicker, then don't call onBlur
-    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.br4.bshModal.$ }, overlayProps, { tabIndex: 0 }, { children: children }), void 0));
+    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br4.bshModal.$, ...overlayProps, tabIndex: 0, children: children }));
 }
 exports.DatePickerOverlay = DatePickerOverlay;

package/dist/components/internal/DatePicker/DateRangePicker.js

@@ -13,11 +13,11 @@ function DateRangePicker(props) {
     var _a;
     const { range, onSelect, disabledDays, dottedDays, useYearPicker } = props;
     const tid = (0, utils_1.useTestIds)(props, "datePicker");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dib.bgWhite.xs.$ }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { mode: "range", selected: range, components: { Caption: useYearPicker ? Header_1.YearSkipHeader : Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, defaultMonth: (_a = range === null || range === void 0 ? void 0 : range.to) !== null && _a !== void 0 ? _a : new Date(), onSelect: (selection, day, activeModifiers) => {
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dib.bgWhite.xs.$, ...tid, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { mode: "range", selected: range, components: { Caption: useYearPicker ? Header_1.YearSkipHeader : Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, defaultMonth: (_a = range === null || range === void 0 ? void 0 : range.to) !== null && _a !== void 0 ? _a : new Date(), onSelect: (selection, day, activeModifiers) => {
                 // Disallow returning disabled dates.
                 if (activeModifiers.disabled)
                     return;
                 onSelect(selection);
-            }, disabled: disabledDays, modifiers: { indicatorDot: dottedDays !== null && dottedDays !== void 0 ? dottedDays : [] } }, void 0) }), void 0));
+            }, disabled: disabledDays, modifiers: { indicatorDot: dottedDays !== null && dottedDays !== void 0 ? dottedDays : [] } }) }));
 }
 exports.DateRangePicker = DateRangePicker;

package/dist/components/internal/DatePicker/Day.js

@@ -13,10 +13,10 @@ function Day(props) {
     const buttonRef = (0, react_1.useRef)(null);
     const { isHidden, isButton, activeModifiers, buttonProps, divProps } = (0, react_day_picker_1.useDayRender)(props.date, props.displayMonth, buttonRef);
     if (isHidden) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
     if (!isButton) {
-        return (0, jsx_runtime_1.jsx)("div", Object.assign({}, divProps), void 0);
+        return (0, jsx_runtime_1.jsx)("div", { ...divProps });
     }
     const { className, children, ...otherProps } = buttonProps;
     const { selected = false, indicatorDot = false, disabled = false, today = false, range_middle = false, range_start = false, range_end = false, } = activeModifiers;
@@ -24,7 +24,7 @@ function Day(props) {
     // When this happens, do not show styling as if there is an existing range.
     const showRangeStyles = !(range_end === true && range_start === true);
     const showActiveStyles = !disabled;
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, otherProps, { ref: buttonRef, type: "button", css: {
+    return ((0, jsx_runtime_1.jsx)("button", { ...otherProps, ref: buttonRef, type: "button", css: {
             ...Css_1.Css.relative.pbPx(4).outline0.if(disabled).cursorNotAllowed.$,
             // Do not apply interaction styles for disabled or already selected days.
             ...(!selected &&
@@ -38,18 +38,18 @@ function Day(props) {
                 Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.rightPx(-2).wPx(8).$ }).$),
             ...(showRangeStyles && range_end && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.wPx(8).leftPx(-2).$ }).$),
             ...(showRangeStyles && range_middle && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.leftPx(-2).$ }).$),
-        } }, tid, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+        }, ...tid, children: (0, jsx_runtime_1.jsxs)("div", { css: {
                 ...Css_1.Css.overflowHidden.gray900.relative.z1.br4.df.aic.jcc.wPx(28).hPx(30).mtPx(2).br4.$,
                 ...(today && !range_middle && Css_1.Css.bgGray100.$),
                 ...(selected && !range_middle && Css_1.Css.white.bgLightBlue700.$),
                 ...(disabled && Css_1.Css.gray500.$),
-            } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mtPx(-2).$ }, { children: children }), void 0), indicatorDot && ((0, jsx_runtime_1.jsx)("div", Object.assign({ 
+            }, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mtPx(-2).$, children: children }), indicatorDot && ((0, jsx_runtime_1.jsx)("div", { 
                     // Using `absolute` position as to not change the placement of the day's number when this is introduced
                     css: Css_1.Css.absolute
                         .bottomPx(4)
                         .wPx(4)
                         .hPx(4)
-                        .bgLightBlue700.br4.if(selected && !range_middle).bgWhite.$ }, tid.indicatorDot), void 0))] }), void 0) }), void 0));
+                        .bgLightBlue700.br4.if(selected && !range_middle).bgWhite.$, ...tid.indicatorDot }))] }) }));
 }
 exports.Day = Day;
 const rangeBaseStyles = Css_1.Css.absolute.topPx(2).contentEmpty.hPx(30).wPx(32).bgLightBlue100.$;

package/dist/components/internal/DatePicker/Header.js

@@ -9,13 +9,13 @@ const Css_1 = require("../../../Css");
 function Header(props) {
     const { displayMonth } = props;
     const { goToMonth } = (0, react_day_picker_1.useNavigation)();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.aic.mlPx(12).mrPx(2).hPx(32).$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.base.$ }, { children: (0, date_fns_1.format)(displayMonth, "MMMM yyyy") }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, -1)) }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, 1)) }, void 0)] }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.aic.mlPx(12).mrPx(2).hPx(32).$, children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.base.$, children: (0, date_fns_1.format)(displayMonth, "MMMM yyyy") }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, -1)) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, 1)) })] })] }));
 }
 exports.Header = Header;
 // Header with year skip option
 function YearSkipHeader(props) {
     const { displayMonth } = props;
     const { goToMonth } = (0, react_day_picker_1.useNavigation)();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.aic.mlPx(12).mrPx(12).hPx(32).$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdr.jcsb.$ }, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, -1)) }, void 0), (0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.base.$ }, { children: (0, date_fns_1.format)(displayMonth, "MMM") }), void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, 1)) }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdr.jcsb.$ }, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addYears)(displayMonth, -1)) }, void 0), (0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.base.$ }, { children: (0, date_fns_1.format)(displayMonth, "yyyy") }), void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addYears)(displayMonth, 1)) }, void 0)] }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.aic.mlPx(12).mrPx(12).hPx(32).$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdr.jcsb.$, children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, -1)) }), (0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.base.$, children: (0, date_fns_1.format)(displayMonth, "MMM") }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, 1)) })] }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdr.jcsb.$, children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addYears)(displayMonth, -1)) }), (0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.base.$, children: (0, date_fns_1.format)(displayMonth, "yyyy") }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addYears)(displayMonth, 1)) })] })] }));
 }
 exports.YearSkipHeader = YearSkipHeader;

package/dist/components/internal/DatePicker/WeekHeader.js

@@ -11,6 +11,6 @@ function WeekHeader() {
         days.push((0, date_fns_1.addDays)(start, i));
     }
     // Copies the existing structure and classes defined by React-Day-Picker. Adds in Beam styling and formatting.
-    return ((0, jsx_runtime_1.jsx)("thead", Object.assign({ className: "rdp-head" }, { children: (0, jsx_runtime_1.jsx)("tr", Object.assign({ className: "rdp-head_row" }, { children: days.map((day) => ((0, jsx_runtime_1.jsxs)("th", Object.assign({ scope: "col", css: Css_1.Css.p1.pbPx(12).xs.gray400.$ }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ "aria-hidden": "true" }, { children: (0, date_fns_1.format)(day, "EEEEE") }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "rdp-vhidden" }, { children: (0, date_fns_1.format)(day, "EEEE") }), void 0)] }), (0, date_fns_1.format)(day, "EEEE")))) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("thead", { className: "rdp-head", children: (0, jsx_runtime_1.jsx)("tr", { className: "rdp-head_row", children: days.map((day) => ((0, jsx_runtime_1.jsxs)("th", { scope: "col", css: Css_1.Css.p1.pbPx(12).xs.gray400.$, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: (0, date_fns_1.format)(day, "EEEEE") }), (0, jsx_runtime_1.jsx)("span", { className: "rdp-vhidden", children: (0, date_fns_1.format)(day, "EEEE") })] }, (0, date_fns_1.format)(day, "EEEE")))) }) }));
 }
 exports.WeekHeader = WeekHeader;

package/dist/components/internal/DatePicker/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/components/internal/Menu.js

@@ -44,7 +44,7 @@ function Menu(props) {
         }
     }, [tree, search, contains]);
     const menuChildren = (0, react_1.useMemo)(() => {
-        return filteredTree.items.map(({ value: s }) => ((0, jsx_runtime_1.jsx)(react_stately_1.Section, Object.assign({ title: s.label, items: s.items }, { children: (item) => (0, jsx_runtime_1.jsx)(react_stately_1.Item, { children: item.label }, item.label.replace(/"/g, "")) }), s.label.replace(/"/g, ""))));
+        return filteredTree.items.map(({ value: s }) => ((0, jsx_runtime_1.jsx)(react_stately_1.Section, { title: s.label, items: s.items, children: (item) => (0, jsx_runtime_1.jsx)(react_stately_1.Item, { children: item.label }, item.label.replace(/"/g, "")) }, s.label.replace(/"/g, ""))));
     }, [filteredTree]);
     const state = (0, react_stately_1.useTreeState)({
         children: menuChildren,
@@ -57,11 +57,11 @@ function Menu(props) {
     // Bulk updates of MenuItems below. If we find this to be of sluggish performance, then we can change to be more surgical in our updating.
     // If our list of items change, update the "items" menu section. (key is based on label in `getKey` above)
     (0, react_1.useEffect)(() => filteredTree.update("items", { label: "items", items }), [items]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ 
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsxs)("div", { 
             // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport
             css: {
                 ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").overflowAuto.$,
                 "&:hover": Css_1.Css.bshHover.$,
-            } }, { children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, Object.assign({ label: "", value: search, placeholder: "Search...", inlineLabel: true, onChange: setSearch }, tid), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.$ }, menuProps, { ref: menuRef }, tid.menu, { children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, Object.assign({ section: item, state: state, onClose: onClose }, tid), item.key))) }), void 0)] }), void 0) }, void 0));
+            }, children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, { label: "", value: search, placeholder: "Search...", inlineLabel: true, onChange: setSearch, ...tid })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, { section: item, state: state, onClose: onClose, ...tid }, item.key))) })] }) }));
 }
 exports.Menu = Menu;

package/dist/components/internal/MenuItem.js

@@ -44,28 +44,28 @@ function MenuItemImpl(props) {
         },
         onClose,
     }, state, ref);
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, menuItemProps, hoverProps, { ref: ref, css: {
+    return ((0, jsx_runtime_1.jsx)("li", { ...menuItemProps, ...hoverProps, ref: ref, css: {
             ...Css_1.Css.df.aic.py1.px2.cursorPointer.outline0.mh("42px").$,
             ...(!isDisabled && isHovered ? Css_1.Css.bgGray100.$ : {}),
             ...(isFocused ? Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$ : {}),
             ...(isDisabled ? Css_1.Css.gray500.cursorNotAllowed.$ : {}),
             ...(destructive ? Css_1.Css.red600.$ : {}),
-        } }, tid[(0, defaultTestId_1.defaultTestId)(menuItem.label)], { children: maybeWrapInLink(onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, Object.assign({}, menuItem), void 0)) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, Object.assign({}, menuItem), void 0)) : (label), isDisabled) }), void 0));
+        }, ...tid[(0, defaultTestId_1.defaultTestId)(menuItem.label)], children: maybeWrapInLink(onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, { ...menuItem })) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, { ...menuItem })) : (label), isDisabled) }));
 }
 exports.MenuItemImpl = MenuItemImpl;
 function ImageMenuItem(item) {
     const { src, size = 24, label, isAvatar = false } = item;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mr2.$ }, { children: isAvatar ? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: src, name: label, size: size === 24 ? "sm" : "lg" }, void 0)) : ((0, jsx_runtime_1.jsx)("img", { width: size, src: src, css: Css_1.Css.br4.$, alt: label }, void 0)) }), void 0), label] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.mr2.$, children: isAvatar ? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: src, name: label, size: size === 24 ? "sm" : "lg" })) : ((0, jsx_runtime_1.jsx)("img", { width: size, src: src, css: Css_1.Css.br4.$, alt: label })) }), label] }));
 }
 function IconMenuItem(item) {
     const { icon, label } = item;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mr2.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0) }), void 0), label] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.mr2.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }) }), label] }));
 }
 function maybeWrapInLink(onClick, content, disabled) {
     if (disabled || typeof onClick !== "string") {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content }, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
     }
-    return (0, utils_1.isAbsoluteUrl)(onClick) ? ((0, jsx_runtime_1.jsxs)("a", Object.assign({ href: onClick, target: "_blank", rel: "noopener noreferrer", className: "navLink", css: Css_1.Css.df.jcsb.w100.$ }, { children: [content, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.ml2.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "linkExternal" }, void 0) }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.NavLink, Object.assign({ to: onClick, className: "navLink" }, { children: content }), void 0));
+    return (0, utils_1.isAbsoluteUrl)(onClick) ? ((0, jsx_runtime_1.jsxs)("a", { href: onClick, target: "_blank", rel: "noopener noreferrer", className: "navLink", css: Css_1.Css.df.jcsb.w100.$, children: [content, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.ml2.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "linkExternal" }) })] })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.NavLink, { to: onClick, className: "navLink", children: content }));
 }
 function isIconMenuItem(item) {
     return item && typeof item === "object" && "icon" in item;

package/dist/components/internal/MenuSection.js

@@ -12,6 +12,6 @@ function MenuSectionImpl(props) {
     const { separatorProps } = (0, react_aria_1.useSeparator)({ elementType: "li" });
     const isPersistentSection = section.key !== state.collection.getFirstKey();
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", Object.assign({}, separatorProps, { css: Css_1.Css.bt.bGray200.$ }), void 0), (0, jsx_runtime_1.jsx)("li", Object.assign({}, itemProps, { css: Css_1.Css.if(!isPersistentSection).overflowAuto.$ }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.$ }, groupProps, tid[isPersistentSection ? "persistentItems" : "menuItems"], { children: [...section.childNodes].map((item) => ((0, jsx_runtime_1.jsx)(internal_1.MenuItemImpl, Object.assign({ item: item, state: state, onClose: onClose }, tid), item.key))) }), void 0) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", { ...separatorProps, css: Css_1.Css.bt.bGray200.$ }), (0, jsx_runtime_1.jsx)("li", { ...itemProps, css: Css_1.Css.if(!isPersistentSection).overflowAuto.$, children: (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => ((0, jsx_runtime_1.jsx)(internal_1.MenuItemImpl, { item: item, state: state, onClose: onClose, ...tid }, item.key))) }) })] }));
 }
 exports.MenuSectionImpl = MenuSectionImpl;

package/dist/components/internal/OverlayTrigger.js

@@ -25,7 +25,7 @@ function OverlayTrigger(props) {
         offset: showActiveBorder ? 4 : undefined,
     });
     const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : isIconButton(trigger) ? trigger.icon : trigger.name);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: variant ? variant : "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen }, tid), void 0)) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen }), void 0)) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen }), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.dib.$, children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant ? variant : "secondary", ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid })) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, children: children }))] }));
 }
 exports.OverlayTrigger = OverlayTrigger;
 function isTextButton(trigger) {

package/dist/components/internal/Popover.js

@@ -26,6 +26,6 @@ function Popover(props) {
         },
         ...others,
     }, popoverRef);
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, { ...overlayProps, ...positionProps }, { ref: popoverRef }, { children: [children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: () => onClose() }, void 0)] }), void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsxs)("div", { ...{ ...overlayProps, ...positionProps }, ref: popoverRef, children: [children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: () => onClose() })] }) }));
 }
 exports.Popover = Popover;

package/dist/components/internal/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/components/testData.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { TabWithContent } from "./Tabs";
-export declare type TabValue = "tab1" | "tab2" | "tab3" | "tab4";
+export type TabValue = "tab1" | "tab2" | "tab3" | "tab4";
 export declare const testTabs: TabWithContent<TabValue>[];
 export declare function TestTabContent({ content }: {
     content: ReactNode;

package/dist/components/testData.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TestTabContent = exports.testTabs = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 exports.testTabs = [
-    { name: "Tab 1", value: "tab1", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 1 Content" }, void 0) },
-    { name: "Tab 2", value: "tab2", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 2 Content" }, void 0) },
-    { name: "Tab 3", value: "tab3", disabled: true, render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 3 Content" }, void 0) },
-    { name: "Tab 4", value: "tab4", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 4 Content" }, void 0) },
+    { name: "Tab 1", value: "tab1", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 1 Content" }) },
+    { name: "Tab 2", value: "tab2", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 2 Content" }) },
+    { name: "Tab 3", value: "tab3", disabled: true, render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 3 Content" }) },
+    { name: "Tab 4", value: "tab4", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 4 Content" }) },
 ];
 function TestTabContent({ content }) {
-    return (0, jsx_runtime_1.jsx)("div", { children: content }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { children: content });
 }
 exports.TestTabContent = TestTabContent;

package/dist/forms/BoundCheckboxField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { CheckboxProps } from "../inputs";
-export declare type BoundCheckboxFieldProps = Omit<CheckboxProps, "selected" | "onChange" | "label"> & {
+export type BoundCheckboxFieldProps = Omit<CheckboxProps, "selected" | "onChange" | "label"> & {
     field: FieldState<any, boolean | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (values: boolean) => void;

package/dist/forms/BoundCheckboxField.js

@@ -12,7 +12,7 @@ function BoundCheckboxField(props) {
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.Checkbox, Object.assign({ label: label, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
+            return ((0, jsx_runtime_1.jsx)(inputs_1.Checkbox, { label: label, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
                     // We are triggering blur manually for checkbox fields due to its transactional nature
                     onChange(selected);
                     field.maybeAutoSave();
@@ -22,7 +22,7 @@ function BoundCheckboxField(props) {
                 }, onBlur: () => {
                     field.blur();
                     (0, utils_1.maybeCall)(onBlur);
-                }, disabled: disabled || field.readOnly }, testId, others), void 0));
-        } }, void 0));
+                }, disabled: disabled || field.readOnly, ...testId, ...others }));
+        } }));
 }
 exports.BoundCheckboxField = BoundCheckboxField;

package/dist/forms/BoundCheckboxGroupField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { CheckboxGroupProps } from "../inputs";
-export declare type BoundCheckboxGroupFieldProps = Omit<CheckboxGroupProps, "values" | "onChange" | "label"> & {
+export type BoundCheckboxGroupFieldProps = Omit<CheckboxGroupProps, "values" | "onChange" | "label"> & {
     field: FieldState<any, string[] | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (values: string[]) => void;