@homebound/beam 3.97.0 → 3.98.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -20522,8 +20522,8 @@ function SuperDrawer() {
20522
20522
  }
20523
20523
 
20524
20524
  // src/components/Layout/FormPageLayout.tsx
20525
- var import_react113 = __toESM(require("react"), 1);
20526
- var import_react_aria52 = require("react-aria");
20525
+ var import_react114 = __toESM(require("react"), 1);
20526
+ var import_react_aria53 = require("react-aria");
20527
20527
 
20528
20528
  // src/forms/BoundCheckboxField.tsx
20529
20529
  var import_mobx_react2 = require("mobx-react");
@@ -21922,20 +21922,78 @@ function applyActiveStyles(el, activeStyles3) {
21922
21922
  if (style) setInlineStyles(el, style);
21923
21923
  }
21924
21924
 
21925
- // src/components/Headers/HeaderActions.tsx
21925
+ // src/components/ButtonMenu.tsx
21926
+ var import_react108 = require("react");
21927
+ var import_react_aria51 = require("react-aria");
21928
+ var import_react_stately17 = require("react-stately");
21926
21929
  var import_jsx_runtime148 = require("react/jsx-runtime");
21930
+ function ButtonMenu(props) {
21931
+ const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = props;
21932
+ let selectedItem, onChange;
21933
+ if (isSelectionButtonMenuProps(props)) {
21934
+ selectedItem = props.selectedItem;
21935
+ onChange = props.onChange;
21936
+ }
21937
+ const state = (0, import_react_stately17.useMenuTriggerState)({ isOpen: defaultOpen });
21938
+ const buttonRef = (0, import_react108.useRef)(null);
21939
+ const { menuTriggerProps, menuProps } = (0, import_react_aria51.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
21940
+ const tid = useTestIds(
21941
+ props,
21942
+ isTextButton(trigger) ? labelOr(trigger, "buttonMenu") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
21943
+ );
21944
+ return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
21945
+ Menu,
21946
+ {
21947
+ ariaMenuProps: menuProps,
21948
+ onClose: () => state.close(),
21949
+ items,
21950
+ persistentItems,
21951
+ searchable,
21952
+ selectedItem,
21953
+ onChange,
21954
+ ...tid
21955
+ }
21956
+ ) });
21957
+ }
21958
+ function isSelectionButtonMenuProps(props) {
21959
+ return typeof props === "object" && "selectedItem" in props && "onChange" in props;
21960
+ }
21961
+
21962
+ // src/components/Headers/HeaderActions.tsx
21963
+ var import_jsx_runtime149 = require("react/jsx-runtime");
21927
21964
  function HeaderActions(props) {
21928
21965
  const {
21929
21966
  actions,
21930
21967
  ...otherProps
21931
21968
  } = props;
21932
21969
  const tid = useTestIds(otherProps, "headerActions");
21933
- return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "df gap1 fs0", ...tid, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { ...action }, `${action.label}`)) });
21970
+ return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
21971
+ const key = headerActionKey(action, i);
21972
+ if (action.kind === "icon") {
21973
+ return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(IconButton, { ...action, variant: "outline" }, key);
21974
+ }
21975
+ if (action.kind === "menu") {
21976
+ const {
21977
+ kind,
21978
+ ...menuProps
21979
+ } = action;
21980
+ void kind;
21981
+ return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ButtonMenu, { ...menuProps, trigger: {
21982
+ icon: "verticalDots"
21983
+ } }, key);
21984
+ }
21985
+ return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Button, { ...action }, key);
21986
+ }) });
21987
+ }
21988
+ function headerActionKey(action, index) {
21989
+ if (action.kind === "icon") return `${action.icon}-${index}`;
21990
+ if (action.kind === "menu") return `menu-${index}`;
21991
+ return `${String(action.label)}-${index}`;
21934
21992
  }
21935
21993
 
21936
21994
  // src/components/Headers/ContentHeader.tsx
21937
21995
  var import_runtime97 = require("@homebound/truss/runtime");
21938
- var import_jsx_runtime149 = require("react/jsx-runtime");
21996
+ var import_jsx_runtime150 = require("react/jsx-runtime");
21939
21997
  function ContentHeader(props) {
21940
21998
  const {
21941
21999
  title,
@@ -21965,7 +22023,7 @@ function ContentHeader(props) {
21965
22023
  if (!title && !description && !actions && !withAutoSave) {
21966
22024
  return null;
21967
22025
  }
21968
- const descriptionEl = description && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime97.trussProps)({
22026
+ const descriptionEl = description && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { ...(0, import_runtime97.trussProps)({
21969
22027
  fontWeight: "fw4",
21970
22028
  fontSize: "fz_14px",
21971
22029
  lineHeight: "lh_20px",
@@ -21973,7 +22031,7 @@ function ContentHeader(props) {
21973
22031
  "--color": "var(--b-on-surface)"
21974
22032
  }]
21975
22033
  }), ...tid.description, children: description });
21976
- return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime97.trussProps)({
22034
+ return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { ...(0, import_runtime97.trussProps)({
21977
22035
  ...{
21978
22036
  display: "df",
21979
22037
  flexDirection: "fdc",
@@ -21988,14 +22046,14 @@ function ContentHeader(props) {
21988
22046
  },
21989
22047
  ...xss
21990
22048
  }), ...tid, children: [
21991
- /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df aic jcsb mw0", children: [
21992
- title ? /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df aic gap1 mw0", children: [
22049
+ /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "df aic jcsb mw0", children: [
22050
+ title ? /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "df aic gap1 mw0", children: [
21993
22051
  startAdornment,
21994
- /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Heading, { ...(0, import_runtime97.trussProps)(titleCss), ...tid.title, children: title })
22052
+ /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Heading, { ...(0, import_runtime97.trussProps)(titleCss), ...tid.title, children: title })
21995
22053
  ] }) : descriptionEl,
21996
- (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
21997
- withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(AutoSaveIndicator, {}),
21998
- actions && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(HeaderActions, { actions })
22054
+ (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
22055
+ withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(AutoSaveIndicator, {}),
22056
+ actions && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(HeaderActions, { actions })
21999
22057
  ] })
22000
22058
  ] }),
22001
22059
  title && descriptionEl
@@ -22032,12 +22090,12 @@ var headingByLevel = {
22032
22090
  var import_runtime100 = require("@homebound/truss/runtime");
22033
22091
 
22034
22092
  // src/forms/FormSection/FormSectionChild.tsx
22035
- var import_react109 = require("react");
22093
+ var import_react110 = require("react");
22036
22094
 
22037
22095
  // src/components/DnDGrid/DnDGridItemHandle.tsx
22038
- var import_react_aria51 = require("react-aria");
22096
+ var import_react_aria52 = require("react-aria");
22039
22097
  var import_runtime98 = require("@homebound/truss/runtime");
22040
- var import_jsx_runtime150 = require("react/jsx-runtime");
22098
+ var import_jsx_runtime151 = require("react/jsx-runtime");
22041
22099
  function DnDGridItemHandle(props) {
22042
22100
  const {
22043
22101
  dragHandleProps,
@@ -22048,11 +22106,11 @@ function DnDGridItemHandle(props) {
22048
22106
  const {
22049
22107
  focusProps,
22050
22108
  isFocusVisible
22051
- } = (0, import_react_aria51.useFocusRing)();
22109
+ } = (0, import_react_aria52.useFocusRing)();
22052
22110
  const {
22053
22111
  hoverProps,
22054
22112
  isHovered
22055
- } = (0, import_react_aria51.useHover)({});
22113
+ } = (0, import_react_aria52.useHover)({});
22056
22114
  const tid = useTestIds(props, "dragHandle");
22057
22115
  const iconButtonNormal = {
22058
22116
  height: "h_28px",
@@ -22066,7 +22124,7 @@ function DnDGridItemHandle(props) {
22066
22124
  borderRadius: "br4",
22067
22125
  borderWidth: "bw1"
22068
22126
  };
22069
- return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("button", { ...(0, import_runtime98.trussProps)({
22127
+ return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("button", { ...(0, import_runtime98.trussProps)({
22070
22128
  ...compact ? iconButtonCompact : iconButtonNormal,
22071
22129
  ...{
22072
22130
  cursor: "cursor_grab",
@@ -22085,15 +22143,15 @@ function DnDGridItemHandle(props) {
22085
22143
  ...isHovered && {
22086
22144
  backgroundColor: "bgGray200"
22087
22145
  }
22088
- }), ...(0, import_react_aria51.mergeProps)(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Icon, { icon, inc: compact ? 2 : void 0, color }) });
22146
+ }), ...(0, import_react_aria52.mergeProps)(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(Icon, { icon, inc: compact ? 2 : void 0, color }) });
22089
22147
  }
22090
22148
 
22091
22149
  // src/components/DnDGrid/useDnDGridItem.tsx
22092
- var import_react108 = require("react");
22150
+ var import_react109 = require("react");
22093
22151
  function useDnDGridItem(props) {
22094
22152
  const { id, itemRef } = props;
22095
22153
  const { dragEl, onDragHandleKeyDown } = useDnDGridContext();
22096
- const { dragItemProps, dragHandleProps } = (0, import_react108.useMemo)(() => {
22154
+ const { dragItemProps, dragHandleProps } = (0, import_react109.useMemo)(() => {
22097
22155
  function initDraggable() {
22098
22156
  if (itemRef.current) {
22099
22157
  dragEl.current = itemRef.current;
@@ -22116,7 +22174,7 @@ function useDnDGridItem(props) {
22116
22174
 
22117
22175
  // src/forms/FormSection/FormSectionChild.tsx
22118
22176
  var import_runtime99 = require("@homebound/truss/runtime");
22119
- var import_jsx_runtime151 = require("react/jsx-runtime");
22177
+ var import_jsx_runtime152 = require("react/jsx-runtime");
22120
22178
  function FormSectionChild(props) {
22121
22179
  const {
22122
22180
  title,
@@ -22126,7 +22184,7 @@ function FormSectionChild(props) {
22126
22184
  orderField
22127
22185
  } = props;
22128
22186
  const tid = useTestIds(props, "formSectionChild");
22129
- const itemRef = (0, import_react109.useRef)(null);
22187
+ const itemRef = (0, import_react110.useRef)(null);
22130
22188
  const isDraggable = !!orderField;
22131
22189
  const {
22132
22190
  dragItemProps,
@@ -22135,7 +22193,7 @@ function FormSectionChild(props) {
22135
22193
  id: props.id ?? title,
22136
22194
  itemRef
22137
22195
  });
22138
- return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { ...isDraggable ? {
22196
+ return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...isDraggable ? {
22139
22197
  ...dragItemProps,
22140
22198
  ref: itemRef
22141
22199
  } : {}, ...(0, import_runtime99.trussProps)({
@@ -22154,13 +22212,13 @@ function FormSectionChild(props) {
22154
22212
  borderStyle: "lot_bsn",
22155
22213
  borderWidth: "lot_bw_0"
22156
22214
  }), ...tid, children: [
22157
- /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, startAdornment: isDraggable ? /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
22215
+ /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, startAdornment: isDraggable ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
22158
22216
  fields
22159
22217
  ] });
22160
22218
  }
22161
22219
 
22162
22220
  // src/forms/FormSection/FormSection.tsx
22163
- var import_jsx_runtime152 = require("react/jsx-runtime");
22221
+ var import_jsx_runtime153 = require("react/jsx-runtime");
22164
22222
  function FormSection(props) {
22165
22223
  const {
22166
22224
  title,
@@ -22170,7 +22228,7 @@ function FormSection(props) {
22170
22228
  childSections
22171
22229
  } = props;
22172
22230
  const tid = useTestIds(props, "formSection");
22173
- return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime100.trussProps)({
22231
+ return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime100.trussProps)({
22174
22232
  display: "df",
22175
22233
  flexDirection: "fdc",
22176
22234
  gap: "gap2",
@@ -22178,9 +22236,9 @@ function FormSection(props) {
22178
22236
  "--scrollMarginTop": (0, import_runtime100.maybeCssVar)(stickyNavAndHeaderOffset())
22179
22237
  }]
22180
22238
  }), ...tid.section, children: [
22181
- /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
22239
+ /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
22182
22240
  fields,
22183
- childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
22241
+ childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
22184
22242
  ] });
22185
22243
  }
22186
22244
  function isReorderable(childSections) {
@@ -22203,19 +22261,19 @@ function DraggableChildren(props) {
22203
22261
  }
22204
22262
  });
22205
22263
  };
22206
- return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DnDGrid, { onReorder: handleReorder, gridStyles: {
22264
+ return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DnDGrid, { onReorder: handleReorder, gridStyles: {
22207
22265
  gridTemplateColumns: "gtc_minmax_0_1fr",
22208
22266
  gap: "gap3"
22209
- }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });
22267
+ }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });
22210
22268
  }
22211
22269
  function sortByOrderField(childSections) {
22212
22270
  return [...childSections].sort((a, b) => (a.orderField.value ?? 0) - (b.orderField.value ?? 0));
22213
22271
  }
22214
22272
 
22215
22273
  // src/forms/StaticField.tsx
22216
- var import_utils132 = require("@react-aria/utils");
22274
+ var import_utils133 = require("@react-aria/utils");
22217
22275
  var import_runtime101 = require("@homebound/truss/runtime");
22218
- var import_jsx_runtime153 = require("react/jsx-runtime");
22276
+ var import_jsx_runtime154 = require("react/jsx-runtime");
22219
22277
  function StaticField(props) {
22220
22278
  const {
22221
22279
  fieldProps
@@ -22227,15 +22285,15 @@ function StaticField(props) {
22227
22285
  children
22228
22286
  } = props;
22229
22287
  const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
22230
- const id = (0, import_utils132.useId)();
22231
- return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...(0, import_runtime101.trussProps)({
22288
+ const id = (0, import_utils133.useId)();
22289
+ return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime101.trussProps)({
22232
22290
  ...labelStyle === "left" ? {
22233
22291
  display: "df",
22234
22292
  justifyContent: "jcsb",
22235
22293
  maxWidth: "maxw100"
22236
22294
  } : {}
22237
22295
  }), ...tid.container, children: [
22238
- /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("label", { ...(0, import_runtime101.trussProps)({
22296
+ /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("label", { ...(0, import_runtime101.trussProps)({
22239
22297
  display: "db",
22240
22298
  fontWeight: "fw4",
22241
22299
  fontSize: "fz_14px",
@@ -22245,7 +22303,7 @@ function StaticField(props) {
22245
22303
  }],
22246
22304
  marginBottom: "mb_4px"
22247
22305
  }), htmlFor: id, ...tid.label, children: label }),
22248
- /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { id, ...(0, import_runtime101.trussProps)({
22306
+ /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { id, ...(0, import_runtime101.trussProps)({
22249
22307
  fontWeight: "fw4",
22250
22308
  fontSize: "fz_14px",
22251
22309
  lineHeight: "lh_20px",
@@ -22263,7 +22321,7 @@ function StaticField(props) {
22263
22321
 
22264
22322
  // src/forms/SubmitButton.tsx
22265
22323
  var import_mobx_react21 = require("mobx-react");
22266
- var import_jsx_runtime154 = require("react/jsx-runtime");
22324
+ var import_jsx_runtime155 = require("react/jsx-runtime");
22267
22325
  function SubmitButton(props) {
22268
22326
  const { form, disabled, onClick, label = "Submit", ...others } = props;
22269
22327
  if (typeof onClick === "string") {
@@ -22273,7 +22331,7 @@ function SubmitButton(props) {
22273
22331
  const canSubmit = useComputed(() => {
22274
22332
  return form.isNewEntity && !state.clicked ? true : form.dirty && form.valid;
22275
22333
  }, [form]);
22276
- return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
22334
+ return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
22277
22335
  Button,
22278
22336
  {
22279
22337
  label,
@@ -22294,9 +22352,9 @@ var import_use_debounce6 = require("use-debounce");
22294
22352
 
22295
22353
  // src/components/RightSidebar.tsx
22296
22354
  var import_framer_motion2 = require("framer-motion");
22297
- var import_react110 = require("react");
22355
+ var import_react111 = require("react");
22298
22356
  var import_runtime102 = require("@homebound/truss/runtime");
22299
- var import_jsx_runtime155 = require("react/jsx-runtime");
22357
+ var import_jsx_runtime156 = require("react/jsx-runtime");
22300
22358
  var __maybeInc20 = (inc) => {
22301
22359
  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
22302
22360
  };
@@ -22305,10 +22363,10 @@ function RightSidebar({
22305
22363
  content,
22306
22364
  headerHeightPx: headerHeightPx2
22307
22365
  }) {
22308
- const [selectedIcon, setSelectedIcon] = (0, import_react110.useState)(void 0);
22366
+ const [selectedIcon, setSelectedIcon] = (0, import_react111.useState)(void 0);
22309
22367
  const tid = useTestIds({}, "rightSidebar");
22310
- return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(import_jsx_runtime155.Fragment, { children: [
22311
- /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.AnimatePresence, { children: !selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.motion.div, { className: "df fdc gap2 z1", initial: {
22368
+ return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_jsx_runtime156.Fragment, { children: [
22369
+ /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.AnimatePresence, { children: !selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.motion.div, { className: "df fdc gap2 z1", initial: {
22312
22370
  x: "100%",
22313
22371
  opacity: 0
22314
22372
  }, animate: {
@@ -22321,8 +22379,8 @@ function RightSidebar({
22321
22379
  ease: [0.51, 0.92, 0.24, 1],
22322
22380
  duration: 0.3,
22323
22381
  delay: 0.2
22324
- }, children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }) }) }),
22325
- /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.AnimatePresence, { children: selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.motion.div, { initial: {
22382
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }) }) }),
22383
+ /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.AnimatePresence, { children: selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.motion.div, { initial: {
22326
22384
  x: "100%",
22327
22385
  opacity: 0
22328
22386
  }, animate: {
@@ -22350,15 +22408,15 @@ function RightSidebar({
22350
22408
  overflowY: "oya",
22351
22409
  paddingLeft: "pl4",
22352
22410
  paddingRight: "pr3"
22353
- }), children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(import_jsx_runtime155.Fragment, { children: [
22354
- /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { ...(0, import_runtime102.trussProps)({
22411
+ }), children: /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_jsx_runtime156.Fragment, { children: [
22412
+ /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { ...(0, import_runtime102.trussProps)({
22355
22413
  position: "sticky",
22356
22414
  top: "top0",
22357
22415
  backgroundColor: ["bgColor_var", {
22358
22416
  "--backgroundColor": "var(--b-surface)"
22359
22417
  }]
22360
22418
  }), children: [
22361
- /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { ...(0, import_runtime102.trussProps)({
22419
+ /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { ...(0, import_runtime102.trussProps)({
22362
22420
  position: "absolute",
22363
22421
  left: ["left_var", {
22364
22422
  "--left": `${-24}px`
@@ -22368,8 +22426,8 @@ function RightSidebar({
22368
22426
  flexDirection: "fdc",
22369
22427
  alignItems: "aic"
22370
22428
  }), children: [
22371
- /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
22372
- /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ...(0, import_runtime102.trussProps)({
22429
+ /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
22430
+ /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { ...(0, import_runtime102.trussProps)({
22373
22431
  position: "absolute",
22374
22432
  top: "top_48px",
22375
22433
  height: "h_calc_100vh_168px",
@@ -22379,9 +22437,9 @@ function RightSidebar({
22379
22437
  }]
22380
22438
  }) })
22381
22439
  ] }),
22382
- /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
22440
+ /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
22383
22441
  ] }),
22384
- selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ...tid.content, className: "pl3", children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
22442
+ selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { ...tid.content, className: "pl3", children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
22385
22443
  ] }) }, "rightSidebar") })
22386
22444
  ] });
22387
22445
  }
@@ -22390,9 +22448,9 @@ function IconButtonList({
22390
22448
  selectedIcon,
22391
22449
  onIconClick
22392
22450
  }) {
22393
- return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_jsx_runtime155.Fragment, { children: content.map(({
22451
+ return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_jsx_runtime156.Fragment, { children: content.map(({
22394
22452
  icon
22395
- }) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
22453
+ }) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
22396
22454
  IconButton,
22397
22455
  {
22398
22456
  variant: "circle",
@@ -22406,9 +22464,9 @@ function IconButtonList({
22406
22464
  }
22407
22465
 
22408
22466
  // src/components/Toast/ToastContext.tsx
22409
- var import_react111 = require("react");
22410
- var import_jsx_runtime156 = require("react/jsx-runtime");
22411
- var ToastContext = (0, import_react111.createContext)({
22467
+ var import_react112 = require("react");
22468
+ var import_jsx_runtime157 = require("react/jsx-runtime");
22469
+ var ToastContext = (0, import_react112.createContext)({
22412
22470
  setNotice: () => {
22413
22471
  throw new Error("Missing ToastProvider");
22414
22472
  },
@@ -22417,28 +22475,28 @@ var ToastContext = (0, import_react111.createContext)({
22417
22475
  notice: void 0
22418
22476
  });
22419
22477
  function ToastProvider(props) {
22420
- const [notice, setNotice] = (0, import_react111.useState)();
22421
- const clear = (0, import_react111.useCallback)(() => setNotice(void 0), [setNotice]);
22422
- const contextValue = (0, import_react111.useMemo)(() => ({ setNotice, notice, clear }), [notice, clear]);
22423
- return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(ToastContext.Provider, { value: contextValue, children: props.children });
22478
+ const [notice, setNotice] = (0, import_react112.useState)();
22479
+ const clear = (0, import_react112.useCallback)(() => setNotice(void 0), [setNotice]);
22480
+ const contextValue = (0, import_react112.useMemo)(() => ({ setNotice, notice, clear }), [notice, clear]);
22481
+ return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ToastContext.Provider, { value: contextValue, children: props.children });
22424
22482
  }
22425
22483
  function useToastContext() {
22426
- return (0, import_react111.useContext)(ToastContext);
22484
+ return (0, import_react112.useContext)(ToastContext);
22427
22485
  }
22428
22486
 
22429
22487
  // src/components/Toast/Toast.tsx
22430
- var import_jsx_runtime157 = require("react/jsx-runtime");
22488
+ var import_jsx_runtime158 = require("react/jsx-runtime");
22431
22489
  function Toast() {
22432
22490
  const { setNotice, notice } = useToastContext();
22433
22491
  const tid = useTestIds({}, "toast");
22434
- return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(import_jsx_runtime157.Fragment, { children: notice && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Banner, { ...notice, ...tid, onClose: () => setNotice(void 0) }) });
22492
+ return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(import_jsx_runtime158.Fragment, { children: notice && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Banner, { ...notice, ...tid, onClose: () => setNotice(void 0) }) });
22435
22493
  }
22436
22494
 
22437
22495
  // src/components/Layout/PageHeaderBreadcrumbs.tsx
22438
- var import_react112 = require("react");
22496
+ var import_react113 = require("react");
22439
22497
  var import_react_router_dom5 = require("react-router-dom");
22440
22498
  var import_runtime103 = require("@homebound/truss/runtime");
22441
- var import_jsx_runtime158 = (
22499
+ var import_jsx_runtime159 = (
22442
22500
  // Adding index to key to prevent rendering issues when multiple items have the same label
22443
22501
  require("react/jsx-runtime")
22444
22502
  );
@@ -22446,11 +22504,11 @@ function PageHeaderBreadcrumbs({
22446
22504
  breadcrumb
22447
22505
  }) {
22448
22506
  const tids = useTestIds({}, "pageHeaderBreadcrumbs");
22449
- const breadcrumbs = (0, import_react112.useMemo)(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
22450
- const [collapsed, setCollapsed] = (0, import_react112.useState)(true);
22507
+ const breadcrumbs = (0, import_react113.useMemo)(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
22508
+ const [collapsed, setCollapsed] = (0, import_react113.useState)(true);
22451
22509
  function renderBreadcrumb(bc, index, hideDivisor) {
22452
- return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_react112.Fragment, { children: [
22453
- index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { ...(0, import_runtime103.trussProps)({
22510
+ return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_react113.Fragment, { children: [
22511
+ index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { ...(0, import_runtime103.trussProps)({
22454
22512
  fontWeight: "fw6",
22455
22513
  fontSize: "fz_14px",
22456
22514
  lineHeight: "lh_20px",
@@ -22462,7 +22520,7 @@ function PageHeaderBreadcrumbs({
22462
22520
  marginTop: "mt_2px",
22463
22521
  marginBottom: "mb_2px"
22464
22522
  }), children: "/" }),
22465
- /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime103.mergeProps)("navLink", void 0, {
22523
+ /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime103.mergeProps)("navLink", void 0, {
22466
22524
  fontWeight: "fw6",
22467
22525
  fontSize: "fz_14px",
22468
22526
  lineHeight: "lh_20px",
@@ -22474,9 +22532,9 @@ function PageHeaderBreadcrumbs({
22474
22532
  bc.right
22475
22533
  ] }, `${bc.label}-${index}`);
22476
22534
  }
22477
- return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_jsx_runtime158.Fragment, { children: [
22535
+ return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_jsx_runtime159.Fragment, { children: [
22478
22536
  renderBreadcrumb(breadcrumbs[0], 0),
22479
- /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("button", { ...tids.expand, ...(0, import_runtime103.trussProps)({
22537
+ /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("button", { ...tids.expand, ...(0, import_runtime103.trussProps)({
22480
22538
  color: ["color_var", {
22481
22539
  "--color": "var(--b-on-surface-muted)"
22482
22540
  }],
@@ -22490,7 +22548,7 @@ function PageHeaderBreadcrumbs({
22490
22548
 
22491
22549
  // src/components/Layout/FormPageLayout.tsx
22492
22550
  var import_runtime104 = require("@homebound/truss/runtime");
22493
- var import_jsx_runtime159 = require("react/jsx-runtime");
22551
+ var import_jsx_runtime160 = require("react/jsx-runtime");
22494
22552
  var headerHeightPx = 120;
22495
22553
  var maxContentWidthPx = 1600;
22496
22554
  function FormPageLayoutComponent(props) {
@@ -22500,9 +22558,9 @@ function FormPageLayoutComponent(props) {
22500
22558
  rightSideBar
22501
22559
  } = props;
22502
22560
  const tids = useTestIds(props, "formPageLayout");
22503
- const sectionsWithRefs = (0, import_react113.useMemo)(() => formSections.map((section, id) => ({
22561
+ const sectionsWithRefs = (0, import_react114.useMemo)(() => formSections.map((section, id) => ({
22504
22562
  section,
22505
- ref: (0, import_react113.createRef)(),
22563
+ ref: (0, import_react114.createRef)(),
22506
22564
  // Unique key for each section to use in the observer
22507
22565
  sectionKey: `section-${section.title ?? id}`
22508
22566
  })), [formSections]);
@@ -22512,7 +22570,7 @@ function FormPageLayoutComponent(props) {
22512
22570
  // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
22513
22571
  // scroll position & filters
22514
22572
  // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
22515
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime104.trussProps)({
22573
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime104.trussProps)({
22516
22574
  position: "fixed",
22517
22575
  top: "top0",
22518
22576
  bottom: "bottom0",
@@ -22528,7 +22586,7 @@ function FormPageLayoutComponent(props) {
22528
22586
  display: "df",
22529
22587
  justifyContent: "jcc",
22530
22588
  alignItems: "aifs"
22531
- }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { ...(0, import_runtime104.trussProps)({
22589
+ }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { ...(0, import_runtime104.trussProps)({
22532
22590
  width: "w100",
22533
22591
  maxWidth: ["maxw_var", {
22534
22592
  "--maxWidth": `${maxContentWidthPx}px`
@@ -22541,21 +22599,21 @@ function FormPageLayoutComponent(props) {
22541
22599
  columnGap: "cg3",
22542
22600
  alignItems: "ais"
22543
22601
  }), children: [
22544
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
22545
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
22546
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
22547
- rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("aside", { ...(0, import_runtime104.trussProps)({
22602
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
22603
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
22604
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
22605
+ rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("aside", { ...(0, import_runtime104.trussProps)({
22548
22606
  gridRow: "gr_2",
22549
22607
  gridColumn: "gc_3_4",
22550
22608
  position: "sticky",
22551
22609
  top: ["top_var", {
22552
22610
  "--top": `${headerHeightPx}px`
22553
22611
  }]
22554
- }), children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(RightSidebar, { content: rightSideBar, headerHeightPx }) })
22612
+ }), children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(RightSidebar, { content: rightSideBar, headerHeightPx }) })
22555
22613
  ] }) })
22556
22614
  );
22557
22615
  }
22558
- var FormPageLayout = import_react113.default.memo(FormPageLayoutComponent);
22616
+ var FormPageLayout = import_react114.default.memo(FormPageLayoutComponent);
22559
22617
  function PageHeader(props) {
22560
22618
  const {
22561
22619
  pageTitle,
@@ -22569,7 +22627,7 @@ function PageHeader(props) {
22569
22627
  notice
22570
22628
  } = useToastContext();
22571
22629
  const tids = useTestIds(props);
22572
- return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("header", { ...(0, import_runtime104.trussProps)({
22630
+ return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("header", { ...(0, import_runtime104.trussProps)({
22573
22631
  gridRow: "gr_1",
22574
22632
  gridColumn: "gc_1_4",
22575
22633
  position: "sticky",
@@ -22586,16 +22644,16 @@ function PageHeader(props) {
22586
22644
  }]
22587
22645
  } : {}
22588
22646
  }), ...tids, children: [
22589
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Toast, {}),
22590
- /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "pt2 pb2 pl3 pr3 df jcsb aic", children: [
22591
- /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { children: [
22592
- breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
22593
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
22647
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Toast, {}),
22648
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "pt2 pb2 pl3 pr3 df jcsb aic", children: [
22649
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { children: [
22650
+ breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
22651
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
22594
22652
  ] }),
22595
- /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "df gap1", children: [
22596
- tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
22597
- cancelAction && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
22598
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(SubmitButton, { form: formState, ...submitAction })
22653
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "df gap1", children: [
22654
+ tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
22655
+ cancelAction && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
22656
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(SubmitButton, { form: formState, ...submitAction })
22599
22657
  ] })
22600
22658
  ] })
22601
22659
  ] });
@@ -22607,7 +22665,7 @@ function FormSections(props) {
22607
22665
  } = props;
22608
22666
  const tids = useTestIds(props);
22609
22667
  const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
22610
- return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("article", { ...(0, import_runtime104.trussProps)({
22668
+ return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("article", { ...(0, import_runtime104.trussProps)({
22611
22669
  gridRow: "gr_2",
22612
22670
  gridColumn: "gc_2_3",
22613
22671
  paddingBottom: ["pb_var", {
@@ -22620,7 +22678,7 @@ function FormSections(props) {
22620
22678
  sectionKey
22621
22679
  }, i) => (
22622
22680
  // Subgrid here allows for icon placement to the left of the section content
22623
- /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
22681
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
22624
22682
  "section",
22625
22683
  {
22626
22684
  id: sectionKey,
@@ -22636,10 +22694,10 @@ function FormSections(props) {
22636
22694
  }),
22637
22695
  ...tids.formSection,
22638
22696
  children: [
22639
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "gc_1", children: section.icon && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Icon, { icon: section.icon, inc: 3.5 }) }),
22640
- /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "gc_2", children: [
22641
- section.title && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("h2", { className: "fw6 fz_20px lh_28px mb3", children: section.title }),
22642
- /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(BoundForm, { formState, rows: section.rows })
22697
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { className: "gc_1", children: section.icon && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Icon, { icon: section.icon, inc: 3.5 }) }),
22698
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "gc_2", children: [
22699
+ section.title && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("h2", { className: "fw6 fz_20px lh_28px mb3", children: section.title }),
22700
+ /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(BoundForm, { formState, rows: section.rows })
22643
22701
  ] })
22644
22702
  ]
22645
22703
  },
@@ -22652,11 +22710,11 @@ function LeftNav(props) {
22652
22710
  sectionsWithRefs
22653
22711
  } = props;
22654
22712
  const tids = useTestIds(props);
22655
- const sectionWithTitles = (0, import_react113.useMemo)(() => sectionsWithRefs.filter(({
22713
+ const sectionWithTitles = (0, import_react114.useMemo)(() => sectionsWithRefs.filter(({
22656
22714
  section
22657
22715
  }) => !!section.title), [sectionsWithRefs]);
22658
22716
  const activeSection = useActiveSection(sectionWithTitles);
22659
- return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("aside", { ...(0, import_runtime104.trussProps)({
22717
+ return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("aside", { ...(0, import_runtime104.trussProps)({
22660
22718
  gridRow: "gr_2",
22661
22719
  gridColumn: "gc_1_2",
22662
22720
  position: "sticky",
@@ -22668,7 +22726,7 @@ function LeftNav(props) {
22668
22726
  display: "df",
22669
22727
  flexDirection: "fdc",
22670
22728
  gap: "gap1"
22671
- }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
22729
+ }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
22672
22730
  }
22673
22731
  var activeStyles = {
22674
22732
  fontWeight: "fw6",
@@ -22703,29 +22761,29 @@ function SectionNavLink(props) {
22703
22761
  ref: sectionRef
22704
22762
  } = sectionWithRef;
22705
22763
  const active = activeSection === sectionWithRef.sectionKey;
22706
- const handleNavClick = (0, import_react113.useCallback)(() => {
22764
+ const handleNavClick = (0, import_react114.useCallback)(() => {
22707
22765
  sectionRef.current?.scrollIntoView({
22708
22766
  behavior: "smooth",
22709
22767
  block: "start"
22710
22768
  });
22711
22769
  }, [sectionRef]);
22712
22770
  const tids = useTestIds(props);
22713
- const buttonRef = (0, import_react113.useRef)(null);
22771
+ const buttonRef = (0, import_react114.useRef)(null);
22714
22772
  const {
22715
22773
  buttonProps,
22716
22774
  isPressed
22717
- } = (0, import_react_aria52.useButton)({
22775
+ } = (0, import_react_aria53.useButton)({
22718
22776
  onPress: handleNavClick
22719
22777
  }, buttonRef);
22720
22778
  const {
22721
22779
  isFocusVisible,
22722
22780
  focusProps
22723
- } = (0, import_react_aria52.useFocusRing)();
22781
+ } = (0, import_react_aria53.useFocusRing)();
22724
22782
  const {
22725
22783
  hoverProps,
22726
22784
  isHovered
22727
22785
  } = useHover2({});
22728
- return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime104.trussProps)({
22786
+ return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime104.trussProps)({
22729
22787
  ...{
22730
22788
  fontWeight: "fw6",
22731
22789
  fontSize: "fz_14px",
@@ -22752,7 +22810,7 @@ function SectionNavLink(props) {
22752
22810
  }), ...tids.sectionNavLink, children: section.title });
22753
22811
  }
22754
22812
  function useActiveSection(sectionsWithRefs) {
22755
- const [activeSection, setActiveSection] = (0, import_react113.useState)(null);
22813
+ const [activeSection, setActiveSection] = (0, import_react114.useState)(null);
22756
22814
  const debouncedIntersectionCallback = (0, import_use_debounce6.useDebouncedCallback)((entries) => {
22757
22815
  const sectionsInView = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio > 0.2).sort((a, b) => {
22758
22816
  const ratioDiff = b.intersectionRatio - a.intersectionRatio;
@@ -22767,7 +22825,7 @@ function useActiveSection(sectionsWithRefs) {
22767
22825
  }, 200, {
22768
22826
  maxWait: 500
22769
22827
  });
22770
- (0, import_react113.useEffect)(() => {
22828
+ (0, import_react114.useEffect)(() => {
22771
22829
  if (!("IntersectionObserver" in window)) return;
22772
22830
  const observer2 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
22773
22831
  /**
@@ -22803,7 +22861,7 @@ function useActiveSection(sectionsWithRefs) {
22803
22861
 
22804
22862
  // src/components/Layout/FullBleed.tsx
22805
22863
  var import_runtime105 = require("@homebound/truss/runtime");
22806
- var import_react114 = require("react");
22864
+ var import_react115 = require("react");
22807
22865
  var __maybeInc21 = (inc) => {
22808
22866
  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
22809
22867
  };
@@ -22820,7 +22878,7 @@ function FullBleed({
22820
22878
  style,
22821
22879
  ...others
22822
22880
  } = children.props;
22823
- return paddingRight === "0px" && paddingLeft === "0px" ? children : (0, import_react114.cloneElement)(
22881
+ return paddingRight === "0px" && paddingLeft === "0px" ? children : (0, import_react115.cloneElement)(
22824
22882
  children,
22825
22883
  // The child might already have className/style set, let Css.props also create
22826
22884
  // a className/style, and then mergeProps the two together.
@@ -22881,30 +22939,30 @@ function isGridTableProps(props) {
22881
22939
  }
22882
22940
 
22883
22941
  // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
22884
- var import_react118 = require("react");
22942
+ var import_react119 = require("react");
22885
22943
  var import_runtime107 = require("@homebound/truss/runtime");
22886
22944
 
22887
22945
  // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
22888
22946
  var import_framer_motion3 = require("framer-motion");
22889
- var import_react117 = require("react");
22890
- var import_react_aria53 = require("react-aria");
22947
+ var import_react118 = require("react");
22948
+ var import_react_aria54 = require("react-aria");
22891
22949
  var import_react_dom5 = require("react-dom");
22892
22950
 
22893
22951
  // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
22894
- var import_react115 = require("react");
22895
- var import_jsx_runtime160 = require("react/jsx-runtime");
22896
- var EnvironmentBannerLayoutHeightContext = (0, import_react115.createContext)(0);
22952
+ var import_react116 = require("react");
22953
+ var import_jsx_runtime161 = require("react/jsx-runtime");
22954
+ var EnvironmentBannerLayoutHeightContext = (0, import_react116.createContext)(0);
22897
22955
  function EnvironmentBannerLayoutHeightProvider({ value, children }) {
22898
- return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
22956
+ return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
22899
22957
  }
22900
22958
  function useEnvironmentBannerLayoutHeight() {
22901
- return (0, import_react115.useContext)(EnvironmentBannerLayoutHeightContext);
22959
+ return (0, import_react116.useContext)(EnvironmentBannerLayoutHeightContext);
22902
22960
  }
22903
22961
 
22904
22962
  // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
22905
- var import_react116 = __toESM(require("react"), 1);
22906
- var import_jsx_runtime161 = require("react/jsx-runtime");
22907
- var RightPaneContext = import_react116.default.createContext({
22963
+ var import_react117 = __toESM(require("react"), 1);
22964
+ var import_jsx_runtime162 = require("react/jsx-runtime");
22965
+ var RightPaneContext = import_react117.default.createContext({
22908
22966
  openInPane: () => {
22909
22967
  },
22910
22968
  closePane: () => {
@@ -22915,30 +22973,30 @@ var RightPaneContext = import_react116.default.createContext({
22915
22973
  rightPaneContent: null
22916
22974
  });
22917
22975
  function RightPaneProvider({ children }) {
22918
- const [rightPaneContent, setRightPaneContent] = (0, import_react116.useState)(void 0);
22919
- const [isRightPaneOpen, setIsRightPaneOpen] = (0, import_react116.useState)(false);
22920
- const openInPane = (0, import_react116.useCallback)(
22976
+ const [rightPaneContent, setRightPaneContent] = (0, import_react117.useState)(void 0);
22977
+ const [isRightPaneOpen, setIsRightPaneOpen] = (0, import_react117.useState)(false);
22978
+ const openInPane = (0, import_react117.useCallback)(
22921
22979
  (opts) => {
22922
22980
  setRightPaneContent(opts?.content);
22923
22981
  setIsRightPaneOpen(true);
22924
22982
  },
22925
22983
  [setRightPaneContent]
22926
22984
  );
22927
- const closePane = (0, import_react116.useCallback)(() => setIsRightPaneOpen(false), []);
22928
- const clearPane = (0, import_react116.useCallback)(() => setRightPaneContent(void 0), [setRightPaneContent]);
22929
- const context = (0, import_react116.useMemo)(
22985
+ const closePane = (0, import_react117.useCallback)(() => setIsRightPaneOpen(false), []);
22986
+ const clearPane = (0, import_react117.useCallback)(() => setRightPaneContent(void 0), [setRightPaneContent]);
22987
+ const context = (0, import_react117.useMemo)(
22930
22988
  () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
22931
22989
  [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
22932
22990
  );
22933
- return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(RightPaneContext.Provider, { value: context, children });
22991
+ return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(RightPaneContext.Provider, { value: context, children });
22934
22992
  }
22935
22993
  function useRightPaneContext() {
22936
- return (0, import_react116.useContext)(RightPaneContext);
22994
+ return (0, import_react117.useContext)(RightPaneContext);
22937
22995
  }
22938
22996
 
22939
22997
  // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
22940
22998
  var import_runtime106 = require("@homebound/truss/runtime");
22941
- var import_jsx_runtime162 = require("react/jsx-runtime");
22999
+ var import_jsx_runtime163 = require("react/jsx-runtime");
22942
23000
  var __maybeInc22 = (inc) => {
22943
23001
  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
22944
23002
  };
@@ -22957,12 +23015,12 @@ function DocumentScrollRightPane({
22957
23015
  } = useBreakpoint();
22958
23016
  const bannerHeightPx = useEnvironmentBannerLayoutHeight();
22959
23017
  const isMobileOverlay = sm && isRightPaneOpen;
22960
- (0, import_react_aria53.usePreventScroll)({
23018
+ (0, import_react_aria54.usePreventScroll)({
22961
23019
  isDisabled: !isMobileOverlay
22962
23020
  });
22963
- (0, import_react117.useEffect)(() => closePane, [closePane]);
23021
+ (0, import_react118.useEffect)(() => closePane, [closePane]);
22964
23022
  const slideX = sm ? "100%" : paneWidth;
22965
- const pane = /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_framer_motion3.motion.div, { ...tid, ...(0, import_runtime106.mergeProps)(void 0, sm ? {
23023
+ const pane = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion3.motion.div, { ...tid, ...(0, import_runtime106.mergeProps)(void 0, sm ? {
22966
23024
  top: bannerHeightPx
22967
23025
  } : void 0, sm ? {
22968
23026
  position: "fixed",
@@ -23015,7 +23073,7 @@ function DocumentScrollRightPane({
23015
23073
  }
23016
23074
 
23017
23075
  // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
23018
- var import_jsx_runtime163 = require("react/jsx-runtime");
23076
+ var import_jsx_runtime164 = require("react/jsx-runtime");
23019
23077
  var defaultDocumentScrollRightPaneWidth = 450;
23020
23078
  function DocumentScrollRightPaneLayout(props) {
23021
23079
  const {
@@ -23031,7 +23089,7 @@ function DocumentScrollRightPaneLayout(props) {
23031
23089
  } = useBreakpoint();
23032
23090
  const isSplitPaneOpen = isRightPaneOpen && !sm;
23033
23091
  const effectivePaneWidth = isSplitPaneOpen ? documentScrollRightPaneWidth(paneWidth) : "0px";
23034
- (0, import_react118.useLayoutEffect)(() => {
23092
+ (0, import_react119.useLayoutEffect)(() => {
23035
23093
  const root = document.documentElement;
23036
23094
  const previous = root.style.getPropertyValue(beamFloatingRightOffsetVar);
23037
23095
  root.style.setProperty(beamFloatingRightOffsetVar, effectivePaneWidth);
@@ -23043,13 +23101,13 @@ function DocumentScrollRightPaneLayout(props) {
23043
23101
  }
23044
23102
  };
23045
23103
  }, [effectivePaneWidth]);
23046
- return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
23104
+ return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
23047
23105
  [beamRightPaneWidthVar]: effectivePaneWidth
23048
23106
  }, {
23049
23107
  width: "w100"
23050
23108
  }), ...tid, children: [
23051
- /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(DocumentScrollRightPaneSpacer, { paneWidth, isOpen: isSplitPaneOpen, children }),
23052
- /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(DocumentScrollRightPane, { paneWidth })
23109
+ /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(DocumentScrollRightPaneSpacer, { paneWidth, isOpen: isSplitPaneOpen, children }),
23110
+ /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(DocumentScrollRightPane, { paneWidth })
23053
23111
  ] });
23054
23112
  }
23055
23113
  function DocumentScrollRightPaneSpacer({
@@ -23059,19 +23117,19 @@ function DocumentScrollRightPaneSpacer({
23059
23117
  }) {
23060
23118
  const tid = useTestIds({}, "rightPaneSpacer");
23061
23119
  const effectivePaneWidth = documentScrollRightPaneWidth(paneWidth);
23062
- return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
23120
+ return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
23063
23121
  width: isOpen ? "fit-content" : "100%"
23064
23122
  }, {
23065
23123
  display: "df",
23066
23124
  minWidth: "mw100"
23067
23125
  }), children: [
23068
- /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
23126
+ /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
23069
23127
  width: `min(100%, ${documentScrollChromeWidth()})`
23070
23128
  }, {
23071
23129
  flexShrink: "fs0",
23072
23130
  minWidth: "mw_fit_content"
23073
23131
  }), children }),
23074
- /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { "aria-hidden": true, ...(0, import_runtime107.mergeProps)(void 0, {
23132
+ /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { "aria-hidden": true, ...(0, import_runtime107.mergeProps)(void 0, {
23075
23133
  width: isOpen ? effectivePaneWidth : 0
23076
23134
  }, {
23077
23135
  flexShrink: "fs0",
@@ -23083,43 +23141,6 @@ function DocumentScrollRightPaneSpacer({
23083
23141
  // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
23084
23142
  var import_react124 = require("react");
23085
23143
 
23086
- // src/components/ButtonMenu.tsx
23087
- var import_react119 = require("react");
23088
- var import_react_aria54 = require("react-aria");
23089
- var import_react_stately17 = require("react-stately");
23090
- var import_jsx_runtime164 = require("react/jsx-runtime");
23091
- function ButtonMenu(props) {
23092
- const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = props;
23093
- let selectedItem, onChange;
23094
- if (isSelectionButtonMenuProps(props)) {
23095
- selectedItem = props.selectedItem;
23096
- onChange = props.onChange;
23097
- }
23098
- const state = (0, import_react_stately17.useMenuTriggerState)({ isOpen: defaultOpen });
23099
- const buttonRef = (0, import_react119.useRef)(null);
23100
- const { menuTriggerProps, menuProps } = (0, import_react_aria54.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
23101
- const tid = useTestIds(
23102
- props,
23103
- isTextButton(trigger) ? labelOr(trigger, "buttonMenu") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
23104
- );
23105
- return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
23106
- Menu,
23107
- {
23108
- ariaMenuProps: menuProps,
23109
- onClose: () => state.close(),
23110
- items,
23111
- persistentItems,
23112
- searchable,
23113
- selectedItem,
23114
- onChange,
23115
- ...tid
23116
- }
23117
- ) });
23118
- }
23119
- function isSelectionButtonMenuProps(props) {
23120
- return typeof props === "object" && "selectedItem" in props && "onChange" in props;
23121
- }
23122
-
23123
23144
  // src/components/CountBadge.tsx
23124
23145
  var import_runtime108 = require("@homebound/truss/runtime");
23125
23146
  var import_jsx_runtime165 = require("react/jsx-runtime");