quicksnack 3.88.3 → 3.89.0

package/dist/bundle.js

@@ -20,10 +20,10 @@ const UiStateProvider = ({ children }) => {
         } }, children));
 };
 
-var classes$M = {"wrapper":"UiWrapper-module_wrapper__kC0BB"};
+var classes$N = {"wrapper":"UiWrapper-module_wrapper__kC0BB"};
 
 const UiWrapper = ({ children, }) => (React.createElement(UiStateProvider, null,
-    React.createElement("div", { className: classes$M.wrapper }, children)));
+    React.createElement("div", { className: classes$N.wrapper }, children)));
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -59,7 +59,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var classes$L = {"slideInFromTop":"SlideInFromTop-module_slideInFromTop__We2Dd"};
+var classes$M = {"slideInFromTop":"SlideInFromTop-module_slideInFromTop__We2Dd"};
 
 function toVal(mix) {
 	var k, y, str='';
@@ -104,14 +104,14 @@ function clsx () {
 
 const SlideInFromTop = (_a) => {
     var { className, speed } = _a, rest = __rest(_a, ["className", "speed"]);
-    return (React.createElement("div", Object.assign({ className: clsx(classes$L.slideInFromTop, className), 
+    return (React.createElement("div", Object.assign({ className: clsx(classes$M.slideInFromTop, className), 
         // @ts-ignore
         style: speed ? { "--speed": speed } : undefined }, rest)));
 };
 
-var classes$K = {"wrapper":"Alert-module_wrapper__zP8eL","variant-positive":"Alert-module_variant-positive__Cqab0","variant-negative":"Alert-module_variant-negative__mORCP","variant-info":"Alert-module_variant-info__b3OY9","variant-warning":"Alert-module_variant-warning__gBX5-","variant-basic":"Alert-module_variant-basic__AQmn7","variant-emphasized":"Alert-module_variant-emphasized__8GiYF"};
+var classes$L = {"wrapper":"Alert-module_wrapper__zP8eL","variant-positive":"Alert-module_variant-positive__Cqab0","variant-negative":"Alert-module_variant-negative__mORCP","variant-info":"Alert-module_variant-info__b3OY9","variant-warning":"Alert-module_variant-warning__gBX5-","variant-basic":"Alert-module_variant-basic__AQmn7","variant-emphasized":"Alert-module_variant-emphasized__8GiYF"};
 
-var classes$J = {"header":"Header-module_header__97lwI"};
+var classes$K = {"header":"Header-module_header__97lwI"};
 
 const mapping = {
     1: "h1",
@@ -125,14 +125,14 @@ const Header = (_a) => {
     const Component = mapping[level];
     return (
     // @ts-ignore
-    React.createElement(Component, Object.assign({ className: clsx(className, classes$J.header) }, restProps)));
+    React.createElement(Component, Object.assign({ className: clsx(className, classes$K.header) }, restProps)));
 };
 
-var classes$I = {"paragraph":"Paragraph-module_paragraph__-EZeT"};
+var classes$J = {"paragraph":"Paragraph-module_paragraph__-EZeT"};
 
 const Paragraph = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("p", Object.assign({ className: clsx(classes$I.paragraph, className) }, props)));
+    return (React.createElement("p", Object.assign({ className: clsx(classes$J.paragraph, className) }, props)));
 };
 
 const responsiveClassnames = [
@@ -818,7 +818,7 @@ const isResponsiveObject = (obj) => {
     return false;
 };
 
-var classes$H = {"box":"Box-module_box__Wgbf3"};
+var classes$I = {"box":"Box-module_box__Wgbf3"};
 
 const Box = (_a) => {
     var { 
@@ -850,10 +850,10 @@ const Box = (_a) => {
         textAlign,
         justifyContent,
     });
-    return (React.createElement("div", Object.assign({ className: clsx(classes$H.box, className, classNames), style: variables }, rest), children));
+    return (React.createElement("div", Object.assign({ className: clsx(classes$I.box, className, classNames), style: variables }, rest), children));
 };
 
-const Alert = ({ children, title, variant = "basic", actions, }) => (React.createElement("div", { className: clsx(classes$K.wrapper, classes$K[`variant-${variant}`]) },
+const Alert = ({ children, title, variant = "basic", actions, }) => (React.createElement("div", { className: clsx(classes$L.wrapper, classes$L[`variant-${variant}`]) },
     React.createElement(Box, { p: 3, display: "flex" },
         React.createElement(Box, { flexGrow: 1 },
             title && (React.createElement(Box, { pb: children ? 1 : 0 },
@@ -861,33 +861,33 @@ const Alert = ({ children, title, variant = "basic", actions, }) => (React.creat
             children && React.createElement(Paragraph, null, children)),
         actions && (React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, actions)))));
 
-var classes$G = {"svg":"AnimatedCheckmark-module_svg__VAFDr","mask":"AnimatedCheckmark-module_mask__mH-yZ","polyline":"AnimatedCheckmark-module_polyline__SJRcW","polyLineAnimation":"AnimatedCheckmark-module_polyLineAnimation__qwADN","circle":"AnimatedCheckmark-module_circle__1BrC5","circleAnimation":"AnimatedCheckmark-module_circleAnimation__yaTjr","circleColored":"AnimatedCheckmark-module_circleColored__es08R","circleColoredAnimation":"AnimatedCheckmark-module_circleColoredAnimation__AZ-hR"};
+var classes$H = {"svg":"AnimatedCheckmark-module_svg__VAFDr","mask":"AnimatedCheckmark-module_mask__mH-yZ","polyline":"AnimatedCheckmark-module_polyline__SJRcW","polyLineAnimation":"AnimatedCheckmark-module_polyLineAnimation__qwADN","circle":"AnimatedCheckmark-module_circle__1BrC5","circleAnimation":"AnimatedCheckmark-module_circleAnimation__yaTjr","circleColored":"AnimatedCheckmark-module_circleColored__es08R","circleColoredAnimation":"AnimatedCheckmark-module_circleColoredAnimation__AZ-hR"};
 
-const AnimatedCheckmark = () => (React.createElement("svg", { className: classes$G.svg, viewBox: "0 0 154 154" },
-    React.createElement("g", { className: classes$G.mask },
-        React.createElement("circle", { className: classes$G.circle, cx: "77", cy: "77", r: "72" }),
-        React.createElement("circle", { className: classes$G.circleColored, cx: "77", cy: "77", r: "72" }),
-        React.createElement("polyline", { className: classes$G.polyline, points: "43.5,77.8 63.7,97.9 112.2,49.4" }))));
+const AnimatedCheckmark = () => (React.createElement("svg", { className: classes$H.svg, viewBox: "0 0 154 154" },
+    React.createElement("g", { className: classes$H.mask },
+        React.createElement("circle", { className: classes$H.circle, cx: "77", cy: "77", r: "72" }),
+        React.createElement("circle", { className: classes$H.circleColored, cx: "77", cy: "77", r: "72" }),
+        React.createElement("polyline", { className: classes$H.polyline, points: "43.5,77.8 63.7,97.9 112.2,49.4" }))));
 
-var classes$F = {"breadcrumbs":"BreadCrumbs-module_breadcrumbs__-UMJj","crumb":"BreadCrumbs-module_crumb__SSW-t"};
+var classes$G = {"breadcrumbs":"BreadCrumbs-module_breadcrumbs__-UMJj","crumb":"BreadCrumbs-module_crumb__SSW-t"};
 
-const BreadCrumbs = (props) => React.createElement("ul", Object.assign({ className: clsx(classes$F.breadcrumbs, props.className) }, props));
-const Crumb = (props) => React.createElement("li", Object.assign({ className: clsx(classes$F.crumb, props.className) }, props));
+const BreadCrumbs = (props) => React.createElement("ul", Object.assign({ className: clsx(classes$G.breadcrumbs, props.className) }, props));
+const Crumb = (props) => React.createElement("li", Object.assign({ className: clsx(classes$G.crumb, props.className) }, props));
 
-var classes$E = {"panel":"CollapsiblePanel-module_panel__DrLNG","isClosed":"CollapsiblePanel-module_isClosed__2qVew","titleActionWrapper":"CollapsiblePanel-module_titleActionWrapper__SBw5b"};
+var classes$F = {"panel":"CollapsiblePanel-module_panel__DrLNG","isClosed":"CollapsiblePanel-module_isClosed__2qVew","titleActionWrapper":"CollapsiblePanel-module_titleActionWrapper__SBw5b"};
 
-var classes$D = {"wrapper":"Panel-module_wrapper__vFRhJ","meta":"Panel-module_meta__Gj-8n","headerWrapper":"Panel-module_headerWrapper__evUCF","header":"Panel-module_header__o7SiC","title":"Panel-module_title__181OP","hasChildren":"Panel-module_hasChildren__UZijE","hasOnClick":"Panel-module_hasOnClick__X5WSh","footer":"Panel-module_footer__t6-hz"};
+var classes$E = {"wrapper":"Panel-module_wrapper__vFRhJ","meta":"Panel-module_meta__Gj-8n","headerWrapper":"Panel-module_headerWrapper__evUCF","header":"Panel-module_header__o7SiC","title":"Panel-module_title__181OP","hasChildren":"Panel-module_hasChildren__UZijE","hasOnClick":"Panel-module_hasOnClick__X5WSh","footer":"Panel-module_footer__t6-hz"};
 
-const Panel = ({ children, className, title, titleAction, titleMeta, onClickTitle, footer, p = 3, titleLevel = 5, stageProps, footerProps, style, }) => (React.createElement("div", { className: clsx(className, classes$D.wrapper), style: style },
-    title && (React.createElement(Box, { p: 3, display: "flex", alignItems: "center", onClick: onClickTitle, className: clsx(classes$D.title, !!children && classes$D.hasChildren, !!onClickTitle && classes$D.hasOnClick) },
-        React.createElement(Box, { flexGrow: 1, className: classes$D.headerWrapper },
-            React.createElement(Header, { level: titleLevel, className: classes$D.header }, title)),
-        titleMeta && React.createElement(Box, { className: classes$D.meta }, titleMeta),
+const Panel = ({ children, className, title, titleAction, titleMeta, onClickTitle, footer, p = 3, titleLevel = 5, stageProps, footerProps, style, }) => (React.createElement("div", { className: clsx(className, classes$E.wrapper), style: style },
+    title && (React.createElement(Box, { p: 3, display: "flex", alignItems: "center", onClick: onClickTitle, className: clsx(classes$E.title, !!children && classes$E.hasChildren, !!onClickTitle && classes$E.hasOnClick) },
+        React.createElement(Box, { flexGrow: 1, className: classes$E.headerWrapper },
+            React.createElement(Header, { level: titleLevel, className: classes$E.header }, title)),
+        titleMeta && React.createElement(Box, { className: classes$E.meta }, titleMeta),
         titleAction && React.createElement(Box, { pl: 5 }, titleAction))),
     children && (React.createElement(Box, Object.assign({ p: p }, stageProps), children)),
-    footer && (React.createElement(Box, Object.assign({ p: 3 }, footerProps, { className: clsx(classes$D.footer, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className) }), footer))));
+    footer && (React.createElement(Box, Object.assign({ p: 3 }, footerProps, { className: clsx(classes$E.footer, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className) }), footer))));
 
-var classes$C = {"wrapper":"SlideOpen-module_wrapper__ur3Rv","hidden":"SlideOpen-module_hidden__iibf8","shown":"SlideOpen-module_shown__nGWNX","animation":"SlideOpen-module_animation__YSEpu","isOpen":"SlideOpen-module_isOpen__O67Yi"};
+var classes$D = {"wrapper":"SlideOpen-module_wrapper__ur3Rv","hidden":"SlideOpen-module_hidden__iibf8","shown":"SlideOpen-module_shown__nGWNX","animation":"SlideOpen-module_animation__YSEpu","isOpen":"SlideOpen-module_isOpen__O67Yi"};
 
 // Returns the boolean value in the next tick.
 // Allows for transition to start when DOM is updated, it prevents a flickers.
@@ -914,18 +914,18 @@ const SlideOpen = ({ isOpen, children, duration, onChange, }) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(true);
         }
     }, [isOpen, onChange]);
-    return (React.createElement("div", { className: classes$C.wrapper },
-        React.createElement("div", { className: clsx(classes$C.animation, isDelayedOpen && classes$C.isOpen), 
+    return (React.createElement("div", { className: classes$D.wrapper },
+        React.createElement("div", { className: clsx(classes$D.animation, isDelayedOpen && classes$D.isOpen), 
             // @ts-ignore
             style: duration ? { "--duration": `${duration}s` } : undefined, onTransitionEndCapture: handleTransitionEnd },
-            React.createElement("div", { className: isHidden ? classes$C.hidden : classes$C.shown }, children))));
+            React.createElement("div", { className: isHidden ? classes$D.hidden : classes$D.shown }, children))));
 };
 
 const CollapsiblePanel = (_a) => {
     var { isInitiallyOpen, children, titleAction } = _a, rest = __rest(_a, ["isInitiallyOpen", "children", "titleAction"]);
     const [isOpen, setIsOpen] = React.useState(isInitiallyOpen);
     const toggleOpen = React.useCallback(() => setIsOpen(!isOpen), [setIsOpen, isOpen]);
-    return (React.createElement(Panel, Object.assign({ className: clsx(classes$E.panel, !isOpen && classes$E.isClosed) }, rest, { onClickTitle: toggleOpen, p: 0, titleAction: React.createElement("div", { className: clsx(classes$E.titleActionWrapper, !isOpen && classes$E.isClosed) }, titleAction) }),
+    return (React.createElement(Panel, Object.assign({ className: clsx(classes$F.panel, !isOpen && classes$F.isClosed) }, rest, { onClickTitle: toggleOpen, p: 0, titleAction: React.createElement("div", { className: clsx(classes$F.titleActionWrapper, !isOpen && classes$F.isClosed) }, titleAction) }),
         React.createElement(SlideOpen, { isOpen: isOpen },
             React.createElement(Box, { p: 3 }, children))));
 };
@@ -948,14 +948,14 @@ const useConfirmModal = ({ onConfirm }) => {
     ];
 };
 
-var classes$B = {"overlay":"Overlay-module_overlay__EkbfA","delay":"Overlay-module_delay__za2Du"};
+var classes$C = {"overlay":"Overlay-module_overlay__EkbfA","delay":"Overlay-module_delay__za2Du"};
 
 const Overlay = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("div", Object.assign({ className: clsx(className, classes$B.overlay) }, rest)));
+    return (React.createElement("div", Object.assign({ className: clsx(className, classes$C.overlay) }, rest)));
 };
 
-var classes$A = {"wrapper":"Modal-module_wrapper__34Hds","content":"Modal-module_content__dWO-B","panel":"Modal-module_panel__lp9I7"};
+var classes$B = {"wrapper":"Modal-module_wrapper__34Hds","content":"Modal-module_content__dWO-B","panel":"Modal-module_panel__lp9I7"};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1656,9 +1656,9 @@ if (process.env.NODE_ENV === 'production') {
 
 var reactDomExports = reactDom.exports;
 
-var classes$z = {"hidden":"Hide-module_hidden__flCWB"};
+var classes$A = {"hidden":"Hide-module_hidden__flCWB"};
 
-const Hide = ({ when, children }) => (React.createElement("div", { className: clsx(when && classes$z.hidden) }, children));
+const Hide = ({ when, children }) => (React.createElement("div", { className: clsx(when && classes$A.hidden) }, children));
 
 const Modal = (_a) => {
     var { isHidden = false, children, handleClickOverlay, buttons, onSubmit } = _a, panelProps = __rest(_a, ["isHidden", "children", "handleClickOverlay", "buttons", "onSubmit"]);
@@ -1668,30 +1668,30 @@ const Modal = (_a) => {
             document.body.style.overflow = "visible";
         };
     }, []);
-    const panel = (React.createElement(Panel, Object.assign({ className: classes$A.panel, footer: buttons ? (React.createElement(Box, { display: "flex", justifyContent: "flex-end" }, buttons)) : undefined }, panelProps), children && React.createElement("div", { className: classes$A.content }, children)));
+    const panel = (React.createElement(Panel, Object.assign({ className: classes$B.panel, footer: buttons ? (React.createElement(Box, { display: "flex", justifyContent: "flex-end" }, buttons)) : undefined }, panelProps), children && React.createElement("div", { className: classes$B.content }, children)));
     return reactDomExports.createPortal(React.createElement(Hide, { when: isHidden },
         React.createElement(Overlay, { onClick: handleClickOverlay }),
-        React.createElement("div", { className: classes$A.wrapper },
+        React.createElement("div", { className: classes$B.wrapper },
             React.createElement(SlideInFromTop, null, onSubmit ? React.createElement("form", { onSubmit: onSubmit }, panel) : panel))), document.getElementById("modal-root") || document.body);
 };
 
-var classes$y = {"wrapper":"Button-module_wrapper__nbaE8","stretch":"Button-module_stretch__JWfY7","actionButton":"Button-module_actionButton__S1gAt","button":"Button-module_button__PNye2","inline":"Button-module_inline__AMjqw","interactiveDisabled":"Button-module_interactiveDisabled__oFKm4","variant-basic":"Button-module_variant-basic__lKAIX","variant-default":"Button-module_variant-default__Sr0CI","variant-text":"Button-module_variant-text__Nc1vT","icon":"Button-module_icon__OlcRJ","hasChildren":"Button-module_hasChildren__rEq-P","variant-primary":"Button-module_variant-primary__RNJDU","variant-secondary":"Button-module_variant-secondary__TnXFg","variant-danger":"Button-module_variant-danger__PZS1I","iconWrapper":"Button-module_iconWrapper__YwLLt"};
+var classes$z = {"wrapper":"Button-module_wrapper__nbaE8","stretch":"Button-module_stretch__JWfY7","actionButton":"Button-module_actionButton__S1gAt","button":"Button-module_button__PNye2","inline":"Button-module_inline__AMjqw","interactiveDisabled":"Button-module_interactiveDisabled__oFKm4","variant-basic":"Button-module_variant-basic__lKAIX","variant-default":"Button-module_variant-default__Sr0CI","variant-text":"Button-module_variant-text__Nc1vT","icon":"Button-module_icon__OlcRJ","hasChildren":"Button-module_hasChildren__rEq-P","variant-primary":"Button-module_variant-primary__RNJDU","variant-secondary":"Button-module_variant-secondary__TnXFg","variant-danger":"Button-module_variant-danger__PZS1I","iconWrapper":"Button-module_iconWrapper__YwLLt"};
 
 const Button = React.forwardRef((_a, ref) => {
     var { children, icon, variant = "default", actionButton, stretch, inline, interactiveDisabled, className } = _a, props = __rest(_a, ["children", "icon", "variant", "actionButton", "stretch", "inline", "interactiveDisabled", "className"]);
-    return (React.createElement("div", { className: clsx(classes$y.wrapper, actionButton && classes$y.actionButton, stretch && classes$y.stretch) },
-        React.createElement("button", Object.assign({ className: clsx(classes$y.button, classes$y[`variant-${variant}`], !!children && classes$y.hasChildren, icon && classes$y.icon, actionButton && classes$y.actionButton, stretch && classes$y.stretch, inline && classes$y.inline, interactiveDisabled && classes$y.interactiveDisabled, className), ref: ref }, props),
-            icon && (React.createElement("span", { className: clsx(classes$y.iconWrapper, classes$y[`variant-${variant}`], !!children && classes$y.hasChildren) }, icon)),
+    return (React.createElement("div", { className: clsx(classes$z.wrapper, actionButton && classes$z.actionButton, stretch && classes$z.stretch) },
+        React.createElement("button", Object.assign({ className: clsx(classes$z.button, classes$z[`variant-${variant}`], !!children && classes$z.hasChildren, icon && classes$z.icon, actionButton && classes$z.actionButton, stretch && classes$z.stretch, inline && classes$z.inline, interactiveDisabled && classes$z.interactiveDisabled, className), ref: ref }, props),
+            icon && (React.createElement("span", { className: clsx(classes$z.iconWrapper, classes$z[`variant-${variant}`], !!children && classes$z.hasChildren) }, icon)),
             children)));
 });
 
-var classes$x = {"button":"ConfirmModal-module_button__rndXD"};
+var classes$y = {"button":"ConfirmModal-module_button__rndXD"};
 
 const ConfirmModal = (_a) => {
     var { children, cancelLabel = "Nee, annuleren", confirmLabel = "Ja", confirmVariant = "secondary", confirmIcon, cancelIcon, isOpen, isPending, onCancel, onConfirm } = _a, rest = __rest(_a, ["children", "cancelLabel", "confirmLabel", "confirmVariant", "confirmIcon", "cancelIcon", "isOpen", "isPending", "onCancel", "onConfirm"]);
     return isOpen ? (React.createElement(Modal, Object.assign({}, rest, { handleClickOverlay: onCancel, buttons: React.createElement(React.Fragment, null,
-            React.createElement(Button, { className: classes$x.button, "data-testid": "btn-cancel", onClick: onCancel, variant: "basic", icon: cancelIcon, disabled: isPending }, cancelLabel),
-            React.createElement(Button, { className: classes$x.button, "data-testid": "btn-confirm", onClick: onConfirm, variant: confirmVariant, icon: confirmIcon, disabled: isPending }, confirmLabel)) }), children)) : null;
+            React.createElement(Button, { className: classes$y.button, "data-testid": "btn-cancel", onClick: onCancel, variant: "basic", icon: cancelIcon, disabled: isPending }, cancelLabel),
+            React.createElement(Button, { className: classes$y.button, "data-testid": "btn-confirm", onClick: onConfirm, variant: confirmVariant, icon: confirmIcon, disabled: isPending }, confirmLabel)) }), children)) : null;
 };
 
 const noop = () => { };
@@ -1706,61 +1706,61 @@ const ConfirmButton = (_a) => {
         React.createElement(ConfirmModal, Object.assign({ title: "Are you sure?" }, modalProps, modalHandlerProps))));
 };
 
-var classes$w = {"wrapper":"Container-module_wrapper__RRZ0b"};
+var classes$x = {"wrapper":"Container-module_wrapper__RRZ0b"};
 
 const Container = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("div", Object.assign({}, props, { className: clsx(classes$w.wrapper, className) })));
+    return (React.createElement("div", Object.assign({}, props, { className: clsx(classes$x.wrapper, className) })));
 };
 
-var classes$v = {"table":"Table-module_table__Dkosn","tr":"Table-module_tr__7UG8J","variant-positive":"Table-module_variant-positive__71gFV","disableHover":"Table-module_disableHover__vv-sQ","variant-negative":"Table-module_variant-negative__dtSY7","variant-info":"Table-module_variant-info__oxZNe","variant-warning":"Table-module_variant-warning__buDZq","variant-basic":"Table-module_variant-basic__QksCj","variant-emphasized":"Table-module_variant-emphasized__K1CXV","td":"Table-module_td__jv9tA","width":"Table-module_width__bS4aU","th":"Table-module_th__PNuEx","inner":"Table-module_inner__TCfso","sortable":"Table-module_sortable__W4c6P","asc":"Table-module_asc__-caTr","desc":"Table-module_desc__jQI8s"};
+var classes$w = {"table":"Table-module_table__Dkosn","tr":"Table-module_tr__7UG8J","variant-positive":"Table-module_variant-positive__71gFV","disableHover":"Table-module_disableHover__vv-sQ","variant-negative":"Table-module_variant-negative__dtSY7","variant-info":"Table-module_variant-info__oxZNe","variant-warning":"Table-module_variant-warning__buDZq","variant-basic":"Table-module_variant-basic__QksCj","variant-emphasized":"Table-module_variant-emphasized__K1CXV","td":"Table-module_td__jv9tA","width":"Table-module_width__bS4aU","th":"Table-module_th__PNuEx","inner":"Table-module_inner__TCfso","sortable":"Table-module_sortable__W4c6P","asc":"Table-module_asc__-caTr","desc":"Table-module_desc__jQI8s"};
 
 const StyledTableRow = React.forwardRef((_a, ref) => {
     var { className, disableHover } = _a, rest = __rest(_a, ["className", "disableHover"]);
-    return (React.createElement("tr", Object.assign({ ref: ref, className: clsx(classes$v.tr, disableHover && classes$v.disableHover, className) }, rest)));
+    return (React.createElement("tr", Object.assign({ ref: ref, className: clsx(classes$w.tr, disableHover && classes$w.disableHover, className) }, rest)));
 });
 const StyledTableCell = React.forwardRef((_a, ref) => {
     var { className, variant = "basic", width } = _a, rest = __rest(_a, ["className", "variant", "width"]);
     const hasWidth = width !== null && width !== undefined;
-    return (React.createElement("td", Object.assign({ ref: ref, className: clsx(classes$v.td, classes$v[`variant-${variant}`], hasWidth && classes$v.width, className), 
+    return (React.createElement("td", Object.assign({ ref: ref, className: clsx(classes$w.td, classes$w[`variant-${variant}`], hasWidth && classes$w.width, className), 
         // @ts-ignore
         style: hasWidth ? { "--width": width } : undefined }, rest)));
 });
 const StyledTableHeadCell = React.forwardRef((_a, ref) => {
     var { sortable, sortDirection, width, className, children } = _a, rest = __rest(_a, ["sortable", "sortDirection", "width", "className", "children"]);
     const hasWidth = width !== null && width !== undefined;
-    return (React.createElement("th", Object.assign({ ref: ref, className: clsx(classes$v.th, sortable && classes$v.sortable, sortDirection && classes$v[sortDirection], hasWidth && classes$v.width, className), 
+    return (React.createElement("th", Object.assign({ ref: ref, className: clsx(classes$w.th, sortable && classes$w.sortable, sortDirection && classes$w[sortDirection], hasWidth && classes$w.width, className), 
         // @ts-ignore
         style: hasWidth ? { "--width": width } : undefined }, rest),
-        React.createElement("span", { className: classes$v.inner }, children)));
+        React.createElement("span", { className: classes$w.inner }, children)));
 });
 // Wrapper to allow for dot notated components:
 const Table = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("table", Object.assign({ className: clsx(classes$v.table, className) }, rest)));
+    return (React.createElement("table", Object.assign({ className: clsx(classes$w.table, className) }, rest)));
 };
 Table.Row = StyledTableRow;
 Table.HeadCell = StyledTableHeadCell;
 Table.Cell = StyledTableCell;
 
-var classes$u = {"row":"Details-module_row__0d8vi","isFirstRow":"Details-module_isFirstRow__iVno4"};
+var classes$v = {"row":"Details-module_row__0d8vi","isFirstRow":"Details-module_isFirstRow__iVno4"};
 
 const Details = ({ className, details, firstColumnWidth, }) => (React.createElement(Table, { className: className },
     React.createElement("tbody", null, Object.entries(details).map(([key, val], index) => (React.createElement(Table.Row, { key: key, disableHover: true },
-        React.createElement(Table.Cell, { style: { width: firstColumnWidth }, className: clsx(classes$u.cell, index === 0 && classes$u.isFirstRow) }, key),
-        React.createElement(Table.Cell, { className: clsx(classes$u.cell, index === 0 && classes$u.isFirstRow) }, val)))))));
+        React.createElement(Table.Cell, { style: { width: firstColumnWidth }, className: clsx(classes$v.cell, index === 0 && classes$v.isFirstRow) }, key),
+        React.createElement(Table.Cell, { className: clsx(classes$v.cell, index === 0 && classes$v.isFirstRow) }, val)))))));
 
-var classes$t = {"wrapper":"Dropdown-module_wrapper__79ooc","dropper":"Dropdown-module_dropper__uVdEf","left":"Dropdown-module_left__JYKmP","right":"Dropdown-module_right__UefzB","dropdownMenu":"Dropdown-module_dropdownMenu__5R4vo","dropdownMenuItem":"Dropdown-module_dropdownMenuItem__dj4Gp"};
+var classes$u = {"wrapper":"Dropdown-module_wrapper__79ooc","dropper":"Dropdown-module_dropper__uVdEf","left":"Dropdown-module_left__JYKmP","right":"Dropdown-module_right__UefzB","hidden":"Dropdown-module_hidden__FmQN5","slideInFromTop":"Dropdown-module_slideInFromTop__RVABO","dropdownMenu":"Dropdown-module_dropdownMenu__5R4vo","dropdownMenuItem":"Dropdown-module_dropdownMenuItem__dj4Gp"};
 
 const DropdownMenu = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("ul", Object.assign({ className: clsx(classes$t.dropdownMenu, className) }, rest)));
+    return (React.createElement("ul", Object.assign({ className: clsx(classes$u.dropdownMenu, className) }, rest)));
 };
 const DropdownMenuItem = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("li", Object.assign({ className: clsx(classes$t.dropdownMenuItem, className) }, rest)));
+    return (React.createElement("li", Object.assign({ className: clsx(classes$u.dropdownMenuItem, className) }, rest)));
 };
-const Dropdown = ({ buttonProps, align = "left", children, stayOpenOnClick, }) => {
+const Dropdown = ({ buttonProps, align = "left", children, stayOpenOnClick, hideUsingCss, }) => {
     const dropper = React.useRef(null);
     const [isOpen, setIsOpen] = React.useState(false);
     const handleOpen = React.useCallback(() => setIsOpen(true), [setIsOpen]);
@@ -1778,13 +1778,12 @@ const Dropdown = ({ buttonProps, align = "left", children, stayOpenOnClick, }) =
             document.removeEventListener("click", handleClose);
         };
     }, [isOpen, handleClose]);
-    return (React.createElement("div", { className: classes$t.wrapper },
+    return (React.createElement("div", { className: classes$u.wrapper },
         React.createElement(Button, Object.assign({}, buttonProps, { onClick: handleOpen })),
-        isOpen && (React.createElement(SlideInFromTop, { speed: ".1s" },
-            React.createElement("span", { className: clsx(classes$t.dropper, align === "left" && classes$t.left, align === "right" && classes$t.right), ref: dropper }, children)))));
+        (isOpen || hideUsingCss) && (React.createElement("span", { className: clsx(classes$u.dropper, !isOpen && classes$u.hidden, align === "left" && classes$u.left, align === "right" && classes$u.right), ref: dropper }, children))));
 };
 
-var classes$s = {"dropzone":"Dropzone-module_dropzone__WvixK","centered":"Dropzone-module_centered__00ZHP","isReadyToDrop":"Dropzone-module_isReadyToDrop__NX-Ix","input":"Dropzone-module_input__AEKgL","idle":"Dropzone-module_idle__HViGO","deleteButton":"Dropzone-module_deleteButton__6zeTi","fileName":"Dropzone-module_fileName__XqXj8"};
+var classes$t = {"dropzone":"Dropzone-module_dropzone__WvixK","centered":"Dropzone-module_centered__00ZHP","isReadyToDrop":"Dropzone-module_isReadyToDrop__NX-Ix","input":"Dropzone-module_input__AEKgL","idle":"Dropzone-module_idle__HViGO","deleteButton":"Dropzone-module_deleteButton__6zeTi","fileName":"Dropzone-module_fileName__XqXj8"};
 
 const Dropzone = React.forwardRef((_a, ref) => {
     var { className, placeholder, icon } = _a, props = __rest(_a, ["className", "placeholder", "icon"]);
@@ -1827,19 +1826,19 @@ const Dropzone = React.forwardRef((_a, ref) => {
             ref === null || ref === void 0 ? void 0 : ref(el);
         }
     }, [ref, handleChange]);
-    return (React.createElement("div", { ref: dropzone, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: !hasFiles ? handleClick : undefined, className: clsx(classes$s.dropzone, !hasFiles && classes$s.centered, isReadyToDrop && classes$s.isReadyToDrop) },
-        React.createElement("input", Object.assign({ className: clsx(classes$s.input, isReadyToDrop ? classes$s.isReadyToDrop : classes$s.idle), "data-testid": "dropzone-file-input", type: "file", ref: extendedRef, multiple: true }, props)),
+    return (React.createElement("div", { ref: dropzone, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: !hasFiles ? handleClick : undefined, className: clsx(classes$t.dropzone, !hasFiles && classes$t.centered, isReadyToDrop && classes$t.isReadyToDrop) },
+        React.createElement("input", Object.assign({ className: clsx(classes$t.input, isReadyToDrop ? classes$t.isReadyToDrop : classes$t.idle), "data-testid": "dropzone-file-input", type: "file", ref: extendedRef, multiple: true }, props)),
         React.createElement(Box, null,
             !hasFiles && (React.createElement(Button, { variant: "text", color: "secondary", type: "button", icon: icon }, placeholder)),
             hasFiles && (React.createElement(React.Fragment, null,
-                React.createElement("button", { className: classes$s.deleteButton, "data-testid": "file-clear", onClick: handleRemove }),
-                React.createElement("ol", null, fileNames.map((fileName, i) => (React.createElement("li", { key: i, className: classes$s.fileName }, fileName)))))))));
+                React.createElement("button", { className: classes$t.deleteButton, "data-testid": "file-clear", onClick: handleRemove }),
+                React.createElement("ol", null, fileNames.map((fileName, i) => (React.createElement("li", { key: i, className: classes$t.fileName }, fileName)))))))));
 });
 
-var classes$r = {"box":"Feedback-module_box__ESWf9"};
+var classes$s = {"box":"Feedback-module_box__ESWf9"};
 
 const Feedback = ({ onConfirm, buttonLabel, buttonIcon, title, subtitle, }) => (React.createElement(Modal, { handleClickOverlay: onConfirm, buttons: React.createElement(Button, { "data-testid": "confirm", stretch: true, icon: buttonIcon, variant: "secondary", onClick: onConfirm }, buttonLabel) },
-    React.createElement(Box, { pt: 3, pb: 3, className: classes$r.box },
+    React.createElement(Box, { pt: 3, pb: 3, className: classes$s.box },
         React.createElement(Box, { pb: 5, textAlign: "center" },
             React.createElement(Header, null, title),
             subtitle && (React.createElement(Box, { pt: 5 },
@@ -1864,62 +1863,62 @@ const Floater = (_a) => {
     return (React.createElement(Box, Object.assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display, flexWrap: multiRow ? { laptop: "wrap" } : undefined, rowGap: multiRow ? { laptop: 2 } : undefined, columnGap: { laptop: 2 }, pl: { laptop: 1 }, pr: { laptop: 1 } }, props), items.filter(Boolean).map((item, i) => hasElement(item) ? (React.createElement(FloaterItem, { key: i, laptopWidth: item.forceEqualWidth ? `${100 / items.length}%` : undefined, stretch: item.stretch || false }, item.element)) : (React.createElement(FloaterItem, { key: i, laptopWidth: forceEqualWidth ? `${100 / items.length}%` : undefined, stretch: stretch }, item)))));
 };
 
-var classes$q = {"box":"Footer-module_box__KZvsx"};
+var classes$r = {"box":"Footer-module_box__KZvsx"};
 
-var classes$p = {"wrapper":"SideBar-module_wrapper__8tZbH","isMobileMenuOpen":"SideBar-module_isMobileMenuOpen__1yI4z","isDesktopMenuOpen":"SideBar-module_isDesktopMenuOpen__S25Jl"};
+var classes$q = {"wrapper":"SideBar-module_wrapper__8tZbH","isMobileMenuOpen":"SideBar-module_isMobileMenuOpen__1yI4z","isDesktopMenuOpen":"SideBar-module_isDesktopMenuOpen__S25Jl"};
 
 const SIDEBAR_COLLAPSED_WIDTH = 15;
 const SideBar = ({ isMobileMenuOpen, minWidth, children, }) => {
     const { closeSideMenu, openSideMenu, isSideMenuOpen } = useUiStateContext();
-    return (React.createElement(Box, { className: clsx("sidebar", classes$p.wrapper, isMobileMenuOpen && classes$p.isMobileMenuOpen, isSideMenuOpen && classes$p.isDesktopMenuOpen), onMouseEnter: openSideMenu, onMouseLeave: closeSideMenu, style: {
+    return (React.createElement(Box, { className: clsx("sidebar", classes$q.wrapper, isMobileMenuOpen && classes$q.isMobileMenuOpen, isSideMenuOpen && classes$q.isDesktopMenuOpen), onMouseEnter: openSideMenu, onMouseLeave: closeSideMenu, style: {
             // @ts-ignore
             "--minWidth": minWidth || 75,
             "--collapsed-width": SIDEBAR_COLLAPSED_WIDTH,
         } }, children));
 };
 
-const Footer = ({ children, }) => (React.createElement(Box, { pt: 2, pb: 2, pr: 5, pl: { mobile: 5, laptop: SIDEBAR_COLLAPSED_WIDTH + 5 }, className: classes$q.box }, children));
+const Footer = ({ children, }) => (React.createElement(Box, { pt: 2, pb: 2, pr: 5, pl: { mobile: 5, laptop: SIDEBAR_COLLAPSED_WIDTH + 5 }, className: classes$r.box }, children));
 
-var classes$o = {"box":"HorizontalScroller-module_box__W07vp"};
+var classes$p = {"box":"HorizontalScroller-module_box__W07vp"};
 
-const HorizontalScroller = ({ children, }) => React.createElement("div", { className: classes$o.box }, children);
+const HorizontalScroller = ({ children, }) => React.createElement("div", { className: classes$p.box }, children);
 
-var classes$n = {"hamburgerButton":"HamburgerButton-module_hamburgerButton__uFuws"};
+var classes$o = {"hamburgerButton":"HamburgerButton-module_hamburgerButton__uFuws"};
 
 const HamburgerButton = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(Button, Object.assign({ className: clsx(classes$n.hamburgerButton, className) }, props)));
+    return (React.createElement(Button, Object.assign({ className: clsx(classes$o.hamburgerButton, className) }, props)));
 };
 
-var classes$m = {"menu":"Menu-module_menu__uj3BS","menuItem":"Menu-module_menuItem__96xoX","isActive":"Menu-module_isActive__idoz4","isOpen":"Menu-module_isOpen__p1ar3"};
+var classes$n = {"menu":"Menu-module_menu__uj3BS","menuItem":"Menu-module_menuItem__96xoX","isActive":"Menu-module_isActive__idoz4","isOpen":"Menu-module_isOpen__p1ar3"};
 
-const Menu = ({ children }) => (React.createElement("ul", { className: classes$m.menu }, children));
+const Menu = ({ children }) => (React.createElement("ul", { className: classes$n.menu }, children));
 const MenuItem = ({ item, isOpen, isActive, children, }) => {
     const [isDelayedOpen, setDelayedOpen] = React.useState(!!isOpen);
-    return (React.createElement("li", { className: clsx(classes$m.menuItem, isDelayedOpen && classes$m.isOpen, !!isActive && classes$m.isActive) },
+    return (React.createElement("li", { className: clsx(classes$n.menuItem, isDelayedOpen && classes$n.isOpen, !!isActive && classes$n.isActive) },
         item,
         children && (React.createElement(SlideOpen, { onChange: setDelayedOpen, isOpen: !!isOpen, duration: 0.25 }, children))));
 };
 
-var classes$l = {"menuCloseButton":"MenuCloseButton-module_menuCloseButton__c2jye"};
+var classes$m = {"menuCloseButton":"MenuCloseButton-module_menuCloseButton__c2jye"};
 
 const MenuCloseButton = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(Button, Object.assign({ actionButton: true, className: clsx(classes$l.menuCloseButton, className) }, props)));
+    return (React.createElement(Button, Object.assign({ actionButton: true, className: clsx(classes$m.menuCloseButton, className) }, props)));
 };
 
-var classes$k = {"wrapper":"MenuSlideOpenIndicator-module_wrapper__Q6Ykj"};
+var classes$l = {"wrapper":"MenuSlideOpenIndicator-module_wrapper__Q6Ykj"};
 
 const MenuSlideOpenIndicator = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement(Box, Object.assign({ className: clsx(classes$k.wrapper, className), 
+    return (React.createElement(Box, Object.assign({ className: clsx(classes$l.wrapper, className), 
         // @ts-ignore
         style: { "--collapsed-width": SIDEBAR_COLLAPSED_WIDTH } }, rest)));
 };
 
-var classes$j = {"sideBarHeader":"SideBarHeader-module_sideBarHeader__7zbYN"};
+var classes$k = {"sideBarHeader":"SideBarHeader-module_sideBarHeader__7zbYN"};
 
-const SideBarHeader = ({ children, right, }) => (React.createElement(Box, { className: classes$j.sideBarHeader },
+const SideBarHeader = ({ children, right, }) => (React.createElement(Box, { className: classes$k.sideBarHeader },
     React.createElement(Box, { flexGrow: 1, display: "flex" },
         React.createElement(Box, { flexGrow: 1, display: "flex", flexDirection: "column", justifyContent: "center" }, children)),
     right && React.createElement(Box, null, right)));
@@ -1969,7 +1968,7 @@ const useResponsiveBreakpoints = () => {
     return responsiveMap;
 };
 
-var classes$i = {"wrapper":"Paginator-module_wrapper__IPIcn","button":"Paginator-module_button__lkNBq","isActive":"Paginator-module_isActive__Qk3mv","isDisabled":"Paginator-module_isDisabled__uHGss"};
+var classes$j = {"wrapper":"Paginator-module_wrapper__IPIcn","button":"Paginator-module_button__lkNBq","isActive":"Paginator-module_isActive__Qk3mv","isDisabled":"Paginator-module_isDisabled__uHGss"};
 
 const range = (start, end) => {
     let nums = [];
@@ -1985,14 +1984,14 @@ const Paginator = (props) => {
     const clamSize = isTablet ? 2 : 0;
     const clamLower = Math.max(1, currentPage - clamSize);
     const clamUpper = Math.min(pageCount, currentPage + clamSize);
-    return (React.createElement("div", { className: classes$i.wrapper },
-        React.createElement("button", { "data-testid": "paginate-prev", disabled: currentPage === 1, onClick: () => onChange(currentPage - 1), className: clsx(classes$i.button, currentPage === 1 && classes$i.isDisabled) }, "\u27E8"),
-        clamLower > 1 && (React.createElement("button", { "data-testid": "paginate-page-1", "data-paginator": "first", onClick: () => onChange(1), className: clsx(classes$i.button, currentPage === 1 && classes$i.isActive) }, "1")),
-        clamLower > 2 && (React.createElement("button", { disabled: true, className: clsx(classes$i.button, classes$i.isDisabled) }, "...")),
-        range(clamLower, clamUpper + 1).map((pageNumber) => (React.createElement("button", { "data-testid": `paginate-page-${pageNumber}`, key: pageNumber, onClick: () => onChange(pageNumber), className: clsx(classes$i.button, currentPage === pageNumber && classes$i.isActive) }, pageNumber))),
-        clamUpper < pageCount - 1 && (React.createElement("button", { disabled: true, className: clsx(classes$i.button, classes$i.isDisabled) }, "...")),
-        clamUpper < pageCount && (React.createElement("button", { "data-testid": `paginate-page-${pageCount}`, "data-paginator": "last", onClick: () => onChange(pageCount), className: clsx(classes$i.button, currentPage === pageCount && classes$i.isActive) }, pageCount)),
-        React.createElement("button", { "data-testid": "paginate-next", disabled: currentPage === pageCount, onClick: () => onChange(currentPage + 1), className: clsx(classes$i.button, currentPage === pageCount && classes$i.isDisabled) }, "\u27E9")));
+    return (React.createElement("div", { className: classes$j.wrapper },
+        React.createElement("button", { "data-testid": "paginate-prev", disabled: currentPage === 1, onClick: () => onChange(currentPage - 1), className: clsx(classes$j.button, currentPage === 1 && classes$j.isDisabled) }, "\u27E8"),
+        clamLower > 1 && (React.createElement("button", { "data-testid": "paginate-page-1", "data-paginator": "first", onClick: () => onChange(1), className: clsx(classes$j.button, currentPage === 1 && classes$j.isActive) }, "1")),
+        clamLower > 2 && (React.createElement("button", { disabled: true, className: clsx(classes$j.button, classes$j.isDisabled) }, "...")),
+        range(clamLower, clamUpper + 1).map((pageNumber) => (React.createElement("button", { "data-testid": `paginate-page-${pageNumber}`, key: pageNumber, onClick: () => onChange(pageNumber), className: clsx(classes$j.button, currentPage === pageNumber && classes$j.isActive) }, pageNumber))),
+        clamUpper < pageCount - 1 && (React.createElement("button", { disabled: true, className: clsx(classes$j.button, classes$j.isDisabled) }, "...")),
+        clamUpper < pageCount && (React.createElement("button", { "data-testid": `paginate-page-${pageCount}`, "data-paginator": "last", onClick: () => onChange(pageCount), className: clsx(classes$j.button, currentPage === pageCount && classes$j.isActive) }, pageCount)),
+        React.createElement("button", { "data-testid": "paginate-next", disabled: currentPage === pageCount, onClick: () => onChange(currentPage + 1), className: clsx(classes$j.button, currentPage === pageCount && classes$j.isDisabled) }, "\u27E9")));
 };
 
 const VerticalRhythmLaptop = 7;
@@ -2000,15 +1999,15 @@ const VerticalRhythmMobile = 4;
 
 const Section = (props) => (React.createElement(Box, Object.assign({ pb: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile } }, props)));
 
-var classes$h = {"wrapper":"Statistic-module_wrapper__4eJ86","blue":"Statistic-module_blue__SsMhE","indigo":"Statistic-module_indigo__8DByg","purple":"Statistic-module_purple__mieHQ","pink":"Statistic-module_pink__2PBSu","red":"Statistic-module_red__T7SC1","orange":"Statistic-module_orange__eq9b2","yellow":"Statistic-module_yellow__0A2sj","green":"Statistic-module_green__LjLEE","teal":"Statistic-module_teal__rz09e","cyan":"Statistic-module_cyan__ljMqB","gray":"Statistic-module_gray__Bukv9","grayDark":"Statistic-module_grayDark__JoQc8","light":"Statistic-module_light__Q1XW7","dark":"Statistic-module_dark__HWch8","label":"Statistic-module_label__O256y","value":"Statistic-module_value__Af9tB","smaller":"Statistic-module_smaller__ni0vP","iconWrapper":"Statistic-module_iconWrapper__TudZL"};
+var classes$i = {"wrapper":"Statistic-module_wrapper__4eJ86","blue":"Statistic-module_blue__SsMhE","indigo":"Statistic-module_indigo__8DByg","purple":"Statistic-module_purple__mieHQ","pink":"Statistic-module_pink__2PBSu","red":"Statistic-module_red__T7SC1","orange":"Statistic-module_orange__eq9b2","yellow":"Statistic-module_yellow__0A2sj","green":"Statistic-module_green__LjLEE","teal":"Statistic-module_teal__rz09e","cyan":"Statistic-module_cyan__ljMqB","gray":"Statistic-module_gray__Bukv9","grayDark":"Statistic-module_grayDark__JoQc8","light":"Statistic-module_light__Q1XW7","dark":"Statistic-module_dark__HWch8","label":"Statistic-module_label__O256y","value":"Statistic-module_value__Af9tB","smaller":"Statistic-module_smaller__ni0vP","iconWrapper":"Statistic-module_iconWrapper__TudZL"};
 
-const Statistic = ({ icon, value, label, backgroundColor, smallerValue, valueTestId, }) => (React.createElement("div", { className: clsx(classes$h.wrapper, classes$h[backgroundColor]) },
-    React.createElement("div", { className: classes$h.iconWrapper }, icon),
+const Statistic = ({ icon, value, label, backgroundColor, smallerValue, valueTestId, }) => (React.createElement("div", { className: clsx(classes$i.wrapper, classes$i[backgroundColor]) },
+    React.createElement("div", { className: classes$i.iconWrapper }, icon),
     React.createElement(Box, { flexGrow: 1, textAlign: "right" },
-        React.createElement("div", { className: classes$h.label }, label),
-        React.createElement("div", { "data-testid": valueTestId, className: clsx(classes$h.value, smallerValue && classes$h.smaller) }, value))));
+        React.createElement("div", { className: classes$i.label }, label),
+        React.createElement("div", { "data-testid": valueTestId, className: clsx(classes$i.value, smallerValue && classes$i.smaller) }, value))));
 
-var classes$g = {"tab":"Tab-module_tab__Iwytl","isActive":"Tab-module_isActive__DXImz","hint":"Tab-module_hint__ynkFR","error":"Tab-module_error__OF1Ji"};
+var classes$h = {"tab":"Tab-module_tab__Iwytl","isActive":"Tab-module_isActive__DXImz","hint":"Tab-module_hint__ynkFR","error":"Tab-module_error__OF1Ji"};
 
 const Tab = (_a) => {
     var { id, isActive, onClick, variant } = _a, restProps = __rest(_a, ["id", "isActive", "onClick", "variant"]);
@@ -2017,39 +2016,39 @@ const Tab = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(id);
         }
     }, [id, isActive, onClick]);
-    return (React.createElement(Box, Object.assign({ className: clsx(classes$g.tab, isActive && classes$g.isActive, variant && classes$g[variant]) }, restProps, { onClick: handleClick })));
+    return (React.createElement(Box, Object.assign({ className: clsx(classes$h.tab, isActive && classes$h.isActive, variant && classes$h[variant]) }, restProps, { onClick: handleClick })));
 };
 
-var classes$f = {"tabContent":"TabContent-module_tabContent__hMTiE"};
+var classes$g = {"tabContent":"TabContent-module_tabContent__hMTiE"};
 
 const TabContent = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement(Box, Object.assign({ className: clsx(classes$f.tabContent, className), p: 3 }, rest)));
+    return (React.createElement(Box, Object.assign({ className: clsx(classes$g.tabContent, className), p: 3 }, rest)));
 };
 
-var classes$e = {"tabs":"Tabs-module_tabs__QzIkz"};
+var classes$f = {"tabs":"Tabs-module_tabs__QzIkz"};
 
 const Tabs = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement(Box, Object.assign({ className: clsx(className, classes$e.tabs) }, rest)));
+    return (React.createElement(Box, Object.assign({ className: clsx(className, classes$f.tabs) }, rest)));
 };
 
-var classes$d = {"flatPanel":"Timeline-module_flatPanel__TzdFU","wrapper":"Timeline-module_wrapper__sWd71","line":"Timeline-module_line__CwY-N","circle":"Timeline-module_circle__7kyfg"};
+var classes$e = {"flatPanel":"Timeline-module_flatPanel__TzdFU","wrapper":"Timeline-module_wrapper__sWd71","line":"Timeline-module_line__CwY-N","circle":"Timeline-module_circle__7kyfg"};
 
-const Timeline = ({ title, icon, color, isInitiallyOpen, titleMeta, chevron, children, }) => (React.createElement(Box, { className: classes$d.wrapper },
-    React.createElement(Box, { className: classes$d.line },
-        React.createElement("div", { className: classes$d.circle, style: { "--background-color": color } }, icon)),
+const Timeline = ({ title, icon, color, isInitiallyOpen, titleMeta, chevron, children, }) => (React.createElement(Box, { className: classes$e.wrapper },
+    React.createElement(Box, { className: classes$e.line },
+        React.createElement("div", { className: classes$e.circle, style: { "--background-color": color } }, icon)),
     React.createElement(Box, { pb: 4, flexGrow: 1 },
         React.createElement(CollapsiblePanel, { isInitiallyOpen: isInitiallyOpen, titleMeta: titleMeta, title: title, titleAction: chevron }, children))));
-const SimpleTimeline = ({ color, icon, title, titleMeta, }) => (React.createElement(Box, { className: classes$d.wrapper },
-    React.createElement(Box, { className: clsx(classes$d.line, "line") },
-        React.createElement("div", { className: classes$d.circle, style: { "--background-color": color } }, icon)),
+const SimpleTimeline = ({ color, icon, title, titleMeta, }) => (React.createElement(Box, { className: classes$e.wrapper },
+    React.createElement(Box, { className: clsx(classes$e.line, "line") },
+        React.createElement("div", { className: classes$e.circle, style: { "--background-color": color } }, icon)),
     React.createElement(Box, { pb: 4, flexGrow: 1 },
-        React.createElement(Panel, { className: classes$d.flatPanel, titleMeta: titleMeta, title: title }))));
+        React.createElement(Panel, { className: classes$e.flatPanel, titleMeta: titleMeta, title: title }))));
 
-var classes$c = {"wrapper":"TopBar-module_wrapper__DVlec"};
+var classes$d = {"wrapper":"TopBar-module_wrapper__DVlec"};
 
-const TopBar = ({ left, right, }) => (React.createElement(Box, { className: classes$c.wrapper },
+const TopBar = ({ left, right, }) => (React.createElement(Box, { className: classes$d.wrapper },
     React.createElement(Box, { display: "flex", alignItems: "center", pb: 1, pt: 1, pr: 5, pl: {
             mobile: 5,
             laptop: 5 + SIDEBAR_COLLAPSED_WIDTH,
@@ -2057,18 +2056,18 @@ const TopBar = ({ left, right, }) => (React.createElement(Box, { className: clas
         React.createElement(Box, { flexGrow: 1, display: "flex", pl: 2 }, left),
         React.createElement(Box, { flexGrow: 1, display: "flex", justifyContent: "flex-end" }, right))));
 
-var classes$b = {"toggle":"Toggle-module_toggle__kmzmH","checked":"Toggle-module_checked__wOt93","disabled":"Toggle-module_disabled__zqNfH","thumb":"Toggle-module_thumb__nibyJ"};
+var classes$c = {"toggle":"Toggle-module_toggle__kmzmH","checked":"Toggle-module_checked__wOt93","disabled":"Toggle-module_disabled__zqNfH","thumb":"Toggle-module_thumb__nibyJ"};
 
-const Toggle = ({ isChecked, isDisabled, onChange }) => (React.createElement("div", { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(!isChecked), className: clsx(classes$b.toggle, isChecked && classes$b.checked, isDisabled && classes$b.disabled) },
-    React.createElement("div", { className: classes$b.thumb })));
+const Toggle = ({ isChecked, isDisabled, onChange }) => (React.createElement("div", { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(!isChecked), className: clsx(classes$c.toggle, isChecked && classes$c.checked, isDisabled && classes$c.disabled) },
+    React.createElement("div", { className: classes$c.thumb })));
 
-var classes$a = {"label":"FormGridWrapper-module_label__3OAEA","error":"FormGridWrapper-module_error__80-SA","hint":"FormGridWrapper-module_hint__lj9vT","requiredAsterisk":"FormGridWrapper-module_requiredAsterisk__-4sG4"};
+var classes$b = {"label":"FormGridWrapper-module_label__3OAEA","error":"FormGridWrapper-module_error__80-SA","hint":"FormGridWrapper-module_hint__lj9vT","requiredAsterisk":"FormGridWrapper-module_requiredAsterisk__-4sG4"};
 
-const Label = ({ error, isRequired, className, children, }) => (React.createElement("label", { className: clsx(classes$a.label, !!error && classes$a.error, className) },
+const Label = ({ error, isRequired, className, children, }) => (React.createElement("label", { className: clsx(classes$b.label, !!error && classes$b.error, className) },
     children,
-    isRequired && React.createElement("span", { className: classes$a.requiredAsterisk })));
+    isRequired && React.createElement("span", { className: classes$b.requiredAsterisk })));
 
-var classes$9 = {"label":"Checkbox-module_label__uYQc9","input":"Checkbox-module_input__a4Cy-","dimmed":"Checkbox-module_dimmed__wAzQa"};
+var classes$a = {"label":"Checkbox-module_label__uYQc9","input":"Checkbox-module_input__a4Cy-","dimmed":"Checkbox-module_dimmed__wAzQa"};
 
 const Checkbox = React.forwardRef((_a, ref) => {
     var { options, spacing = 1, name, dimmed, className, orientation = "vertical", labelStyle } = _a, restProps = __rest(_a, ["options", "spacing", "name", "dimmed", "className", "orientation", "labelStyle"]);
@@ -2076,20 +2075,20 @@ const Checkbox = React.forwardRef((_a, ref) => {
         ? options
         : Object.entries(options);
     const contents = (React.createElement(React.Fragment, null, optionsArray.map(([value, label]) => (React.createElement(Box, { key: value, mt: spacing, mb: spacing },
-        React.createElement("label", { className: classes$9.label, key: value },
-            React.createElement("input", Object.assign({ className: clsx(className, classes$9.input), type: "checkbox", value: value, name: name, ref: ref }, restProps)),
-            React.createElement("span", { className: clsx(dimmed && classes$9.dimmed), style: labelStyle }, label)))))));
+        React.createElement("label", { className: classes$a.label, key: value },
+            React.createElement("input", Object.assign({ className: clsx(className, classes$a.input), type: "checkbox", value: value, name: name, ref: ref }, restProps)),
+            React.createElement("span", { className: clsx(dimmed && classes$a.dimmed), style: labelStyle }, label)))))));
     return orientation === "horizontal" ? (React.createElement(Box, { display: "flex", columnGap: 4 }, contents)) : (contents);
 });
 
-var classes$8 = {"input":"TextField-module_input__73ULM","textarea":"TextField-module_textarea__DzXRI"};
+var classes$9 = {"input":"TextField-module_input__73ULM","textarea":"TextField-module_textarea__DzXRI"};
 
 const TextField = React.forwardRef((_a, ref) => {
     var { multiline = false, className } = _a, restProps = __rest(_a, ["multiline", "className"]);
-    return multiline ? (React.createElement("textarea", Object.assign({ className: clsx(classes$8.textarea, classes$8.input, className), ref: ref }, restProps))) : (React.createElement("input", Object.assign({ className: clsx(classes$8.input, className), ref: ref, type: "text" }, restProps)));
+    return multiline ? (React.createElement("textarea", Object.assign({ className: clsx(classes$9.textarea, classes$9.input, className), ref: ref }, restProps))) : (React.createElement("input", Object.assign({ className: clsx(classes$9.input, className), ref: ref, type: "text" }, restProps)));
 });
 
-var classes$7 = {"wrapper":"FileField-module_wrapper__Av1Bz","hiddenInput":"FileField-module_hiddenInput__42z5Q","button":"FileField-module_button__13cFn","textField":"FileField-module_textField__-9ZPk","deleteButton":"FileField-module_deleteButton__RpWa3"};
+var classes$8 = {"wrapper":"FileField-module_wrapper__Av1Bz","hiddenInput":"FileField-module_hiddenInput__42z5Q","button":"FileField-module_button__13cFn","textField":"FileField-module_textField__-9ZPk","deleteButton":"FileField-module_deleteButton__RpWa3"};
 
 const FileField = React.forwardRef((_a, ref) => {
     var { className, placeholder, chooseFileLabel = "Choose file", changeFileLabel = "Change file", onClear } = _a, props = __rest(_a, ["className", "placeholder", "chooseFileLabel", "changeFileLabel", "onClear"]);
@@ -2117,26 +2116,26 @@ const FileField = React.forwardRef((_a, ref) => {
             ref === null || ref === void 0 ? void 0 : ref(el);
         }
     }, [ref, handleChange]);
-    return (React.createElement("div", { className: classes$7.wrapper },
-        React.createElement("input", Object.assign({ className: classes$7.hiddenInput, type: "file", ref: extendedRef }, props)),
-        React.createElement(Button, { className: classes$7.button, variant: "basic" }, !!fileName ? changeFileLabel : chooseFileLabel),
-        React.createElement(TextField, { placeholder: placeholder, className: clsx(classes$7.textField, className), disabled: true, value: fileName }),
-        !!fileName && onClear && (React.createElement("button", { className: classes$7.deleteButton, "data-testid": "file-clear", onClick: handleRemove }))));
+    return (React.createElement("div", { className: classes$8.wrapper },
+        React.createElement("input", Object.assign({ className: classes$8.hiddenInput, type: "file", ref: extendedRef }, props)),
+        React.createElement(Button, { className: classes$8.button, variant: "basic" }, !!fileName ? changeFileLabel : chooseFileLabel),
+        React.createElement(TextField, { placeholder: placeholder, className: clsx(classes$8.textField, className), disabled: true, value: fileName }),
+        !!fileName && onClear && (React.createElement("button", { className: classes$8.deleteButton, "data-testid": "file-clear", onClick: handleRemove }))));
 });
 
-var classes$6 = {"wrapper":"Select-module_wrapper__vBUHm","select":"Select-module_select__tfPHD","paddingOverlay":"Select-module_paddingOverlay__Y6O4-"};
+var classes$7 = {"wrapper":"Select-module_wrapper__vBUHm","select":"Select-module_select__tfPHD","paddingOverlay":"Select-module_paddingOverlay__Y6O4-"};
 
 const Select = React.forwardRef((_a, ref) => {
     var { options, className } = _a, props = __rest(_a, ["options", "className"]);
     const optionsArray = Array.isArray(options)
         ? options
         : Object.entries(options);
-    return (React.createElement("div", { className: classes$6.wrapper },
-        React.createElement("select", Object.assign({ className: clsx(classes$6.select, className), ref: ref }, props), optionsArray.map(([value, label]) => (React.createElement("option", { key: value, value: value }, label)))),
-        React.createElement("div", { className: classes$6.paddingOverlay }, "\u25BE")));
+    return (React.createElement("div", { className: classes$7.wrapper },
+        React.createElement("select", Object.assign({ className: clsx(classes$7.select, className), ref: ref }, props), optionsArray.map(([value, label]) => (React.createElement("option", { key: value, value: value }, label)))),
+        React.createElement("div", { className: classes$7.paddingOverlay }, "\u25BE")));
 });
 
-var classes$5 = {"progress":"PasswordStrengthField-module_progress__KIvlC","progressBar":"PasswordStrengthField-module_progressBar__Wz5Rz","bad":"PasswordStrengthField-module_bad__n300O","ok":"PasswordStrengthField-module_ok__LMIms","good":"PasswordStrengthField-module_good__MhPYT"};
+var classes$6 = {"progress":"PasswordStrengthField-module_progress__KIvlC","progressBar":"PasswordStrengthField-module_progressBar__Wz5Rz","bad":"PasswordStrengthField-module_bad__n300O","ok":"PasswordStrengthField-module_ok__LMIms","good":"PasswordStrengthField-module_good__MhPYT"};
 
 const passwordMinLength = (val) => val.length >= 8;
 const passwordHasNumbers = (val) => /\d/.test(val);
@@ -2166,13 +2165,13 @@ const PasswordStrengthField = React.forwardRef((props, ref) => {
     }, [ref, handleChange]);
     return (React.createElement(React.Fragment, null,
         React.createElement(TextField, Object.assign({}, props, { type: "password", ref: extendedRef })),
-        React.createElement("div", { className: classes$5.progress },
-            React.createElement("div", { className: clsx(classes$5.progressBar, score <= 2 ? classes$5.bad : score <= 3 ? classes$5.ok : classes$5.good), 
+        React.createElement("div", { className: classes$6.progress },
+            React.createElement("div", { className: clsx(classes$6.progressBar, score <= 2 ? classes$6.bad : score <= 3 ? classes$6.ok : classes$6.good), 
                 // @ts-ignore
                 style: { "--width": (score / maxScore) * 100 + "%" } }))));
 });
 
-var classes$4 = {"formGridCell":"FormGridCell-module_formGridCell__Y3e5s","rowOffset":"FormGridCell-module_rowOffset__xvXeK","mobile:position":"FormGridCell-module_mobile--position__1AeHR","tablet:position":"FormGridCell-module_tablet--position__Xxybj","laptop:position":"FormGridCell-module_laptop--position__gMNqe","desktop:position":"FormGridCell-module_desktop--position__UDC4a"};
+var classes$5 = {"formGridCell":"FormGridCell-module_formGridCell__Y3e5s","rowOffset":"FormGridCell-module_rowOffset__xvXeK","mobile:position":"FormGridCell-module_mobile--position__1AeHR","tablet:position":"FormGridCell-module_tablet--position__Xxybj","laptop:position":"FormGridCell-module_laptop--position__gMNqe","desktop:position":"FormGridCell-module_desktop--position__UDC4a"};
 
 const NUM_ROWS_PER_FIELD = 2;
 const generateDimensionVariablesForBreakpoint = (breakPoint, position, rowOffset) => {
@@ -2202,38 +2201,38 @@ const FormGridCell = ({ position, align, rowOffset = 0, children, className, })
         textAlign: align,
     });
     const dimensionVariables = generateDimensionVariables(position, rowOffset);
-    return (React.createElement("div", { className: clsx(classes$4.formGridCell, rowOffset && classes$4.rowOffset, position.mobile && classes$4["mobile:position"], position.tablet && classes$4["tablet:position"], position.laptop && classes$4["laptop:position"], position.desktop && classes$4["desktop:position"], classNames, className), style: Object.assign(Object.assign({}, variables), dimensionVariables) }, children));
+    return (React.createElement("div", { className: clsx(classes$5.formGridCell, rowOffset && classes$5.rowOffset, position.mobile && classes$5["mobile:position"], position.tablet && classes$5["tablet:position"], position.laptop && classes$5["laptop:position"], position.desktop && classes$5["desktop:position"], classNames, className), style: Object.assign(Object.assign({}, variables), dimensionVariables) }, children));
 };
 
 const FormGridWrapper = ({ position, align, label, hint, error, isRequired, children }) => (React.createElement(React.Fragment, null,
     React.createElement(FormGridCell, { position: position, align: align, className: "form-grid-cell__label-hint" },
         label && (React.createElement(Label, { error: !!error, isRequired: isRequired }, label)),
-        hint && (React.createElement("div", { className: clsx(classes$a.hint, !!error && classes$a.error) }, hint))),
+        hint && (React.createElement("div", { className: clsx(classes$b.hint, !!error && classes$b.error) }, hint))),
     React.createElement(FormGridCell, { position: position, align: align, rowOffset: 1, className: clsx({
             "form-grid-cell__field-error": true,
             "has-error": !!error,
         }) },
         children,
-        error && React.createElement("div", { className: classes$a.error }, error))));
+        error && React.createElement("div", { className: classes$b.error }, error))));
 
-var classes$3 = {"formGrid":"FormGrid-module_formGrid__2OSmK"};
+var classes$4 = {"formGrid":"FormGrid-module_formGrid__2OSmK"};
 
 const FormGrid = (_a) => {
     var { columns, className } = _a, props = __rest(_a, ["columns", "className"]);
     const { classNames, variables } = getResponsiveProps({ columns });
-    return (React.createElement("div", Object.assign({ className: clsx(classes$3.formGrid, className, classNames), 
+    return (React.createElement("div", Object.assign({ className: clsx(classes$4.formGrid, className, classNames), 
         // @ts-ignore
         style: Object.assign(Object.assign({}, variables), { "--numRowsPerField": 2 }) }, props)));
 };
 
-var classes$2 = {"wrapper":"DefaultLayout-module_wrapper__UPzJr","wrapperInner":"DefaultLayout-module_wrapperInner__ZdGKn","sidebarWrapper":"DefaultLayout-module_sidebarWrapper__Jehqe","contentBox":"DefaultLayout-module_contentBox__lVxGL"};
+var classes$3 = {"wrapper":"DefaultLayout-module_wrapper__UPzJr","wrapperInner":"DefaultLayout-module_wrapperInner__ZdGKn","sidebarWrapper":"DefaultLayout-module_sidebarWrapper__Jehqe","contentBox":"DefaultLayout-module_contentBox__lVxGL"};
 
 const DefaultLayout = ({ sideBarProps, topBarProps, footerProps, children }) => {
-    return (React.createElement(Box, { className: classes$2.wrapper, flexGrow: 1, display: "flex", flexDirection: "column" },
-        React.createElement(Box, { className: classes$2.wrapperInner, flexGrow: 1, flexShrink: 0, "data-foo": "test", flexBasis: { mobile: "100%", laptop: "25%" } },
-            sideBarProps && (React.createElement(Box, { className: classes$2.sidebarWrapper },
+    return (React.createElement(Box, { className: classes$3.wrapper, flexGrow: 1, display: "flex", flexDirection: "column" },
+        React.createElement(Box, { className: classes$3.wrapperInner, flexGrow: 1, flexShrink: 0, "data-foo": "test", flexBasis: { mobile: "100%", laptop: "25%" } },
+            sideBarProps && (React.createElement(Box, { className: classes$3.sidebarWrapper },
                 React.createElement(SideBar, Object.assign({}, sideBarProps)))),
-            React.createElement(Box, { className: classes$2.contentBox, display: "flex", flexDirection: "column" },
+            React.createElement(Box, { className: classes$3.contentBox, display: "flex", flexDirection: "column" },
                 React.createElement(TopBar, Object.assign({}, topBarProps)),
                 children,
                 React.createElement(Footer, Object.assign({}, footerProps))))));
@@ -2244,30 +2243,48 @@ const BasicLayout = ({ sideBarProps, topBarProps, footerProps, isLoading, loader
         React.createElement(Box, { p: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile }, pl: { laptop: VerticalRhythmLaptop + SIDEBAR_COLLAPSED_WIDTH }, flexGrow: 1 }, isLoading && loader ? loader : children)));
 };
 
-var classes$1 = {"wrapper":"FloatingPanelLayout-module_wrapper__XlZwj","background":"FloatingPanelLayout-module_background__vI4Uc","animation":"FloatingPanelLayout-module_animation__031Vf","panel":"FloatingPanelLayout-module_panel__Dmfof","logo":"FloatingPanelLayout-module_logo__-5gan"};
+var classes$2 = {"wrapper":"FloatingPanelLayout-module_wrapper__XlZwj","background":"FloatingPanelLayout-module_background__vI4Uc","animation":"FloatingPanelLayout-module_animation__031Vf","panel":"FloatingPanelLayout-module_panel__Dmfof","logo":"FloatingPanelLayout-module_logo__-5gan"};
 
-const FloatingPanelLayout = ({ panelProps, imageUrl, alert, logoUrl, backgroundBaseColor, backgroundOpacity, }) => (React.createElement(Box, { className: classes$1.wrapper, 
+const FloatingPanelLayout = ({ panelProps, imageUrl, alert, logoUrl, backgroundBaseColor, backgroundOpacity, }) => (React.createElement(Box, { className: classes$2.wrapper, 
     // @ts-ignore
     style: backgroundBaseColor && { "--base-color": backgroundBaseColor }, display: "flex", alignItems: "center" },
-    React.createElement("div", { className: classes$1.background, style: {
+    React.createElement("div", { className: classes$2.background, style: {
             opacity: backgroundOpacity || 1,
             backgroundImage: `url(${imageUrl})`,
         } }),
-    logoUrl && React.createElement("img", { src: logoUrl, alt: "Logo", className: classes$1.logo }),
-    React.createElement(SlideInFromTop, { className: classes$1.animation },
+    logoUrl && React.createElement("img", { src: logoUrl, alt: "Logo", className: classes$2.logo }),
+    React.createElement(SlideInFromTop, { className: classes$2.animation },
         alert && React.createElement(Box, { pb: VerticalRhythmLaptop }, alert),
-        React.createElement(Panel, Object.assign({}, panelProps, { className: clsx(classes$1.panel, panelProps.className) })))));
-
-var classes = {"left":"SplitLayout-module_left__gw0PM","right":"SplitLayout-module_right__93uwy","split":"SplitLayout-module_split__v-JL4"};
+        React.createElement(Panel, Object.assign({}, panelProps, { className: clsx(classes$2.panel, panelProps.className) })))));
 
 const SplitLayout = ({ sideBarProps, topBarProps, footerProps, isLoading, loader, children, }) => {
     return (React.createElement(DefaultLayout, { sideBarProps: sideBarProps, topBarProps: topBarProps, footerProps: footerProps },
         React.createElement(Box, { pl: { laptop: SIDEBAR_COLLAPSED_WIDTH }, flexGrow: 1 }, isLoading && loader ? loader : children)));
 };
+
+var classes$1 = {"left":"Split-module_left__SVDRN","right":"Split-module_right__UTnql","split":"Split-module_split__UsPG7"};
+
 const Split = ({ leftWidth = "calc(135 * var(--spacing))", wrapperBoxProps, left, leftBoxProps, right, rightBoxProps, }) => {
-    return (React.createElement(Box, Object.assign({ display: "flex", flexDirection: "column", className: clsx(classes.split, wrapperBoxProps === null || wrapperBoxProps === void 0 ? void 0 : wrapperBoxProps.className) }, wrapperBoxProps, { style: Object.assign({ 
+    return (React.createElement(Box, Object.assign({ display: "flex", flexDirection: "column", className: clsx(classes$1.split, wrapperBoxProps === null || wrapperBoxProps === void 0 ? void 0 : wrapperBoxProps.className) }, wrapperBoxProps, { style: Object.assign({ 
             // @ts-ignore
             "--left-width": leftWidth, "--collapsed-sidebar-width": `calc(${SIDEBAR_COLLAPSED_WIDTH} * var(--spacing))` }, wrapperBoxProps === null || wrapperBoxProps === void 0 ? void 0 : wrapperBoxProps.style) }),
+        React.createElement(Box, { flexGrow: 1, display: "flex", flexDirection: { laptop: "row", mobile: "column" } },
+            React.createElement(Box, Object.assign({ className: classes$1.left, p: {
+                    laptop: VerticalRhythmLaptop,
+                    mobile: VerticalRhythmMobile,
+                } }, leftBoxProps), left),
+            React.createElement(Box, Object.assign({ className: classes$1.right, p: {
+                    laptop: VerticalRhythmLaptop,
+                    mobile: VerticalRhythmMobile,
+                } }, rightBoxProps), right))));
+};
+
+var classes = {"right":"InverseSplit-module_right__szSPP","left":"InverseSplit-module_left__wVE1r","split":"InverseSplit-module_split__DMjia"};
+
+const InverseSplit = ({ rightWidth = "calc(100 * var(--spacing))", wrapperBoxProps, left, leftBoxProps, right, rightBoxProps, }) => {
+    return (React.createElement(Box, Object.assign({ display: "flex", flexDirection: "column", className: clsx(classes.split, wrapperBoxProps === null || wrapperBoxProps === void 0 ? void 0 : wrapperBoxProps.className) }, wrapperBoxProps, { style: Object.assign({ 
+            // @ts-ignore
+            "--right-width": rightWidth, "--collapsed-sidebar-width": `calc(${SIDEBAR_COLLAPSED_WIDTH} * var(--spacing))` }, wrapperBoxProps === null || wrapperBoxProps === void 0 ? void 0 : wrapperBoxProps.style) }),
         React.createElement(Box, { flexGrow: 1, display: "flex", flexDirection: { laptop: "row", mobile: "column" } },
             React.createElement(Box, Object.assign({ className: classes.left, p: {
                     laptop: VerticalRhythmLaptop,
@@ -4192,6 +4209,7 @@ exports.HamburgerButton = HamburgerButton;
 exports.Header = Header;
 exports.Hide = Hide;
 exports.HorizontalScroller = HorizontalScroller;
+exports.InverseSplit = InverseSplit;
 exports.Label = Label;
 exports.Menu = Menu;
 exports.MenuCloseButton = MenuCloseButton;