@homebound/beam 2.227.0 → 2.228.0

package/dist/Css.d.ts

@@ -1,9 +1,9 @@
 import { Properties as Properties1 } from "csstype";
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
-export declare type Only<X, T> = X & Record<Exclude<keyof T, keyof X>, never>;
-export declare type Properties = Properties1<string | 0, string>;
-export declare type Typography = "tiny" | "tinyMd" | "tinySb" | "tinyBd" | "xs" | "xsMd" | "xsSb" | "xsBd" | "sm" | "smMd" | "smSb" | "smBd" | "base" | "baseMd" | "baseSb" | "baseBd" | "lg" | "lgMd" | "lgSb" | "lgBd" | "xl" | "xlMd" | "xlSb" | "xlBd" | "xl2" | "xl2Md" | "xl2Sb" | "xl2Bd" | "xl3" | "xl3Md" | "xl3Sb" | "xl3Bd" | "xl4" | "xl4Md" | "xl4Sb" | "xl4Bd" | "xl5" | "xl5Md" | "xl5Sb" | "xl5Bd";
-declare type Opts<T> = {
+export type Only<X, T> = X & Record<Exclude<keyof T, keyof X>, never>;
+export type Properties = Properties1<string | 0, string>;
+export type Typography = "tiny" | "tinyMd" | "tinySb" | "tinyBd" | "xs" | "xsMd" | "xsSb" | "xsBd" | "sm" | "smMd" | "smSb" | "smBd" | "base" | "baseMd" | "baseSb" | "baseBd" | "lg" | "lgMd" | "lgSb" | "lgBd" | "xl" | "xlMd" | "xlSb" | "xlBd" | "xl2" | "xl2Md" | "xl2Sb" | "xl2Bd" | "xl3" | "xl3Md" | "xl3Sb" | "xl3Bd" | "xl4" | "xl4Md" | "xl4Sb" | "xl4Bd" | "xl5" | "xl5Md" | "xl5Sb" | "xl5Bd";
+type Opts<T> = {
     rules: T;
     enabled: boolean;
     important: boolean;
@@ -3838,13 +3838,13 @@ export declare enum Palette {
     Violet900 = "rgba(100,78,116,1)"
 }
 /** A shortcut for defining Xss types. */
-export declare type Xss<P extends keyof Properties> = Pick<Properties, P>;
+export type Xss<P extends keyof Properties> = Pick<Properties, P>;
 /** An entry point for Css expressions. CssBuilder is immutable so this is safe to share. */
 export declare const Css: CssBuilder<{}>;
-export declare type Margin = "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft";
-export declare type Padding = "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft";
-export declare type Font = "fontSize" | "fontWeight" | "lineHeight";
-export declare type Breakpoint = "print" | "sm" | "md" | "smOrMd" | "mdAndUp" | "mdAndDown" | "lg" | "mdOrLg";
+export type Margin = "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft";
+export type Padding = "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft";
+export type Font = "fontSize" | "fontWeight" | "lineHeight";
+export type Breakpoint = "print" | "sm" | "md" | "smOrMd" | "mdAndUp" | "mdAndDown" | "lg" | "mdOrLg";
 export declare enum Breakpoints {
     print = "@media print",
     sm = "@media screen and (max-width:599px)",

package/dist/components/Accordion.d.ts

@@ -17,4 +17,4 @@ export interface AccordionProps {
     setExpandedIndex?: Dispatch<SetStateAction<number | undefined>>;
 }
 export declare function Accordion(props: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare type AccordionSize = "xs" | "sm" | "md" | "lg";
+export type AccordionSize = "xs" | "sm" | "md" | "lg";

package/dist/components/Accordion.js

@@ -36,10 +36,10 @@ function Accordion(props) {
         }
     }, [expanded, setContentHeight]);
     (0, utils_1.useResizeObserver)({ ref: contentRef, onResize });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, testIds.container, { css: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...testIds.container, css: {
             ...Css_1.Css.bGray300.if(topBorder).bt.if(bottomBorder).bb.$,
             ...(size ? Css_1.Css.wPx(accordionSizes[size]).$ : {}),
-        } }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({}, testIds.title, focusProps, { "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: {
+        }, children: [(0, jsx_runtime_1.jsxs)("button", { ...testIds.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: {
                     ...Css_1.Css.df.jcsb.gap2.aic.w100.p2.baseMd.outline("none").addIn(":hover", Css_1.Css.bgGray100.$).$,
                     ...(disabled && Css_1.Css.gray500.$),
                     ...(isFocusVisible && Css_1.Css.boxShadow(`inset 0 0 0 2px ${Css_1.Palette.LightBlue700}`).$),
@@ -47,10 +47,10 @@ function Accordion(props) {
                     setExpanded(!expanded);
                     if (setExpandedIndex)
                         setExpandedIndex(index);
-                } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: title }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
+                }, children: [(0, jsx_runtime_1.jsx)("span", { children: title }), (0, jsx_runtime_1.jsx)("span", { css: {
                             transition: "transform 250ms linear",
                             transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: Css_1.Css.overflowHidden.h(contentHeight).add("transition", "height 250ms ease-in-out").$ }, { children: expanded && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.px2.pb2.pt1.$, ref: contentRef }, testIds.content, { children: children }), void 0)) }), void 0)] }), void 0));
+                        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "chevronDown" }) })] }), (0, jsx_runtime_1.jsx)("div", { ...testIds.details, id: id, "aria-hidden": !expanded, css: Css_1.Css.overflowHidden.h(contentHeight).add("transition", "height 250ms ease-in-out").$, children: expanded && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.px2.pb2.pt1.$, ref: contentRef, ...testIds.content, children: children })) })] }));
 }
 exports.Accordion = Accordion;
 const accordionSizes = {

package/dist/components/AccordionList.js

@@ -10,6 +10,6 @@ function AccordionList(props) {
     const { accordions, size, allowMultipleExpanded = true } = props;
     const [expandedIndex, setExpandedIndex] = (0, react_2.useState)(accordions.findIndex((a) => a.defaultExpanded));
     const tid = (0, __1.useTestIds)(props, "accordionList");
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accordions.map((accordionProps, index, arr) => ((0, react_1.createElement)(Accordion_1.Accordion, { ...accordionProps, ...tid, key: index, size: size, bottomBorder: index === arr.length - 1, defaultExpanded: !allowMultipleExpanded && expandedIndex === index, index: index, setExpandedIndex: setExpandedIndex }))) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accordions.map((accordionProps, index, arr) => ((0, react_1.createElement)(Accordion_1.Accordion, { ...accordionProps, ...tid, key: index, size: size, bottomBorder: index === arr.length - 1, defaultExpanded: !allowMultipleExpanded && expandedIndex === index, index: index, setExpandedIndex: setExpandedIndex }))) }));
 }
 exports.AccordionList = AccordionList;

package/dist/components/AutoSaveIndicator.js

@@ -21,11 +21,11 @@ function AutoSaveIndicator({ hideOnIdle, doNotReset }) {
     }, []);
     switch (status) {
         case form_state_1.AutoSaveStatus.IDLE:
-            return hideOnIdle ? null : (0, jsx_runtime_1.jsx)(Indicator, { icon: "cloudSave" }, void 0);
+            return hideOnIdle ? null : (0, jsx_runtime_1.jsx)(Indicator, { icon: "cloudSave" });
         case form_state_1.AutoSaveStatus.SAVING:
-            return (0, jsx_runtime_1.jsx)(Indicator, { icon: "refresh", text: "Saving..." }, void 0);
+            return (0, jsx_runtime_1.jsx)(Indicator, { icon: "refresh", text: "Saving..." });
         case form_state_1.AutoSaveStatus.DONE:
-            return (0, jsx_runtime_1.jsx)(Indicator, { icon: "cloudSave", text: "Saved" }, void 0);
+            return (0, jsx_runtime_1.jsx)(Indicator, { icon: "cloudSave", text: "Saved" });
         case form_state_1.AutoSaveStatus.ERROR:
             return (
             /**
@@ -33,12 +33,12 @@ function AutoSaveIndicator({ hideOnIdle, doNotReset }) {
              * rendering it far away from the Icon/Text. Wrap it with a div to constrain
              * it.
              */
-            (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dif.$ }, { children: (0, jsx_runtime_1.jsx)(_1.Tooltip, Object.assign({ title: String(errors), placement: "bottom" }, { children: (0, jsx_runtime_1.jsx)(Indicator, { icon: "error", color: Css_1.Palette.Red500, text: "Error saving" }, void 0) }), void 0) }), void 0));
+            (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dif.$, children: (0, jsx_runtime_1.jsx)(_1.Tooltip, { title: String(errors), placement: "bottom", children: (0, jsx_runtime_1.jsx)(Indicator, { icon: "error", color: Css_1.Palette.Red500, text: "Error saving" }) }) }));
         default:
             (0, types_1.assertNever)(status);
     }
 }
 exports.AutoSaveIndicator = AutoSaveIndicator;
 function Indicator({ text, icon, color }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": "autoSave", css: Css_1.Css.df.gap1.aic.gray700.smMd.$ }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, color: color }, void 0), text] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "autoSave", css: Css_1.Css.df.gap1.aic.gray700.smMd.$, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, color: color }), text] }));
 }

package/dist/components/Avatar.d.ts

@@ -5,4 +5,4 @@ export interface AvatarProps {
     showName?: boolean;
 }
 export declare function Avatar({ src, name, size, showName, ...others }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";

package/dist/components/Avatar.js

@@ -11,8 +11,8 @@ function Avatar({ src, name, size = "md", showName = false, ...others }) {
     const px = sizeToPixel[size];
     const [showFallback, setShowFallback] = (0, react_1.useState)(src === undefined);
     const styles = Css_1.Css.br100.wPx(px).hPx(px).overflowHidden.$;
-    const img = showFallback ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...styles, ...Css_1.Css[sizeToFallbackTypeScale[size]].bgGray400.gray100.df.aic.jcc.$ } }, tid, { children: name ? nameToInitials(name) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "userCircle", inc: sizeToIconInc[size] }, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: name, css: { ...styles, ...Css_1.Css.objectCover.$ }, onError: () => setShowFallback(true), loading: "lazy" }, tid), void 0));
-    return showName && name ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$ }, { children: [img, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css[sizeToTypeScale[size]].$ }, { children: name }), void 0)] }), void 0)) : (img);
+    const img = showFallback ? ((0, jsx_runtime_1.jsx)("div", { css: { ...styles, ...Css_1.Css[sizeToFallbackTypeScale[size]].bgGray400.gray100.df.aic.jcc.$ }, ...tid, children: name ? nameToInitials(name) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) })) : ((0, jsx_runtime_1.jsx)("img", { src: src, alt: name, css: { ...styles, ...Css_1.Css.objectCover.$ }, onError: () => setShowFallback(true), loading: "lazy", ...tid }));
+    return showName && name ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$, children: [img, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[sizeToTypeScale[size]].$, children: name })] })) : (img);
 }
 exports.Avatar = Avatar;
 const sizeToPixel = {

package/dist/components/AvatarButton.js

@@ -44,7 +44,7 @@ function AvatarButton(props) {
     return (0, components_1.maybeTooltip)({
         title: (0, components_1.resolveTooltip)(disabled, tooltip),
         placement: "top",
-        children: (0, getInteractiveElement_1.getButtonOrLink)((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, Object.assign({}, avatarProps, tid), void 0), onPress, buttonAttrs, openInNew),
+        children: (0, getInteractiveElement_1.getButtonOrLink)((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { ...avatarProps, ...tid }), onPress, buttonAttrs, openInNew),
     });
 }
 exports.AvatarButton = AvatarButton;

package/dist/components/BeamContext.js

@@ -61,7 +61,7 @@ function BeamProvider({ children, ...presentationProps }) {
             sdHeaderDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
-    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsx)(Layout_1.RightPaneProvider, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)(SnackbarContext_1.SnackbarProvider, { children: (0, jsx_runtime_1.jsxs)(ToastContext_1.ToastProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }, void 0) }, void 0) }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, { value: { ...context }, children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { ...presentationProps, children: (0, jsx_runtime_1.jsx)(Layout_1.RightPaneProvider, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)(SnackbarContext_1.SnackbarProvider, { children: (0, jsx_runtime_1.jsxs)(ToastContext_1.ToastProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...modalRef.current })] }), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {})] }) }) }) }) }) }));
 }
 exports.BeamProvider = BeamProvider;
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */

package/dist/components/Button.d.ts

@@ -21,5 +21,5 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     labelInFlight?: string;
 }
 export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare type ButtonSize = "sm" | "md" | "lg";
-export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "danger" | "text";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "danger" | "text";

package/dist/components/Button.js

@@ -38,7 +38,7 @@ function Button(props) {
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
     const { baseStyles, hoverStyles, disabledStyles, pressedStyles, focusStyles } = (0, react_1.useMemo)(() => getButtonStyles(variant, size, contrast), [variant, size, contrast]);
-    const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)(components_1.Icon, { xss: iconStyles[size], icon: icon }, void 0), labelInFlight && asyncInProgress ? labelInFlight : label, (endAdornment || asyncInProgress) && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: asyncInProgress ? (0, jsx_runtime_1.jsx)(components_1.Loader, { size: "xs", contrast: contrast }, void 0) : endAdornment }), void 0))] }, void 0));
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)(components_1.Icon, { xss: iconStyles[size], icon: icon }), labelInFlight && asyncInProgress ? labelInFlight : label, (endAdornment || asyncInProgress) && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.ml1.$, children: asyncInProgress ? (0, jsx_runtime_1.jsx)(components_1.Loader, { size: "xs", contrast: contrast }) : endAdornment }))] }));
     const buttonAttrs = {
         ref: ref,
         ...buttonProps,

package/dist/components/ButtonDatePicker.js

@@ -16,9 +16,9 @@ function ButtonDatePicker(props) {
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: menuProps }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: menuProps, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...datePickerProps, onSelect: (d) => {
                     onSelect(d);
                     state.close();
-                } }, tid.datePicker), void 0) }), void 0) }), void 0));
+                }, ...tid.datePicker }) }) }));
 }
 exports.ButtonDatePicker = ButtonDatePicker;

package/dist/components/ButtonGroup.d.ts

@@ -6,7 +6,7 @@ export interface ButtonGroupProps {
     disabled?: boolean;
     size?: ButtonGroupSize;
 }
-export declare type ButtonGroupButton = {
+export type ButtonGroupButton = {
     icon?: IconProps["icon"];
     text?: string;
     onClick?: VoidFunction;
@@ -18,5 +18,5 @@ export declare type ButtonGroupButton = {
     tooltip?: ReactNode;
 };
 export declare function ButtonGroup(props: ButtonGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare type ButtonGroupSize = "xs" | "sm" | "md";
+type ButtonGroupSize = "xs" | "sm" | "md";
 export {};

package/dist/components/ButtonGroup.js

@@ -14,9 +14,9 @@ function ButtonGroup(props) {
     const tid = (0, utils_1.useTestIds)(props, "buttonGroup");
     return (
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
-    (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid, { css: Css_1.Css.df.lh(0).add(sizeStyles[size]).$ }, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
+    (0, jsx_runtime_1.jsx)("div", { ...tid, css: Css_1.Css.df.lh(0).add(sizeStyles[size]).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
         // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
-        (0, jsx_runtime_1.jsx)(GroupButton, Object.assign({}, buttonProps, { disabled: disabled || buttonDisabled, size: size }, tid), i))) }), void 0));
+        (0, jsx_runtime_1.jsx)(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size: size, ...tid }, i))) }));
 }
 exports.ButtonGroup = ButtonGroup;
 function GroupButton(props) {
@@ -28,18 +28,18 @@ function GroupButton(props) {
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: getButtonStyles() }, { children: (0, Tooltip_1.maybeTooltip)({
+    return ((0, jsx_runtime_1.jsx)("span", { css: getButtonStyles(), children: (0, Tooltip_1.maybeTooltip)({
             title: (0, Tooltip_1.resolveTooltip)(disabled, tooltip),
             placement: "top",
-            children: ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, focusProps, hoverProps, { css: {
+            children: ((0, jsx_runtime_1.jsxs)("button", { ref: ref, ...buttonProps, ...focusProps, ...hoverProps, css: {
                     ...Css_1.Css.buttonBase.px2.br0.h100.$,
                     "&:disabled": Css_1.Css.gray400.cursorNotAllowed.bGray300.$,
                     ...(isFocusVisible ? defaultFocusRingStyles : {}),
                     ...(active ? activeStyles : {}),
                     ...(isPressed ? pressedStyles : isHovered ? hoverStyles : {}),
                     ...(icon ? iconStyles[size] : {}),
-                } }, tid[(0, defaultTestId_1.defaultTestId)((_a = text !== null && text !== void 0 ? text : icon) !== null && _a !== void 0 ? _a : "button")], { children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0), text] }), void 0)),
-        }) }), void 0));
+                }, ...tid[(0, defaultTestId_1.defaultTestId)((_a = text !== null && text !== void 0 ? text : icon) !== null && _a !== void 0 ? _a : "button")], children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }), text] })),
+        }) }));
 }
 const pressedStyles = Css_1.Css.bgGray200.$;
 const activeStyles = Css_1.Css.bgGray300.$;

package/dist/components/ButtonMenu.d.ts

@@ -7,22 +7,22 @@ interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placeme
     defaultOpen?: boolean;
 }
 export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare type MenuItemBase = {
+type MenuItemBase = {
     label: string;
     onClick: string | VoidFunction;
     disabled?: boolean;
     destructive?: boolean;
 };
-export declare type IconMenuItemType = MenuItemBase & {
+export type IconMenuItemType = MenuItemBase & {
     icon: IconProps["icon"];
 };
-export declare type ImageMenuItemType = MenuItemBase & {
+export type ImageMenuItemType = MenuItemBase & {
     src: string;
     size?: 24 | 48;
     isAvatar?: boolean;
 };
-export declare type MenuItem = MenuItemBase | IconMenuItemType | ImageMenuItemType;
-export declare type MenuSection = MenuItem & {
+export type MenuItem = MenuItemBase | IconMenuItemType | ImageMenuItemType;
+export type MenuSection = MenuItem & {
     items?: MenuItem[];
 };
 export {};

package/dist/components/ButtonMenu.js

@@ -14,6 +14,6 @@ function ButtonMenu(props) {
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, Object.assign({ ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable }, tid), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable, ...tid }) }));
 }
 exports.ButtonMenu = ButtonMenu;

package/dist/components/ButtonModal.js

@@ -14,6 +14,6 @@ function ButtonModal(props) {
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(ContextualModal_1.ContextualModal, { content: content, title: title, close: state.close }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(ContextualModal_1.ContextualModal, { content: content, title: title, close: state.close }) }));
 }
 exports.ButtonModal = ButtonModal;

package/dist/components/Chip.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Margin, Only, Xss } from "../Css";
-declare type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral";
+type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral";
 export declare const ChipTypes: Record<ChipType, ChipType>;
 export interface ChipProps<X> {
     text: string;

package/dist/components/Chip.js

@@ -23,11 +23,11 @@ function Chip({ type = exports.ChipTypes.neutral, ...props }) {
     return (0, Tooltip_1.maybeTooltip)({
         title,
         placement: "bottom",
-        children: ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
+        children: ((0, jsx_runtime_1.jsx)("span", { css: {
                 ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.$,
                 ...typeStyles[type],
                 ...xss,
-            } }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0)),
+            }, ...tid, children: (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp1.breakAll.$, children: text }) })),
     });
 }
 exports.Chip = Chip;

package/dist/components/Chips.d.ts

@@ -1,5 +1,5 @@
 import { Margin, Only, Xss } from "../Css";
-declare type ChipsXss = Xss<Margin>;
+type ChipsXss = Xss<Margin>;
 export interface ChipValue {
     text: string;
     title: string;

package/dist/components/Chips.js

@@ -9,13 +9,13 @@ const Css_1 = require("../Css");
 function Chips(props) {
     const { wrap } = (0, PresentationContext_1.usePresentationContext)();
     const { values, xss = {} } = props;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsx)("div", { css: {
             ...Css_1.Css.df.aifs.gap1.whiteSpace("normal").$,
             ...(wrap !== false ? Css_1.Css.add({ flexWrap: "wrap" }).$ : {}),
             ...xss,
-        } }, { children: values.map((value, i) => {
+        }, children: values.map((value, i) => {
             const { text, title } = (value.hasOwnProperty("text") ? value : { text: value });
             return (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: text, title: title }, i);
-        }) }), void 0));
+        }) }));
 }
 exports.Chips = Chips;

package/dist/components/Copy.js

@@ -4,9 +4,9 @@ exports.Copy = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Css_1 = require("../Css");
 function Copy(props) {
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsx)("div", { css: {
             ...Css_1.Css.sm.gray700.mt2.mb3.wPx(480).$,
             "& > p": Css_1.Css.my2.$,
-        } }, { children: props.children }), void 0));
+        }, children: props.children }));
 }
 exports.Copy = Copy;

package/dist/components/CssReset.js

@@ -8,7 +8,7 @@ const Css_1 = require("../Css");
  * Applies a CSS Reset that is based on modern-normalize + TW customizations.
  */
 function CssReset() {
-    return (0, jsx_runtime_1.jsx)(react_1.Global, { styles: [modernNormalizeReset, tailwindPreflightReset, ourReset] }, void 0);
+    return (0, jsx_runtime_1.jsx)(react_1.Global, { styles: [modernNormalizeReset, tailwindPreflightReset, ourReset] });
 }
 exports.CssReset = CssReset;
 // Certain `a` tags in the app we want to opt-out of the default `a` / `a:visited` look

package/dist/components/Filters/BooleanFilter.d.ts

@@ -1,5 +1,5 @@
 import { Filter } from "./types";
-export declare type BooleanOption = [boolean | undefined, string];
+export type BooleanOption = [boolean | undefined, string];
 export interface BooleanFilterProps {
     options?: BooleanOption[];
     label?: string;

package/dist/components/Filters/BooleanFilter.js

@@ -12,13 +12,13 @@ class BooleanFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
         // Our options are a list of tuples
         const { options = defaultBooleanOptions, label, defaultValue, ...props } = this.props;
-        return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, Object.assign({}, props, { compact: !vertical, label: this.label, 
+        return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { ...props, compact: !vertical, label: this.label, 
             // We use `String(value)` so that `undefined` becomes "undefined"
-            value: String(value), hideLabel: inModal, inlineLabel: !inModal && !vertical, sizeToContent: !inModal && !vertical, options: options, getOptionValue: (o) => String(o[0]), getOptionLabel: (o) => o[1], onSelect: (value) => {
+            value: String(value), labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, options: options, getOptionValue: (o) => String(o[0]), getOptionLabel: (o) => o[1], onSelect: (value) => {
                 // Change our string "true" / "false" / "undefined" back to boolean | undefined
                 const parsedValue = value === "undefined" ? undefined : value === "true";
                 setValue(parsedValue);
-            } }, this.testId(tid)), void 0));
+            }, ...this.testId(tid) }));
     }
 }
 const defaultBooleanOptions = [

package/dist/components/Filters/DateFilter.d.ts

@@ -1,14 +1,14 @@
 import { Key } from "react";
 import { Filter } from "./types";
 import { Value } from "../../inputs";
-export declare type DateFilterProps<O, V extends Value, DV extends DateFilterValue<V>> = {
+export type DateFilterProps<O, V extends Value, DV extends DateFilterValue<V>> = {
     label: string;
     operations: O[];
     getOperationValue: (o: O) => V;
     getOperationLabel: (o: O) => string;
     defaultValue?: DV;
 };
-export declare type DateFilterValue<V extends Value> = {
+export type DateFilterValue<V extends Value> = {
     op: V;
     value: Date;
 };

package/dist/components/Filters/DateFilter.js

@@ -16,12 +16,12 @@ const anyOption = {};
 class DateFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
         const { label, operations, getOperationValue, getOperationLabel } = this.props;
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), (0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, { children: [(0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ compact: true, sizeToContent: true, options: [
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, { children: [(0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, sizeToContent: true, options: [
                                 // Always show the 'Any' option
                                 anyOption,
                                 ...operations,
                             ], getOptionValue: (o) => (o === anyOption ? undefined : getOperationValue(o)), getOptionLabel: (o) => (o === anyOption ? "Any" : getOperationLabel(o)), value: value === null || value === void 0 ? void 0 : value.op, onSelect: (op) => 
                             // default the selected date to today if it doesn't exist in the filter's value
-                            setValue(op ? { op, value: (value === null || value === void 0 ? void 0 : value.value) ? new Date(value.value) : new Date() } : undefined), label: inModal ? `${label} date filter operation` : label, inlineLabel: !inModal && !vertical, hideLabel: inModal || vertical, nothingSelectedText: "Any" }, tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateOperation`]), void 0), (0, jsx_runtime_1.jsx)(inputs_1.DateField, Object.assign({ compact: true, inlineLabel: true, value: (value === null || value === void 0 ? void 0 : value.value) ? new Date(value.value) : new Date(), label: "Date", onChange: (d) => setValue({ ...value, value: d }), disabled: !value }, tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateField`]), void 0)] }, void 0)] }, void 0));
+                            setValue(op ? { op, value: (value === null || value === void 0 ? void 0 : value.value) ? new Date(value.value) : new Date() } : undefined), label: inModal ? `${label} date filter operation` : label, labelStyle: !inModal && !vertical ? "inline" : inModal || vertical ? "hidden" : "above", nothingSelectedText: "Any", ...tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateOperation`] }), (0, jsx_runtime_1.jsx)(inputs_1.DateField, { compact: true, labelStyle: "inline", value: (value === null || value === void 0 ? void 0 : value.value) ? new Date(value.value) : new Date(), label: "Date", onChange: (d) => setValue({ ...value, value: d }), disabled: !value, ...tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateField`] })] })] }));
     }
 }

package/dist/components/Filters/DateRangeFilter.d.ts

@@ -3,14 +3,14 @@ import { Matcher } from "react-day-picker";
 import { Filter } from "./types";
 import { Value } from "../../inputs";
 import { DateRange } from "../../types";
-export declare type DateRangeFilterProps<V extends Value, DV extends DateRangeFilterValue<V>> = {
+export type DateRangeFilterProps<V extends Value, DV extends DateRangeFilterValue<V>> = {
     label: string;
     defaultValue?: DV;
     placeholderText?: string;
     disabledDays?: Matcher | Matcher[];
     testFieldLabel?: string;
 };
-export declare type DateRangeFilterValue<V extends Value> = {
+export type DateRangeFilterValue<V extends Value> = {
     op: V;
     value: DateRange | undefined;
 };

package/dist/components/Filters/DateRangeFilter.js

@@ -13,10 +13,10 @@ exports.dateRangeFilter = dateRangeFilter;
 class DateRangeFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
         const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), (0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, Object.assign({ compact: true, inlineLabel: true, isRangeFilterField: true, placeholder: placeholderText, label: testFieldLabel !== null && testFieldLabel !== void 0 ? testFieldLabel : "Date", 
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, { compact: true, labelStyle: "inline", isRangeFilterField: true, placeholder: placeholderText, label: testFieldLabel !== null && testFieldLabel !== void 0 ? testFieldLabel : "Date", 
                     // Making sure that DateRange is Date type and not string before passing. Will never have undefined from/to
                     value: (value === null || value === void 0 ? void 0 : value.value)
                         ? { from: new Date(value.value.from), to: new Date(value.value.to) }
-                        : undefined, onChange: (d) => (d ? setValue({ op: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.op, value: d }) : setValue(undefined)), disabledDays: disabledDays }, tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateField`]), void 0)] }, void 0));
+                        : undefined, onChange: (d) => (d ? setValue({ op: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.op, value: d }) : setValue(undefined)), disabledDays: disabledDays, ...tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateField`] })] }));
     }
 }

package/dist/components/Filters/FilterModal.js

@@ -14,16 +14,16 @@ function FilterModal(props) {
     const { closeModal } = (0, Modal_1.useModal)();
     // Local copy of the filter that we'll use to manage the modal's state separate from the rest of the Filter
     const [modalFilter, setModalFilter] = (0, react_1.useState)(filter);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "More Filters" }, void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.fdc.$ }, { children: (0, utils_1.safeEntries)(filters).map(([key, f]) => ((0, jsx_runtime_1.jsx)(ModalFilterItem, Object.assign({ label: f.hideLabelInModal ? undefined : f.label }, { children: f.render(modalFilter[key], (value) => setModalFilter((0, Filters_1.updateFilter)(modalFilter, key, value)), testId, true, false) }), key))) }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcsb.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Clear", variant: "tertiary", disabled: (0, utils_1.safeKeys)(filters).filter((fk) => modalFilter[fk] !== undefined).length === 0, onClick: () => 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "More Filters" }), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.fdc.$, children: (0, utils_1.safeEntries)(filters).map(([key, f]) => ((0, jsx_runtime_1.jsx)(ModalFilterItem, { label: f.hideLabelInModal ? undefined : f.label, children: f.render(modalFilter[key], (value) => setModalFilter((0, Filters_1.updateFilter)(modalFilter, key, value)), testId, true, false) }, key))) }) }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: Css_1.Css.jcsb.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", variant: "tertiary", disabled: (0, utils_1.safeKeys)(filters).filter((fk) => modalFilter[fk] !== undefined).length === 0, onClick: () => 
                         // Only remove the filters keys that exist in the modal.
-                        setModalFilter((0, utils_1.safeKeys)(filters).reduce((acc, fk) => (0, utils_1.omitKey)(fk, acc), modalFilter)) }, testId.modalClear), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Cancel", variant: "tertiary", onClick: closeModal }, testId.modalClose), void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Apply", onClick: () => {
+                        setModalFilter((0, utils_1.safeKeys)(filters).reduce((acc, fk) => (0, utils_1.omitKey)(fk, acc), modalFilter)), ...testId.modalClear }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", variant: "tertiary", onClick: closeModal, ...testId.modalClose }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: () => {
                                     onApply(modalFilter);
                                     closeModal();
-                                } }, testId.modalApply), void 0)] }), void 0)] }), void 0)] }, void 0));
+                                }, ...testId.modalApply })] })] })] }));
 }
 exports.FilterModal = FilterModal;
 // Wraps a filter component to be displayed in the Filter Modal
 function ModalFilterItem({ label, children }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mb4.if(!label).bt.bGray200.$ }, { children: [label && (0, jsx_runtime_1.jsx)("h2", Object.assign({ css: Css_1.Css.baseMd.mb2.$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.if(!label).pt3.$ }, { children: children }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mb4.if(!label).bt.bGray200.$, children: [label && (0, jsx_runtime_1.jsx)("h2", { css: Css_1.Css.baseMd.mb2.$, children: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(!label).pt3.$, children: children })] }));
 }
 exports.ModalFilterItem = ModalFilterItem;

package/dist/components/Filters/Filters.d.ts

@@ -1,6 +1,6 @@
 import { FilterDefs } from "./";
 import { Value } from "../../inputs/Value";
-interface FilterProps<F, G extends Value = string> {
+interface FilterProps<F extends Record<string, unknown>, G extends Value = string> {
     /** List of filters */
     filterDefs: FilterDefs<F>;
     /** The current filter value. */
@@ -23,6 +23,6 @@ interface FilterProps<F, G extends Value = string> {
     /** Specifies the number of in line filters before more filters modal  */
     numberOfInlineFilters?: number;
 }
-declare function Filters<F, G extends Value = string>(props: FilterProps<F, G>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Filters<F extends Record<string, unknown>, G extends Value = string>(props: FilterProps<F, G>): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const _Filters: typeof Filters;
 export { _Filters as Filters };

package/dist/components/Filters/Filters.js

@@ -20,22 +20,22 @@ function Filters(props) {
         if (!vertical && impls.length > numberOfInlineFilters) {
             // Then return up to the numberOfInlineFilters, and the remainder in the modal.
             return [
-                Object.fromEntries(impls.slice(0, numberOfInlineFilters)),
-                Object.fromEntries(impls.slice(numberOfInlineFilters)),
+                Object.fromEntries(impls.slice(0, numberOfInlineFilters - 1)),
+                Object.fromEntries(impls.slice(numberOfInlineFilters - 1)),
             ];
         }
         // Otherwise, we don't have enough to show the modal, so only use page filter keys
         return [Object.fromEntries(impls), {}];
-    }, [numberOfInlineFilters, filterDefs]);
+    }, [numberOfInlineFilters, vertical, filterDefs]);
     const numModalFilters = (0, utils_1.safeKeys)(modalFilters).filter((fk) => filter[fk] !== undefined).length;
-    const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, inlineLabel: !vertical, sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }, void 0) }, void 0)) : null;
+    const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, labelStyle: !vertical ? "inline" : "above", sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }) })) : null;
     // Return list of filter components. `onSelect` should update the `filter`
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: {
             ...(vertical ? Css_1.Css.df.fdc.gap2.$ : Css_1.Css.df.aic.gap1.$),
-        } }, testId, { children: [maybeGroupByField, (0, utils_1.safeEntries)(pageFilters).map(([key, f]) => ((0, jsx_runtime_1.jsx)("div", { children: f.render(filter[key], (value) => onChange((0, Filters_1.updateFilter)(filter, key, value)), testId, false, vertical) }, key))), Object.keys(modalFilters).length > 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "More Filters", endAdornment: numModalFilters > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$ }, { children: numModalFilters }), void 0)), variant: "secondary", onClick: () => openModal({
+        }, ...testId, children: [maybeGroupByField, (0, utils_1.safeEntries)(pageFilters).map(([key, f]) => ((0, jsx_runtime_1.jsx)("div", { children: f.render(filter[key], (value) => onChange((0, Filters_1.updateFilter)(filter, key, value)), testId, false, vertical) }, key))), Object.keys(modalFilters).length > 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More Filters", endAdornment: numModalFilters > 0 && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$, children: numModalFilters })), variant: "secondary", onClick: () => openModal({
                     // Spreading `props` to pass along `data-testid`
-                    content: (0, jsx_runtime_1.jsx)(Filters_1.FilterModal, Object.assign({}, props, { filter: filter, onApply: onChange, filters: modalFilters }), void 0),
-                }) }, testId.moreFiltersBtn), void 0)), Object.keys(filter).length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Clear", variant: "tertiary", onClick: () => onChange({}) }, testId.clearBtn), void 0) }, void 0))] }), void 0));
+                    content: (0, jsx_runtime_1.jsx)(Filters_1.FilterModal, { ...props, filter: filter, onApply: onChange, filters: modalFilters }),
+                }), ...testId.moreFiltersBtn })), Object.keys(filter).length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) }))] }));
 }
 // memo doesn't support generic parameters, so cast the result to the correct type
 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-849543638

package/dist/components/Filters/MultiFilter.d.ts

@@ -2,7 +2,7 @@ import { Key } from "react";
 import { Filter } from "./types";
 import { MultiSelectFieldProps } from "../../inputs/MultiSelectField";
 import { Value } from "../../inputs/Value";
-export declare type MultiFilterProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
+export type MultiFilterProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
     defaultValue?: V[];
     label?: string;
 };

package/dist/components/Filters/MultiFilter.js

@@ -13,16 +13,16 @@ exports.multiFilter = multiFilter;
 class MultiFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
         if (inModal && this.props.options.length > 0 && this.props.options.length <= 8) {
-            return ((0, jsx_runtime_1.jsx)(ToggleChipGroup_1.ToggleChipGroup, Object.assign({ label: this.label, options: this.props.options.map((o) => ({
+            return ((0, jsx_runtime_1.jsx)(ToggleChipGroup_1.ToggleChipGroup, { label: this.label, options: this.props.options.map((o) => ({
                     label: this.props.getOptionLabel(o),
                     value: this.props.getOptionValue(o),
                 })), onChange: (values) => {
                     setValue(values.length === 0 ? undefined : values);
-                }, values: value || [], hideLabel: true }, tid[(0, defaultTestId_1.defaultTestId)(this.label)]), void 0));
+                }, values: value || [], hideLabel: true, ...tid[(0, defaultTestId_1.defaultTestId)(this.label)] }));
         }
         const { defaultValue, ...props } = this.props;
-        return ((0, jsx_runtime_1.jsx)(MultiSelectField_1.MultiSelectField, Object.assign({}, props, { compact: !vertical, label: this.label, values: value || [], hideLabel: inModal, inlineLabel: !inModal && !vertical, sizeToContent: !inModal && !vertical, onSelect: (values) => {
+        return ((0, jsx_runtime_1.jsx)(MultiSelectField_1.MultiSelectField, { ...props, compact: !vertical, label: this.label, values: value || [], labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, onSelect: (values) => {
                 setValue(values.length === 0 ? undefined : values);
-            }, nothingSelectedText: "All" }, this.testId(tid)), void 0));
+            }, nothingSelectedText: "All", ...this.testId(tid) }));
     }
 }