@homebound/beam 2.417.7 → 2.417.8

package/dist/{chunk-XH44AYND.js → chunk-ZPT2ZR5B.js}

@@ -28,6 +28,31 @@ function newMethodMissingProxy(object, methodMissing) {
   });
 }
 
+// src/utils/inlineStyles.ts
+function isInlineStyleValue(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+function setInlineStyles(el, styles) {
+  Object.entries(styles).forEach(([prop, value]) => {
+    if (!isInlineStyleValue(value)) return;
+    if (prop.startsWith("--")) {
+      el.style.setProperty(prop, String(value));
+    } else {
+      el.style[prop] = String(value);
+    }
+  });
+}
+function clearInlineStyles(el, styles) {
+  Object.entries(styles).forEach(([prop, value]) => {
+    if (!isInlineStyleValue(value)) return;
+    if (prop.startsWith("--")) {
+      el.style.removeProperty(prop);
+    } else {
+      el.style[prop] = "";
+    }
+  });
+}
+
 // src/utils/index.ts
 function fail(message) {
   throw new Error(message || "Failed");
@@ -76,6 +101,8 @@ function pluralize(count, noun, pluralNoun) {
 }
 
 export {
+  setInlineStyles,
+  clearInlineStyles,
   defaultTestId,
   useTestIds,
   newMethodMissingProxy,
@@ -93,4 +120,4 @@ export {
   isDefined,
   pluralize
 };
-//# sourceMappingURL=chunk-XH44AYND.js.map
+//# sourceMappingURL=chunk-ZPT2ZR5B.js.map

package/dist/chunk-ZPT2ZR5B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/defaultTestId.ts","../src/utils/useTestIds.tsx","../src/utils/inlineStyles.ts","../src/utils/index.ts"],"sourcesContent":["import { camelCase } from \"change-case\";\n\n/**\n * Guesses an id based on a label string, i.e. given `Homeowner Contract`,\n * returns `homeownerContract`.\n *\n * This is useful for our (non-bound) form fields that will probably have a label,\n * but may not have a `data-testid` set by the encompassing page.\n *\n * (Bound form fields typically set their test id from their form-state field's key.)\n */\nexport function defaultTestId(label: string): string {\n  // Strip `m:4` to `m4` to prevent it from becoming `m_4` which our rtl-utils assumes\n  // means \"the 4th element with a data-testid value of 'm'\".\n  return camelCase(label.replace(\":\", \"\"));\n}\n","import { defaultTestId } from \"src/utils/defaultTestId\";\n\nexport type TestIds = Record<string, object>;\n\n/**\n * Provides a way to easily generate `data-testid`s.\n *\n * The test ids are made of a `${prefix}_${key}`, where:\n *\n * - The prefix is the component name, like \"profile\", and\n * - The key is the specific DOM element that's being tagged, like \"firstName\"\n *\n * To determine the prefix, the component passes us their props, which we'll use\n * to look for an incoming `data-testid` to become the prefix the `data-testid`s\n * that we create. I.e.:\n *\n * ```tsx\n * const { a, b } = props;\n * const tid = useTestIds(props);\n *\n * return <Foo {...tid.foo} />;\n * ```\n *\n * This allows components that embed the component to customize the prefix, i.e.\n * `<TextField data-testid=\"firstName\" />` and `<TextField data-testid=\"lastName\" />`\n * would produce, within `TextField` itself, ids like:\n *\n * - `firstName_input`\n * - `firstName_errors`\n * - `lastName_input`\n * - `lastName_errors`\n *\n * @param props the component's `props` object, which we'll scan for `data-testid` to use as the prefix\n * @param defaultPrefix the default prefix to use if no `data-testid` is found on `props`\n */\nexport function useTestIds(props: object, defaultPrefix?: string): Record<string, object> {\n  const prefix: string | undefined =\n    (props as any)[\"data-testid\"] ||\n    // Pass defaultPrefix through defaultTestId to allow `useTestIds(..., label)` usage\n    (defaultPrefix ? defaultTestId(defaultPrefix) : undefined);\n  const rootId = { \"data-testid\": prefix };\n  return newMethodMissingProxy(rootId, (key) => {\n    // If we get tagged ids, remove the colon so that we can do `r.foo_m2` for `m:2`\n    key = key.replace(\":\", \"\");\n    return { \"data-testid\": prefix ? `${prefix}_${key}` : key };\n  }) as any;\n}\n\n/** Uses `object` for any keys that exist on it, otherwise calls `methodMissing` fn. */\nexport function newMethodMissingProxy<T extends object, Y>(\n  object: T,\n  methodMissing: (key: string) => Y,\n): T & Record<string, Y> {\n  return new Proxy(object, {\n    get(object, property) {\n      if (Reflect.has(object, property)) {\n        return Reflect.get(object, property);\n      } else if (property === \"then\") {\n        return undefined;\n      } else {\n        return methodMissing(String(property));\n      }\n    },\n  }) as any;\n}\n","function isInlineStyleValue(value: unknown): value is string | number {\n  return typeof value === \"string\" || typeof value === \"number\";\n}\n\nexport function setInlineStyles(el: HTMLElement, styles: object): void {\n  Object.entries(styles as Record<string, unknown>).forEach(([prop, value]) => {\n    if (!isInlineStyleValue(value)) return;\n    if (prop.startsWith(\"--\")) {\n      el.style.setProperty(prop, String(value));\n    } else {\n      (el.style as any)[prop] = String(value);\n    }\n  });\n}\n\nexport function clearInlineStyles(el: HTMLElement, styles: object): void {\n  Object.entries(styles as Record<string, unknown>).forEach(([prop, value]) => {\n    if (!isInlineStyleValue(value)) return;\n    if (prop.startsWith(\"--\")) {\n      el.style.removeProperty(prop);\n    } else {\n      (el.style as any)[prop] = \"\";\n    }\n  });\n}\n","import { MutableRefObject } from \"react\";\nimport type { CheckboxGroupState, ToggleState } from \"react-stately\";\n\nexport function fail(message?: string): never {\n  throw new Error(message || \"Failed\");\n}\n\n/** Adapts our state to what useToggleState returns in a stateless manner. */\nexport function toToggleState(isSelected: boolean, onChange: (value: boolean) => void): ToggleState {\n  return {\n    isSelected,\n    defaultSelected: false,\n    setSelected: onChange,\n    toggle: () => onChange(!isSelected),\n  };\n}\n\n/** Adapts our state to what use*Group returns in a stateless manner. */\nexport function toGroupState<T extends string>(values: T[], onChange: (value: T[]) => void): CheckboxGroupState {\n  const addValue = (value: T) => onChange([...values, value]);\n  const removeValue = (value: T) => onChange(values.filter((_value) => _value !== value));\n\n  return {\n    value: values,\n    defaultValue: [],\n    setValue: onChange,\n    isSelected: (value: T) => values.includes(value),\n    addValue,\n    removeValue,\n    toggleValue: (value: T) => (values.includes(value) ? addValue(value) : removeValue(value)),\n    isDisabled: false,\n    isReadOnly: false,\n    // We do not use the validation state, as our Switch groups do not support error states. However, this field is required by the `CheckboxGroupState` so we need to include it.\n    // If we ever update our SwitchGroup component to support error states, we'll need to update this.\n    validationState: \"valid\",\n    isInvalid: false,\n    isRequired: false,\n    setInvalid: () => {},\n    realtimeValidation: { isInvalid: false, validationErrors: [], validationDetails: {} as ValidityState },\n    displayValidation: { isInvalid: false, validationErrors: [], validationDetails: {} as ValidityState },\n    updateValidation: () => {},\n    resetValidation: () => {},\n    commitValidation: () => {},\n  };\n}\n\n/**\n * Utility to maybe call a function if undefined with arguments\n *\n * @example\n *  maybeCall(onChange, true)\n *  maybeCall(onBlur)\n *  maybeCall(onSelect, { id: 1, value: \"book 1\"}, true)\n */\nexport function maybeCall(callback: Function | undefined, ...args: any[]) {\n  return callback && callback(...args);\n}\n\nexport * from \"./inlineStyles\";\nexport * from \"./useTestIds\";\n\n/** Casts `Object.keys` to \"what it should be\", as long as your instance doesn't have keys it shouldn't. */\nexport function safeKeys<T>(instance: T): (keyof T)[] {\n  return Object.getOwnPropertyNames(instance) as any;\n}\n\n// Returns object with specified key removed\nexport const omitKey = <T, K extends keyof T>(key: K, { [key]: _, ...obj }: T) => obj as T;\n\nexport const noop = (..._: any) => {};\n\ntype Entries<T> = {\n  [K in keyof T]: [K, T[K]];\n}[keyof T][];\n\nexport function safeEntries<T extends object>(obj: T): Entries<T> {\n  return Object.entries(obj) as any;\n}\n\nexport class EmptyRef<T> implements MutableRefObject<T> {\n  get current(): T {\n    throw new Error(\"BeamProvider is missing\");\n  }\n\n  set current(_) {\n    throw new Error(\"BeamProvider is missing\");\n  }\n}\n\nexport const isAbsoluteUrl = (url: string) => /^(http(s?)):\\/\\//i.test(url);\n\nexport function areArraysEqual(a: any[], b: any[]): boolean {\n  return a.length === b.length && a.every((val, idx) => val === b[idx]);\n}\n\nexport function isPromise(obj: any | Promise<any>): obj is Promise<any> {\n  return typeof obj === \"object\" && \"then\" in obj && typeof obj.then === \"function\";\n}\n\nexport function isFunction(f: any): f is Function {\n  return typeof f === \"function\";\n}\n\nexport function isDefined<T extends any>(param: T | undefined | null): param is T {\n  return param !== null && param !== undefined;\n}\n\nexport function pluralize(count: number | unknown[], noun: string, pluralNoun?: string): string {\n  if ((Array.isArray(count) ? count.length : count) === 1) return noun;\n  return pluralNoun || `${noun}s`;\n}\n"],"mappings":"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","names":["object"]}

package/dist/index.cjs

@@ -4351,6 +4351,31 @@ var import_react_dom = require("react-dom");
 var import_react_popper = require("react-popper");
 var import_react_stately = require("react-stately");
 
+// src/utils/inlineStyles.ts
+function isInlineStyleValue(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+function setInlineStyles(el, styles) {
+  Object.entries(styles).forEach(([prop, value]) => {
+    if (!isInlineStyleValue(value)) return;
+    if (prop.startsWith("--")) {
+      el.style.setProperty(prop, String(value));
+    } else {
+      el.style[prop] = String(value);
+    }
+  });
+}
+function clearInlineStyles(el, styles) {
+  Object.entries(styles).forEach(([prop, value]) => {
+    if (!isInlineStyleValue(value)) return;
+    if (prop.startsWith("--")) {
+      el.style.removeProperty(prop);
+    } else {
+      el.style[prop] = "";
+    }
+  });
+}
+
 // src/utils/defaultTestId.ts
 var import_change_case = require("change-case");
 function defaultTestId(label) {
@@ -4535,11 +4560,7 @@ var Icon = import_react4.default.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
         },
@@ -5123,20 +5144,8 @@ var Icons = {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "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__ */ (0, import_jsx_runtime3.jsx)(
-      "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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }),
@@ -6824,13 +6833,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 } = (0, import_react_aria6.useButton)(
+  const { buttonProps, isPressed: isPressedFromEvents } = (0, import_react_aria6.useButton)(
     {
       ...ariaProps,
       onPress: typeof onPress === "string" ? noop : onPress,
@@ -6838,8 +6847,11 @@ function AvatarButton(props) {
     },
     ref
   );
-  const { focusProps, isFocusVisible } = (0, import_react_aria6.useFocusRing)(ariaProps);
-  const { hoverProps, isHovered } = (0, import_react_aria6.useHover)(ariaProps);
+  const { focusProps, isFocusVisible: isFocusVisibleFromEvents } = (0, import_react_aria6.useFocusRing)(ariaProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = (0, import_react_aria6.useHover)(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
   const tid = useTestIds(props, avatarProps.name);
   const styles = (0, import_react22.useMemo)(
     () => ({
@@ -6862,7 +6874,7 @@ function AvatarButton(props) {
   };
   const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
-    (isPressed || forcePressedStyles) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: pressedOverlayCss })
+    isPressed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: pressedOverlayCss })
   ] });
   return maybeTooltip({
     // Default the tooltip to the avatar's name, if defined.
@@ -12557,6 +12569,7 @@ function Switch(props) {
     label,
     labelStyle = "inline",
     hideLabel = false,
+    __storyState,
     ...otherProps
   } = props;
   const isDisabled = !!disabled;
@@ -12564,8 +12577,10 @@ function Switch(props) {
   const state = toToggleState(isSelected, onChange);
   const ref = (0, import_react63.useRef)(null);
   const { inputProps } = (0, import_react_aria35.useSwitch)({ ...ariaProps, "aria-label": label }, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = (0, import_react_aria35.useFocusRing)(otherProps);
-  const { hoverProps, isHovered } = (0, import_react_aria35.useHover)(ariaProps);
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = (0, import_react_aria35.useFocusRing)(otherProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = (0, import_react_aria35.useHover)(ariaProps);
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
@@ -12598,7 +12613,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
@@ -12765,7 +12780,7 @@ var import_react_aria38 = require("react-aria");
 var import_react_stately15 = require("react-stately");
 var import_jsx_runtime77 = require("@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] = (0, import_react66.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = { "aria-label": label, isSelected, isDisabled, ...otherProps };
@@ -12782,11 +12797,14 @@ function ToggleButton(props) {
   });
   const labelRef = (0, import_react66.useRef)(null);
   const ref = (0, import_react66.useRef)(null);
-  const tid = useTestIds(props, label);
-  const { isPressed, pressProps } = (0, import_react_aria38.usePress)({ ref: labelRef, isDisabled });
+  const tid = useTestIds(otherProps, label);
+  const { isPressed: isPressedFromEvents, pressProps } = (0, import_react_aria38.usePress)({ ref: labelRef, isDisabled });
   const { inputProps } = (0, import_react_aria38.useSwitch)(ariaProps, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = (0, import_react_aria38.useFocusRing)({ ...otherProps, within: true });
-  const { hoverProps, isHovered } = (0, import_react_aria38.useHover)({ isDisabled });
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = (0, import_react_aria38.useFocusRing)({ ...otherProps, within: true });
+  const { hoverProps, isHovered: isHoveredFromEvents } = (0, import_react_aria38.useHover)({ isDisabled });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tooltip = resolveTooltip(disabled);
   const labelAttrs = {
     ...focusProps,
@@ -12797,7 +12815,7 @@ function ToggleButton(props) {
       ...isHovered && toggleHoverStyles,
       ...isPressed && togglePressStyles,
       ...isSelected && !isDisabled && Css.blue700.$,
-      ...isKeyboardFocus && toggleFocusStyles,
+      ...isFocusVisible && toggleFocusStyles,
       ...isDisabled && Css.gray300.cursorNotAllowed.$
     },
     ...tid
@@ -16004,17 +16022,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: import_react86.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 = (0, import_react86.cloneElement)(child, { isFirst: firstFormHeading });
           firstFormHeading = false;
-          return clone;
+          return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: Css.mb(gap).$, children: clone });
         } else {
-          return child;
+          return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: Css.mb(gap).$, children: child });
         }
       })
     }
@@ -16188,45 +16207,46 @@ function CompoundField({ children }) {
   }
   const commonStyles = Css.df.aic.fs1.maxwPx(550).bt.bb.bcGray300.$;
   const internalProps = { compound: true };
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-    "div",
-    {
-      css: {
-        ...Css.df.$,
-        "&:focus-within > div:nth-of-type(2)": Css.bgBlue700.$
-        // Separation line when inputs are focused
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.bl.borderRadius("4px 0 0 4px").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: (0, import_react88.cloneElement)(children[0], {
-              internalProps
-            })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { css: Css.wPx(1).fn.bgGray300.$ }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: (0, import_react88.cloneElement)(children[1], {
-              internalProps
-            })
-          }
-        )
-      ]
+  const [hasFocusWithin, setHasFocusWithin] = (0, import_react88.useState)(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__ */ (0, import_jsx_runtime116.jsxs)("div", { css: Css.df.$, onFocusCapture, onBlurCapture, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.bl.borderRadius("4px 0 0 4px").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: (0, import_react88.cloneElement)(children[0], {
+          internalProps
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { css: { ...Css.wPx(1).fn.bgGray300.$, ...hasFocusWithin && Css.bgBlue700.$ } }),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: (0, import_react88.cloneElement)(children[1], {
+          internalProps
+        })
+      }
+    )
+  ] });
 }
 
 // src/forms/BoundSelectAndTextField.tsx
@@ -17974,18 +17994,42 @@ function ButtonGroup(props) {
   const tid = useTestIds(props, "buttonGroup");
   return (
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
-    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ...tid, css: Css.df.lh(0).add({ ...sizeStyles2[size] }).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size, ...tid }, i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ...tid, css: Css.df.lh(0).add({ ...sizeStyles2[size] }).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+      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 = (0, import_react106.useRef)(null);
   const { buttonProps, isPressed } = (0, import_react_aria47.useButton)(ariaProps, ref);
   const { isFocusVisible, focusProps } = (0, import_react_aria47.useFocusRing)();
   const { hoverProps, isHovered } = (0, import_react_aria47.useHover)(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { css: getButtonStyles2(), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { css: getButtonStyles2(isFirst, isLast), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
     children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
@@ -18016,15 +18060,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 = {
@@ -18154,9 +18198,9 @@ function Copy(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
     "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
     }
@@ -18189,6 +18233,7 @@ function DnDGrid(props) {
   const reorderViaKeyboard = (0, import_react110.useRef)(false);
   const transformFrom = (0, import_react110.useRef)({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
+  const activeStyles4 = activeItemStyles ?? Css.bshModal.$;
   const getGridItems = (0, import_react110.useCallback)(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
@@ -18198,19 +18243,19 @@ function DnDGrid(props) {
   const initReorder = (0, import_react110.useCallback)(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
-      dragEl.current.classList.add(activeGridItemClass);
+      setInlineStyles(dragEl.current, activeStyles4);
     }
-  }, [getGridItemIdOrder]);
+  }, [getGridItemIdOrder, activeStyles4]);
   const commitReorder = (0, import_react110.useCallback)(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!(0, import_fast_deep_equal2.default)(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 = (0, import_react110.useCallback)(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
@@ -18228,11 +18273,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 = (0, import_react110.useCallback)((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
@@ -18271,18 +18316,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 = (0, import_react110.useCallback)(
     (e) => {
@@ -18356,7 +18404,7 @@ function DnDGrid(props) {
     {
       ref: gridEl,
       css: {
-        ...Css.ctis.dg.addIn(`& .${activeGridItemClass}`, activeItemStyles ?? Css.bshModal.$).$,
+        ...Css.ctis.dg.$,
         ...gridStyles
       },
       onTouchStart: onDragStart,
@@ -18370,7 +18418,6 @@ function DnDGrid(props) {
 }
 var gridItemIdKey = "dndgrid-itemid";
 var gridCloneKey = "dndgrid-clone";
-var activeGridItemClass = "dndgrid-active";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria49 = require("react-aria");