@homebound/beam 2.226.0 → 2.227.1

package/dist/hooks/useSessionStorage.d.ts

@@ -1,3 +1,3 @@
-declare type UseSessionStorage<T> = [T, (value: T) => void];
+type UseSessionStorage<T> = [T, (value: T) => void];
 export declare function useSessionStorage<T>(key: string, defaultValue: T): UseSessionStorage<T>;
 export {};

package/dist/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/inputs/Checkbox.js

@@ -16,6 +16,6 @@ function Checkbox(props) {
     const ref = (0, react_1.useRef)(null);
     const toggleState = (0, react_stately_1.useToggleState)(ariaProps);
     const { inputProps } = (0, react_aria_1.useCheckbox)(checkboxProps, toggleState, ref);
-    return ((0, jsx_runtime_1.jsx)(CheckboxBase_1.CheckboxBase, Object.assign({ ariaProps: ariaProps, isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, inputProps: inputProps, label: label }, otherProps), void 0));
+    return ((0, jsx_runtime_1.jsx)(CheckboxBase_1.CheckboxBase, { ariaProps: ariaProps, isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, inputProps: inputProps, label: label, ...otherProps }));
 }
 exports.Checkbox = Checkbox;

package/dist/inputs/CheckboxBase.js

@@ -16,14 +16,14 @@ function CheckboxBase(props) {
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: Css_1.Css.df.cursorPointer.relative
+    return ((0, jsx_runtime_1.jsxs)("label", { css: Css_1.Css.df.cursorPointer.relative
             // Prevents accidental checkbox clicks due to label width being longer
             // than the content.
             .w("max-content")
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$, "aria-label": label }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, (0, react_aria_1.mergeProps)(inputProps, focusProps), tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
+            .if(isDisabled).cursorNotAllowed.$, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...(0, react_aria_1.mergeProps)(inputProps, focusProps), ...tid }) }), (0, jsx_runtime_1.jsx)("span", { ...hoverProps, css: {
                     ...baseStyles,
                     ...(((isSelected && !isDisabled) || isIndeterminate) && filledBoxStyles),
                     ...(((isSelected && !isDisabled) || isIndeterminate) && isHovered && filledBoxHoverStyles),
@@ -32,10 +32,10 @@ function CheckboxBase(props) {
                     ...(isFocusVisible && focusRingStyles),
                     ...(isHovered && hoverBorderStyles),
                     ...markStyles,
-                }, "aria-hidden": "true" }, { children: markIcon }), void 0), !checkboxOnly && (
+                }, "aria-hidden": "true", children: markIcon }), !checkboxOnly && (
             // Use a mtPx(-2) to better align the label with the checkbox.
             // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
-            (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.ml1.mtPx(-2).$ }, { children: [label && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...labelStyles, ...(isDisabled && disabledColor) } }, { children: label }), void 0), description && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...descStyles, ...(isDisabled && disabledColor) } }, { children: description }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0))] }), void 0));
+            (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.ml1.mtPx(-2).$, children: [label && (0, jsx_runtime_1.jsx)("div", { css: { ...labelStyles, ...(isDisabled && disabledColor) }, children: label }), description && (0, jsx_runtime_1.jsx)("div", { css: { ...descStyles, ...(isDisabled && disabledColor) }, children: description }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }));
 }
 exports.CheckboxBase = CheckboxBase;
 const baseStyles = Css_1.Css.hPx(16).mw((0, Css_1.px)(16)).relative.ba.bGray300.br4.bgWhite.transition.$;
@@ -49,5 +49,5 @@ const hoverBorderStyles = Css_1.Css.bLightBlue900.$;
 const markStyles = { svg: Css_1.Css.absolute.topPx(-1).leftPx(-1).$ };
 const labelStyles = Css_1.Css.smMd.$;
 const descStyles = Css_1.Css.sm.gray700.$;
-const checkmarkSmall = ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "16", height: "16" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6.66669 10.3907L4.47135 8.19533L3.52869 9.138L6.66669 12.276L13.138 5.80467L12.1954 4.862L6.66669 10.3907Z", fill: Css_1.Palette.White }, void 0) }), void 0));
-const dashSmall = ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "16", height: "16" }, { children: (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: Css_1.Palette.White }, void 0) }), void 0));
+const checkmarkSmall = ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("path", { d: "M6.66669 10.3907L4.47135 8.19533L3.52869 9.138L6.66669 12.276L13.138 5.80467L12.1954 4.862L6.66669 10.3907Z", fill: Css_1.Palette.White }) }));
+const dashSmall = ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: Css_1.Palette.White }) }));

package/dist/inputs/CheckboxGroup.js

@@ -16,7 +16,7 @@ function CheckboxGroup(props) {
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { onBlur: onBlur, onFocus: onFocus }, tid, { children: [!hideLabel && (0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, tid.label), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dg.gtc(`repeat(${columns}, auto)`).gap2.$ }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(CheckboxGroupItem, Object.assign({}, option, { groupState: state, selected: state.value.includes(option.value) }), option.value))) }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, onBlur: onBlur, onFocus: onFocus, ...tid, children: [!hideLabel && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dg.gtc(`repeat(${columns}, auto)`).gap2.$, children: options.map((option) => ((0, jsx_runtime_1.jsx)(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value))) }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }));
 }
 exports.CheckboxGroup = CheckboxGroup;
 function CheckboxGroupItem(props) {
@@ -25,5 +25,5 @@ function CheckboxGroupItem(props) {
     const checkboxProps = { ...ariaProps, "aria-label": label };
     const ref = (0, react_1.useRef)(null);
     const { inputProps } = (0, react_aria_1.useCheckboxGroupItem)(checkboxProps, groupState, ref);
-    return ((0, jsx_runtime_1.jsx)(CheckboxBase_1.CheckboxBase, Object.assign({ ariaProps: ariaProps, description: description, isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, inputProps: inputProps, label: label }, otherProps), void 0));
+    return ((0, jsx_runtime_1.jsx)(CheckboxBase_1.CheckboxBase, { ariaProps: ariaProps, description: description, isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, inputProps: inputProps, label: label, ...otherProps }));
 }

package/dist/inputs/ChipSelectField.d.ts

@@ -18,13 +18,13 @@ export interface ChipSelectFieldProps<O, V extends Value> {
 export declare function ChipSelectField<O, V extends Value>(props: ChipSelectFieldProps<O, V>): JSX.Element;
 export declare function ChipSelectField<O extends HasIdAndName<V>, V extends Value>(props: Optional<ChipSelectFieldProps<O, V>, "getOptionValue" | "getOptionLabel">): JSX.Element;
 export declare const persistentItemPrefix = "persistentItem:";
-declare type PersistentItem = {
+type PersistentItem = {
     id: string;
     name: string;
 };
 export declare function isPersistentItem<T extends PersistentItem>(opt: any): opt is PersistentItem;
 export declare function isPersistentKey(key: Key): boolean;
-declare type ListBoxSection<O> = {
+type ListBoxSection<O> = {
     title: string;
     options: O[];
     isPersistent?: boolean;

package/dist/inputs/ChipSelectField.js

@@ -83,16 +83,16 @@ function ChipSelectField(props) {
     }, [options]);
     const selectChildren = (0, react_1.useMemo)(() => listData.items.map((s) => {
         if (isListBoxSection(s)) {
-            return ((0, jsx_runtime_1.jsx)(react_stately_1.Section, Object.assign({ title: s.title, items: s.options }, { children: (item) => {
+            return ((0, jsx_runtime_1.jsx)(react_stately_1.Section, { title: s.title, items: s.options, children: (item) => {
                     if (isPersistentItem(item)) {
-                        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: item.name }, { children: item.name }), item.id));
+                        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: item.name, children: item.name }, item.id));
                     }
                     const label = getOptionLabel(item);
-                    return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: label }, { children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }, void 0) }), getOptionValue(item)));
-                } }), (0, change_case_1.camelCase)(s.title)));
+                    return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: label, children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }) }, getOptionValue(item)));
+                } }, (0, change_case_1.camelCase)(s.title)));
         }
         const label = getOptionLabel(s);
-        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: label }, { children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }, void 0) }), getOptionValue(s)));
+        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: label, children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }) }, getOptionValue(s)));
     }), [listData.items, getOptionLabel, getOptionValue]);
     const selectHookProps = {
         label,
@@ -150,30 +150,30 @@ function ChipSelectField(props) {
     };
     // State management for the "Create new" flow with ChipTextField.
     const [showInput, setShowInput] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(CreateNewField, Object.assign({ onBlur: () => setShowInput(false), onEnter: async (value) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(CreateNewField, { onBlur: () => setShowInput(false), onEnter: async (value) => {
                     await onCreateNew(value);
                     setShowInput(false);
-                } }, tid.createNewField), void 0)), (0, components_1.maybeTooltip)({
+                }, ...tid.createNewField })), (0, components_1.maybeTooltip)({
                 title: (0, components_1.resolveTooltip)(disabled),
                 placement: "top",
-                children: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: wrapperRef, css: {
+                children: ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, css: {
                         ...chipStyles,
                         ...Css_1.Css.dif.relative.p0.mwPx(32).if(!value).bgGray200.$,
                         ...(visualFocus ? Css_1.Css.bshFocus.$ : {}),
                         ...(showInput ? Css_1.Css.dn.$ : {}),
-                    } }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label, labelProps: labelProps, hidden: true }, tid.label), void 0), (0, jsx_runtime_1.jsx)("button", Object.assign({}, (0, react_aria_1.mergeProps)(focusProps, buttonProps), { ref: buttonRef, css: {
+                    }, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, labelProps: labelProps, hidden: true, ...tid.label }), (0, jsx_runtime_1.jsx)("button", { ...(0, react_aria_1.mergeProps)(focusProps, buttonProps), ref: buttonRef, css: {
                                 ...Css_1.Css.tl.br16.pxPx(10).pyPx(2).outline0.if(showClearButton).prPx(4).borderRadius("16px 0 0 16px").$,
                                 ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray700.$ : {}),
                                 "&:hover:not(:disabled)": Css_1.Css.bgGray400.if(!value).bgGray300.$,
-                            }, title: state.selectedItem ? state.selectedItem.textValue : placeholder }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({}, valueProps, { css: Css_1.Css.lineClamp1.breakAll.$ }, { children: state.selectedItem ? state.selectedItem.textValue : placeholder }), void 0) }), void 0), showClearButton && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, clearFocusProps, { css: {
+                            }, title: state.selectedItem ? state.selectedItem.textValue : placeholder, ...tid, children: (0, jsx_runtime_1.jsx)("span", { ...valueProps, css: Css_1.Css.lineClamp1.breakAll.$, children: state.selectedItem ? state.selectedItem.textValue : placeholder }) }), showClearButton && ((0, jsx_runtime_1.jsx)("button", { ...clearFocusProps, css: {
                                 ...Css_1.Css.prPx(4).borderRadius("0 16px 16px 0").outline0.$,
                                 "&:hover": Css_1.Css.bgGray400.$,
                                 ...(isClearFocused ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(3,105,161,1)`).$ : {}),
                             }, onClick: () => {
                                 onSelect(undefined, undefined);
                                 setIsClearFocused(false);
-                            }, "aria-label": "Remove" }, tid.clearButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }, void 0) }), void 0))] }), void 0)),
-            }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, menuProps, { listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps }), void 0) }), void 0))] }, void 0));
+                            }, "aria-label": "Remove", ...tid.clearButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }) }))] })),
+            }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...menuProps, listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps }) }))] }));
 }
 exports.ChipSelectField = ChipSelectField;
 exports.persistentItemPrefix = "persistentItem:";
@@ -190,7 +190,7 @@ function isPersistentKey(key) {
 }
 exports.isPersistentKey = isPersistentKey;
 function isListBoxSection(obj) {
-    return typeof obj === "object" && "options" in obj;
+    return obj && typeof obj === "object" && "options" in obj;
 }
 exports.isListBoxSection = isListBoxSection;
 // Wrapper for the ChipTextField used in the "Create New" flow on ChipSelectField
@@ -198,5 +198,5 @@ function CreateNewField(props) {
     const { onBlur, onEnter } = props;
     const [value, setValue] = (0, react_1.useState)("Add new");
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsx)(ChipTextField_1.ChipTextField, Object.assign({ autoFocus: true, label: "Add new", value: value, onChange: setValue, onEnter: () => onEnter(value), onBlur: onBlur }, tid), void 0));
+    return ((0, jsx_runtime_1.jsx)(ChipTextField_1.ChipTextField, { autoFocus: true, label: "Add new", value: value, onChange: setValue, onEnter: () => onEnter(value), onBlur: onBlur, ...tid }));
 }

package/dist/inputs/ChipTextField.js

@@ -40,7 +40,7 @@ function ChipTextField(props) {
         autoFocus && ((_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, []);
     // React doesn't like contentEditable because it takes the children of the node out of React's scope. This is fine in this case as it is just a text value and we are managing it.
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ ref: fieldRef, contentEditable: true, suppressContentEditableWarning: true, "aria-required": required, "aria-label": label, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsx)("span", { ref: fieldRef, contentEditable: true, suppressContentEditableWarning: true, "aria-required": required, "aria-label": label, onKeyDown: (e) => {
             if (e.key === "Enter") {
                 e.preventDefault();
                 (0, utils_1.maybeCall)(onEnter);
@@ -54,9 +54,9 @@ function ChipTextField(props) {
             const target = e.target;
             target.textContent = (_b = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.replace(/[\n\r]/g, " ")) !== null && _b !== void 0 ? _b : "";
             onChange((_c = target.textContent) !== null && _c !== void 0 ? _c : "");
-        } }, focusProps, { css: {
+        }, ...focusProps, css: {
             ...Css_1.Css[typeScale].dib.br16.pl1.pxPx(10).pyPx(2).gray900.bgGray300.outline0.mwPx(32).$,
             ...(isFocused ? Css_1.Css.bshFocus.$ : {}),
-        } }, tid, { children: valueRef.current }), void 0));
+        }, ...tid, children: valueRef.current }));
 }
 exports.ChipTextField = ChipTextField;

package/dist/inputs/DateFields/DateField.js

@@ -4,6 +4,6 @@ exports.DateField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const DateFieldBase_1 = require("./DateFieldBase");
 function DateField(props) {
-    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, Object.assign({}, props, { mode: "single" }), void 0);
+    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, { ...props, mode: "single" });
 }
 exports.DateField = DateField;

package/dist/inputs/DateFields/DateField.mock.js

@@ -10,10 +10,10 @@ function DateField(props) {
     const { onChange = () => { }, errorMsg, onBlur, onFocus } = props;
     const [value, setValue] = (0, react_1.useState)(props.value ? (0, date_fns_1.format)(props.value, "MM/dd/yy") : "");
     const tid = (0, utils_1.useTestIds)(props, "date");
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, tid, { "data-error": !!errorMsg, value: value, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsx)("input", { ...tid, "data-error": !!errorMsg, value: value, onChange: (e) => {
             const { value } = e.target;
             setValue(value);
             onChange((0, date_fns_1.parse)(value, "MM/dd/yy", new Date()));
-        }, onBlur: () => (0, utils_1.maybeCall)(onBlur), onFocus: () => (0, utils_1.maybeCall)(onFocus), disabled: !!props.disabled, readOnly: !!props.readOnly, "data-disabled-days": JSON.stringify(props.disabledDays) }), void 0));
+        }, onBlur: () => (0, utils_1.maybeCall)(onBlur), onFocus: () => (0, utils_1.maybeCall)(onFocus), disabled: !!props.disabled, readOnly: !!props.readOnly, "data-disabled-days": JSON.stringify(props.disabledDays) }));
 }
 exports.DateField = DateField;

package/dist/inputs/DateFields/DateFieldBase.js

@@ -157,10 +157,10 @@ function DateFieldBase(props) {
     const clearButton = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inputValue !== "" && !state.isOpen && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
                 setInputValue("");
                 onChange(undefined);
-            } }, void 0)) }, void 0));
-    const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }, void 0) }), void 0));
-    const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }, void 0));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
+            } })) }));
+    const calendarButton = ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1, ...tid.calendarButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }) }));
+    const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
                     state.close();
                     if (v) {
@@ -173,17 +173,17 @@ function DateFieldBase(props) {
                     else if (v === undefined) {
                         setInputValue("");
                     }
-                }, endAdornment: !iconLeft && EndFieldButtons, startAdornment: !hideCalendarIcon && iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
+                }, endAdornment: !iconLeft && EndFieldButtons, startAdornment: !hideCalendarIcon && iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: overlayProps, children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, { range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
                             var _a;
                             // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
                             setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                             onChange(dr);
-                        }, useYearPicker: isRangeFilterField }, tid.datePicker), void 0)) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, Object.assign({ value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
+                        }, useYearPicker: isRangeFilterField, ...tid.datePicker })) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, { value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
                             var _a;
                             setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                             onChange(d);
                             state.close();
-                        } }, tid.datePicker), void 0)) }), void 0) }), void 0))] }, void 0));
+                        }, ...tid.datePicker })) }) }))] }));
 }
 exports.DateFieldBase = DateFieldBase;
 function isParsedDateValid(d) {

package/dist/inputs/DateFields/DateRangeField.js

@@ -4,6 +4,6 @@ exports.DateRangeField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const DateFieldBase_1 = require("./DateFieldBase");
 function DateRangeField(props) {
-    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, Object.assign({}, props, { mode: "range" }), void 0);
+    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, { ...props, mode: "range" });
 }
 exports.DateRangeField = DateRangeField;

package/dist/inputs/DateFields/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/inputs/DateFields/utils.d.ts

@@ -1,6 +1,6 @@
 import { DateRange } from "../../types";
-export declare type DateFieldModeTuple = readonly ["range", DateRange] | readonly ["single", Date];
-export declare type DateFieldMode = "single" | "range";
+export type DateFieldModeTuple = readonly ["range", DateRange] | readonly ["single", Date];
+export type DateFieldMode = "single" | "range";
 export declare const dateFormats: {
     short: string;
     medium: string;

package/dist/inputs/ErrorMessage.js

@@ -12,7 +12,7 @@ const Css_1 = require("../Css");
  */
 function ErrorMessage(props) {
     const { id, errorMsg, contrast = false, hidden = false, ...others } = props;
-    const errorEl = errorMsg ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.red600.sm.df.mtPx(4).if(contrast).red400.$ }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ id: id, css: Css_1.Css.ml1.mtPx(2).$ }, others, { children: errorMsg }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0));
-    return hidden ? (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: errorEl }, void 0) : errorEl;
+    const errorEl = errorMsg ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.red600.sm.df.mtPx(4).if(contrast).red400.$, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error" }) }), (0, jsx_runtime_1.jsx)("span", { id: id, css: Css_1.Css.ml1.mtPx(2).$, ...others, children: errorMsg })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+    return hidden ? (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: errorEl }) : errorEl;
 }
 exports.ErrorMessage = ErrorMessage;

package/dist/inputs/MultiSelectField.js

@@ -7,7 +7,7 @@ function MultiSelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, values, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, Object.assign({ multiselect: true }, otherProps, { options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: (values) => {
+    return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, { multiselect: true, ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: (values) => {
             const [selectedValues, selectedOptions] = options
                 .filter((o) => values.includes(getOptionValue(o)))
                 .reduce((acc, o) => {
@@ -16,6 +16,6 @@ function MultiSelectField(props) {
                 return acc;
             }, [[], []]);
             onSelect(selectedValues, selectedOptions);
-        } }), void 0));
+        } }));
 }
 exports.MultiSelectField = MultiSelectField;

package/dist/inputs/MultiSelectField.mock.js

@@ -10,7 +10,7 @@ function MultiSelectField(props) {
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
     values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, disabledOptions = [], helperText, } = props;
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, tid.label, { children: [label, (0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { 
+    return ((0, jsx_runtime_1.jsxs)("label", { ...tid.label, children: [label, (0, jsx_runtime_1.jsxs)("select", { ...tid, 
                 // We're cheating and assume the values are strings...what we should really do is either:
                 // a) use beam's valueToKey mapping to string-encode any Value, or
                 // b) instead of using `values` directly, use the index of each value's `option` in `options`
@@ -38,8 +38,8 @@ function MultiSelectField(props) {
                         onBlur();
                 }, 
                 // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
-                disabled: !!(readOnly || disabled), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
-                        return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: getOptionValue(option), disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
-                    })] }), void 0), helperText && (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.helperText, { children: helperText }), void 0)] }), void 0));
+                disabled: !!(readOnly || disabled), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly, children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }), options.map((option, i) => {
+                        return ((0, jsx_runtime_1.jsx)("option", { value: getOptionValue(option), disabled: disabledOptions.includes(getOptionValue(option)), children: getOptionLabel(option) }, i));
+                    })] }), helperText && (0, jsx_runtime_1.jsx)("div", { ...tid.helperText, children: helperText })] }));
 }
 exports.MultiSelectField = MultiSelectField;

package/dist/inputs/NumberField.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Xss } from "../Css";
-export declare type NumberFieldType = "cents" | "dollars" | "percent" | "basisPoints" | "days";
+export type NumberFieldType = "cents" | "dollars" | "percent" | "basisPoints" | "days";
 export interface NumberFieldProps {
     label: string;
     /** If set, the label will be defined as 'aria-label` on the input element */

package/dist/inputs/NumberField.js

@@ -26,7 +26,7 @@ function NumberField(props) {
         ...(numIntegerDigits !== undefined && { minimumIntegerDigits: numIntegerDigits }),
         useGrouping,
         signDisplay,
-    }), [truncate, numIntegerDigits, useGrouping, signDisplay]);
+    }), [truncate, numIntegerDigits, useGrouping, signDisplay, numFractionDigits]);
     const { locale } = (0, react_aria_1.useLocale)();
     // If formatOptions isn't memo'd, a useEffect in useNumberStateField will cause jank,
     // see: https://github.com/adobe/react-spectrum/issues/1893.
@@ -46,7 +46,7 @@ function NumberField(props) {
                             ? { style: "unit", unit: "day", unitDisplay: "long", maximumFractionDigits: 0 }
                             : {};
         return { ...defaultFormatOptions, ...typeFormat };
-    }, [type, numberFormatOptions]);
+    }, [type, numberFormatOptions, defaultFormatOptions, numFractionDigits]);
     const numberParser = (0, react_1.useMemo)(() => new number_1.NumberParser(locale, formatOptions), [locale, formatOptions]);
     const valueRef = (0, react_1.useRef)({ wip: false });
     // We can use this for both useNumberFieldState + useNumberField
@@ -86,14 +86,14 @@ function NumberField(props) {
     if (readOnly && !inputRef.current) {
         inputRef.current = document.createElement("input");
     }
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ xss: { ...alignment, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, required: required, inputProps: (0, react_aria_1.mergeProps)(inputProps, {
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { xss: { ...alignment, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, required: required, inputProps: (0, react_aria_1.mergeProps)(inputProps, {
             size: sizeToContent ? String((_a = inputProps.value) !== null && _a !== void 0 ? _a : "").length || 1 : undefined,
         }), 
         // This is called on each DOM change, to push the latest value into the field
         onChange: (rawInputValue) => {
             const parsedValue = numberParser.parse(rawInputValue || "");
             onChange(formatValue(parsedValue, factor, numFractionDigits, numIntegerDigits));
-        }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, otherProps), void 0));
+        }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), ...otherProps }));
 }
 exports.NumberField = NumberField;
 function formatValue(value, factor, numFractionDigits, numIntegerDigits) {

package/dist/inputs/RadioGroupField.js

@@ -38,7 +38,7 @@ function RadioGroupField(props) {
     const anyDescriptions = options.some((o) => !!o.description);
     return (
     // width of `max-content` is used to limit invisible label clicking
-    (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.w("max-content").maxw(anyDescriptions ? "344px" : "320px").$ }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, tid.label, { hidden: hideLabel }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, radioGroupProps, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(Radio, Object.assign({ parentId: name, option: option, state: state }, otherProps, tid[option.value]), option.value))) }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText }, void 0)] }), void 0));
+    (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w("max-content").maxw(anyDescriptions ? "344px" : "320px").$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label, hidden: hideLabel }), (0, jsx_runtime_1.jsx)("div", { ...radioGroupProps, children: options.map((option) => ((0, jsx_runtime_1.jsx)(Radio, { parentId: name, option: option, state: state, ...otherProps, ...tid[option.value] }, option.value))) }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText })] }));
 }
 exports.RadioGroupField = RadioGroupField;
 // Not meant to be standalone, but its own component so it can use hooks
@@ -51,7 +51,7 @@ function Radio(props) {
     const { inputProps } = (0, react_aria_1.useRadio)({ value, "aria-labelledby": labelId }, state, ref);
     const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled: disabled });
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: Css_1.Css.df.cursorPointer.mb1.if(disabled).add("cursor", "initial").$ }, hoverProps, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "radio", ref: ref, css: {
+    return ((0, jsx_runtime_1.jsxs)("label", { css: Css_1.Css.df.cursorPointer.mb1.if(disabled).add("cursor", "initial").$, ...hoverProps, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", ref: ref, css: {
                     ...exports.radioReset,
                     ...exports.radioDefault,
                     ...(!disabled && state.selectedValue === value ? exports.radioChecked : exports.radioUnchecked),
@@ -60,7 +60,7 @@ function Radio(props) {
                     ...(isFocusVisible ? exports.radioFocus : {}),
                     // Nudge down so the center of the circle lines up with the label text
                     ...Css_1.Css.mtPx(2).mr1.$,
-                }, disabled: disabled, "aria-labelledby": labelId }, inputProps, focusProps, others), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ id: labelId, css: Css_1.Css.smMd.gray800.if(disabled).gray400.$ }, (description ? { "aria-describedby": descriptionId } : {}), { children: label }), void 0), description && ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: descriptionId, css: Css_1.Css.sm.gray700.if(disabled).gray400.$ }, { children: description }), void 0))] }, void 0)] }), void 0));
+                }, disabled: disabled, "aria-labelledby": labelId, ...inputProps, ...focusProps, ...others }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, css: Css_1.Css.smMd.gray800.if(disabled).gray400.$, ...(description ? { "aria-describedby": descriptionId } : {}), children: label }), description && ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, css: Css_1.Css.sm.gray700.if(disabled).gray400.$, children: description }))] })] }));
 }
 const whiteCircle = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e";
 // Didn't put these in radioReset yet, are they needed?

package/dist/inputs/RichTextField.js

@@ -95,16 +95,16 @@ function RichTextField(props) {
     }, [value, readOnly, editor]);
     const { placeholder, autoFocus } = props;
     if (!readOnly) {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.w100.maxw("550px").$ }, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: {}, label: label }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.br4.bgWhite.$, ...trixCssOverrides } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: `input-${id}`, value: value }, void 0), (0, react_2.createElement)("trix-editor", {
+        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: {}, label: label }), (0, jsx_runtime_1.jsxs)("div", { css: { ...Css_1.Css.br4.bgWhite.$, ...trixCssOverrides }, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: `input-${id}`, value: value }), (0, react_2.createElement)("trix-editor", {
                             id: id,
                             input: `input-${id}`,
                             // Autofocus attribute is case sensitive since this is standard HTML
                             ...(autoFocus ? { autofocus: true } : {}),
                             ...(placeholder ? { placeholder } : {}),
-                        })] }), void 0), (0, jsx_runtime_1.jsx)(react_1.Global, { styles: [tributeOverrides] }, void 0)] }), void 0));
+                        })] }), (0, jsx_runtime_1.jsx)(react_1.Global, { styles: [tributeOverrides] })] }));
     }
     else {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.w100.maxw("550px").$ }, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bGray300.ba.$, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(value) || placeholder || "" }, "data-readonly": "true" }, void 0)] }), void 0));
+        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bGray300.ba.$, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(value) || placeholder || "" }, "data-readonly": "true" })] }));
     }
 }
 exports.RichTextField = RichTextField;

package/dist/inputs/RichTextField.mock.js

@@ -10,11 +10,11 @@ function RichTextField(props) {
     const { onBlur = () => { }, onFocus = () => { }, readOnly } = props;
     const [value, setValue] = (0, react_1.useState)(props.value || "");
     const tid = (0, utils_1.useTestIds)(props, defaultTestId(props.label || "richTextField"));
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({ type: "text", value: value, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: (e) => {
             const { value } = e.target;
             setValue(value);
             props.onChange(value, value, props.mergeTags || []);
-        }, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly }, tid), void 0));
+        }, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly, ...tid }));
 }
 exports.RichTextField = RichTextField;
 function defaultTestId(label) {

package/dist/inputs/SelectField.js

@@ -7,11 +7,11 @@ function SelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, value, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, Object.assign({}, otherProps, { options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
+    return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
             if (values.length > 0 && options.length > 0) {
                 const option = options[0];
                 onSelect(values[0], option === SelectFieldBase_1.unsetOption ? undefined : option);
             }
-        } }), void 0));
+        } }));
 }
 exports.SelectField = SelectField;

package/dist/inputs/SelectField.mock.js

@@ -18,7 +18,7 @@ function SelectField(props) {
             setOptions(maybeOptions);
         }
     }, [maybeOptions]);
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, tid.label, { children: [label, (0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value: 
+    return ((0, jsx_runtime_1.jsxs)("label", { ...tid.label, children: [label, (0, jsx_runtime_1.jsxs)("select", { ...tid, value: 
                 // @ts-ignore - allow `value` to be seen as a string
                 value !== undefined && value !== "" && currentOption ? getOptionValue(currentOption) : "", onChange: (e) => {
                     const option = options.find((o) => `${getOptionValue(o)}` === e.target.value) || options[0];
@@ -35,8 +35,8 @@ function SelectField(props) {
                         onBlur();
                 }, 
                 // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
-                disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
-                        return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
-                    })] }), void 0), helperText && (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.helperText, { children: helperText }), void 0)] }), void 0));
+                disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly, children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }), options.map((option, i) => {
+                        return ((0, jsx_runtime_1.jsx)("option", { value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)), children: getOptionLabel(option) }, i));
+                    })] }), helperText && (0, jsx_runtime_1.jsx)("div", { ...tid.helperText, children: helperText })] }));
 }
 exports.SelectField = SelectField;

package/dist/inputs/Switch.js

@@ -22,27 +22,27 @@ function Switch(props) {
     return (0, components_1.maybeTooltip)({
         title: tooltip,
         placement: "top",
-        children: ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, hoverProps, { css: {
+        children: ((0, jsx_runtime_1.jsxs)("label", { ...hoverProps, css: {
                 ...Css_1.Css.relative.cursorPointer.df.w("max-content").smMd.selectNone.$,
                 ...(labelStyle === "form" && Css_1.Css.fdc.$),
                 ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
                 ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.w("auto").sm.$),
                 ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
-            }, "aria-label": label }, { children: [!hideLabel && labelStyle === "form" && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), !hideLabel && labelStyle === "filter" && (0, jsx_runtime_1.jsx)("span", { children: label }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-hidden": "true", css: {
+            }, "aria-label": label, children: [!hideLabel && labelStyle === "form" && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), !hideLabel && labelStyle === "filter" && (0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
                         ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
                         ...(isHovered && exports.switchHoverStyles),
                         ...(isKeyboardFocus && exports.switchFocusStyles),
                         ...(isDisabled && Css_1.Css.bgGray300.$),
                         ...(isSelected && Css_1.Css.bgLightBlue700.$),
                         ...(isSelected && isHovered && exports.switchSelectedHoverStyles),
-                    } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                    }, children: (0, jsx_runtime_1.jsx)("div", { css: {
                             ...switchCircleDefaultStyles(compact),
                             ...(isDisabled && Css_1.Css.bgGray100.$),
                             ...(isSelected && switchCircleSelectedStyles(compact)),
-                        } }, { children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400 }, void 0)) }), void 0) }), void 0), !hideLabel && labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
+                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400 })) }) }), !hideLabel && labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", { css: {
                         // LineHeight is conditionally applied to handle compact version text alignment
                         ...Css_1.Css.if(compact).add("lineHeight", "1").$,
-                    } }, { children: label }), void 0)), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, inputProps, focusProps), void 0) }, void 0)] }), void 0)),
+                    }, children: label })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps }) })] })),
     });
 }
 exports.Switch = Switch;

package/dist/inputs/SwitchGroup.d.ts

@@ -1,4 +1,4 @@
-declare type GroupItem = {
+type GroupItem = {
     label: string;
     value: string;
 };

package/dist/inputs/SwitchGroup.js

@@ -19,6 +19,6 @@ function SwitchGroup(props) {
     const groupState = (0, utils_1.toGroupState)(values, onChange);
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)({ ...props, "aria-label": label }, groupState);
     const { isSelected, addValue, removeValue } = groupState;
-    return ((0, jsx_runtime_1.jsxs)("fieldset", Object.assign({}, groupProps, { children: [(0, jsx_runtime_1.jsx)("legend", Object.assign({}, labelProps, { css: Css_1.Css.sm.gray500.mb1.$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.fdc.gap2.$ }, { children: options.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { compact: compact, label: label, onChange: (isSelected) => (isSelected ? addValue(value) : removeValue(value)), selected: isSelected(value), withIcon: withIcon }, value))) }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("fieldset", { ...groupProps, children: [(0, jsx_runtime_1.jsx)("legend", { ...labelProps, css: Css_1.Css.sm.gray500.mb1.$, children: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.fdc.gap2.$, children: options.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { compact: compact, label: label, onChange: (isSelected) => (isSelected ? addValue(value) : removeValue(value)), selected: isSelected(value), withIcon: withIcon }, value))) })] }));
 }
 exports.SwitchGroup = SwitchGroup;

package/dist/inputs/TextAreaField.js

@@ -63,6 +63,6 @@ function TextAreaField(props) {
             }
             : {}),
     }, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, (0, react_aria_1.mergeProps)(otherProps, { onBlur, onFocus }), { multiline: true, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, textAreaMinHeight: preventNewLines ? 0 : undefined, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...(0, react_aria_1.mergeProps)(otherProps, { onBlur, onFocus }), multiline: true, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, textAreaMinHeight: preventNewLines ? 0 : undefined, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }));
 }
 exports.TextAreaField = TextAreaField;