@homebound/beam 2.417.7 → 2.417.8

package/dist/index.js

@@ -1,5 +1,6 @@
 import {
   EmptyRef,
+  clearInlineStyles,
   defaultTestId,
   fail,
   isAbsoluteUrl,
@@ -13,9 +14,10 @@ import {
   pluralize,
   safeEntries,
   safeKeys,
+  setInlineStyles,
   toToggleState,
   useTestIds
-} from "./chunk-XH44AYND.js";
+} from "./chunk-ZPT2ZR5B.js";
 
 // src/Css.ts
 var CssBuilder = class _CssBuilder {
@@ -4157,11 +4159,7 @@ var Icon = React3.memo((props) => {
         viewBox: "0 0 24 24",
         xmlns: "http://www.w3.org/2000/svg",
         css: {
-          // Spread these in b/c they don't type-check for some reason...
-          ...{
-            "& > path": Css.fill(color).$,
-            "& > rect": Css.fill(color).$
-          },
+          ...Css.fill(color).$,
           ...bgColor && Css.bgColor(bgColor).$,
           ...xss
         },
@@ -4745,20 +4743,8 @@ var Icons = {
     /* @__PURE__ */ jsx3("path", { d: "M7.43848 0.0527344C8.92278 0.0527344 10.1259 1.25595 10.126 2.74023C10.126 4.22459 8.78231 5.87619 7.43848 7.66797C6.09464 5.87619 4.75098 4.22459 4.75098 2.74023C4.75107 1.25601 5.95425 0.0528239 7.43848 0.0527344ZM7.4375 1.84473C6.94279 1.84478 6.54203 2.24552 6.54199 2.74023C6.54199 3.23499 6.94276 3.63569 7.4375 3.63574C7.93229 3.63574 8.33301 3.23502 8.33301 2.74023C8.33296 2.24549 7.93226 1.84473 7.4375 1.84473Z" })
   ] }),
   buildings: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(
-      "path",
-      {
-        d: "M14.1787 3.58594V23.6494H0V3.60449L7.08887 0.347656L14.1787 3.58594ZM3.42285 20.2275H5.86719V17.7832H3.42285V20.2275ZM8.31348 17.7832V20.2275H10.7578V17.7832H8.31348ZM3.42285 16.3174H5.86719V13.873H3.42285V16.3174ZM8.31348 16.3174H10.7578V13.873H8.31348V16.3174ZM3.42285 12.4062H5.86719V9.96191H3.42285V12.4062ZM8.31348 12.4062H10.7578V9.96191H8.31348V12.4062ZM3.42285 8.49414H5.86719V6.0498H3.42285V8.49414ZM8.31348 8.49414H10.7578V6.0498H8.31348V8.49414Z",
-        fill: "#8D8D8D"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "path",
-      {
-        d: "M22 23.6523H15.6445V8.00684H22V23.6523ZM17.5996 18.7617V21.2061H20.0439V18.7617H17.5996ZM17.5996 17.2959H20.0439V14.8516H17.5996V17.2959ZM17.5996 13.3828H20.0439V10.9385H17.5996V13.3828Z",
-        fill: "#8D8D8D"
-      }
-    )
+    /* @__PURE__ */ jsx3("path", { d: "M14.1787 3.58594V23.6494H0V3.60449L7.08887 0.347656L14.1787 3.58594ZM3.42285 20.2275H5.86719V17.7832H3.42285V20.2275ZM8.31348 17.7832V20.2275H10.7578V17.7832H8.31348ZM3.42285 16.3174H5.86719V13.873H3.42285V16.3174ZM8.31348 16.3174H10.7578V13.873H8.31348V16.3174ZM3.42285 12.4062H5.86719V9.96191H3.42285V12.4062ZM8.31348 12.4062H10.7578V9.96191H8.31348V12.4062ZM3.42285 8.49414H5.86719V6.0498H3.42285V8.49414ZM8.31348 8.49414H10.7578V6.0498H8.31348V8.49414Z" }),
+    /* @__PURE__ */ jsx3("path", { d: "M22 23.6523H15.6445V8.00684H22V23.6523ZM17.5996 18.7617V21.2061H20.0439V18.7617H17.5996ZM17.5996 17.2959H20.0439V14.8516H17.5996V17.2959ZM17.5996 13.3828H20.0439V10.9385H17.5996V13.3828Z" })
   ] }),
   community: /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx3("path", { d: "M6.41018 0.520509C6.61589 0.334405 6.93017 0.334214 7.13576 0.520509L11.1797 4.20899C11.1553 4.22924 11.1302 4.24904 11.1065 4.27051L11.1016 4.27539L7.85549 7.23535V6.22266H5.69045V8.96289C5.69045 9.2644 5.44619 9.51172 5.14846 9.51172H3.52444C3.22683 9.51157 2.98342 9.26431 2.98342 8.96289V5.12598H2.0635C1.81449 5.12598 1.70074 4.8129 1.88479 4.64844L6.41018 0.520509ZM10.5615 8.96289C10.5615 9.2644 10.3183 9.51172 10.0205 9.51172H8.39651C8.24437 9.51169 8.10738 9.44603 8.00881 9.34277L10.5615 7.01465V8.96289Z" }),
@@ -6455,13 +6441,13 @@ function AvatarButton(props) {
     menuTriggerProps,
     openInNew,
     forceFocusStyles = false,
-    forcePressedStyles = false,
+    __storyState,
     ...avatarProps
   } = props;
   const isDisabled = !!disabled;
   const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
   const ref = useGetRef(buttonRef);
-  const { buttonProps, isPressed } = useButton2(
+  const { buttonProps, isPressed: isPressedFromEvents } = useButton2(
     {
       ...ariaProps,
       onPress: typeof onPress === "string" ? noop : onPress,
@@ -6469,8 +6455,11 @@ function AvatarButton(props) {
     },
     ref
   );
-  const { focusProps, isFocusVisible } = useFocusRing2(ariaProps);
-  const { hoverProps, isHovered } = useHover3(ariaProps);
+  const { focusProps, isFocusVisible: isFocusVisibleFromEvents } = useFocusRing2(ariaProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = useHover3(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
   const tid = useTestIds(props, avatarProps.name);
   const styles = useMemo9(
     () => ({
@@ -6493,7 +6482,7 @@ function AvatarButton(props) {
   };
   const content = /* @__PURE__ */ jsxs11(Fragment5, { children: [
     /* @__PURE__ */ jsx23(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
-    (isPressed || forcePressedStyles) && /* @__PURE__ */ jsx23("span", { css: pressedOverlayCss })
+    isPressed && /* @__PURE__ */ jsx23("span", { css: pressedOverlayCss })
   ] });
   return maybeTooltip({
     // Default the tooltip to the avatar's name, if defined.
@@ -12197,6 +12186,7 @@ function Switch(props) {
     label,
     labelStyle = "inline",
     hideLabel = false,
+    __storyState,
     ...otherProps
   } = props;
   const isDisabled = !!disabled;
@@ -12204,8 +12194,10 @@ function Switch(props) {
   const state = toToggleState(isSelected, onChange);
   const ref = useRef32(null);
   const { inputProps } = useSwitch({ ...ariaProps, "aria-label": label }, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = useFocusRing7(otherProps);
-  const { hoverProps, isHovered } = useHover13(ariaProps);
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = useFocusRing7(otherProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = useHover13(ariaProps);
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
   return /* @__PURE__ */ jsxs45(
@@ -12238,7 +12230,7 @@ function Switch(props) {
             css: {
               ...Css.wPx(toggleWidth(compact)).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
               ...isHovered && switchHoverStyles,
-              ...isKeyboardFocus && switchFocusStyles,
+              ...isFocusVisible && switchFocusStyles,
               ...isDisabled && Css.bgGray300.$,
               ...isSelected && Css.bgBlue700.$,
               ...isSelected && isHovered && switchSelectedHoverStyles
@@ -12405,7 +12397,7 @@ import { useFocusRing as useFocusRing8, useHover as useHover14, usePress, useSwi
 import { useToggleState as useToggleState3 } from "react-stately";
 import { jsx as jsx77, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 function ToggleButton(props) {
-  const { selected: isSelected = false, disabled = false, label, onChange, icon, ...otherProps } = props;
+  const { selected: isSelected = false, disabled = false, label, onChange, icon, __storyState, ...otherProps } = props;
   const [asyncInProgress, setAsyncInProgress] = useState27(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = { "aria-label": label, isSelected, isDisabled, ...otherProps };
@@ -12422,11 +12414,14 @@ function ToggleButton(props) {
   });
   const labelRef = useRef35(null);
   const ref = useRef35(null);
-  const tid = useTestIds(props, label);
-  const { isPressed, pressProps } = usePress({ ref: labelRef, isDisabled });
+  const tid = useTestIds(otherProps, label);
+  const { isPressed: isPressedFromEvents, pressProps } = usePress({ ref: labelRef, isDisabled });
   const { inputProps } = useSwitch2(ariaProps, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = useFocusRing8({ ...otherProps, within: true });
-  const { hoverProps, isHovered } = useHover14({ isDisabled });
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = useFocusRing8({ ...otherProps, within: true });
+  const { hoverProps, isHovered: isHoveredFromEvents } = useHover14({ isDisabled });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tooltip = resolveTooltip(disabled);
   const labelAttrs = {
     ...focusProps,
@@ -12437,7 +12432,7 @@ function ToggleButton(props) {
       ...isHovered && toggleHoverStyles,
       ...isPressed && togglePressStyles,
       ...isSelected && !isDisabled && Css.blue700.$,
-      ...isKeyboardFocus && toggleFocusStyles,
+      ...isFocusVisible && toggleFocusStyles,
       ...isDisabled && Css.gray300.cursorNotAllowed.$
     },
     ...tid
@@ -14750,7 +14745,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo34, useRef as useRef43, useState as useState37 } from "react";
+import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo34, useRef as useRef43, useState as useState38 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -15644,17 +15639,18 @@ function FormLines(props) {
     {
       css: {
         // Note that we're purposefully not using display:flex so that our children's margins will collapse.
-        ...Css.w(sizes[width2]).$,
-        // Purposefully use this instead of childGap3 to put margin-bottom on the last line
-        "& > *": Css.mb(gap).$
+        ...Css.w(sizes[width2]).$
       },
       children: Children.map(children, (child) => {
+        if (child === null || child === void 0 || typeof child === "boolean") {
+          return child;
+        }
         if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
           const clone = cloneElement(child, { isFirst: firstFormHeading });
           firstFormHeading = false;
-          return clone;
+          return /* @__PURE__ */ jsx114("div", { css: Css.mb(gap).$, children: clone });
         } else {
-          return child;
+          return /* @__PURE__ */ jsx114("div", { css: Css.mb(gap).$, children: child });
         }
       })
     }
@@ -15820,7 +15816,7 @@ function boundTreeSelectField(props) {
 }
 
 // src/components/internal/CompoundField.tsx
-import { cloneElement as cloneElement2 } from "react";
+import { cloneElement as cloneElement2, useState as useState34 } from "react";
 import { jsx as jsx116, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 function CompoundField({ children }) {
   if (children?.length !== 2) {
@@ -15828,45 +15824,46 @@ function CompoundField({ children }) {
   }
   const commonStyles = Css.df.aic.fs1.maxwPx(550).bt.bb.bcGray300.$;
   const internalProps = { compound: true };
-  return /* @__PURE__ */ jsxs59(
-    "div",
-    {
-      css: {
-        ...Css.df.$,
-        "&:focus-within > div:nth-of-type(2)": Css.bgBlue700.$
-        // Separation line when inputs are focused
-      },
-      children: [
-        /* @__PURE__ */ jsx116(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.bl.borderRadius("4px 0 0 4px").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: cloneElement2(children[0], {
-              internalProps
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx116("div", { css: Css.wPx(1).fn.bgGray300.$ }),
-        /* @__PURE__ */ jsx116(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: cloneElement2(children[1], {
-              internalProps
-            })
-          }
-        )
-      ]
+  const [hasFocusWithin, setHasFocusWithin] = useState34(false);
+  function onFocusCapture() {
+    setHasFocusWithin(true);
+  }
+  function onBlurCapture(e) {
+    const nextFocusedElement = e.relatedTarget;
+    if (nextFocusedElement instanceof Node && e.currentTarget.contains(nextFocusedElement)) {
+      return;
     }
-  );
+    setHasFocusWithin(false);
+  }
+  return /* @__PURE__ */ jsxs59("div", { css: Css.df.$, onFocusCapture, onBlurCapture, children: [
+    /* @__PURE__ */ jsx116(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.bl.borderRadius("4px 0 0 4px").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: cloneElement2(children[0], {
+          internalProps
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx116("div", { css: { ...Css.wPx(1).fn.bgGray300.$, ...hasFocusWithin && Css.bgBlue700.$ } }),
+    /* @__PURE__ */ jsx116(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: cloneElement2(children[1], {
+          internalProps
+        })
+      }
+    )
+  ] });
 }
 
 // src/forms/BoundSelectAndTextField.tsx
@@ -15962,11 +15959,11 @@ import { useDebouncedCallback as useDebouncedCallback5 } from "use-debounce";
 
 // src/components/RightSidebar.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 import { Fragment as Fragment24, jsx as jsx121, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({ content, headerHeightPx: headerHeightPx2 }) {
-  const [selectedIcon, setSelectedIcon] = useState34(void 0);
+  const [selectedIcon, setSelectedIcon] = useState35(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ jsxs62(Fragment24, { children: [
     /* @__PURE__ */ jsx121("div", { css: Css.df.jcfe.absolute.right0.pr3.$, children: /* @__PURE__ */ jsx121(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx121(
@@ -16027,7 +16024,7 @@ function IconButtonList({ content, selectedIcon, onIconClick }) {
 }
 
 // src/components/Toast/ToastContext.tsx
-import { createContext as createContext5, useCallback as useCallback21, useContext as useContext14, useMemo as useMemo32, useState as useState35 } from "react";
+import { createContext as createContext5, useCallback as useCallback21, useContext as useContext14, useMemo as useMemo32, useState as useState36 } from "react";
 import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 var ToastContext = createContext5({
   setNotice: () => {
@@ -16038,7 +16035,7 @@ var ToastContext = createContext5({
   notice: void 0
 });
 function ToastProvider(props) {
-  const [notice, setNotice] = useState35();
+  const [notice, setNotice] = useState36();
   const clear = useCallback21(() => setNotice(void 0), [setNotice]);
   const contextValue = useMemo32(() => ({ setNotice, notice, clear }), [notice, clear]);
   return /* @__PURE__ */ jsx122(ToastContext.Provider, { value: contextValue, children: props.children });
@@ -16056,13 +16053,13 @@ function Toast() {
 }
 
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
-import { Fragment as Fragment26, useMemo as useMemo33, useState as useState36 } from "react";
+import { Fragment as Fragment26, useMemo as useMemo33, useState as useState37 } from "react";
 import { Link as Link4 } from "react-router-dom";
 import { Fragment as Fragment27, jsx as jsx124, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 function PageHeaderBreadcrumbs({ breadcrumb }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
   const breadcrumbs = useMemo33(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
-  const [collapsed, setCollapsed] = useState36(true);
+  const [collapsed, setCollapsed] = useState37(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
     return (
       // Adding index to key to prevent rendering issues when multiple items have the same label
@@ -16226,7 +16223,7 @@ function SectionNavLink(props) {
   );
 }
 function useActiveSection(sectionsWithRefs) {
-  const [activeSection, setActiveSection] = useState37(null);
+  const [activeSection, setActiveSection] = useState38(null);
   const debouncedIntersectionCallback = useDebouncedCallback5(
     (entries) => {
       const sectionsInView = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio > 0.2).sort((a, b) => {
@@ -16283,7 +16280,7 @@ function FullBleed({ children, omitPadding = false }) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState40 } from "react";
+import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState41 } from "react";
 
 // src/components/ButtonMenu.tsx
 import { useRef as useRef44 } from "react";
@@ -16335,7 +16332,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/Filters/FilterDropdownMenu.tsx
-import { memo as memo2, useMemo as useMemo36, useState as useState39 } from "react";
+import { memo as memo2, useMemo as useMemo36, useState as useState40 } from "react";
 
 // src/components/CountBadge.tsx
 import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
@@ -16720,7 +16717,7 @@ var CheckboxFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/FilterModal.tsx
-import { useState as useState38 } from "react";
+import { useState as useState39 } from "react";
 
 // src/components/Modal/OpenModal.tsx
 import { useEffect as useEffect25 } from "react";
@@ -16746,7 +16743,7 @@ function FilterModal(props) {
   const { filter, filters, onApply } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
   const { closeModal } = useModal();
-  const [modalFilter, setModalFilter] = useState38(filter);
+  const [modalFilter, setModalFilter] = useState39(filter);
   return /* @__PURE__ */ jsxs68(Fragment31, { children: [
     /* @__PURE__ */ jsx137(ModalHeader, { children: "More Filters" }),
     /* @__PURE__ */ jsx137(ModalBody, { children: /* @__PURE__ */ jsx137("div", { css: Css.df.fdc.$, children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ jsx137(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(
@@ -16901,7 +16898,7 @@ import { Fragment as Fragment32, jsx as jsx140, jsxs as jsxs70 } from "@emotion/
 function FilterDropdownMenu(props) {
   const { filter, onChange, filterDefs, groupBy } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
-  const [isOpen, setIsOpen] = useState39(false);
+  const [isOpen, setIsOpen] = useState40(false);
   const activeFilterCount = useMemo36(() => getActiveFilterCount(filter), [filter]);
   const filterImpls = useMemo36(() => buildFilterImpls(filterDefs), [filterDefs]);
   const renderFilters = () => {
@@ -17326,7 +17323,7 @@ function useGridTableLayoutState({
   const filterFallback = { filterDefs: {}, storageKey: "unset-filter" };
   const { filter, setFilter } = usePersistedFilter(persistedFilter ?? filterFallback);
   const groupBy = useGroupBy(maybeGroupBy ?? { none: "none" });
-  const [searchString, setSearchString] = useState40("");
+  const [searchString, setSearchString] = useState41("");
   const columnsFallback = "unset-columns";
   const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(
     persistedColumns?.storageKey ?? columnsFallback,
@@ -17339,7 +17336,7 @@ function useGridTableLayoutState({
     100
     // default page size
   );
-  const [page, setPage] = useState40({
+  const [page, setPage] = useState41({
     offset: 0,
     limit: persistedPageSize
   });
@@ -17382,7 +17379,7 @@ function Header2(props) {
 }
 function SearchBox({ onSearch }) {
   const [{ search: initialValue }, setQueryParams] = useQueryParams3({ search: StringParam2 });
-  const [value, setValue] = useState40(initialValue || "");
+  const [value, setValue] = useState41(initialValue || "");
   const [debouncedSearch] = useDebounce2(value, 300);
   useEffect27(() => {
     onSearch(debouncedSearch);
@@ -17414,7 +17411,7 @@ function PreventBrowserScroll({ children }) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React18, { useCallback as useCallback23, useContext as useContext15, useMemo as useMemo39, useState as useState41 } from "react";
+import React18, { useCallback as useCallback23, useContext as useContext15, useMemo as useMemo39, useState as useState42 } from "react";
 import { jsx as jsx148 } from "@emotion/react/jsx-runtime";
 var RightPaneContext = React18.createContext({
   openInPane: () => {
@@ -17427,8 +17424,8 @@ var RightPaneContext = React18.createContext({
   rightPaneContent: null
 });
 function RightPaneProvider({ children }) {
-  const [rightPaneContent, setRightPaneContent] = useState41(void 0);
-  const [isRightPaneOpen, setIsRightPaneOpen] = useState41(false);
+  const [rightPaneContent, setRightPaneContent] = useState42(void 0);
+  const [isRightPaneOpen, setIsRightPaneOpen] = useState42(false);
   const openInPane = useCallback23(
     (opts) => {
       setRightPaneContent(opts?.content);
@@ -17613,19 +17610,43 @@ function ButtonGroup(props) {
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
     /* @__PURE__ */ jsx152("div", { ...tid, css: Css.df.lh(0).add({ ...sizeStyles2[size] }).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
       // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
-      /* @__PURE__ */ jsx152(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size, ...tid }, i)
+      /* @__PURE__ */ jsx152(
+        GroupButton,
+        {
+          ...buttonProps,
+          disabled: disabled || buttonDisabled,
+          size,
+          isFirst: i === 0,
+          isLast: i === buttons.length - 1,
+          ...tid
+        },
+        i
+      )
     )) })
   );
 }
 function GroupButton(props) {
-  const { icon, iconInc, iconColor, text, active, onClick: onPress, disabled, size, tooltip, ...otherProps } = props;
+  const {
+    icon,
+    iconInc,
+    iconColor,
+    text,
+    active,
+    onClick: onPress,
+    disabled,
+    size,
+    tooltip,
+    isFirst,
+    isLast,
+    ...otherProps
+  } = props;
   const ariaProps = { onPress, isDisabled: !!disabled, ...otherProps };
   const ref = useRef47(null);
   const { buttonProps, isPressed } = useButton10(ariaProps, ref);
   const { isFocusVisible, focusProps } = useFocusRing12();
   const { hoverProps, isHovered } = useHover15(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ jsx152("span", { css: getButtonStyles2(), children: maybeTooltip({
+  return /* @__PURE__ */ jsx152("span", { css: getButtonStyles2(isFirst, isLast), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
     children: /* @__PURE__ */ jsxs78(
@@ -17656,15 +17677,15 @@ var pressedStyles = Css.bgGray200.$;
 var activeStyles3 = Css.bgGray300.$;
 var hoverStyles3 = Css.bgGray100.$;
 var defaultFocusRingStyles2 = Css.relative.z2.bshFocus.$;
-function getButtonStyles2() {
+function getButtonStyles2(isFirst, isLast) {
   return {
     ...Css.z1.bgWhite.bcGray300.bw1.ba.gray900.br0.oh.$,
-    // Our first button should have a rounded left border
-    "&:first-of-type": Css.add("borderRadius", "4px 0 0 4px").$,
-    // Our last button should have a rounded right border
-    "&:last-of-type": Css.add("borderRadius", "0 4px 4px 0").$,
-    // Nudge buttons one pixel to the left so they visually share a border
-    "&:not(:first-of-type)": Css.mlPx(-1).$
+    // Our first button should have a rounded left border.
+    ...isFirst && Css.add("borderRadius", "4px 0 0 4px").$,
+    // Our last button should have a rounded right border.
+    ...isLast && Css.add("borderRadius", "0 4px 4px 0").$,
+    // Nudge buttons one pixel to the left so they visually share a border.
+    ...!isFirst && Css.mlPx(-1).$
   };
 }
 var sizeStyles2 = {
@@ -17684,13 +17705,13 @@ import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
-import { useRef as useRef48, useState as useState42 } from "react";
+import { useRef as useRef48, useState as useState43 } from "react";
 import { jsx as jsx153, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function Tag(props) {
   const { text, type, xss, preventTooltip = false, ...otherProps } = props;
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
-  const [showTooltip, setShowTooltip] = useState42(false);
+  const [showTooltip, setShowTooltip] = useState43(false);
   const ref = useRef48(null);
   useResizeObserver4({
     ref,
@@ -17794,9 +17815,9 @@ function Copy(props) {
   return /* @__PURE__ */ jsx155(
     "div",
     {
+      className: "beam-copy",
       css: {
-        ...Css.sm.gray700.mt2.mb3.wPx(480).$,
-        "& > p": Css.my2.$
+        ...Css.sm.gray700.mt2.mb3.wPx(480).$
       },
       children: props.children
     }
@@ -17829,6 +17850,7 @@ function DnDGrid(props) {
   const reorderViaKeyboard = useRef49(false);
   const transformFrom = useRef49({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
+  const activeStyles4 = activeItemStyles ?? Css.bshModal.$;
   const getGridItems = useCallback24(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
@@ -17838,19 +17860,19 @@ function DnDGrid(props) {
   const initReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
-      dragEl.current.classList.add(activeGridItemClass);
+      setInlineStyles(dragEl.current, activeStyles4);
     }
-  }, [getGridItemIdOrder]);
+  }, [getGridItemIdOrder, activeStyles4]);
   const commitReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
-      dragEl.current.classList.remove(activeGridItemClass);
+      clearInlineStyles(dragEl.current, activeStyles4);
       dragEl.current = void 0;
       reorderViaKeyboard.current = false;
       initialOrder.current = currentOrder;
     }
-  }, [onReorder, getGridItemIdOrder]);
+  }, [onReorder, getGridItemIdOrder, activeStyles4]);
   const cancelReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
@@ -17868,11 +17890,11 @@ function DnDGrid(props) {
           }
         }
       }
-      dragEl.current.classList.remove(activeGridItemClass);
+      clearInlineStyles(dragEl.current, activeStyles4);
       dragEl.current = void 0;
       reorderViaKeyboard.current = false;
     }
-  }, [getGridItemIdOrder, getGridItems]);
+  }, [getGridItemIdOrder, getGridItems, activeStyles4]);
   const onMove = useCallback24((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
@@ -17911,18 +17933,21 @@ function DnDGrid(props) {
         );
         cloneEl.current?.setAttribute(gridCloneKey, "true");
         cloneEl.current.removeAttribute("id");
-        cloneEl.current?.classList.remove(activeGridItemClass);
         gridEl.current.insertBefore(cloneEl.current, dragEl.current.nextSibling);
-        dragEl.current.setAttribute(
-          "style",
-          `pointer-events: none; position:fixed; z-index: 9999; top:${top}px; left:${left}px; width:${rect.width}px; height:${rect.height}px;`
-        );
+        dragEl.current.style.pointerEvents = "none";
+        dragEl.current.style.position = "fixed";
+        dragEl.current.style.zIndex = "9999";
+        dragEl.current.style.top = `${top}px`;
+        dragEl.current.style.left = `${left}px`;
+        dragEl.current.style.width = `${rect.width}px`;
+        dragEl.current.style.height = `${rect.height}px`;
+        setInlineStyles(dragEl.current, activeStyles4);
         gridEl.current.style.cursor = "grabbing";
         gridEl.current.addEventListener("mousemove", onMove);
         gridEl.current.addEventListener("touchmove", onMove);
       }
     },
-    [initReorder, onMove]
+    [initReorder, onMove, activeStyles4]
   );
   const onDragEnd = useCallback24(
     (e) => {
@@ -17996,7 +18021,7 @@ function DnDGrid(props) {
     {
       ref: gridEl,
       css: {
-        ...Css.ctis.dg.addIn(`& .${activeGridItemClass}`, activeItemStyles ?? Css.bshModal.$).$,
+        ...Css.ctis.dg.$,
         ...gridStyles
       },
       onTouchStart: onDragStart,
@@ -18010,7 +18035,6 @@ function DnDGrid(props) {
 }
 var gridItemIdKey = "dndgrid-itemid";
 var gridCloneKey = "dndgrid-clone";
-var activeGridItemClass = "dndgrid-active";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 import { mergeProps as mergeProps12, useFocusRing as useFocusRing13, useHover as useHover17 } from "react-aria";
@@ -18195,12 +18219,12 @@ function HbSpinnerProvider({ quips = [], children }) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef50, useState as useState43 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef50, useState as useState44 } from "react";
 import { jsx as jsx161, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
 function MaxLines({ maxLines, children }) {
   const elRef = useRef50(null);
-  const [hasMore, setHasMore] = useState43(false);
-  const [expanded, setExpanded] = useState43(false);
+  const [hasMore, setHasMore] = useState44(false);
+  const [expanded, setExpanded] = useState44(false);
   useLayoutEffect2(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
@@ -18221,7 +18245,7 @@ function MaxLines({ maxLines, children }) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback26, useMemo as useMemo47, useRef as useRef51, useState as useState44 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo47, useRef as useRef51, useState as useState45 } from "react";
 import { jsx as jsx162, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 function ScrollShadows(props) {
   const { children, xss, horizontal = false, bgColor = "rgba(255,255,255,1)" /* White */ } = props;
@@ -18230,8 +18254,8 @@ function ScrollShadows(props) {
   if (!bgColor.includes("rgba")) {
     throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
   }
-  const [showStartShadow, setShowStartShadow] = useState44(false);
-  const [showEndShadow, setShowEndShadow] = useState44(false);
+  const [showStartShadow, setShowStartShadow] = useState45(false);
+  const [showEndShadow, setShowEndShadow] = useState45(false);
   const scrollRef = useRef51(null);
   const [startShadowStyles, endShadowStyles] = useMemo47(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
@@ -18676,7 +18700,7 @@ var SuperDrawerContent = ({ children, actions }) => {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase5 } from "change-case";
-import { useEffect as useEffect31, useMemo as useMemo49, useRef as useRef53, useState as useState45 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo49, useRef as useRef53, useState as useState46 } from "react";
 import { mergeProps as mergeProps13, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath, Route } from "react-router";
 import { Link as Link5, useLocation } from "react-router-dom";
@@ -18722,7 +18746,7 @@ function Tabs(props) {
   ) : props.selected;
   const { isFocusVisible, focusProps } = useFocusRing15();
   const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState45(selected);
+  const [active, setActive] = useState46(selected);
   const ref = useRef53(null);
   useEffect31(() => setActive(selected), [selected]);
   function onKeyUp(e) {