@homebound/beam 2.227.0 → 2.227.1

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.js

@@ -19,12 +19,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.js

@@ -31,10 +31,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, hideLabel: true, 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

@@ -11,7 +11,7 @@ export interface PresentationFieldProps {
     visuallyDisabled?: false;
     errorInTooltip?: true;
 }
-export declare type PresentationContextProps = {
+export type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;
     gridTableStyle?: GridStyle;
     wrap?: boolean;
@@ -25,7 +25,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;

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -53,7 +53,7 @@ function SuperDrawer() {
             headerRef.current.appendChild(sdHeaderDiv);
         }
     }, [headerRef, content]);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }, void 0), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
                     key: "superDrawer", 
                     // TODO: Should this color be part of the Palette?
@@ -66,12 +66,12 @@ function SuperDrawer() {
                     animate: { opacity: 1 }, 
                     // Unmount styles
                     exit: { opacity: 0, transition: { delay: 0.2 } }, onClick: closeDrawer },
-                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.aside, Object.assign({ css: Css_1.Css.bgWhite.h100.maxw((0, Css_1.px)(width)).w100.df.fdc.relative.$, 
+                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.aside, { css: Css_1.Css.bgWhite.h100.maxw((0, Css_1.px)(width)).w100.df.fdc.relative.$, 
                         // Keeping initial x to 1040 as this will still work if the container is smaller
                         initial: { x: width }, animate: { x: 0 }, 
                         // Custom transitions settings for the translateX animation
                         transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width }, 
                         // Preventing clicks from triggering parent onClick
-                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.p3.bb.bGray200.df.aic.jcsb.gap3.$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, css: Css_1.Css.gray900.fg1.addIn("h1", Css_1.Css.xl2Sb.$).$ }, void 0), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0), content] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
+                        onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.p3.bb.bGray200.df.aic.jcsb.gap3.$, children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, css: Css_1.Css.gray900.fg1.addIn("h1", Css_1.Css.xl2Sb.$).$ }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })] }), content] }) }, "superDrawerContainer"))] })) }), document.body);
 }
 exports.SuperDrawer = SuperDrawer;

package/dist/components/SuperDrawer/SuperDrawerContent.js

@@ -25,10 +25,10 @@ const SuperDrawerContent = ({ children, actions }) => {
     const { width = utils_1.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     function wrapWithMotionAndMaybeBack(children) {
         if (kind === "open") {
-            return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.p3.fg1.overflowAuto.$ }, { children: children }), "content"));
+            return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { css: Css_1.Css.p3.fg1.overflowAuto.$, children: children }, "content"));
         }
         else if (kind === "detail") {
-            return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.px3.pt2.pb3.fg1.$, animate: { overflow: "auto" }, transition: { overflow: { delay: 0.3 } } }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }, void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { x: width, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { ease: "linear", duration: 0.3, opacity: { delay: 0.15 } }, exit: { x: width, opacity: 0 }, css: Css_1.Css.pt2.$ }, { children: children }), void 0)] }), "content"));
+            return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { css: Css_1.Css.px3.pt2.pb3.fg1.$, animate: { overflow: "auto" }, transition: { overflow: { delay: 0.3 } }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { x: width, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { ease: "linear", duration: 0.3, opacity: { delay: 0.15 } }, exit: { x: width, opacity: 0 }, css: Css_1.Css.pt2.$, children: children })] }, "content"));
         }
         else {
             // Hides content changes when closing the drawer
@@ -37,6 +37,6 @@ const SuperDrawerContent = ({ children, actions }) => {
             return (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { css: Css_1.Css.p3.fg1.$, style: { overflow: "auto" } }, "content");
         }
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrapWithMotionAndMaybeBack(children), actions && ((0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.bt.bGray200.p3.df.aic.jcfe.$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: actions.map((buttonProps, i) => ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, buttonProps), i))) }), void 0) }), void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrapWithMotionAndMaybeBack(children), actions && ((0, jsx_runtime_1.jsx)("footer", { css: Css_1.Css.bt.bGray200.p3.df.aic.jcfe.$, children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.$, children: actions.map((buttonProps, i) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...buttonProps }, i))) }) }))] }));
 };
 exports.SuperDrawerContent = SuperDrawerContent;

package/dist/components/SuperDrawer/components/SuperDrawerHeader.js

@@ -16,10 +16,10 @@ function SuperDrawerHeader(props) {
     const currentContent = (_b = contentStack.current[contentStack.current.length - 1]) === null || _b === void 0 ? void 0 : _b.opts;
     const isDetail = currentContent !== firstContent;
     const tid = (0, utils_1.useTestIds)({}, "superDrawerHeader");
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.jcsb.gap3.$ }, tid, { children: [isStructuredProps(props) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.aic.gap2.fg1.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.fg1.df.aic.gap2.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: props.title }, void 0), props.left] }), void 0), props.right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fs0.$ }, { children: props.right }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fg1.$ }, { children: props.children }), void 0)), !hideControls && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fs0.if(isDetail).invisible.$ }, { children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, Object.assign({ buttons: [
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.jcsb.gap3.$, ...tid, children: [isStructuredProps(props) ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.aic.gap2.fg1.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.fg1.df.aic.gap2.$, children: [(0, jsx_runtime_1.jsx)("h1", { children: props.title }), props.left] }), props.right && (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fs0.$, children: props.right })] })) : ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.$, children: props.children })), !hideControls && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fs0.if(isDetail).invisible.$, children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { buttons: [
                         { icon: "chevronLeft", onClick: () => onPrevClick && onPrevClick(), disabled: !onPrevClick },
                         { icon: "chevronRight", onClick: () => onNextClick && onNextClick(), disabled: !onNextClick },
-                    ] }, tid.actions), void 0) }), void 0))] }), void 0), sdHeaderDiv);
+                    ], ...tid.actions }) }))] }), sdHeaderDiv);
 }
 exports.SuperDrawerHeader = SuperDrawerHeader;
 function isStructuredProps(props) {

package/dist/components/SuperDrawer/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/SuperDrawer/useSuperDrawer.d.ts

@@ -15,7 +15,7 @@ export interface OpenInDrawerOpts {
 export interface OpenDetailOpts {
     content: ReactNode;
 }
-export declare type ContentStack = {
+export type ContentStack = {
     kind: "open";
     opts: OpenInDrawerOpts;
 } | {