@homebound/beam 2.227.0 → 2.228.0

package/dist/components/Layout/PreventBrowserScroll.js

@@ -7,6 +7,6 @@ const Css_1 = require("../../Css");
 function PreventBrowserScroll({ children }) {
     return (
     // Take over the full viewport and hide any overflown content.
-    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.overflowHidden.vh100.$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.df.fdc.mh0.overflowAuto.$ }, { children: children }), void 0) }), void 0));
+    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.overflowHidden.vh100.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.fdc.mh0.overflowAuto.$, children: children }) }));
 }
 exports.PreventBrowserScroll = PreventBrowserScroll;

package/dist/components/Layout/RightPaneLayout/RightPaneContext.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 export interface OpenRightPaneOpts {
     content: ReactNode;
 }
-export declare type RightPaneLayoutContextProps = {
+export type RightPaneLayoutContextProps = {
     openInPane: (opts: OpenRightPaneOpts) => void;
     closePane: () => void;
     clearPane: () => void;

package/dist/components/Layout/RightPaneLayout/RightPaneContext.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];
@@ -40,7 +44,7 @@ function RightPaneProvider({ children }) {
     const closePane = (0, react_1.useCallback)(() => setIsRightPaneOpen(false), [setRightPaneContent]);
     const clearPane = (0, react_1.useCallback)(() => setRightPaneContent(undefined), [setRightPaneContent]);
     const context = (0, react_1.useMemo)(() => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }), [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]);
-    return (0, jsx_runtime_1.jsx)(exports.RightPaneContext.Provider, Object.assign({ value: context }, { children: children }), void 0);
+    return (0, jsx_runtime_1.jsx)(exports.RightPaneContext.Provider, { value: context, children: children });
 }
 exports.RightPaneProvider = RightPaneProvider;
 function useRightPaneContext() {

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.js

@@ -7,12 +7,12 @@ const Css_1 = require("../../../Css");
 const RightPaneContext_1 = require("./RightPaneContext");
 function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, }) {
     const { isRightPaneOpen, rightPaneContent, clearPane } = (0, RightPaneContext_1.useRightPaneContext)();
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.df.overflowXHidden.$ }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`)
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`)
                         .add("transition", "width .2s linear")
-                        .h100.mr3.overflowXAuto.if(!isRightPaneOpen).w100.mr0.$ }, { children: children }), void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 
+                        .h100.mr3.overflowXAuto.if(!isRightPaneOpen).w100.mr0.$, children: children }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 
                         // Keeping initial x to offset pane width and space between panel and page content
                         initial: { x: paneWidth + 24 }, animate: { x: 0 }, transition: { ease: "linear", duration: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: paneWidth }, 
                         // Clear the content of the detail pane when the animation is completed and only when pane is closing
-                        onAnimationComplete: (definition) => definition.x !== 0 && clearPane() }, { children: rightPaneContent }), "rightPane")) }, void 0)] }, void 0) }), void 0));
+                        onAnimationComplete: (definition) => definition.x !== 0 && clearPane(), children: rightPaneContent }, "rightPane")) })] }) }));
 }
 exports.RightPaneLayout = RightPaneLayout;

package/dist/components/Layout/RightPaneLayout/index.js

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

package/dist/components/Layout/ScrollableContent.d.ts

@@ -6,6 +6,14 @@ interface ScrollableContentProps {
     omitBottomPadding?: true;
     bgColor?: Palette;
 }
-/** Helper component for placing scrollable content within a `ScrollableParent`. */
+/**
+ * Helper component for placing scrollable content within a `ScrollableParent`.
+ *
+ * See the docs on `ScrollableParent.
+ *
+ * Note that you should not use this "just to get a scrollbar", instead just use `Css.overflowAuto.$`
+ * or what not; this is only for implementing page-level patterns that need multiple stickied
+ * components (page header, tab bar, table filter & actions).
+ */
 export declare function ScrollableContent(props: ScrollableContentProps): ReactPortal | JSX.Element;
 export {};

package/dist/components/Layout/ScrollableContent.js

@@ -6,7 +6,15 @@ const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const ScrollableParent_1 = require("./ScrollableParent");
 const Css_1 = require("../../Css");
-/** Helper component for placing scrollable content within a `ScrollableParent`. */
+/**
+ * Helper component for placing scrollable content within a `ScrollableParent`.
+ *
+ * See the docs on `ScrollableParent.
+ *
+ * Note that you should not use this "just to get a scrollbar", instead just use `Css.overflowAuto.$`
+ * or what not; this is only for implementing page-level patterns that need multiple stickied
+ * components (page header, tab bar, table filter & actions).
+ */
 function ScrollableContent(props) {
     const { children, virtualized = false, omitBottomPadding, bgColor } = props;
     const { scrollableEl, setPortalTick, pl, pr } = (0, ScrollableParent_1.useScrollableParent)();
@@ -19,12 +27,12 @@ function ScrollableContent(props) {
     }, [setPortalTick]);
     // Escape hatch specifically for tests where a "ScrollableParent" context may not be present.
     if (!scrollableEl) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
     }
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { css: {
             ...Css_1.Css.h100.pr(pr).pl(pl).if(virtualized).pr0.$,
             ...(bgColor && Css_1.Css.bgColor(bgColor).$),
             ...(!omitBottomPadding && !virtualized && ScrollableParent_1.scrollContainerBottomPadding),
-        } }, { children: children }), void 0), scrollableEl);
+        }, children: children }), scrollableEl);
 }
 exports.ScrollableContent = ScrollableContent;

package/dist/components/Layout/ScrollableParent.d.ts

@@ -10,6 +10,30 @@ interface ScrollableParentContextProviderProps {
     xss?: Properties;
     tagName?: keyof JSX.IntrinsicElements;
 }
+/**
+ * Provides a pattern for implementing "multiple sticky" components.
+ *
+ * In css, `position: sticky` is great for pinning 1 element to the top of a container.
+ *
+ * However, in UX patterns, we're often asked to pin multiple DOM elements that are actually
+ * spread across multiple React components. For example:
+ *
+ * - Sticky a Header (in FooPage)
+ * - Sticky the table filter & actions (in FooTable)
+ * - Sticky the table header row(s) (in GridTable)
+ *
+ * Historically the way we did this was passing `stickyOffset`s around, where the header would be
+ * `top: 0px`, the filter & actions would be `top: ${headerPx}px`, and the table header rows would
+ * be `top: ${headerPx + filterActionsPx}px`.
+ *
+ * However, this is brittle as the `headerPx` / `filterActionsPx` are likely dynamic.
+ *
+ * `ScrollableParent` solves this by putting all the stickied content (except the table header rows)
+ * into a single div, and then having the page use `ScrollableContent` to mark what should actually
+ * scroll, which then we "pull up" to be a sibling div of "everything that was stickied".
+ *
+ * See [this miro](https://miro.com/app/board/o9J_l-FQ-RU=/) and how we need to "cut the component in half".
+ */
 export declare function ScrollableParent(props: PropsWithChildren<ScrollableParentContextProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useScrollableParent(): ScrollableParentContextProps;
 export declare const scrollContainerBottomPadding: {

package/dist/components/Layout/ScrollableParent.js

@@ -10,6 +10,30 @@ const ScrollableParentContext = (0, react_1.createContext)({
     pl: 0,
     setPortalTick: (v) => { },
 });
+/**
+ * Provides a pattern for implementing "multiple sticky" components.
+ *
+ * In css, `position: sticky` is great for pinning 1 element to the top of a container.
+ *
+ * However, in UX patterns, we're often asked to pin multiple DOM elements that are actually
+ * spread across multiple React components. For example:
+ *
+ * - Sticky a Header (in FooPage)
+ * - Sticky the table filter & actions (in FooTable)
+ * - Sticky the table header row(s) (in GridTable)
+ *
+ * Historically the way we did this was passing `stickyOffset`s around, where the header would be
+ * `top: 0px`, the filter & actions would be `top: ${headerPx}px`, and the table header rows would
+ * be `top: ${headerPx + filterActionsPx}px`.
+ *
+ * However, this is brittle as the `headerPx` / `filterActionsPx` are likely dynamic.
+ *
+ * `ScrollableParent` solves this by putting all the stickied content (except the table header rows)
+ * into a single div, and then having the page use `ScrollableContent` to mark what should actually
+ * scroll, which then we "pull up" to be a sibling div of "everything that was stickied".
+ *
+ * See [this miro](https://miro.com/app/board/o9J_l-FQ-RU=/) and how we need to "cut the component in half".
+ */
 function ScrollableParent(props) {
     const { children, xss, tagName: Tag = "div" } = props;
     const scrollableEl = (0, react_1.useMemo)(() => {
@@ -31,10 +55,10 @@ function ScrollableParent(props) {
     (0, react_1.useEffect)(() => {
         scrollableRef.current.appendChild(scrollableEl);
     }, [scrollableEl]);
-    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsxs)(Tag, Object.assign({ css: { ...Css_1.Css.mh0.mw0.fg1.df.fdc.$, ...otherXss } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, { value: context, children: (0, jsx_runtime_1.jsxs)(Tag, { css: { ...Css_1.Css.mh0.mw0.fg1.df.fdc.$, ...otherXss }, children: [(0, jsx_runtime_1.jsx)("div", { css: {
                         ...Css_1.Css.pl(context.pl).pr(context.pr).$,
                         ...(!hasScrollableContent ? { ...Css_1.Css.overflowAuto.h100.$, ...exports.scrollContainerBottomPadding } : undefined),
-                    } }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.$, ref: scrollableRef }, void 0)] }), void 0) }), void 0));
+                    }, children: children }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.$, ref: scrollableRef })] }) }));
 }
 exports.ScrollableParent = ScrollableParent;
 function useScrollableParent() {

package/dist/components/Layout/index.js

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

package/dist/components/Loader.js

@@ -17,7 +17,7 @@ function Loader({ size = "lg", contrast = false }) {
             .add("animationDuration", "800ms")
             .add("animationIterationCount", "infinite")
             .add("animationTimingFunction", "linear")
-            .add("transform", "translateZ(0)").$ }, void 0));
+            .add("transform", "translateZ(0)").$ }));
 }
 exports.Loader = Loader;
 const sizeToPixels = {

package/dist/components/LoadingSkeleton.d.ts

@@ -1,5 +1,5 @@
-declare type Sizes = "sm" | "md" | "lg";
-export declare type LoadingSkeletonProps = {
+type Sizes = "sm" | "md" | "lg";
+export type LoadingSkeletonProps = {
     rows?: number;
     columns?: number;
     size?: Sizes;

package/dist/components/LoadingSkeleton.js

@@ -14,7 +14,7 @@ function LoadingSkeleton({ rows = 1, columns = 1, size = "md", randomizeWidths =
                 .add("flexGrow", flexGrowForCell)
                 .bgGray300.if(contrast).bgGray700.$ }, `row-${rowNumber}-cell-${i}`)));
     };
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": "Loading" }, { children: rowArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.gap1.mb1.hPx(rowHeight).$ }, { children: rowCells(i) }), `row-${i}`))) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.mb1.hPx(rowHeight).$, children: rowCells(i) }, `row-${i}`))) }));
 }
 exports.LoadingSkeleton = LoadingSkeleton;
 /** Create the illusion of random widths by cycling through a list of widths that look nice in order */

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, PropsWithChildren, ReactNode } from "react";
 import { Only, Xss } from "../../Css";
-export declare type ModalSize = "sm" | "md" | "lg" | "xl";
+export type ModalSize = "sm" | "md" | "lg" | "xl";
 export interface ModalProps {
     /**
      * The modal size, defaults to `md`.
@@ -23,7 +23,7 @@ export interface ModalProps {
     /** Adds a border for the header. */
     drawHeaderBorder?: boolean;
 }
-export declare type ModalApi = {
+export type ModalApi = {
     setSize: (size: ModalProps["size"]) => void;
 };
 /**
@@ -39,7 +39,7 @@ export declare function ModalHeader({ children }: {
 export declare function ModalBody({ children, virtualized, }: PropsWithChildren<{
     virtualized?: boolean;
 }>): JSX.Element;
-declare type ModalFooterXss = Xss<"justifyContent" | "alignItems">;
+type ModalFooterXss = Xss<"justifyContent" | "alignItems">;
 /** Provides consistent styling for modal footers, i.e. where actions are placed. */
 export declare function ModalFooter<X extends Only<ModalFooterXss, X>>({ children, xss, }: {
     children: ReactNode;

package/dist/components/Modal/Modal.js

@@ -60,17 +60,17 @@ function Modal(props) {
         modalBodyRef.current.appendChild(modalBodyDiv);
         modalFooterRef.current.appendChild(modalFooterDiv);
     }, [modalBodyRef, modalFooterRef, modalHeaderRef]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.underlay.z4.$ }, underlayProps, testId.underlay, { children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, Object.assign({ contain: true, restoreFocus: true, autoFocus: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.br24.bgWhite.bshModal.overflowHidden
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.underlay.z4.$, ...underlayProps, ...testId.underlay, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.br24.bgWhite.bshModal.overflowHidden
                             .maxh("90vh")
                             .df.fdc.wPx(width)
                             .mhPx(defaultMinHeight)
                             .if(isFixedHeight)
-                            .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("main", Object.assign({ ref: modalBodyRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: content }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0) }, void 0));
+                            .hPx(height).$, ref: ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$, children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.pl1.$, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) })] }), (0, jsx_runtime_1.jsx)("main", { ref: modalBodyRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$, children: content }), (0, jsx_runtime_1.jsx)("footer", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }) })] }) }) }) }) }));
 }
 exports.Modal = Modal;
 function ModalHeader({ children }) {
     const { modalHeaderDiv } = (0, BeamContext_1.useBeamContext)();
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0), modalHeaderDiv);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }), modalHeaderDiv);
 }
 exports.ModalHeader = ModalHeader;
 /** Provides consistent styling and the scrolling behavior for a modal's primary content. */
@@ -79,14 +79,14 @@ function ModalBody({ children, virtualized = false, }) {
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
     return (0, react_dom_1.createPortal)(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.if(virtualized).overflowHidden.pl3.else.px3.$ }, testId.content, { children: children }), void 0), modalBodyDiv);
+    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.if(virtualized).overflowHidden.pl3.else.px3.$, ...testId.content, children: children }), modalBodyDiv);
 }
 exports.ModalBody = ModalBody;
 /** Provides consistent styling for modal footers, i.e. where actions are placed. */
 function ModalFooter({ children, xss, }) {
     const { modalFooterDiv } = (0, BeamContext_1.useBeamContext)();
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.p3.df.aic.jcfe.gap1.$, ...xss } }, testId.footer, { children: children }), void 0), modalFooterDiv);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { css: { ...Css_1.Css.p3.df.aic.jcfe.gap1.$, ...xss }, ...testId.footer, children: children }), modalFooterDiv);
 }
 exports.ModalFooter = ModalFooter;
 const testIdPrefix = "modal";

package/dist/components/Modal/OpenModal.js

@@ -33,10 +33,10 @@ function OpenModal(props) {
         }
     }, [keepOpen, openModal, size, children]);
     if (keepOpen) {
-        return (0, jsx_runtime_1.jsx)(Modal_1.Modal, { size: size, content: children }, void 0);
+        return (0, jsx_runtime_1.jsx)(Modal_1.Modal, { size: size, content: children });
     }
     else {
-        return (0, jsx_runtime_1.jsx)("div", { children: "dummy content" }, void 0);
+        return (0, jsx_runtime_1.jsx)("div", { children: "dummy content" });
     }
 }
 exports.OpenModal = OpenModal;

package/dist/components/Modal/TestModalContent.js

@@ -24,19 +24,19 @@ function TestModalContent(props) {
     const [date, setDate] = (0, react_1.useState)(formStateDomain_1.jan1);
     const [internalValue, setValue] = (0, react_1.useState)("");
     const { triggerNotice } = (0, Snackbar_1.useSnackbar)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }, void 0), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ }, void 0)] }), void 0)) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, hideLabel: true, borderless: true, xss: Css_1.Css.xl.$ }, void 0)) : ("The title of the modal that might wrap") }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.fdc.aifs.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }, void 0), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) }, void 0)] }), void 0), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, Object.assign({ xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined }, { children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }, void 0) }, 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, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled }, void 0)] }), void 0)] }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, labelStyle: "hidden", borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled })] })] })] }));
 }
 exports.TestModalContent = TestModalContent;
 function TestModalFilterTable() {
     const [filter, setFilter] = (0, react_1.useState)();
     const { closeModal } = (0, useModal_1.useModal)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }, void 0), (0, jsx_runtime_1.jsx)(Table_1.GridTable, { columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }), (0, jsx_runtime_1.jsx)(Table_1.GridTable, { columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ })] }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }) })] }));
 }
 exports.TestModalFilterTable = TestModalFilterTable;
 function VirtualizedTable() {
     const [filter, setFilter] = (0, react_1.useState)();
     const { closeModal } = (0, useModal_1.useModal)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }, void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, Object.assign({ virtualized: true }, { children: (0, jsx_runtime_1.jsxs)(Layout_1.ScrollableParent, Object.assign({ xss: Css_1.Css.h100.$ }, { children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }, void 0), (0, jsx_runtime_1.jsx)(Layout_1.ScrollableContent, Object.assign({ virtualized: true }, { children: (0, jsx_runtime_1.jsx)(Table_1.GridTable, { as: "virtual", columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ }, void 0) }), void 0)] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { virtualized: true, children: (0, jsx_runtime_1.jsxs)(Layout_1.ScrollableParent, { xss: Css_1.Css.h100.$, children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }), (0, jsx_runtime_1.jsx)(Layout_1.ScrollableContent, { virtualized: true, children: (0, jsx_runtime_1.jsx)(Table_1.GridTable, { as: "virtual", columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ }) })] }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }) })] }));
 }
 exports.VirtualizedTable = VirtualizedTable;
 const users = [

package/dist/components/Modal/index.js

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

package/dist/components/NavLink.d.ts

@@ -11,7 +11,7 @@ export interface NavLinkProps extends BeamFocusableProps {
     openInNew?: boolean;
     contrast?: boolean;
 }
-declare type NavLinkVariant = "side" | "global";
+type NavLinkVariant = "side" | "global";
 export declare function NavLink(props: NavLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function getNavLinkStyles(variant: NavLinkVariant, contrast: boolean): {
     baseStyles: {};

package/dist/components/NavLink.js

@@ -39,8 +39,8 @@ function NavLink(props) {
             ...(isPressed && pressedStyles),
         },
     };
-    const linkContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0) }), void 0))] }, void 0));
-    return external ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: href }, (0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), linkAttributes, { children: linkContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: href }, (0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), linkAttributes, { children: linkContent }), void 0));
+    const linkContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.ml1.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }) }))] }));
+    return external ? ((0, jsx_runtime_1.jsx)("a", { href: href, ...(0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), ...linkAttributes, children: linkContent })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: href, ...(0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), ...linkAttributes, children: linkContent }));
 }
 exports.NavLink = NavLink;
 function getNavLinkStyles(variant, contrast) {

package/dist/components/PresentationContext.d.ts

@@ -3,7 +3,8 @@ import { GridStyle } from "./Table";
 import { Typography } from "../Css";
 export interface PresentationFieldProps {
     numberAlignment?: "left" | "right";
-    hideLabel?: boolean;
+    /** Sets the label position or visibility. Defaults to "above" */
+    labelStyle?: "inline" | "hidden" | "above" | "left";
     labelSuffix?: LabelSuffixStyle;
     borderless?: boolean;
     compact?: boolean;
@@ -11,7 +12,7 @@ export interface PresentationFieldProps {
     visuallyDisabled?: false;
     errorInTooltip?: true;
 }
-export declare type PresentationContextProps = {
+export type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;
     gridTableStyle?: GridStyle;
     wrap?: boolean;
@@ -25,7 +26,7 @@ export declare function usePresentationContext(): PresentationContextProps;
  * We may want to just hard-code this behavior, so that it's very consistent,
  * but for now making it configurable.
  */
-export declare type LabelSuffixStyle = {
+export type LabelSuffixStyle = {
     /** The suffix to use for required fields. */
     required?: string;
     /** The suffix to use for explicitly optional (i.e. `required=false`) fields. */

package/dist/components/PresentationContext.js

@@ -12,7 +12,7 @@ function PresentationProvider(props) {
         const fieldProps = { ...existingContext.fieldProps, ...presentationProps.fieldProps };
         return { ...existingContext, ...presentationProps, fieldProps };
     }, [presentationProps, existingContext]);
-    return (0, jsx_runtime_1.jsx)(exports.PresentationContext.Provider, Object.assign({ value: context }, { children: children }), void 0);
+    return (0, jsx_runtime_1.jsx)(exports.PresentationContext.Provider, { value: context, children: children });
 }
 exports.PresentationProvider = PresentationProvider;
 function usePresentationContext() {

package/dist/components/Snackbar/Snackbar.d.ts

@@ -4,7 +4,7 @@ interface SnackbarProps {
     offset: Offset;
 }
 export declare function Snackbar({ notices, offset }: SnackbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare type Offset = {
+export type Offset = {
     bottom?: number;
 };
 export {};

package/dist/components/Snackbar/Snackbar.js

@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
 function Snackbar({ notices, offset }) {
     var _a;
     const tid = (0, utils_1.useTestIds)({});
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.snackbarWrapper, { css: Css_1.Css.fixed.z999.bottomPx((_a = offset.bottom) !== null && _a !== void 0 ? _a : defaultOffset.bottom).left3.df.fdc.aifs.gapPx(12).$ }, { children: notices.map((data) => ((0, jsx_runtime_1.jsx)(SnackbarNotice_1.SnackbarNotice, Object.assign({}, data), data.id))) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ...tid.snackbarWrapper, css: Css_1.Css.fixed.z999.bottomPx((_a = offset.bottom) !== null && _a !== void 0 ? _a : defaultOffset.bottom).left3.df.fdc.aifs.gapPx(12).$, children: notices.map((data) => ((0, jsx_runtime_1.jsx)(SnackbarNotice_1.SnackbarNotice, { ...data }, data.id))) }));
 }
 exports.Snackbar = Snackbar;
 const defaultOffset = {

package/dist/components/Snackbar/SnackbarContext.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { SnackbarNoticeProps } from "./SnackbarNotice";
 import { Offset } from "./Snackbar";
-export declare type SnackbarContextProps = {
+export type SnackbarContextProps = {
     setNotices: React.Dispatch<React.SetStateAction<SnackbarNoticeProps[]>>;
     setOffset: React.Dispatch<React.SetStateAction<Offset>>;
 };

package/dist/components/Snackbar/SnackbarContext.js

@@ -9,7 +9,7 @@ function SnackbarProvider(props) {
     const [notices, setNotices] = (0, react_1.useState)([]);
     const [offset, setOffset] = (0, react_1.useState)({});
     const contextValue = (0, react_1.useMemo)(() => ({ setNotices, setOffset }), []);
-    return ((0, jsx_runtime_1.jsxs)(exports.SnackbarContext.Provider, Object.assign({ value: contextValue }, { children: [props.children, (0, jsx_runtime_1.jsx)(Snackbar_1.Snackbar, { notices: notices, offset: offset }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(exports.SnackbarContext.Provider, { value: contextValue, children: [props.children, (0, jsx_runtime_1.jsx)(Snackbar_1.Snackbar, { notices: notices, offset: offset })] }));
 }
 exports.SnackbarProvider = SnackbarProvider;
 function useSnackbarContext() {

package/dist/components/Snackbar/SnackbarNotice.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ButtonProps } from "../Button";
-export declare type SnackbarNoticeTypes = "error" | "warning" | "success" | "info" | "alert";
+export type SnackbarNoticeTypes = "error" | "warning" | "success" | "info" | "alert";
 export interface SnackbarNoticeProps {
     /** Adds action button to the right of the notice */
     action?: Pick<ButtonProps, "label" | "onClick" | "variant">;

package/dist/components/Snackbar/SnackbarNotice.js

@@ -12,7 +12,7 @@ function SnackbarNotice(props) {
     const tid = (0, utils_1.useTestIds)(props, "snackbar");
     // Only allow the "close" button to be hidden if not a `persistent` notice. Otherwise we could get in a state where the user cannot remove the notice from the screen.
     const reallyHideClose = hideCloseButton && !persistent;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$ }, tid, { role: "alert" }, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.plPx(12).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({}, typeToIcon[icon], tid.icon), void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$ }, (typeof message === "string" ? { title: message } : undefined), tid.message, { children: message }), void 0), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ css: Css_1.Css.fs0.df.aic.$ }, { children: [action && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ contrast: true }, action, tid.action), void 0) }), void 0)), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.pr1.add("lineHeight", 0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", contrast: true, onClick: onClose }, tid.close), void 0) }), void 0))] }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$, ...tid, role: "alert", children: [icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.plPx(12).$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...typeToIcon[icon], ...tid.icon }) })), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$, ...(typeof message === "string" ? { title: message } : undefined), ...tid.message, children: message }), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", { css: Css_1.Css.fs0.df.aic.$, children: [action && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { contrast: true, ...action, ...tid.action }) })), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.pr1.add("lineHeight", 0).$, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", contrast: true, onClick: onClose, ...tid.close }) }))] }))] }));
 }
 exports.SnackbarNotice = SnackbarNotice;
 const typeToIcon = {

package/dist/components/Stepper.js

@@ -19,15 +19,15 @@ function Stepper(props) {
     const maxStepWidth = 200;
     const minStepWidth = 100;
     const gap = 8;
-    return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$ }, tid, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.gapPx(gap).$ }, { children: steps.map((step) => {
+    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$, ...tid, children: [(0, jsx_runtime_1.jsx)("ol", { css: Css_1.Css.listReset.df.gapPx(gap).$, children: steps.map((step) => {
                     const isCurrent = currentStep === step.value;
-                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent }, tid.step, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }, tid.stepButton), void 0) }), step.label));
-                }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300
+                    return ((0, jsx_runtime_1.jsx)("li", { css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent, ...tid.step, children: (0, jsx_runtime_1.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent: isCurrent, ...tid.stepButton }) }, step.label));
+                }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mt1.bgGray300
                     .hPx(4)
                     .maxwPx(steps.length * maxStepWidth + (steps.length - 1) * gap)
-                    .mwPx(steps.length * minStepWidth + (steps.length - 1) * gap).w100.$ }, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
+                    .mwPx(steps.length * minStepWidth + (steps.length - 1) * gap).w100.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
                         .add("transition", "width 200ms")
-                        .h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }, void 0) }), void 0)] }), void 0));
+                        .h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }) })] }));
 }
 exports.Stepper = Stepper;
 function StepButton(props) {
@@ -39,7 +39,7 @@ function StepButton(props) {
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
     const focusRingStyles = state === "error" ? Css_1.Css.bshDanger.$ : Css_1.Css.bshFocus.$;
     const tid = (0, utils_1.useTestIds)(props, "stepButton");
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, focusProps, hoverProps, { css: {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, ...buttonProps, ...focusProps, ...hoverProps, css: {
             ...Css_1.Css.buttonBase.$,
             ...Css_1.Css.tl.w100.h100.sm.gray700.add("whiteSpace", "initial").if(state === "error").red600.$,
             ...(isCurrent ? Css_1.Css.lightBlue700.if(state === "error").red800.$ : {}),
@@ -47,19 +47,19 @@ function StepButton(props) {
             ...(isPressed ? Css_1.Css.lightBlue500.if(state === "error").red900.$ : {}),
             ...(disabled ? Css_1.Css.gray400.cursorNotAllowed.if(state === "error").red200.$ : {}),
             ...(isFocusVisible ? focusRingStyles : {}),
-        } }, tid[(0, defaultTestId_1.defaultTestId)(label)], { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mrPx(4).$ }, { children: (0, jsx_runtime_1.jsx)(StepIcon, { state: state, isHovered: isHovered, isPressed: isPressed, isCurrent: isCurrent }, void 0) }), void 0), label] }), void 0));
+        }, ...tid[(0, defaultTestId_1.defaultTestId)(label)], children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.mrPx(4).$, children: (0, jsx_runtime_1.jsx)(StepIcon, { state: state, isHovered: isHovered, isPressed: isPressed, isCurrent: isCurrent }) }), label] }));
 }
 function StepIcon({ state, isHovered = false, isPressed = false, isCurrent = false }) {
     if (state === "error") {
-        return (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "errorCircle" }, void 0);
+        return (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "errorCircle" });
     }
     if (state === "complete") {
-        return (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check" }, void 0);
+        return (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check" });
     }
     // Otherwise state is "incomplete", return the custom circle "icon"
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.wPx(24).hPx(24).df.aic.jcc.$ }, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(10)
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(24).hPx(24).df.aic.jcc.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(10)
                 .hPx(10)
                 .ba.bw2.br100.add("color", "currentColor")
                 .if(isHovered || isPressed || isCurrent)
-                .add("backgroundColor", "currentColor").$ }, void 0) }), void 0));
+                .add("backgroundColor", "currentColor").$ }) }));
 }

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -14,10 +14,10 @@ function ConfirmCloseModal(props) {
         // after a close and could/will cause other close attempts to fail.
         modalState.current = undefined;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Are you sure you want to cancel?" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsx)("p", { children: "Any changes you've made so far will be lost." }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(components_1.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Are you sure you want to cancel?" }), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsx)("p", { children: "Any changes you've made so far will be lost." }) }), (0, jsx_runtime_1.jsxs)(components_1.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
                             // The order of these calls doesn't really matter; close this modal and tell the call to do their close
                             onClose();
                             closeModal();
-                        } }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0)] }, void 0)] }, void 0));
+                        } }), (0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal })] })] }));
 }
 exports.ConfirmCloseModal = ConfirmCloseModal;