@homebound/beam 3.93.0 → 3.94.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 +376 -297
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +16 -1
- package/dist/index.d.ts +16 -1
- package/dist/index.js +365 -287
- package/dist/index.js.map +1 -1
- package/dist/truss.css +2 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -135,6 +135,7 @@ __export(index_exports, {
|
|
|
135
135
|
Icon: () => Icon,
|
|
136
136
|
IconButton: () => IconButton,
|
|
137
137
|
Icons: () => Icons,
|
|
138
|
+
InlineFeedbackBanner: () => InlineFeedbackBanner,
|
|
138
139
|
JumpLink: () => JumpLink,
|
|
139
140
|
KEPT_GROUP: () => KEPT_GROUP,
|
|
140
141
|
Loader: () => Loader,
|
|
@@ -25684,11 +25685,88 @@ function HbSpinnerProvider({
|
|
|
25684
25685
|
return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(HbLoadingSpinnerContext.Provider, { value: state, children });
|
|
25685
25686
|
}
|
|
25686
25687
|
|
|
25688
|
+
// src/components/InlineFeedbackBanner.tsx
|
|
25689
|
+
var import_runtime126 = require("@homebound/truss/runtime");
|
|
25690
|
+
var import_jsx_runtime201 = require("react/jsx-runtime");
|
|
25691
|
+
function InlineFeedbackBanner(props) {
|
|
25692
|
+
const {
|
|
25693
|
+
type,
|
|
25694
|
+
tagText,
|
|
25695
|
+
description,
|
|
25696
|
+
actions = []
|
|
25697
|
+
} = props;
|
|
25698
|
+
const {
|
|
25699
|
+
icon,
|
|
25700
|
+
tagType,
|
|
25701
|
+
borderColor,
|
|
25702
|
+
fallbackTagText
|
|
25703
|
+
} = typeStyles2[type];
|
|
25704
|
+
const tid = useTestIds(props, "inlineFeedbackBanner");
|
|
25705
|
+
const tagProps = tagText ? {
|
|
25706
|
+
type: tagType,
|
|
25707
|
+
icon,
|
|
25708
|
+
text: tagText
|
|
25709
|
+
} : {
|
|
25710
|
+
type: tagType,
|
|
25711
|
+
icon,
|
|
25712
|
+
text: fallbackTagText,
|
|
25713
|
+
iconOnly: true
|
|
25714
|
+
};
|
|
25715
|
+
return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...(0, import_runtime126.trussProps)({
|
|
25716
|
+
display: "df",
|
|
25717
|
+
alignItems: "ais",
|
|
25718
|
+
gap: "gap1",
|
|
25719
|
+
width: "w100",
|
|
25720
|
+
paddingTop: "pt1",
|
|
25721
|
+
paddingBottom: "pb1",
|
|
25722
|
+
paddingRight: "pr1",
|
|
25723
|
+
paddingLeft: "pl1",
|
|
25724
|
+
borderRadius: "br4",
|
|
25725
|
+
fontWeight: "fw4",
|
|
25726
|
+
fontSize: "fz_12px",
|
|
25727
|
+
lineHeight: "lh_16px",
|
|
25728
|
+
backgroundColor: ["bgColor_var", {
|
|
25729
|
+
"--backgroundColor": "var(--b-surface)"
|
|
25730
|
+
}],
|
|
25731
|
+
borderStyle: "bss",
|
|
25732
|
+
borderWidth: "bw1",
|
|
25733
|
+
borderColor: ["bc_var", {
|
|
25734
|
+
"--borderColor": (0, import_runtime126.maybeCssVar)(borderColor)
|
|
25735
|
+
}],
|
|
25736
|
+
boxShadow: "bshBasic"
|
|
25737
|
+
}), ...tid, children: [
|
|
25738
|
+
/* @__PURE__ */ (0, import_jsx_runtime201.jsx)("span", { className: "df fs0", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Tag, { ...tagProps, ...tid.tag }) }),
|
|
25739
|
+
/* @__PURE__ */ (0, import_jsx_runtime201.jsx)("span", { ...(0, import_runtime126.trussProps)({
|
|
25740
|
+
flexGrow: "fg1",
|
|
25741
|
+
minWidth: "mw0",
|
|
25742
|
+
color: ["color_var", {
|
|
25743
|
+
"--color": "var(--b-on-surface)"
|
|
25744
|
+
}]
|
|
25745
|
+
}), ...tid.description, children: description }),
|
|
25746
|
+
actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "df aic gap_1_5 fs0", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Button, { ...action, variant: "text" }, `${action.label}`)) })
|
|
25747
|
+
] });
|
|
25748
|
+
}
|
|
25749
|
+
var typeStyles2 = {
|
|
25750
|
+
error: {
|
|
25751
|
+
icon: "xCircle",
|
|
25752
|
+
tagType: "error",
|
|
25753
|
+
borderColor: "--b-danger" /* Danger */,
|
|
25754
|
+
fallbackTagText: "Error"
|
|
25755
|
+
},
|
|
25756
|
+
// Warning has no semantic border token
|
|
25757
|
+
warning: {
|
|
25758
|
+
icon: "error",
|
|
25759
|
+
tagType: "warning",
|
|
25760
|
+
borderColor: "rgba(194, 65, 12, 1)" /* Orange700 */,
|
|
25761
|
+
fallbackTagText: "Warning"
|
|
25762
|
+
}
|
|
25763
|
+
};
|
|
25764
|
+
|
|
25687
25765
|
// src/components/JumpLink.tsx
|
|
25688
25766
|
var import_react140 = require("react");
|
|
25689
25767
|
var import_react_aria61 = require("react-aria");
|
|
25690
|
-
var
|
|
25691
|
-
var
|
|
25768
|
+
var import_runtime127 = require("@homebound/truss/runtime");
|
|
25769
|
+
var import_jsx_runtime202 = require("react/jsx-runtime");
|
|
25692
25770
|
function JumpLink(props) {
|
|
25693
25771
|
const {
|
|
25694
25772
|
label,
|
|
@@ -25730,14 +25808,14 @@ function JumpLink(props) {
|
|
|
25730
25808
|
});
|
|
25731
25809
|
}
|
|
25732
25810
|
}
|
|
25733
|
-
return /* @__PURE__ */ (0,
|
|
25811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("a", { ref, ...(0, import_react_aria61.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime127.trussProps)({
|
|
25734
25812
|
...jumpLinkStyles.baseStyles,
|
|
25735
25813
|
...active && jumpLinkStyles.activeStyles,
|
|
25736
25814
|
...isHovered && !disabled && jumpLinkStyles.hoverStyles,
|
|
25737
25815
|
...isFocusVisible && jumpLinkStyles.focusStyles,
|
|
25738
25816
|
...disabled && jumpLinkStyles.disabledStyles,
|
|
25739
25817
|
...disabled && active && jumpLinkStyles.disabledActiveStyles
|
|
25740
|
-
}), children: /* @__PURE__ */ (0,
|
|
25818
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", children: label }) });
|
|
25741
25819
|
}
|
|
25742
25820
|
var jumpLinkStyles = {
|
|
25743
25821
|
baseStyles: {
|
|
@@ -25785,10 +25863,10 @@ var jumpLinkStyles = {
|
|
|
25785
25863
|
};
|
|
25786
25864
|
|
|
25787
25865
|
// src/components/MaxLines.tsx
|
|
25788
|
-
var
|
|
25866
|
+
var import_utils167 = require("@react-aria/utils");
|
|
25789
25867
|
var import_react141 = require("react");
|
|
25790
|
-
var
|
|
25791
|
-
var
|
|
25868
|
+
var import_runtime128 = require("@homebound/truss/runtime");
|
|
25869
|
+
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
25792
25870
|
function MaxLines({
|
|
25793
25871
|
maxLines,
|
|
25794
25872
|
children
|
|
@@ -25796,7 +25874,7 @@ function MaxLines({
|
|
|
25796
25874
|
const elRef = (0, import_react141.useRef)(null);
|
|
25797
25875
|
const [hasMore, setHasMore] = (0, import_react141.useState)(false);
|
|
25798
25876
|
const [expanded, setExpanded] = (0, import_react141.useState)(false);
|
|
25799
|
-
(0,
|
|
25877
|
+
(0, import_utils167.useLayoutEffect)(() => {
|
|
25800
25878
|
if (!elRef.current) return;
|
|
25801
25879
|
setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
|
|
25802
25880
|
}, []);
|
|
@@ -25807,15 +25885,15 @@ function MaxLines({
|
|
|
25807
25885
|
if (!elRef.current) return;
|
|
25808
25886
|
!expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
|
|
25809
25887
|
}, [expanded]);
|
|
25810
|
-
(0,
|
|
25888
|
+
(0, import_utils167.useResizeObserver)({
|
|
25811
25889
|
ref: elRef,
|
|
25812
25890
|
onResize
|
|
25813
25891
|
});
|
|
25814
|
-
return /* @__PURE__ */ (0,
|
|
25815
|
-
/* @__PURE__ */ (0,
|
|
25892
|
+
return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { children: [
|
|
25893
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ref: elRef, ...(0, import_runtime128.trussProps)({
|
|
25816
25894
|
...!expanded ? {
|
|
25817
25895
|
WebkitLineClamp: ["lineClamp_var", {
|
|
25818
|
-
"--WebkitLineClamp": (0,
|
|
25896
|
+
"--WebkitLineClamp": (0, import_runtime128.maybeCssVar)(maxLines)
|
|
25819
25897
|
}],
|
|
25820
25898
|
overflow: "oh",
|
|
25821
25899
|
display: "d_negwebkit_box",
|
|
@@ -25823,7 +25901,7 @@ function MaxLines({
|
|
|
25823
25901
|
textOverflow: "to_ellipsis"
|
|
25824
25902
|
} : {}
|
|
25825
25903
|
}), children }),
|
|
25826
|
-
hasMore && /* @__PURE__ */ (0,
|
|
25904
|
+
hasMore && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
|
|
25827
25905
|
] });
|
|
25828
25906
|
}
|
|
25829
25907
|
|
|
@@ -25831,15 +25909,15 @@ function MaxLines({
|
|
|
25831
25909
|
var import_change_case8 = require("change-case");
|
|
25832
25910
|
|
|
25833
25911
|
// src/components/AppNav/AppNavGroup.tsx
|
|
25834
|
-
var
|
|
25912
|
+
var import_utils169 = require("@react-aria/utils");
|
|
25835
25913
|
var import_change_case7 = require("change-case");
|
|
25836
25914
|
var import_react144 = require("react");
|
|
25837
25915
|
|
|
25838
25916
|
// src/components/AppNav/AppNavGroupTrigger.tsx
|
|
25839
25917
|
var import_react142 = require("react");
|
|
25840
25918
|
var import_react_aria62 = require("react-aria");
|
|
25841
|
-
var
|
|
25842
|
-
var
|
|
25919
|
+
var import_runtime129 = require("@homebound/truss/runtime");
|
|
25920
|
+
var import_jsx_runtime204 = require("react/jsx-runtime");
|
|
25843
25921
|
function AppNavGroupTrigger(props) {
|
|
25844
25922
|
const {
|
|
25845
25923
|
label,
|
|
@@ -25871,11 +25949,11 @@ function AppNavGroupTrigger(props) {
|
|
|
25871
25949
|
hoverStyles: hoverStyles4,
|
|
25872
25950
|
pressedStyles: pressedStyles2
|
|
25873
25951
|
} = (0, import_react142.useMemo)(() => getNavLinkStyles("side"), []);
|
|
25874
|
-
return /* @__PURE__ */ (0,
|
|
25952
|
+
return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("button", { type: "button", ...(0, import_react_aria62.mergeProps)(buttonProps, focusProps, hoverProps, tid.trigger, {
|
|
25875
25953
|
ref,
|
|
25876
25954
|
"aria-expanded": expanded,
|
|
25877
25955
|
"aria-controls": navGroupId,
|
|
25878
|
-
...(0,
|
|
25956
|
+
...(0, import_runtime129.mergeProps)(navLink, void 0, {
|
|
25879
25957
|
...baseStyles4,
|
|
25880
25958
|
...isFocusVisible && focusRingStyles2,
|
|
25881
25959
|
...isHovered && hoverStyles4,
|
|
@@ -25889,7 +25967,7 @@ function AppNavGroupTrigger(props) {
|
|
|
25889
25967
|
})
|
|
25890
25968
|
}), children: [
|
|
25891
25969
|
label,
|
|
25892
|
-
/* @__PURE__ */ (0,
|
|
25970
|
+
/* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime129.trussProps)({
|
|
25893
25971
|
...{
|
|
25894
25972
|
display: "df",
|
|
25895
25973
|
alignItems: "aic",
|
|
@@ -25899,7 +25977,7 @@ function AppNavGroupTrigger(props) {
|
|
|
25899
25977
|
...props.expanded ? {
|
|
25900
25978
|
transform: "transform_rotate_180deg"
|
|
25901
25979
|
} : {}
|
|
25902
|
-
}), children: /* @__PURE__ */ (0,
|
|
25980
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon, { icon: "chevronDown" }) })
|
|
25903
25981
|
] });
|
|
25904
25982
|
}
|
|
25905
25983
|
|
|
@@ -26042,8 +26120,8 @@ function useAppNavGroupExpanded(linkGroup) {
|
|
|
26042
26120
|
}
|
|
26043
26121
|
|
|
26044
26122
|
// src/components/AppNav/AppNavGroup.tsx
|
|
26045
|
-
var
|
|
26046
|
-
var
|
|
26123
|
+
var import_runtime130 = require("@homebound/truss/runtime");
|
|
26124
|
+
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
26047
26125
|
var __maybeInc26 = (inc) => {
|
|
26048
26126
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
26049
26127
|
};
|
|
@@ -26054,9 +26132,9 @@ function AppNavGroupView(props) {
|
|
|
26054
26132
|
} = props;
|
|
26055
26133
|
const tid = useTestIds(props, "linkGroup");
|
|
26056
26134
|
if (panelCollapsed) {
|
|
26057
|
-
return /* @__PURE__ */ (0,
|
|
26135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(import_jsx_runtime205.Fragment, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${(0, import_change_case7.camelCase)(link.label)}`] }, link.label)) });
|
|
26058
26136
|
}
|
|
26059
|
-
return /* @__PURE__ */ (0,
|
|
26137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(AppNavGroupDisclosure, { ...props });
|
|
26060
26138
|
}
|
|
26061
26139
|
function AppNavGroupDisclosure(props) {
|
|
26062
26140
|
const {
|
|
@@ -26081,31 +26159,31 @@ function AppNavGroupDisclosure(props) {
|
|
|
26081
26159
|
setContentHeight(`${contentEl.scrollHeight}px`);
|
|
26082
26160
|
}
|
|
26083
26161
|
}, [expanded, contentEl]);
|
|
26084
|
-
(0,
|
|
26162
|
+
(0, import_utils169.useResizeObserver)({
|
|
26085
26163
|
ref: contentRef,
|
|
26086
26164
|
onResize
|
|
26087
26165
|
});
|
|
26088
|
-
return /* @__PURE__ */ (0,
|
|
26089
|
-
/* @__PURE__ */ (0,
|
|
26090
|
-
/* @__PURE__ */ (0,
|
|
26166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { className: "df fdc", ...tid, children: [
|
|
26167
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
|
|
26168
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime130.trussProps)({
|
|
26091
26169
|
overflow: "oh",
|
|
26092
26170
|
transition: "transitionHeight",
|
|
26093
26171
|
height: ["h_var", {
|
|
26094
|
-
"--height": (0,
|
|
26172
|
+
"--height": (0, import_runtime130.maybeCssVar)(__maybeInc26(contentHeight))
|
|
26095
26173
|
}]
|
|
26096
26174
|
}), ...tid.panel, ...!expanded ? {
|
|
26097
26175
|
inert: "true"
|
|
26098
|
-
} : {}, children: /* @__PURE__ */ (0,
|
|
26176
|
+
} : {}, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
|
|
26099
26177
|
] });
|
|
26100
26178
|
}
|
|
26101
26179
|
|
|
26102
26180
|
// src/components/AppNav/AppNavGroupMenu.tsx
|
|
26103
|
-
var
|
|
26181
|
+
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
26104
26182
|
function AppNavGroupMenu({
|
|
26105
26183
|
linkGroup,
|
|
26106
26184
|
...tid
|
|
26107
26185
|
}) {
|
|
26108
|
-
return /* @__PURE__ */ (0,
|
|
26186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
|
|
26109
26187
|
ButtonMenu,
|
|
26110
26188
|
{
|
|
26111
26189
|
trigger: {
|
|
@@ -26121,8 +26199,8 @@ function AppNavGroupMenu({
|
|
|
26121
26199
|
}
|
|
26122
26200
|
|
|
26123
26201
|
// src/components/AppNav/AppNavSectionView.tsx
|
|
26124
|
-
var
|
|
26125
|
-
var
|
|
26202
|
+
var import_runtime131 = require("@homebound/truss/runtime");
|
|
26203
|
+
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
26126
26204
|
function AppNavSectionView(props) {
|
|
26127
26205
|
const {
|
|
26128
26206
|
section,
|
|
@@ -26148,7 +26226,7 @@ function AppNavSectionView(props) {
|
|
|
26148
26226
|
"--borderColor": "var(--b-surface-separator)"
|
|
26149
26227
|
}]
|
|
26150
26228
|
};
|
|
26151
|
-
return /* @__PURE__ */ (0,
|
|
26229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { ...(0, import_runtime131.trussProps)({
|
|
26152
26230
|
...{
|
|
26153
26231
|
display: "df",
|
|
26154
26232
|
flexDirection: "fdc",
|
|
@@ -26156,7 +26234,7 @@ function AppNavSectionView(props) {
|
|
|
26156
26234
|
},
|
|
26157
26235
|
...showDivider ? dividerStyles : {}
|
|
26158
26236
|
}), ...tid, children: [
|
|
26159
|
-
section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0,
|
|
26237
|
+
section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ...(0, import_runtime131.trussProps)({
|
|
26160
26238
|
fontWeight: "fw6",
|
|
26161
26239
|
fontSize: "fz_10px",
|
|
26162
26240
|
lineHeight: "lh_14px",
|
|
@@ -26169,18 +26247,18 @@ function AppNavSectionView(props) {
|
|
|
26169
26247
|
paddingBottom: "pb1",
|
|
26170
26248
|
textTransform: "ttu"
|
|
26171
26249
|
}), ...tid.label, children: section.label }),
|
|
26172
|
-
/* @__PURE__ */ (0,
|
|
26250
|
+
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
|
|
26173
26251
|
] });
|
|
26174
26252
|
}
|
|
26175
26253
|
|
|
26176
26254
|
// src/components/AppNav/AppNavItems.tsx
|
|
26177
|
-
var
|
|
26255
|
+
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
26178
26256
|
function AppNavItems(props) {
|
|
26179
26257
|
const { items, variant = "side", panelCollapsed = false, nested = false } = props;
|
|
26180
26258
|
const tid = useTestIds(props, "appNav");
|
|
26181
|
-
return /* @__PURE__ */ (0,
|
|
26259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_jsx_runtime208.Fragment, { children: items.map((item, idx) => {
|
|
26182
26260
|
if (isAppNavLink(item)) {
|
|
26183
|
-
return /* @__PURE__ */ (0,
|
|
26261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
|
|
26184
26262
|
NavLink,
|
|
26185
26263
|
{
|
|
26186
26264
|
variant,
|
|
@@ -26193,7 +26271,7 @@ function AppNavItems(props) {
|
|
|
26193
26271
|
);
|
|
26194
26272
|
}
|
|
26195
26273
|
if (isAppNavGroup(item)) {
|
|
26196
|
-
return variant === "global" ? /* @__PURE__ */ (0,
|
|
26274
|
+
return variant === "global" ? /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
|
|
26197
26275
|
AppNavGroupView,
|
|
26198
26276
|
{
|
|
26199
26277
|
linkGroup: item,
|
|
@@ -26204,7 +26282,7 @@ function AppNavItems(props) {
|
|
|
26204
26282
|
);
|
|
26205
26283
|
}
|
|
26206
26284
|
if (isAppNavSection(item)) {
|
|
26207
|
-
return /* @__PURE__ */ (0,
|
|
26285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
|
|
26208
26286
|
AppNavSectionView,
|
|
26209
26287
|
{
|
|
26210
26288
|
section: item,
|
|
@@ -26230,12 +26308,12 @@ var import_react_router_dom7 = require("react-router-dom");
|
|
|
26230
26308
|
|
|
26231
26309
|
// src/layouts/NavbarLayout/MobileSubNavContext.tsx
|
|
26232
26310
|
var import_react145 = require("react");
|
|
26233
|
-
var
|
|
26311
|
+
var import_jsx_runtime209 = require("react/jsx-runtime");
|
|
26234
26312
|
var MobileSubNavContext = (0, import_react145.createContext)(void 0);
|
|
26235
26313
|
function MobileSubNavProvider(props) {
|
|
26236
26314
|
const [mobileSubNav, setMobileSubNav] = (0, import_react145.useState)(null);
|
|
26237
26315
|
const value = (0, import_react145.useMemo)(() => ({ mobileSubNav, setMobileSubNav }), [mobileSubNav]);
|
|
26238
|
-
return /* @__PURE__ */ (0,
|
|
26316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(MobileSubNavContext.Provider, { value, children: props.children });
|
|
26239
26317
|
}
|
|
26240
26318
|
function useMobileSubNav() {
|
|
26241
26319
|
return (0, import_react145.useContext)(MobileSubNavContext)?.mobileSubNav ?? null;
|
|
@@ -26257,8 +26335,8 @@ function useRegisterMobileSubNav(content) {
|
|
|
26257
26335
|
}
|
|
26258
26336
|
|
|
26259
26337
|
// src/components/Navbar/NavbarMobileMenu.tsx
|
|
26260
|
-
var
|
|
26261
|
-
var
|
|
26338
|
+
var import_runtime132 = require("@homebound/truss/runtime");
|
|
26339
|
+
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
26262
26340
|
function NavbarMobileMenu(props) {
|
|
26263
26341
|
const {
|
|
26264
26342
|
items
|
|
@@ -26278,8 +26356,8 @@ function NavbarMobileMenu(props) {
|
|
|
26278
26356
|
(0, import_react146.useEffect)(() => {
|
|
26279
26357
|
close();
|
|
26280
26358
|
}, [pathname, search]);
|
|
26281
|
-
return /* @__PURE__ */ (0,
|
|
26282
|
-
/* @__PURE__ */ (0,
|
|
26359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
|
|
26360
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => {
|
|
26283
26361
|
if (isOpen) {
|
|
26284
26362
|
close();
|
|
26285
26363
|
return;
|
|
@@ -26289,7 +26367,7 @@ function NavbarMobileMenu(props) {
|
|
|
26289
26367
|
}, ...tid.mobileMenu }),
|
|
26290
26368
|
(0, import_react_dom7.createPortal)(
|
|
26291
26369
|
/* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
|
|
26292
|
-
/* @__PURE__ */ (0,
|
|
26370
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_framer_motion6.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(NavbarMobileDrawer, { items, mobileSubNav, level, onLevelChange: setLevel, onClose: close, tid }) }),
|
|
26293
26371
|
document.body
|
|
26294
26372
|
)
|
|
26295
26373
|
] });
|
|
@@ -26307,14 +26385,14 @@ function NavbarMobileDrawer({
|
|
|
26307
26385
|
top: bannerHeightPx
|
|
26308
26386
|
};
|
|
26309
26387
|
const showSubLevel = mobileSubNav != null && level === "sub";
|
|
26310
|
-
return /* @__PURE__ */ (0,
|
|
26311
|
-
/* @__PURE__ */ (0,
|
|
26388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
|
|
26389
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime132.mergeProps)(void 0, overlayTopStyle, {
|
|
26312
26390
|
position: "fixed",
|
|
26313
26391
|
right: "right0",
|
|
26314
26392
|
bottom: "bottom0",
|
|
26315
26393
|
left: "left0",
|
|
26316
26394
|
zIndex: ["z_var", {
|
|
26317
|
-
"--zIndex": (0,
|
|
26395
|
+
"--zIndex": (0, import_runtime132.maybeCssVar)(zIndices.navbarMobileMenuScrim)
|
|
26318
26396
|
}],
|
|
26319
26397
|
backgroundColor: ["bgColor_var", {
|
|
26320
26398
|
"--backgroundColor": "var(--b-scrim)"
|
|
@@ -26329,7 +26407,7 @@ function NavbarMobileDrawer({
|
|
|
26329
26407
|
ease: "linear",
|
|
26330
26408
|
duration: 0.2
|
|
26331
26409
|
}, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
|
|
26332
|
-
/* @__PURE__ */ (0,
|
|
26410
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_aria63.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_framer_motion6.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime132.mergeProps)(void 0, overlayTopStyle, {
|
|
26333
26411
|
position: "fixed",
|
|
26334
26412
|
bottom: "bottom0",
|
|
26335
26413
|
left: "left0",
|
|
@@ -26339,7 +26417,7 @@ function NavbarMobileDrawer({
|
|
|
26339
26417
|
width: "w_260px",
|
|
26340
26418
|
overflow: "oh",
|
|
26341
26419
|
zIndex: ["z_var", {
|
|
26342
|
-
"--zIndex": (0,
|
|
26420
|
+
"--zIndex": (0, import_runtime132.maybeCssVar)(zIndices.navbarMobileMenu)
|
|
26343
26421
|
}],
|
|
26344
26422
|
backgroundColor: ["bgColor_var", {
|
|
26345
26423
|
"--backgroundColor": "var(--b-surface)"
|
|
@@ -26354,7 +26432,7 @@ function NavbarMobileDrawer({
|
|
|
26354
26432
|
ease: "linear",
|
|
26355
26433
|
duration: 0.2
|
|
26356
26434
|
}, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
|
|
26357
|
-
/* @__PURE__ */ (0,
|
|
26435
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("div", { ...(0, import_runtime132.trussProps)({
|
|
26358
26436
|
...{
|
|
26359
26437
|
display: "df",
|
|
26360
26438
|
alignItems: "aic",
|
|
@@ -26370,13 +26448,13 @@ function NavbarMobileDrawer({
|
|
|
26370
26448
|
},
|
|
26371
26449
|
...pageContentPaddingX
|
|
26372
26450
|
}), children: [
|
|
26373
|
-
/* @__PURE__ */ (0,
|
|
26374
|
-
/* @__PURE__ */ (0,
|
|
26451
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { className: "mw0", children: showSubLevel && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Button, { label: "Main Menu", icon: "chevronLeft", variant: "quaternary", size: "sm", onClick: () => onLevelChange("global"), ...tid.mobileMenuMainMenu }) }),
|
|
26452
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose })
|
|
26375
26453
|
] }),
|
|
26376
|
-
/* @__PURE__ */ (0,
|
|
26454
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_framer_motion6.AnimatePresence, { initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(
|
|
26377
26455
|
import_framer_motion6.motion.nav,
|
|
26378
26456
|
{
|
|
26379
|
-
...(0,
|
|
26457
|
+
...(0, import_runtime132.trussProps)({
|
|
26380
26458
|
...{
|
|
26381
26459
|
position: "absolute",
|
|
26382
26460
|
top: "top0",
|
|
@@ -26413,7 +26491,7 @@ function NavbarMobileDrawer({
|
|
|
26413
26491
|
...tid.mobileMenuPanel,
|
|
26414
26492
|
children: [
|
|
26415
26493
|
showSubLevel && mobileSubNav?.top,
|
|
26416
|
-
/* @__PURE__ */ (0,
|
|
26494
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(AppNavItems, { items: showSubLevel && mobileSubNav ? mobileSubNav.items : items, panelCollapsed: false, ...tid }),
|
|
26417
26495
|
showSubLevel && mobileSubNav?.footer
|
|
26418
26496
|
]
|
|
26419
26497
|
},
|
|
@@ -26424,8 +26502,8 @@ function NavbarMobileDrawer({
|
|
|
26424
26502
|
}
|
|
26425
26503
|
|
|
26426
26504
|
// src/components/Navbar/Navbar.tsx
|
|
26427
|
-
var
|
|
26428
|
-
var
|
|
26505
|
+
var import_runtime133 = require("@homebound/truss/runtime");
|
|
26506
|
+
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
26429
26507
|
function Navbar(props) {
|
|
26430
26508
|
const {
|
|
26431
26509
|
brand,
|
|
@@ -26444,7 +26522,7 @@ function Navbar(props) {
|
|
|
26444
26522
|
overflows
|
|
26445
26523
|
} = useContentOverflow(!sm);
|
|
26446
26524
|
const showMobile = sm || overflows;
|
|
26447
|
-
return /* @__PURE__ */ (0,
|
|
26525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("nav", { ...(0, import_runtime133.trussProps)({
|
|
26448
26526
|
...{
|
|
26449
26527
|
backgroundColor: ["bgColor_var", {
|
|
26450
26528
|
"--backgroundColor": "var(--b-surface-raised)"
|
|
@@ -26460,10 +26538,10 @@ function Navbar(props) {
|
|
|
26460
26538
|
},
|
|
26461
26539
|
...headerContentPaddingX(showMobile)
|
|
26462
26540
|
}), ...tid, children: [
|
|
26463
|
-
/* @__PURE__ */ (0,
|
|
26464
|
-
/* @__PURE__ */ (0,
|
|
26465
|
-
showMobile && /* @__PURE__ */ (0,
|
|
26466
|
-
/* @__PURE__ */ (0,
|
|
26541
|
+
/* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
|
|
26542
|
+
/* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { className: "df aic fs0 gap2", children: [
|
|
26543
|
+
showMobile && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(NavbarMobileMenu, { items, ...tid }),
|
|
26544
|
+
/* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime133.trussProps)({
|
|
26467
26545
|
flexShrink: "fs0",
|
|
26468
26546
|
...hideBrandOnMobile && showMobile ? {
|
|
26469
26547
|
display: "dn"
|
|
@@ -26472,7 +26550,7 @@ function Navbar(props) {
|
|
|
26472
26550
|
] }),
|
|
26473
26551
|
!sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
|
|
26474
26552
|
// can expand again as space frees up.
|
|
26475
|
-
/* @__PURE__ */ (0,
|
|
26553
|
+
/* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ref: containerRef, ...(0, import_runtime133.trussProps)({
|
|
26476
26554
|
display: "df",
|
|
26477
26555
|
alignItems: "aic",
|
|
26478
26556
|
flexGrow: "fg1",
|
|
@@ -26481,11 +26559,11 @@ function Navbar(props) {
|
|
|
26481
26559
|
...overflows ? {
|
|
26482
26560
|
visibility: "visibility_hidden"
|
|
26483
26561
|
} : {}
|
|
26484
|
-
}), ...tid.items, children: /* @__PURE__ */ (0,
|
|
26562
|
+
}), ...tid.items, children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(AppNavItems, { variant: "global", items, ...tid }) }) })
|
|
26485
26563
|
] }),
|
|
26486
|
-
/* @__PURE__ */ (0,
|
|
26487
|
-
rightSlot && /* @__PURE__ */ (0,
|
|
26488
|
-
user && /* @__PURE__ */ (0,
|
|
26564
|
+
/* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { className: "df aic gap1", children: [
|
|
26565
|
+
rightSlot && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
|
|
26566
|
+
user && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(NavbarUserMenu, { user, ...tid.userMenu })
|
|
26489
26567
|
] })
|
|
26490
26568
|
] }) });
|
|
26491
26569
|
}
|
|
@@ -26493,7 +26571,7 @@ function NavbarUserMenu({
|
|
|
26493
26571
|
user,
|
|
26494
26572
|
...tid
|
|
26495
26573
|
}) {
|
|
26496
|
-
return /* @__PURE__ */ (0,
|
|
26574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
|
|
26497
26575
|
src: user.picture,
|
|
26498
26576
|
name: user.name,
|
|
26499
26577
|
size: "sm",
|
|
@@ -26502,8 +26580,8 @@ function NavbarUserMenu({
|
|
|
26502
26580
|
}
|
|
26503
26581
|
|
|
26504
26582
|
// src/components/Pagination.tsx
|
|
26505
|
-
var
|
|
26506
|
-
var
|
|
26583
|
+
var import_runtime134 = require("@homebound/truss/runtime");
|
|
26584
|
+
var import_jsx_runtime212 = require("react/jsx-runtime");
|
|
26507
26585
|
var defaultPage = {
|
|
26508
26586
|
offset: 0,
|
|
26509
26587
|
limit: 100
|
|
@@ -26535,7 +26613,7 @@ function Pagination(props) {
|
|
|
26535
26613
|
}
|
|
26536
26614
|
}
|
|
26537
26615
|
const tid = useTestIds(props, "pagination");
|
|
26538
|
-
return /* @__PURE__ */ (0,
|
|
26616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { ...(0, import_runtime134.trussProps)({
|
|
26539
26617
|
display: "df",
|
|
26540
26618
|
borderColor: ["bc_var", {
|
|
26541
26619
|
"--borderColor": "var(--b-surface-separator)"
|
|
@@ -26552,24 +26630,24 @@ function Pagination(props) {
|
|
|
26552
26630
|
paddingRight: "pr2",
|
|
26553
26631
|
paddingTop: "pt2"
|
|
26554
26632
|
}), ...tid, children: [
|
|
26555
|
-
/* @__PURE__ */ (0,
|
|
26556
|
-
/* @__PURE__ */ (0,
|
|
26633
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
|
|
26634
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
|
|
26557
26635
|
pageNumber: 1,
|
|
26558
26636
|
pageSize: val
|
|
26559
26637
|
}), autoSort: false, ...tid.pageSize }) }),
|
|
26560
|
-
/* @__PURE__ */ (0,
|
|
26561
|
-
/* @__PURE__ */ (0,
|
|
26638
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { className: "mla mta mba df", children: [
|
|
26639
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
|
|
26562
26640
|
first,
|
|
26563
26641
|
" ",
|
|
26564
26642
|
showLast ? `- ${last}` : "",
|
|
26565
26643
|
" of ",
|
|
26566
26644
|
totalCount
|
|
26567
26645
|
] }),
|
|
26568
|
-
/* @__PURE__ */ (0,
|
|
26646
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
|
|
26569
26647
|
pageNumber: pageNumber - 1,
|
|
26570
26648
|
pageSize
|
|
26571
26649
|
}), disabled: !hasPrevPage, ...tid.previousIcon }),
|
|
26572
|
-
/* @__PURE__ */ (0,
|
|
26650
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
|
|
26573
26651
|
pageNumber: pageNumber + 1,
|
|
26574
26652
|
pageSize
|
|
26575
26653
|
}), disabled: !hasNextPage, ...tid.nextIcon })
|
|
@@ -26591,10 +26669,10 @@ function toPageNumberSize(page) {
|
|
|
26591
26669
|
}
|
|
26592
26670
|
|
|
26593
26671
|
// src/components/ScrollShadows.tsx
|
|
26594
|
-
var
|
|
26672
|
+
var import_utils176 = require("@react-aria/utils");
|
|
26595
26673
|
var import_react147 = require("react");
|
|
26596
|
-
var
|
|
26597
|
-
var
|
|
26674
|
+
var import_runtime135 = require("@homebound/truss/runtime");
|
|
26675
|
+
var import_jsx_runtime213 = require("react/jsx-runtime");
|
|
26598
26676
|
function ScrollShadows(props) {
|
|
26599
26677
|
const {
|
|
26600
26678
|
children,
|
|
@@ -26618,7 +26696,7 @@ function ScrollShadows(props) {
|
|
|
26618
26696
|
const commonStyles = {
|
|
26619
26697
|
position: "absolute",
|
|
26620
26698
|
zIndex: ["z_var", {
|
|
26621
|
-
"--zIndex": (0,
|
|
26699
|
+
"--zIndex": (0, import_runtime135.maybeCssVar)(zIndices.scrollShadow)
|
|
26622
26700
|
}],
|
|
26623
26701
|
pointerEvents: "pointerEvents_none"
|
|
26624
26702
|
};
|
|
@@ -26651,7 +26729,7 @@ function ScrollShadows(props) {
|
|
|
26651
26729
|
...startShadowStyles2,
|
|
26652
26730
|
...{
|
|
26653
26731
|
background: ["background_var", {
|
|
26654
|
-
"--background": (0,
|
|
26732
|
+
"--background": (0, import_runtime135.maybeCssVar)(startGradient)
|
|
26655
26733
|
}]
|
|
26656
26734
|
}
|
|
26657
26735
|
}, {
|
|
@@ -26659,7 +26737,7 @@ function ScrollShadows(props) {
|
|
|
26659
26737
|
...endShadowStyles2,
|
|
26660
26738
|
...{
|
|
26661
26739
|
background: ["background_var", {
|
|
26662
|
-
"--background": (0,
|
|
26740
|
+
"--background": (0, import_runtime135.maybeCssVar)(endGradient)
|
|
26663
26741
|
}]
|
|
26664
26742
|
}
|
|
26665
26743
|
}];
|
|
@@ -26680,14 +26758,14 @@ function ScrollShadows(props) {
|
|
|
26680
26758
|
setShowEndShadow(start + boxSize < end);
|
|
26681
26759
|
}, [horizontal]);
|
|
26682
26760
|
const onResize = (0, import_react147.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
|
|
26683
|
-
(0,
|
|
26761
|
+
(0, import_utils176.useResizeObserver)({
|
|
26684
26762
|
ref: scrollRef,
|
|
26685
26763
|
onResize
|
|
26686
26764
|
});
|
|
26687
|
-
return /* @__PURE__ */ (0,
|
|
26765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { ...(0, import_runtime135.trussProps)({
|
|
26688
26766
|
display: "df",
|
|
26689
26767
|
flexDirection: ["fd_var", {
|
|
26690
|
-
"--flexDirection": (0,
|
|
26768
|
+
"--flexDirection": (0, import_runtime135.maybeCssVar)(!horizontal ? "column" : "row")
|
|
26691
26769
|
}],
|
|
26692
26770
|
position: "relative",
|
|
26693
26771
|
overflow: "oh",
|
|
@@ -26700,23 +26778,23 @@ function ScrollShadows(props) {
|
|
|
26700
26778
|
width: width2
|
|
26701
26779
|
}
|
|
26702
26780
|
}), ...tid, children: [
|
|
26703
|
-
/* @__PURE__ */ (0,
|
|
26781
|
+
/* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime135.trussProps)({
|
|
26704
26782
|
...startShadowStyles,
|
|
26705
26783
|
...{
|
|
26706
26784
|
opacity: ["o_var", {
|
|
26707
|
-
"--opacity": (0,
|
|
26785
|
+
"--opacity": (0, import_runtime135.maybeCssVar)(showStartShadow ? 1 : 0)
|
|
26708
26786
|
}]
|
|
26709
26787
|
}
|
|
26710
26788
|
}), "data-chromatic": "ignore" }),
|
|
26711
|
-
/* @__PURE__ */ (0,
|
|
26789
|
+
/* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime135.trussProps)({
|
|
26712
26790
|
...endShadowStyles,
|
|
26713
26791
|
...{
|
|
26714
26792
|
opacity: ["o_var", {
|
|
26715
|
-
"--opacity": (0,
|
|
26793
|
+
"--opacity": (0, import_runtime135.maybeCssVar)(showEndShadow ? 1 : 0)
|
|
26716
26794
|
}]
|
|
26717
26795
|
}
|
|
26718
26796
|
}), "data-chromatic": "ignore" }),
|
|
26719
|
-
/* @__PURE__ */ (0,
|
|
26797
|
+
/* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime135.trussProps)({
|
|
26720
26798
|
...xss,
|
|
26721
26799
|
...{
|
|
26722
26800
|
overflow: "oa",
|
|
@@ -26729,7 +26807,7 @@ function ScrollShadows(props) {
|
|
|
26729
26807
|
|
|
26730
26808
|
// src/layouts/SideNavLayout/SideNavLayoutContext.tsx
|
|
26731
26809
|
var import_react148 = require("react");
|
|
26732
|
-
var
|
|
26810
|
+
var import_jsx_runtime214 = require("react/jsx-runtime");
|
|
26733
26811
|
var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
|
|
26734
26812
|
function loadStoredNavState() {
|
|
26735
26813
|
try {
|
|
@@ -26777,7 +26855,7 @@ function SideNavLayoutProvider(props) {
|
|
|
26777
26855
|
});
|
|
26778
26856
|
}, []);
|
|
26779
26857
|
const value = (0, import_react148.useMemo)(() => ({ navState, setNavState }), [navState, setNavState]);
|
|
26780
|
-
return /* @__PURE__ */ (0,
|
|
26858
|
+
return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(SideNavLayoutContext.Provider, { value, children: props.children });
|
|
26781
26859
|
}
|
|
26782
26860
|
function useSideNavLayoutContext() {
|
|
26783
26861
|
return (0, import_react148.useContext)(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
|
|
@@ -26788,8 +26866,8 @@ function useHasSideNavLayoutProvider() {
|
|
|
26788
26866
|
}
|
|
26789
26867
|
|
|
26790
26868
|
// src/components/SideNav/SideNav.tsx
|
|
26791
|
-
var
|
|
26792
|
-
var
|
|
26869
|
+
var import_runtime136 = require("@homebound/truss/runtime");
|
|
26870
|
+
var import_jsx_runtime215 = require("react/jsx-runtime");
|
|
26793
26871
|
function SideNav(props) {
|
|
26794
26872
|
const {
|
|
26795
26873
|
top,
|
|
@@ -26802,8 +26880,8 @@ function SideNav(props) {
|
|
|
26802
26880
|
const tid = useTestIds(props, "sideNav");
|
|
26803
26881
|
const panelCollapsed = navState === "collapse";
|
|
26804
26882
|
const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
|
|
26805
|
-
return /* @__PURE__ */ (0,
|
|
26806
|
-
top !== void 0 && /* @__PURE__ */ (0,
|
|
26883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
|
|
26884
|
+
top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime136.trussProps)({
|
|
26807
26885
|
flexShrink: "fs0",
|
|
26808
26886
|
paddingLeft: "pl2",
|
|
26809
26887
|
paddingRight: "pr2",
|
|
@@ -26814,7 +26892,7 @@ function SideNav(props) {
|
|
|
26814
26892
|
paddingBottom: "pb4"
|
|
26815
26893
|
} : {}
|
|
26816
26894
|
}), ...tid.top, children: top }),
|
|
26817
|
-
/* @__PURE__ */ (0,
|
|
26895
|
+
/* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime136.trussProps)({
|
|
26818
26896
|
flexGrow: "fg1",
|
|
26819
26897
|
overflowY: "oya",
|
|
26820
26898
|
display: "df",
|
|
@@ -26826,8 +26904,8 @@ function SideNav(props) {
|
|
|
26826
26904
|
...top === void 0 ? {
|
|
26827
26905
|
paddingTop: "pt5"
|
|
26828
26906
|
} : {}
|
|
26829
|
-
}), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0,
|
|
26830
|
-
footer !== void 0 && /* @__PURE__ */ (0,
|
|
26907
|
+
}), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(AppNavItems, { items, panelCollapsed }) }),
|
|
26908
|
+
footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime136.trussProps)({
|
|
26831
26909
|
flexShrink: "fs0",
|
|
26832
26910
|
paddingLeft: "pl2",
|
|
26833
26911
|
paddingRight: "pr2",
|
|
@@ -26904,8 +26982,8 @@ var snackbarId = 1;
|
|
|
26904
26982
|
// src/components/Stepper.tsx
|
|
26905
26983
|
var import_react150 = require("react");
|
|
26906
26984
|
var import_react_aria64 = require("react-aria");
|
|
26907
|
-
var
|
|
26908
|
-
var
|
|
26985
|
+
var import_runtime137 = require("@homebound/truss/runtime");
|
|
26986
|
+
var import_jsx_runtime216 = require("react/jsx-runtime");
|
|
26909
26987
|
var import_react151 = require("react");
|
|
26910
26988
|
var __maybeInc27 = (inc) => {
|
|
26911
26989
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
@@ -26924,8 +27002,8 @@ function Stepper(props) {
|
|
|
26924
27002
|
const maxStepWidth = 200;
|
|
26925
27003
|
const minStepWidth = 100;
|
|
26926
27004
|
const gap = 8;
|
|
26927
|
-
return /* @__PURE__ */ (0,
|
|
26928
|
-
/* @__PURE__ */ (0,
|
|
27005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
|
|
27006
|
+
/* @__PURE__ */ (0, import_jsx_runtime216.jsx)("ol", { ...(0, import_runtime137.trussProps)({
|
|
26929
27007
|
padding: "p_0",
|
|
26930
27008
|
margin: "m_0",
|
|
26931
27009
|
listStyle: "lis_none",
|
|
@@ -26935,7 +27013,7 @@ function Stepper(props) {
|
|
|
26935
27013
|
}]
|
|
26936
27014
|
}), children: steps.map((step) => {
|
|
26937
27015
|
const isCurrent = currentStep === step.value;
|
|
26938
|
-
return /* @__PURE__ */ (0, import_react151.createElement)("li", { ...(0,
|
|
27016
|
+
return /* @__PURE__ */ (0, import_react151.createElement)("li", { ...(0, import_runtime137.trussProps)({
|
|
26939
27017
|
display: "df",
|
|
26940
27018
|
flexGrow: "fg1",
|
|
26941
27019
|
flexDirection: "fdc",
|
|
@@ -26945,9 +27023,9 @@ function Stepper(props) {
|
|
|
26945
27023
|
minWidth: ["mw_var", {
|
|
26946
27024
|
"--minWidth": `${minStepWidth}px`
|
|
26947
27025
|
}]
|
|
26948
|
-
}), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0,
|
|
27026
|
+
}), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
|
|
26949
27027
|
}) }),
|
|
26950
|
-
/* @__PURE__ */ (0,
|
|
27028
|
+
/* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { ...(0, import_runtime137.trussProps)({
|
|
26951
27029
|
marginTop: "mt1",
|
|
26952
27030
|
backgroundColor: ["bgColor_var", {
|
|
26953
27031
|
"--backgroundColor": "var(--b-field-border-default)"
|
|
@@ -26960,14 +27038,14 @@ function Stepper(props) {
|
|
|
26960
27038
|
"--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
|
|
26961
27039
|
}],
|
|
26962
27040
|
width: "w100"
|
|
26963
|
-
}), children: /* @__PURE__ */ (0,
|
|
27041
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { ...(0, import_runtime137.trussProps)({
|
|
26964
27042
|
backgroundColor: ["bgColor_var", {
|
|
26965
27043
|
"--backgroundColor": "var(--b-primary)"
|
|
26966
27044
|
}],
|
|
26967
27045
|
transition: "transition_width_200ms",
|
|
26968
27046
|
height: "h100",
|
|
26969
27047
|
width: ["w_var", {
|
|
26970
|
-
"--width": (0,
|
|
27048
|
+
"--width": (0, import_runtime137.maybeCssVar)(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
|
|
26971
27049
|
}]
|
|
26972
27050
|
}) }) })
|
|
26973
27051
|
] });
|
|
@@ -27003,7 +27081,7 @@ function StepButton(props) {
|
|
|
27003
27081
|
boxShadow: "bshFocus"
|
|
27004
27082
|
};
|
|
27005
27083
|
const tid = useTestIds(props, "stepButton");
|
|
27006
|
-
return /* @__PURE__ */ (0,
|
|
27084
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime137.trussProps)({
|
|
27007
27085
|
...{
|
|
27008
27086
|
fontWeight: "fw6",
|
|
27009
27087
|
fontSize: "fz_14px",
|
|
@@ -27064,7 +27142,7 @@ function StepButton(props) {
|
|
|
27064
27142
|
} : {},
|
|
27065
27143
|
...isFocusVisible ? focusRingStyles2 : {}
|
|
27066
27144
|
}), ...tid[defaultTestId(label)], children: [
|
|
27067
|
-
/* @__PURE__ */ (0,
|
|
27145
|
+
/* @__PURE__ */ (0, import_jsx_runtime216.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
|
|
27068
27146
|
label
|
|
27069
27147
|
] });
|
|
27070
27148
|
}
|
|
@@ -27075,12 +27153,12 @@ function StepIcon({
|
|
|
27075
27153
|
isCurrent = false
|
|
27076
27154
|
}) {
|
|
27077
27155
|
if (state === "error") {
|
|
27078
|
-
return /* @__PURE__ */ (0,
|
|
27156
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(Icon, { icon: "errorCircle" });
|
|
27079
27157
|
}
|
|
27080
27158
|
if (state === "complete") {
|
|
27081
|
-
return /* @__PURE__ */ (0,
|
|
27159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(Icon, { icon: "check" });
|
|
27082
27160
|
}
|
|
27083
|
-
return /* @__PURE__ */ (0,
|
|
27161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { ...(0, import_runtime137.trussProps)({
|
|
27084
27162
|
width: "w_10px",
|
|
27085
27163
|
height: "h_10px",
|
|
27086
27164
|
borderStyle: "bss",
|
|
@@ -27096,8 +27174,8 @@ function StepIcon({
|
|
|
27096
27174
|
// src/components/StepperTabs/StepperTab.tsx
|
|
27097
27175
|
var import_react152 = require("react");
|
|
27098
27176
|
var import_react_aria65 = require("react-aria");
|
|
27099
|
-
var
|
|
27100
|
-
var
|
|
27177
|
+
var import_runtime138 = require("@homebound/truss/runtime");
|
|
27178
|
+
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
27101
27179
|
function StepperTab(props) {
|
|
27102
27180
|
const {
|
|
27103
27181
|
label,
|
|
@@ -27128,7 +27206,7 @@ function StepperTab(props) {
|
|
|
27128
27206
|
const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
|
|
27129
27207
|
const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
|
|
27130
27208
|
const tid = useTestIds(props, "stepperTab");
|
|
27131
|
-
return /* @__PURE__ */ (0,
|
|
27209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("button", { ref, ...(0, import_react_aria65.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime138.trussProps)({
|
|
27132
27210
|
...stepperTabStyles.baseStyles,
|
|
27133
27211
|
...getStateStyles(active, completed),
|
|
27134
27212
|
...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
|
|
@@ -27136,10 +27214,10 @@ function StepperTab(props) {
|
|
|
27136
27214
|
...disabled ? stepperTabStyles.disabledStyles : {},
|
|
27137
27215
|
...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
|
|
27138
27216
|
}), ...tid[defaultTestId(value)], children: [
|
|
27139
|
-
!collapsed && /* @__PURE__ */ (0,
|
|
27140
|
-
/* @__PURE__ */ (0,
|
|
27141
|
-
/* @__PURE__ */ (0,
|
|
27142
|
-
/* @__PURE__ */ (0,
|
|
27217
|
+
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
|
|
27218
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("span", { className: "dg jic mw0", children: [
|
|
27219
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
|
|
27220
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { ...(0, import_runtime138.trussProps)({
|
|
27143
27221
|
gridArea: "gridArea_1_1",
|
|
27144
27222
|
overflow: "oh",
|
|
27145
27223
|
display: "d_negwebkit_box",
|
|
@@ -27154,7 +27232,7 @@ function StepperTab(props) {
|
|
|
27154
27232
|
} : {}
|
|
27155
27233
|
}), children: label })
|
|
27156
27234
|
] }),
|
|
27157
|
-
/* @__PURE__ */ (0,
|
|
27235
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { ...(0, import_runtime138.trussProps)({
|
|
27158
27236
|
flexShrink: "fs0",
|
|
27159
27237
|
marginLeft: "ml1",
|
|
27160
27238
|
transition: "transitionAll",
|
|
@@ -27164,10 +27242,10 @@ function StepperTab(props) {
|
|
|
27164
27242
|
opacity: "o100",
|
|
27165
27243
|
transform: "transform_scale_1_translateY_0"
|
|
27166
27244
|
} : {}
|
|
27167
|
-
}), children: /* @__PURE__ */ (0,
|
|
27245
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
|
|
27168
27246
|
] }),
|
|
27169
|
-
/* @__PURE__ */ (0,
|
|
27170
|
-
/* @__PURE__ */ (0,
|
|
27247
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { "aria-hidden": true, ...(0, import_runtime138.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
|
|
27248
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_aria65.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
|
|
27171
27249
|
] });
|
|
27172
27250
|
}
|
|
27173
27251
|
function getStateStyles(active, completed) {
|
|
@@ -27248,8 +27326,8 @@ var stepperTabStyles = {
|
|
|
27248
27326
|
};
|
|
27249
27327
|
|
|
27250
27328
|
// src/components/StepperTabs/StepperTabs.tsx
|
|
27251
|
-
var
|
|
27252
|
-
var
|
|
27329
|
+
var import_runtime139 = require("@homebound/truss/runtime");
|
|
27330
|
+
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
27253
27331
|
var import_react153 = require("react");
|
|
27254
27332
|
function StepperTabs(props) {
|
|
27255
27333
|
const {
|
|
@@ -27265,7 +27343,7 @@ function StepperTabs(props) {
|
|
|
27265
27343
|
const collapsed = isMobile || !!forceCollapsed;
|
|
27266
27344
|
const capWidth = steps.length <= 3;
|
|
27267
27345
|
const currentStepIndex = Math.max(0, steps.findIndex((step) => step.value === currentStep));
|
|
27268
|
-
return /* @__PURE__ */ (0,
|
|
27346
|
+
return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("ol", { ...(0, import_runtime139.trussProps)({
|
|
27269
27347
|
padding: "p_0",
|
|
27270
27348
|
margin: "m_0",
|
|
27271
27349
|
listStyle: "lis_none",
|
|
@@ -27280,7 +27358,7 @@ function StepperTabs(props) {
|
|
|
27280
27358
|
}), children: steps.map((step, idx) => {
|
|
27281
27359
|
const isCurrent = idx === currentStepIndex;
|
|
27282
27360
|
const isCompleted = idx < currentStepIndex;
|
|
27283
|
-
return /* @__PURE__ */ (0, import_react153.createElement)("li", { ...(0,
|
|
27361
|
+
return /* @__PURE__ */ (0, import_react153.createElement)("li", { ...(0, import_runtime139.trussProps)({
|
|
27284
27362
|
display: "df",
|
|
27285
27363
|
flexGrow: "fg1",
|
|
27286
27364
|
flexBasis: "fb_0",
|
|
@@ -27292,7 +27370,7 @@ function StepperTabs(props) {
|
|
|
27292
27370
|
"--maxWidth": `${maxStepWidthPx}px`
|
|
27293
27371
|
}]
|
|
27294
27372
|
} : {}
|
|
27295
|
-
}), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0,
|
|
27373
|
+
}), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
|
|
27296
27374
|
}) }) });
|
|
27297
27375
|
}
|
|
27298
27376
|
var maxStepWidthPx = 280;
|
|
@@ -27300,8 +27378,8 @@ var gapPx = 6;
|
|
|
27300
27378
|
|
|
27301
27379
|
// src/components/SuperDrawer/components/SuperDrawerHeader.tsx
|
|
27302
27380
|
var import_react_dom8 = require("react-dom");
|
|
27303
|
-
var
|
|
27304
|
-
var
|
|
27381
|
+
var import_runtime140 = require("@homebound/truss/runtime");
|
|
27382
|
+
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
27305
27383
|
function SuperDrawerHeader(props) {
|
|
27306
27384
|
const {
|
|
27307
27385
|
hideControls
|
|
@@ -27318,20 +27396,20 @@ function SuperDrawerHeader(props) {
|
|
|
27318
27396
|
const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
|
|
27319
27397
|
const isDetail = currentContent !== firstContent;
|
|
27320
27398
|
const tid = useTestIds({}, "superDrawerHeader");
|
|
27321
|
-
return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0,
|
|
27322
|
-
isStructuredProps(props) ? /* @__PURE__ */ (0,
|
|
27323
|
-
/* @__PURE__ */ (0,
|
|
27324
|
-
/* @__PURE__ */ (0,
|
|
27399
|
+
return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
|
|
27400
|
+
isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
|
|
27401
|
+
/* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "fg1 df aic gap2", children: [
|
|
27402
|
+
/* @__PURE__ */ (0, import_jsx_runtime219.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
|
|
27325
27403
|
props.left
|
|
27326
27404
|
] }),
|
|
27327
|
-
props.right && /* @__PURE__ */ (0,
|
|
27328
|
-
] }) : /* @__PURE__ */ (0,
|
|
27329
|
-
!hideControls && /* @__PURE__ */ (0,
|
|
27405
|
+
props.right && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { className: "fs0", children: props.right })
|
|
27406
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { className: "fg1", children: props.children }),
|
|
27407
|
+
!hideControls && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ...(0, import_runtime140.trussProps)({
|
|
27330
27408
|
flexShrink: "fs0",
|
|
27331
27409
|
...isDetail ? {
|
|
27332
27410
|
visibility: "vh"
|
|
27333
27411
|
} : {}
|
|
27334
|
-
}), children: /* @__PURE__ */ (0,
|
|
27412
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ButtonGroup, { buttons: [{
|
|
27335
27413
|
icon: "chevronLeft",
|
|
27336
27414
|
onClick: () => onPrevClick && onPrevClick(),
|
|
27337
27415
|
disabled: !onPrevClick
|
|
@@ -27351,7 +27429,7 @@ var import_framer_motion7 = require("framer-motion");
|
|
|
27351
27429
|
|
|
27352
27430
|
// src/components/SuperDrawer/useSuperDrawer.tsx
|
|
27353
27431
|
var import_react154 = require("react");
|
|
27354
|
-
var
|
|
27432
|
+
var import_jsx_runtime220 = require("react/jsx-runtime");
|
|
27355
27433
|
function useSuperDrawer() {
|
|
27356
27434
|
const {
|
|
27357
27435
|
drawerContentStack: contentStack,
|
|
@@ -27363,7 +27441,7 @@ function useSuperDrawer() {
|
|
|
27363
27441
|
function canCloseDrawerDetails(i, doChange) {
|
|
27364
27442
|
for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
|
|
27365
27443
|
if (!canClose(canCloseDrawerDetail)) {
|
|
27366
|
-
openModal({ content: /* @__PURE__ */ (0,
|
|
27444
|
+
openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
|
|
27367
27445
|
return false;
|
|
27368
27446
|
}
|
|
27369
27447
|
}
|
|
@@ -27383,7 +27461,7 @@ function useSuperDrawer() {
|
|
|
27383
27461
|
for (const canCloseDrawer of canCloseChecks.current) {
|
|
27384
27462
|
if (!canClose(canCloseDrawer)) {
|
|
27385
27463
|
openModal({
|
|
27386
|
-
content: /* @__PURE__ */ (0,
|
|
27464
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
|
|
27387
27465
|
});
|
|
27388
27466
|
return;
|
|
27389
27467
|
}
|
|
@@ -27478,8 +27556,8 @@ function canClose(canCloseCheck) {
|
|
|
27478
27556
|
}
|
|
27479
27557
|
|
|
27480
27558
|
// src/components/SuperDrawer/SuperDrawerContent.tsx
|
|
27481
|
-
var
|
|
27482
|
-
var
|
|
27559
|
+
var import_runtime141 = require("@homebound/truss/runtime");
|
|
27560
|
+
var import_jsx_runtime221 = require("react/jsx-runtime");
|
|
27483
27561
|
var SuperDrawerContent = ({
|
|
27484
27562
|
children,
|
|
27485
27563
|
banner,
|
|
@@ -27500,20 +27578,20 @@ var SuperDrawerContent = ({
|
|
|
27500
27578
|
} = firstContent ?? {};
|
|
27501
27579
|
function wrapWithMotionAndMaybeBack(children2) {
|
|
27502
27580
|
if (kind === "open") {
|
|
27503
|
-
return /* @__PURE__ */ (0,
|
|
27504
|
-
banner && /* @__PURE__ */ (0,
|
|
27581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_framer_motion7.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: [
|
|
27582
|
+
banner && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: "ml_neg3 mr_neg3 mt_neg3 mb3", children: banner }),
|
|
27505
27583
|
children2
|
|
27506
27584
|
] }, "content");
|
|
27507
27585
|
} else if (kind === "detail") {
|
|
27508
|
-
return /* @__PURE__ */ (0,
|
|
27586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_framer_motion7.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
|
|
27509
27587
|
overflow: "auto"
|
|
27510
27588
|
}, transition: {
|
|
27511
27589
|
overflow: {
|
|
27512
27590
|
delay: 0.3
|
|
27513
27591
|
}
|
|
27514
27592
|
}, children: [
|
|
27515
|
-
/* @__PURE__ */ (0,
|
|
27516
|
-
/* @__PURE__ */ (0,
|
|
27593
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
|
|
27594
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_framer_motion7.motion.div, { initial: {
|
|
27517
27595
|
x: width2,
|
|
27518
27596
|
opacity: 0
|
|
27519
27597
|
}, animate: {
|
|
@@ -27531,7 +27609,7 @@ var SuperDrawerContent = ({
|
|
|
27531
27609
|
}, className: "pt2", children: children2 })
|
|
27532
27610
|
] }, "content");
|
|
27533
27611
|
} else {
|
|
27534
|
-
return /* @__PURE__ */ (0,
|
|
27612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime141.mergeProps)(void 0, {
|
|
27535
27613
|
overflow: "auto"
|
|
27536
27614
|
}, {
|
|
27537
27615
|
paddingTop: "pt3",
|
|
@@ -27542,9 +27620,9 @@ var SuperDrawerContent = ({
|
|
|
27542
27620
|
}) }, "content");
|
|
27543
27621
|
}
|
|
27544
27622
|
}
|
|
27545
|
-
return /* @__PURE__ */ (0,
|
|
27623
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_jsx_runtime221.Fragment, { children: [
|
|
27546
27624
|
wrapWithMotionAndMaybeBack(children),
|
|
27547
|
-
actions && /* @__PURE__ */ (0,
|
|
27625
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("footer", { ...(0, import_runtime141.trussProps)({
|
|
27548
27626
|
borderTopStyle: "bts_solid",
|
|
27549
27627
|
borderTopWidth: "btw_1px",
|
|
27550
27628
|
borderColor: ["bc_var", {
|
|
@@ -27557,7 +27635,7 @@ var SuperDrawerContent = ({
|
|
|
27557
27635
|
display: "df",
|
|
27558
27636
|
alignItems: "aic",
|
|
27559
27637
|
justifyContent: "jcfe"
|
|
27560
|
-
}), children: /* @__PURE__ */ (0,
|
|
27638
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(Button, { ...buttonProps }, i)) }) })
|
|
27561
27639
|
] });
|
|
27562
27640
|
};
|
|
27563
27641
|
|
|
@@ -27617,15 +27695,15 @@ var import_react155 = require("react");
|
|
|
27617
27695
|
var import_react_aria66 = require("react-aria");
|
|
27618
27696
|
var import_react_router = require("react-router");
|
|
27619
27697
|
var import_react_router_dom8 = require("react-router-dom");
|
|
27620
|
-
var
|
|
27621
|
-
var
|
|
27698
|
+
var import_runtime142 = require("@homebound/truss/runtime");
|
|
27699
|
+
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
27622
27700
|
function TabsWithContent(props) {
|
|
27623
27701
|
const styles = hideTabs(props) ? {} : {
|
|
27624
27702
|
paddingTop: "pt3"
|
|
27625
27703
|
};
|
|
27626
|
-
return /* @__PURE__ */ (0,
|
|
27627
|
-
/* @__PURE__ */ (0,
|
|
27628
|
-
/* @__PURE__ */ (0,
|
|
27704
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(import_jsx_runtime222.Fragment, { children: [
|
|
27705
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Tabs, { ...props }),
|
|
27706
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)(TabContent, { ...props, contentXss: {
|
|
27629
27707
|
...styles,
|
|
27630
27708
|
...props.contentXss
|
|
27631
27709
|
} })
|
|
@@ -27650,7 +27728,7 @@ function TabContent(props) {
|
|
|
27650
27728
|
return (
|
|
27651
27729
|
// Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
|
|
27652
27730
|
// Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
|
|
27653
|
-
/* @__PURE__ */ (0,
|
|
27731
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime142.trussProps)(contentXss), children: selectedTab.render() }) })
|
|
27654
27732
|
);
|
|
27655
27733
|
}
|
|
27656
27734
|
function Tabs(props) {
|
|
@@ -27692,7 +27770,7 @@ function Tabs(props) {
|
|
|
27692
27770
|
setActive(selected);
|
|
27693
27771
|
}
|
|
27694
27772
|
}
|
|
27695
|
-
return /* @__PURE__ */ (0,
|
|
27773
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime142.trussProps)({
|
|
27696
27774
|
...{
|
|
27697
27775
|
display: "df",
|
|
27698
27776
|
alignItems: "aic",
|
|
@@ -27710,11 +27788,11 @@ function Tabs(props) {
|
|
|
27710
27788
|
}
|
|
27711
27789
|
} : {}
|
|
27712
27790
|
}), children: [
|
|
27713
|
-
!hideTabs(props) && /* @__PURE__ */ (0,
|
|
27791
|
+
!hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
|
|
27714
27792
|
const uniqueValue = uniqueTabValue(tab);
|
|
27715
|
-
return /* @__PURE__ */ (0,
|
|
27793
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
|
|
27716
27794
|
}) }),
|
|
27717
|
-
right && /* @__PURE__ */ (0,
|
|
27795
|
+
right && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
|
|
27718
27796
|
] });
|
|
27719
27797
|
}
|
|
27720
27798
|
function TabImpl(props) {
|
|
@@ -27760,7 +27838,7 @@ function TabImpl(props) {
|
|
|
27760
27838
|
role: "tab",
|
|
27761
27839
|
tabIndex: active ? 0 : -1,
|
|
27762
27840
|
...others,
|
|
27763
|
-
...(0,
|
|
27841
|
+
...(0, import_runtime142.trussProps)({
|
|
27764
27842
|
...baseStyles4,
|
|
27765
27843
|
// Only tints the label while the tab is unselected; selected keeps its own darker treatment.
|
|
27766
27844
|
...aiMode && aiStyles,
|
|
@@ -27778,18 +27856,18 @@ function TabImpl(props) {
|
|
|
27778
27856
|
onClick: () => onClick(tab.value)
|
|
27779
27857
|
}
|
|
27780
27858
|
});
|
|
27781
|
-
const decoration = aiMode ? /* @__PURE__ */ (0,
|
|
27782
|
-
const tabLabel = /* @__PURE__ */ (0,
|
|
27859
|
+
const decoration = aiMode ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(AiBadge, {}) : icon ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Icon, { icon }) : endAdornment;
|
|
27860
|
+
const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(import_jsx_runtime222.Fragment, { children: [
|
|
27783
27861
|
label,
|
|
27784
|
-
decoration && /* @__PURE__ */ (0,
|
|
27862
|
+
decoration && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("span", { className: "ml1 df aic", children: decoration })
|
|
27785
27863
|
] });
|
|
27786
27864
|
return isDisabled ? maybeTooltip({
|
|
27787
27865
|
title: resolveTooltip(disabled),
|
|
27788
27866
|
placement: "top",
|
|
27789
|
-
children: /* @__PURE__ */ (0,
|
|
27790
|
-
}) : isRouteTab(tab) ? /* @__PURE__ */ (0,
|
|
27867
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...tabProps, children: tabLabel })
|
|
27868
|
+
}) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(import_react_router_dom8.Link, { ...(0, import_react_aria66.mergeProps)(tabProps, interactiveProps, {
|
|
27791
27869
|
className: "navLink"
|
|
27792
|
-
}), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0,
|
|
27870
|
+
}), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("button", { ...{
|
|
27793
27871
|
...tabProps,
|
|
27794
27872
|
...interactiveProps
|
|
27795
27873
|
}, children: tabLabel });
|
|
@@ -27800,7 +27878,7 @@ function getTabStyles() {
|
|
|
27800
27878
|
const borderBottomStyles = {
|
|
27801
27879
|
borderBottomStyle: "bbs_solid",
|
|
27802
27880
|
borderBottomWidth: ["borderBottomWidth_var", {
|
|
27803
|
-
"--borderBottomWidth": (0,
|
|
27881
|
+
"--borderBottomWidth": (0, import_runtime142.maybeCssVar)(`${borderBottomWidthPx}px`)
|
|
27804
27882
|
}],
|
|
27805
27883
|
paddingBottom: ["pb_var", {
|
|
27806
27884
|
"--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
|
|
@@ -27853,7 +27931,7 @@ function getTabStyles() {
|
|
|
27853
27931
|
// The AI label tint is part of the brand ramp rather than a semantic token, same as the sparkle's gradient.
|
|
27854
27932
|
aiStyles: {
|
|
27855
27933
|
color: ["color_var", {
|
|
27856
|
-
"--color": (0,
|
|
27934
|
+
"--color": (0, import_runtime142.maybeCssVar)("rgba(109, 40, 217, 1)" /* Purple700 */)
|
|
27857
27935
|
}]
|
|
27858
27936
|
},
|
|
27859
27937
|
focusRingStyles: {
|
|
@@ -27903,7 +27981,7 @@ function hideTabs(props) {
|
|
|
27903
27981
|
}
|
|
27904
27982
|
|
|
27905
27983
|
// src/components/TagGroup.tsx
|
|
27906
|
-
var
|
|
27984
|
+
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
27907
27985
|
function TagGroup(props) {
|
|
27908
27986
|
const {
|
|
27909
27987
|
tags,
|
|
@@ -27911,9 +27989,9 @@ function TagGroup(props) {
|
|
|
27911
27989
|
...otherProps
|
|
27912
27990
|
} = props;
|
|
27913
27991
|
const tid = useTestIds(otherProps, "tagGroup");
|
|
27914
|
-
return /* @__PURE__ */ (0,
|
|
27915
|
-
tags.map((tag) => /* @__PURE__ */ (0,
|
|
27916
|
-
onEdit && /* @__PURE__ */ (0,
|
|
27992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
|
|
27993
|
+
tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
|
|
27994
|
+
onEdit && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
|
|
27917
27995
|
] });
|
|
27918
27996
|
}
|
|
27919
27997
|
|
|
@@ -27926,15 +28004,15 @@ function useToast() {
|
|
|
27926
28004
|
}
|
|
27927
28005
|
|
|
27928
28006
|
// src/layouts/SideNavLayout/SideNavLayout.tsx
|
|
27929
|
-
var
|
|
27930
|
-
var
|
|
28007
|
+
var import_runtime143 = require("@homebound/truss/runtime");
|
|
28008
|
+
var import_jsx_runtime224 = require("react/jsx-runtime");
|
|
27931
28009
|
var __maybeInc28 = (inc) => {
|
|
27932
28010
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
27933
28011
|
};
|
|
27934
28012
|
function SideNavLayout(props) {
|
|
27935
28013
|
const hasProvider = useHasSideNavLayoutProvider();
|
|
27936
|
-
if (hasProvider) return /* @__PURE__ */ (0,
|
|
27937
|
-
return /* @__PURE__ */ (0,
|
|
28014
|
+
if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(SideNavLayoutContent, { ...props });
|
|
28015
|
+
return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(SideNavLayoutContent, { ...props }) });
|
|
27938
28016
|
}
|
|
27939
28017
|
function SideNavLayoutContent(props) {
|
|
27940
28018
|
const {
|
|
@@ -27957,7 +28035,7 @@ function SideNavLayoutContent(props) {
|
|
|
27957
28035
|
const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
|
|
27958
28036
|
const navTop = bannerAndNavbarChromeTop();
|
|
27959
28037
|
const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
|
|
27960
|
-
const rail = showRail && /* @__PURE__ */ (0,
|
|
28038
|
+
const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime143.trussProps)({
|
|
27961
28039
|
...{
|
|
27962
28040
|
display: "df",
|
|
27963
28041
|
flexDirection: "fdc",
|
|
@@ -27981,14 +28059,14 @@ function SideNavLayoutContent(props) {
|
|
|
27981
28059
|
position: "sticky",
|
|
27982
28060
|
left: "left0",
|
|
27983
28061
|
zIndex: ["z_var", {
|
|
27984
|
-
"--zIndex": (0,
|
|
28062
|
+
"--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.sideNav)
|
|
27985
28063
|
}],
|
|
27986
28064
|
top: ["top_var", {
|
|
27987
|
-
"--top": (0,
|
|
28065
|
+
"--top": (0, import_runtime143.maybeCssVar)(__maybeInc28(navTop))
|
|
27988
28066
|
}],
|
|
27989
28067
|
alignSelf: "asfs",
|
|
27990
28068
|
height: ["h_var", {
|
|
27991
|
-
"--height": (0,
|
|
28069
|
+
"--height": (0, import_runtime143.maybeCssVar)(__maybeInc28(railViewportHeight))
|
|
27992
28070
|
}],
|
|
27993
28071
|
width: ["w_var", {
|
|
27994
28072
|
"--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
|
|
@@ -27998,11 +28076,11 @@ function SideNavLayoutContent(props) {
|
|
|
27998
28076
|
position: "fixed",
|
|
27999
28077
|
left: "left0",
|
|
28000
28078
|
top: ["top_var", {
|
|
28001
|
-
"--top": (0,
|
|
28079
|
+
"--top": (0, import_runtime143.maybeCssVar)(__maybeInc28(navTop))
|
|
28002
28080
|
}],
|
|
28003
28081
|
bottom: "bottom0",
|
|
28004
28082
|
zIndex: ["z_var", {
|
|
28005
|
-
"--zIndex": (0,
|
|
28083
|
+
"--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.sideNav)
|
|
28006
28084
|
}]
|
|
28007
28085
|
},
|
|
28008
28086
|
...collapsed ? {
|
|
@@ -28014,18 +28092,18 @@ function SideNavLayoutContent(props) {
|
|
|
28014
28092
|
}
|
|
28015
28093
|
}
|
|
28016
28094
|
}), ...tid.sideNav, children: [
|
|
28017
|
-
showCollapseToggle && /* @__PURE__ */ (0,
|
|
28018
|
-
/* @__PURE__ */ (0,
|
|
28095
|
+
showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
|
|
28096
|
+
/* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(SideNav, { ...sideNav }) })
|
|
28019
28097
|
] });
|
|
28020
|
-
return /* @__PURE__ */ (0,
|
|
28098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime143.mergeProps)(void 0, {
|
|
28021
28099
|
[beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
|
|
28022
28100
|
}, {
|
|
28023
28101
|
display: "df",
|
|
28024
28102
|
flexDirection: "fdr",
|
|
28025
28103
|
width: "w100"
|
|
28026
28104
|
}), ...tid, children: [
|
|
28027
|
-
contrastRail ? /* @__PURE__ */ (0,
|
|
28028
|
-
/* @__PURE__ */ (0,
|
|
28105
|
+
contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(ContrastScope, { children: rail }) : rail,
|
|
28106
|
+
/* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime143.trussProps)({
|
|
28029
28107
|
display: "df",
|
|
28030
28108
|
flexDirection: "fdc",
|
|
28031
28109
|
flexGrow: "fg1",
|
|
@@ -28041,8 +28119,8 @@ function SideNavLayoutContent(props) {
|
|
|
28041
28119
|
}
|
|
28042
28120
|
|
|
28043
28121
|
// src/layouts/CenteredLayout/CenteredLayout.tsx
|
|
28044
|
-
var
|
|
28045
|
-
var
|
|
28122
|
+
var import_runtime144 = require("@homebound/truss/runtime");
|
|
28123
|
+
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
28046
28124
|
var __maybeInc29 = (inc) => {
|
|
28047
28125
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
28048
28126
|
};
|
|
@@ -28055,7 +28133,7 @@ function CenteredLayout(props) {
|
|
|
28055
28133
|
const {
|
|
28056
28134
|
mdAndUp
|
|
28057
28135
|
} = useBreakpoint();
|
|
28058
|
-
return /* @__PURE__ */ (0,
|
|
28136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", { ...(0, import_runtime144.mergeProps)(void 0, {
|
|
28059
28137
|
// layoutContainer descendants (e.g. ContentHeader) read this to inset sticky horizontal chrome within the shell padding.
|
|
28060
28138
|
[beamLayoutContentPaddingXVar]: mdAndUp ? mdAndUpContentPaddingX : smContentPaddingX
|
|
28061
28139
|
}, {
|
|
@@ -28083,16 +28161,16 @@ var smContentPaddingX = "12px";
|
|
|
28083
28161
|
var mdAndUpContentPaddingX = pageContentPaddingXValue;
|
|
28084
28162
|
var centeredPaddingX = {
|
|
28085
28163
|
paddingLeft: ["px_var mdandup_pl3", {
|
|
28086
|
-
"--paddingLeft": (0,
|
|
28164
|
+
"--paddingLeft": (0, import_runtime144.maybeCssVar)(__maybeInc29(smContentPaddingX))
|
|
28087
28165
|
}],
|
|
28088
28166
|
paddingRight: ["px_var mdandup_pr3", {
|
|
28089
|
-
"--paddingRight": (0,
|
|
28167
|
+
"--paddingRight": (0, import_runtime144.maybeCssVar)(__maybeInc29(smContentPaddingX))
|
|
28090
28168
|
}]
|
|
28091
28169
|
};
|
|
28092
28170
|
|
|
28093
28171
|
// src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
|
|
28094
|
-
var
|
|
28095
|
-
var
|
|
28172
|
+
var import_runtime145 = require("@homebound/truss/runtime");
|
|
28173
|
+
var import_jsx_runtime226 = require("react/jsx-runtime");
|
|
28096
28174
|
var __maybeInc30 = (inc) => {
|
|
28097
28175
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
28098
28176
|
};
|
|
@@ -28108,35 +28186,35 @@ function EnvironmentBannerLayout(props) {
|
|
|
28108
28186
|
[beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
|
|
28109
28187
|
};
|
|
28110
28188
|
const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
|
|
28111
|
-
return /* @__PURE__ */ (0,
|
|
28189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { ...(0, import_runtime145.mergeProps)(void 0, style, {
|
|
28112
28190
|
display: "df",
|
|
28113
28191
|
flexDirection: "fdc",
|
|
28114
28192
|
width: "wfc",
|
|
28115
28193
|
minWidth: "mw100"
|
|
28116
28194
|
}), ...tid, children: [
|
|
28117
|
-
showBanner && environmentBanner && /* @__PURE__ */ (0,
|
|
28195
|
+
showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { ...(0, import_runtime145.mergeProps)(void 0, {
|
|
28118
28196
|
height: environmentBannerSizePx
|
|
28119
28197
|
}, {
|
|
28120
28198
|
flexShrink: "fs0",
|
|
28121
28199
|
width: "w100"
|
|
28122
|
-
}), children: /* @__PURE__ */ (0,
|
|
28200
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { ...(0, import_runtime145.trussProps)({
|
|
28123
28201
|
position: "fixed",
|
|
28124
28202
|
top: "top0",
|
|
28125
28203
|
left: "left0",
|
|
28126
28204
|
zIndex: ["z_var", {
|
|
28127
|
-
"--zIndex": (0,
|
|
28205
|
+
"--zIndex": (0, import_runtime145.maybeCssVar)(zIndices.environmentBanner)
|
|
28128
28206
|
}],
|
|
28129
28207
|
width: ["w_var", {
|
|
28130
|
-
"--width": (0,
|
|
28208
|
+
"--width": (0, import_runtime145.maybeCssVar)(__maybeInc30(innerWidth))
|
|
28131
28209
|
}]
|
|
28132
|
-
}), ...tid.bannerSticky, children: /* @__PURE__ */ (0,
|
|
28210
|
+
}), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
|
|
28133
28211
|
children
|
|
28134
28212
|
] }) }) });
|
|
28135
28213
|
}
|
|
28136
28214
|
|
|
28137
28215
|
// src/layouts/FormSectionLayout/FormSectionLayout.tsx
|
|
28138
|
-
var
|
|
28139
|
-
var
|
|
28216
|
+
var import_runtime146 = require("@homebound/truss/runtime");
|
|
28217
|
+
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
28140
28218
|
function FormSectionLayout(props) {
|
|
28141
28219
|
const {
|
|
28142
28220
|
title,
|
|
@@ -28148,7 +28226,7 @@ function FormSectionLayout(props) {
|
|
|
28148
28226
|
aiMode = false
|
|
28149
28227
|
} = props;
|
|
28150
28228
|
const tid = useTestIds(props, "formSectionLayout");
|
|
28151
|
-
const content = /* @__PURE__ */ (0,
|
|
28229
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { ...(0, import_runtime146.trussProps)({
|
|
28152
28230
|
display: "df",
|
|
28153
28231
|
flexDirection: "fdc",
|
|
28154
28232
|
gap: "gap8",
|
|
@@ -28159,18 +28237,18 @@ function FormSectionLayout(props) {
|
|
|
28159
28237
|
paddingLeft: "pl3"
|
|
28160
28238
|
} : {}
|
|
28161
28239
|
}), children: [
|
|
28162
|
-
/* @__PURE__ */ (0,
|
|
28163
|
-
/* @__PURE__ */ (0,
|
|
28240
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { className: "df fdc gap3", children: [
|
|
28241
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
|
|
28164
28242
|
initialFields
|
|
28165
28243
|
] }),
|
|
28166
|
-
sections && /* @__PURE__ */ (0,
|
|
28244
|
+
sections && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
|
|
28167
28245
|
] });
|
|
28168
|
-
return /* @__PURE__ */ (0,
|
|
28246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(AiCard, { size: "lg", ...tid, children: content }) : content });
|
|
28169
28247
|
}
|
|
28170
28248
|
|
|
28171
28249
|
// src/layouts/NavbarLayout/NavbarLayout.tsx
|
|
28172
28250
|
var import_react160 = require("react");
|
|
28173
|
-
var
|
|
28251
|
+
var import_runtime147 = require("@homebound/truss/runtime");
|
|
28174
28252
|
|
|
28175
28253
|
// src/layouts/useAutoHideOnScroll.ts
|
|
28176
28254
|
var import_react157 = require("react");
|
|
@@ -28263,7 +28341,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
|
|
|
28263
28341
|
}
|
|
28264
28342
|
|
|
28265
28343
|
// src/layouts/useMeasuredHeight.ts
|
|
28266
|
-
var
|
|
28344
|
+
var import_utils190 = require("@react-aria/utils");
|
|
28267
28345
|
var import_react158 = require("react");
|
|
28268
28346
|
function useMeasuredHeight(ref, enabled) {
|
|
28269
28347
|
const [height, setHeight] = (0, import_react158.useState)(0);
|
|
@@ -28272,7 +28350,7 @@ function useMeasuredHeight(ref, enabled) {
|
|
|
28272
28350
|
const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
|
|
28273
28351
|
setHeight((prev) => prev === next ? prev : next);
|
|
28274
28352
|
}, [ref]);
|
|
28275
|
-
(0,
|
|
28353
|
+
(0, import_utils190.useResizeObserver)({ ref, onResize: syncElementHeight });
|
|
28276
28354
|
(0, import_react158.useLayoutEffect)(() => {
|
|
28277
28355
|
syncElementHeight();
|
|
28278
28356
|
}, [enabled, syncElementHeight]);
|
|
@@ -28281,17 +28359,17 @@ function useMeasuredHeight(ref, enabled) {
|
|
|
28281
28359
|
|
|
28282
28360
|
// src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
|
|
28283
28361
|
var import_react159 = require("react");
|
|
28284
|
-
var
|
|
28362
|
+
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
28285
28363
|
var NavbarLayoutHeightContext = (0, import_react159.createContext)(0);
|
|
28286
28364
|
function NavbarLayoutHeightProvider({ value, children }) {
|
|
28287
|
-
return /* @__PURE__ */ (0,
|
|
28365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
|
|
28288
28366
|
}
|
|
28289
28367
|
function useNavbarLayoutHeight() {
|
|
28290
28368
|
return (0, import_react159.useContext)(NavbarLayoutHeightContext);
|
|
28291
28369
|
}
|
|
28292
28370
|
|
|
28293
28371
|
// src/layouts/NavbarLayout/NavbarLayout.tsx
|
|
28294
|
-
var
|
|
28372
|
+
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
28295
28373
|
var __maybeInc31 = (inc) => {
|
|
28296
28374
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
28297
28375
|
};
|
|
@@ -28320,10 +28398,10 @@ function NavbarLayout(props) {
|
|
|
28320
28398
|
position: "sticky",
|
|
28321
28399
|
left: "left0",
|
|
28322
28400
|
zIndex: ["z_var", {
|
|
28323
|
-
"--zIndex": (0,
|
|
28401
|
+
"--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.navbar)
|
|
28324
28402
|
}],
|
|
28325
28403
|
width: ["w_var", {
|
|
28326
|
-
"--width": (0,
|
|
28404
|
+
"--width": (0, import_runtime147.maybeCssVar)(__maybeInc31(innerWidth))
|
|
28327
28405
|
}]
|
|
28328
28406
|
}
|
|
28329
28407
|
) : (
|
|
@@ -28332,10 +28410,10 @@ function NavbarLayout(props) {
|
|
|
28332
28410
|
position: "fixed",
|
|
28333
28411
|
left: "left0",
|
|
28334
28412
|
zIndex: ["z_var", {
|
|
28335
|
-
"--zIndex": (0,
|
|
28413
|
+
"--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.navbar)
|
|
28336
28414
|
}],
|
|
28337
28415
|
width: ["w_var", {
|
|
28338
|
-
"--width": (0,
|
|
28416
|
+
"--width": (0, import_runtime147.maybeCssVar)(__maybeInc31(innerWidth))
|
|
28339
28417
|
}],
|
|
28340
28418
|
transition: "transitionTop"
|
|
28341
28419
|
}
|
|
@@ -28344,20 +28422,20 @@ function NavbarLayout(props) {
|
|
|
28344
28422
|
const innerStyle = autoHideState !== "static" ? {
|
|
28345
28423
|
top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
|
|
28346
28424
|
} : void 0;
|
|
28347
|
-
const navbarEl = (0, import_react160.useMemo)(() => /* @__PURE__ */ (0,
|
|
28348
|
-
return /* @__PURE__ */ (0,
|
|
28425
|
+
const navbarEl = (0, import_react160.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Navbar, { ...navbar }), [navbar]);
|
|
28426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)("div", { ...(0, import_runtime147.mergeProps)(void 0, cssVars, {
|
|
28349
28427
|
display: "df",
|
|
28350
28428
|
flexDirection: "fdc",
|
|
28351
28429
|
width: "wfc",
|
|
28352
28430
|
minWidth: "mw100"
|
|
28353
28431
|
}), ...tid, children: [
|
|
28354
|
-
/* @__PURE__ */ (0,
|
|
28432
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { ref: spacerRef, ...(0, import_runtime147.mergeProps)(void 0, {
|
|
28355
28433
|
height: navHeight
|
|
28356
28434
|
}, {
|
|
28357
28435
|
flexShrink: "fs0",
|
|
28358
28436
|
width: "w100"
|
|
28359
|
-
}), children: /* @__PURE__ */ (0,
|
|
28360
|
-
/* @__PURE__ */ (0,
|
|
28437
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime147.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
|
|
28438
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
|
|
28361
28439
|
] }) }) }) });
|
|
28362
28440
|
}
|
|
28363
28441
|
|
|
@@ -28365,8 +28443,8 @@ function NavbarLayout(props) {
|
|
|
28365
28443
|
var import_react161 = require("react");
|
|
28366
28444
|
|
|
28367
28445
|
// src/components/Headers/BaseHeader.tsx
|
|
28368
|
-
var
|
|
28369
|
-
var
|
|
28446
|
+
var import_runtime148 = require("@homebound/truss/runtime");
|
|
28447
|
+
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
28370
28448
|
function BaseHeader(props) {
|
|
28371
28449
|
const {
|
|
28372
28450
|
title,
|
|
@@ -28378,7 +28456,7 @@ function BaseHeader(props) {
|
|
|
28378
28456
|
} = props;
|
|
28379
28457
|
const tid = useTestIds(otherProps, "header");
|
|
28380
28458
|
useDocumentTitle(title, documentTitleSuffix);
|
|
28381
|
-
return /* @__PURE__ */ (0,
|
|
28459
|
+
return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("header", { ...tid, ...(0, import_runtime148.trussProps)({
|
|
28382
28460
|
display: "df",
|
|
28383
28461
|
flexDirection: "fdc",
|
|
28384
28462
|
paddingTop: "pt3",
|
|
@@ -28392,7 +28470,7 @@ function BaseHeader(props) {
|
|
|
28392
28470
|
"--backgroundColor": "var(--b-surface)"
|
|
28393
28471
|
}]
|
|
28394
28472
|
}), children: [
|
|
28395
|
-
/* @__PURE__ */ (0,
|
|
28473
|
+
/* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime148.trussProps)({
|
|
28396
28474
|
...{
|
|
28397
28475
|
display: "df",
|
|
28398
28476
|
justifyContent: "jcsb",
|
|
@@ -28406,9 +28484,9 @@ function BaseHeader(props) {
|
|
|
28406
28484
|
} : {}
|
|
28407
28485
|
}
|
|
28408
28486
|
}), children: [
|
|
28409
|
-
/* @__PURE__ */ (0,
|
|
28410
|
-
breadcrumbs && /* @__PURE__ */ (0,
|
|
28411
|
-
/* @__PURE__ */ (0,
|
|
28487
|
+
/* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { className: "mw0", children: [
|
|
28488
|
+
breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Breadcrumbs, { ...breadcrumbs }),
|
|
28489
|
+
/* @__PURE__ */ (0, import_jsx_runtime230.jsx)("h1", { ...tid.title, ...(0, import_runtime148.trussProps)({
|
|
28412
28490
|
fontWeight: "fw6",
|
|
28413
28491
|
fontSize: "fz_20px",
|
|
28414
28492
|
lineHeight: "lh_28px",
|
|
@@ -28417,22 +28495,22 @@ function BaseHeader(props) {
|
|
|
28417
28495
|
}]
|
|
28418
28496
|
}), children: title })
|
|
28419
28497
|
] }),
|
|
28420
|
-
/* @__PURE__ */ (0,
|
|
28498
|
+
/* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "fs0", children: rightSlot })
|
|
28421
28499
|
] }),
|
|
28422
28500
|
bottomSlot
|
|
28423
28501
|
] });
|
|
28424
28502
|
}
|
|
28425
28503
|
|
|
28426
28504
|
// src/components/Headers/PageHeader.tsx
|
|
28427
|
-
var
|
|
28428
|
-
var
|
|
28505
|
+
var import_runtime149 = require("@homebound/truss/runtime");
|
|
28506
|
+
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
28429
28507
|
function PageHeader2(props) {
|
|
28430
28508
|
const {
|
|
28431
28509
|
tabs,
|
|
28432
28510
|
...otherProps
|
|
28433
28511
|
} = props;
|
|
28434
28512
|
const tid = useTestIds(otherProps, "header");
|
|
28435
|
-
return /* @__PURE__ */ (0,
|
|
28513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { ...(0, import_runtime149.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
|
|
28436
28514
|
}
|
|
28437
28515
|
|
|
28438
28516
|
// src/layouts/useBannerAndNavbarHeight.ts
|
|
@@ -28441,8 +28519,8 @@ function useBannerAndNavbarHeight() {
|
|
|
28441
28519
|
}
|
|
28442
28520
|
|
|
28443
28521
|
// src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
|
|
28444
|
-
var
|
|
28445
|
-
var
|
|
28522
|
+
var import_runtime150 = require("@homebound/truss/runtime");
|
|
28523
|
+
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
28446
28524
|
var __maybeInc32 = (inc) => {
|
|
28447
28525
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
28448
28526
|
};
|
|
@@ -28473,49 +28551,49 @@ function PageHeaderLayout(props) {
|
|
|
28473
28551
|
const innerCss = autoHideState === "static" ? {
|
|
28474
28552
|
position: "sticky",
|
|
28475
28553
|
left: ["left_var", {
|
|
28476
|
-
"--left": (0,
|
|
28554
|
+
"--left": (0, import_runtime150.maybeCssVar)(__maybeInc32(headerLeft))
|
|
28477
28555
|
}],
|
|
28478
28556
|
width: ["w_var", {
|
|
28479
|
-
"--width": (0,
|
|
28557
|
+
"--width": (0, import_runtime150.maybeCssVar)(__maybeInc32(headerWidth))
|
|
28480
28558
|
}],
|
|
28481
28559
|
zIndex: ["z_var", {
|
|
28482
|
-
"--zIndex": (0,
|
|
28560
|
+
"--zIndex": (0, import_runtime150.maybeCssVar)(zIndices.pageStickyHeader)
|
|
28483
28561
|
}]
|
|
28484
28562
|
} : {
|
|
28485
28563
|
position: "fixed",
|
|
28486
28564
|
left: ["left_var", {
|
|
28487
|
-
"--left": (0,
|
|
28565
|
+
"--left": (0, import_runtime150.maybeCssVar)(__maybeInc32(headerLeft))
|
|
28488
28566
|
}],
|
|
28489
28567
|
width: ["w_var", {
|
|
28490
|
-
"--width": (0,
|
|
28568
|
+
"--width": (0, import_runtime150.maybeCssVar)(__maybeInc32(headerWidth))
|
|
28491
28569
|
}],
|
|
28492
28570
|
zIndex: ["z_var", {
|
|
28493
|
-
"--zIndex": (0,
|
|
28571
|
+
"--zIndex": (0, import_runtime150.maybeCssVar)(zIndices.pageStickyHeader)
|
|
28494
28572
|
}],
|
|
28495
28573
|
transition: "transitionTop"
|
|
28496
28574
|
};
|
|
28497
28575
|
const innerStyle = autoHideState !== "static" ? {
|
|
28498
28576
|
top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
|
|
28499
28577
|
} : void 0;
|
|
28500
|
-
const pageHeaderEl = (0, import_react161.useMemo)(() => /* @__PURE__ */ (0,
|
|
28501
|
-
return /* @__PURE__ */ (0,
|
|
28578
|
+
const pageHeaderEl = (0, import_react161.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
|
|
28579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { ...(0, import_runtime150.mergeProps)(void 0, cssVars, {
|
|
28502
28580
|
display: "df",
|
|
28503
28581
|
flexDirection: "fdc",
|
|
28504
28582
|
width: "w100"
|
|
28505
28583
|
}), ...tid, children: [
|
|
28506
|
-
/* @__PURE__ */ (0,
|
|
28584
|
+
/* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ref: spacerRef, ...(0, import_runtime150.mergeProps)(void 0, {
|
|
28507
28585
|
height: headerHeight
|
|
28508
28586
|
}, {
|
|
28509
28587
|
flexShrink: "fs0",
|
|
28510
28588
|
width: "w100"
|
|
28511
|
-
}), children: /* @__PURE__ */ (0,
|
|
28512
|
-
/* @__PURE__ */ (0,
|
|
28589
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime150.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
|
|
28590
|
+
/* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
|
|
28513
28591
|
] }) });
|
|
28514
28592
|
}
|
|
28515
28593
|
|
|
28516
28594
|
// src/layouts/Workflow/JumpLinksRail.tsx
|
|
28517
|
-
var
|
|
28518
|
-
var
|
|
28595
|
+
var import_runtime151 = require("@homebound/truss/runtime");
|
|
28596
|
+
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
28519
28597
|
var __maybeInc33 = (inc) => {
|
|
28520
28598
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
28521
28599
|
};
|
|
@@ -28526,7 +28604,7 @@ function JumpLinksRail(props) {
|
|
|
28526
28604
|
activeId
|
|
28527
28605
|
} = props;
|
|
28528
28606
|
const tid = useTestIds(props, "jumpLinks");
|
|
28529
|
-
return /* @__PURE__ */ (0,
|
|
28607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("nav", { ...(0, import_runtime151.trussProps)({
|
|
28530
28608
|
display: "df",
|
|
28531
28609
|
flexDirection: "fdc",
|
|
28532
28610
|
flexShrink: "fs0",
|
|
@@ -28536,9 +28614,9 @@ function JumpLinksRail(props) {
|
|
|
28536
28614
|
position: "sticky",
|
|
28537
28615
|
alignSelf: "asfs",
|
|
28538
28616
|
top: ["top_var", {
|
|
28539
|
-
"--top": (0,
|
|
28617
|
+
"--top": (0, import_runtime151.maybeCssVar)(__maybeInc33(stickyNavAndHeaderOffset()))
|
|
28540
28618
|
}]
|
|
28541
|
-
}), ...tid, children: links.map((link) => /* @__PURE__ */ (0,
|
|
28619
|
+
}), ...tid, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
|
|
28542
28620
|
}
|
|
28543
28621
|
|
|
28544
28622
|
// src/layouts/Workflow/useActiveJumpLink.ts
|
|
@@ -28574,15 +28652,15 @@ function useActiveJumpLink(sectionIds) {
|
|
|
28574
28652
|
var import_react164 = require("react");
|
|
28575
28653
|
|
|
28576
28654
|
// src/components/Headers/WorkflowHeader.tsx
|
|
28577
|
-
var
|
|
28655
|
+
var import_jsx_runtime234 = require("react/jsx-runtime");
|
|
28578
28656
|
function WorkflowHeader(props) {
|
|
28579
28657
|
const { stepperTabs, ...otherProps } = props;
|
|
28580
28658
|
const tid = useTestIds(otherProps, "header");
|
|
28581
|
-
return /* @__PURE__ */ (0,
|
|
28659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
|
|
28582
28660
|
BaseHeader,
|
|
28583
28661
|
{
|
|
28584
28662
|
...otherProps,
|
|
28585
|
-
bottomSlot: stepperTabs ? /* @__PURE__ */ (0,
|
|
28663
|
+
bottomSlot: stepperTabs ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
|
|
28586
28664
|
}
|
|
28587
28665
|
);
|
|
28588
28666
|
}
|
|
@@ -28590,7 +28668,7 @@ function WorkflowHeader(props) {
|
|
|
28590
28668
|
// src/layouts/Workflow/useUnsavedChangesGuard.tsx
|
|
28591
28669
|
var import_react163 = require("react");
|
|
28592
28670
|
var import_react_router_dom9 = require("react-router-dom");
|
|
28593
|
-
var
|
|
28671
|
+
var import_jsx_runtime235 = require("react/jsx-runtime");
|
|
28594
28672
|
function useUnsavedChangesGuard(options) {
|
|
28595
28673
|
const { isDirty, onCancel } = options;
|
|
28596
28674
|
const { openModal } = useModal();
|
|
@@ -28613,7 +28691,7 @@ function useUnsavedChangesGuard(options) {
|
|
|
28613
28691
|
}
|
|
28614
28692
|
openModal({
|
|
28615
28693
|
allowClosing: false,
|
|
28616
|
-
content: /* @__PURE__ */ (0,
|
|
28694
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
|
|
28617
28695
|
});
|
|
28618
28696
|
};
|
|
28619
28697
|
const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
|
|
@@ -28625,7 +28703,7 @@ function UnsavedChangesNavigationModal(props) {
|
|
|
28625
28703
|
(0, import_react163.useEffect)(() => {
|
|
28626
28704
|
openModal({
|
|
28627
28705
|
allowClosing: false,
|
|
28628
|
-
content: /* @__PURE__ */ (0,
|
|
28706
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
|
|
28629
28707
|
});
|
|
28630
28708
|
return () => closeModal();
|
|
28631
28709
|
}, []);
|
|
@@ -28633,7 +28711,7 @@ function UnsavedChangesNavigationModal(props) {
|
|
|
28633
28711
|
}
|
|
28634
28712
|
|
|
28635
28713
|
// src/layouts/Workflow/WorkflowActions.tsx
|
|
28636
|
-
var
|
|
28714
|
+
var import_jsx_runtime236 = require("react/jsx-runtime");
|
|
28637
28715
|
function WorkflowActions(props) {
|
|
28638
28716
|
const {
|
|
28639
28717
|
onCancel,
|
|
@@ -28651,12 +28729,12 @@ function WorkflowActions(props) {
|
|
|
28651
28729
|
sm: isMobile
|
|
28652
28730
|
} = useBreakpoint();
|
|
28653
28731
|
const primaryVariant = aiMode ? "ai" : "primary";
|
|
28654
|
-
return /* @__PURE__ */ (0,
|
|
28655
|
-
/* @__PURE__ */ (0,
|
|
28656
|
-
/* @__PURE__ */ (0,
|
|
28657
|
-
/* @__PURE__ */ (0,
|
|
28658
|
-
onSaveAndExit && /* @__PURE__ */ (0,
|
|
28659
|
-
isLastStep ? /* @__PURE__ */ (0,
|
|
28732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
|
|
28733
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
|
|
28734
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsxs)("div", { className: "df aic gap1", children: [
|
|
28735
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
|
|
28736
|
+
onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
|
|
28737
|
+
isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
|
|
28660
28738
|
await onContinue?.();
|
|
28661
28739
|
}, disabled: primaryDisabled })
|
|
28662
28740
|
] })
|
|
@@ -28664,8 +28742,8 @@ function WorkflowActions(props) {
|
|
|
28664
28742
|
}
|
|
28665
28743
|
|
|
28666
28744
|
// src/layouts/Workflow/WorkflowPageLayout.tsx
|
|
28667
|
-
var
|
|
28668
|
-
var
|
|
28745
|
+
var import_runtime152 = require("@homebound/truss/runtime");
|
|
28746
|
+
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
28669
28747
|
var __maybeInc34 = (inc) => {
|
|
28670
28748
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
28671
28749
|
};
|
|
@@ -28693,7 +28771,7 @@ function WorkflowPageLayout(props) {
|
|
|
28693
28771
|
isDirty,
|
|
28694
28772
|
onCancel
|
|
28695
28773
|
});
|
|
28696
|
-
const actions = /* @__PURE__ */ (0,
|
|
28774
|
+
const actions = /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
|
|
28697
28775
|
const headerMetricsRef = (0, import_react164.useRef)(null);
|
|
28698
28776
|
const headerHeight = useMeasuredHeight(headerMetricsRef, true);
|
|
28699
28777
|
const headerWidth = documentScrollChromeWidth();
|
|
@@ -28714,26 +28792,26 @@ function WorkflowPageLayout(props) {
|
|
|
28714
28792
|
}
|
|
28715
28793
|
};
|
|
28716
28794
|
}, [showFooter]);
|
|
28717
|
-
return /* @__PURE__ */ (0,
|
|
28718
|
-
/* @__PURE__ */ (0,
|
|
28795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(DocumentScrollLayoutProvider, { children: [
|
|
28796
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsxs)("div", { ...(0, import_runtime152.mergeProps)(void 0, cssVars, {
|
|
28719
28797
|
display: "df",
|
|
28720
28798
|
flexDirection: "fdc",
|
|
28721
28799
|
width: "w100"
|
|
28722
28800
|
}), ...tid, children: [
|
|
28723
|
-
/* @__PURE__ */ (0,
|
|
28801
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime152.trussProps)({
|
|
28724
28802
|
position: "sticky",
|
|
28725
28803
|
left: "left0",
|
|
28726
28804
|
width: ["w_var", {
|
|
28727
|
-
"--width": (0,
|
|
28805
|
+
"--width": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerWidth))
|
|
28728
28806
|
}],
|
|
28729
28807
|
zIndex: ["z_var", {
|
|
28730
|
-
"--zIndex": (0,
|
|
28808
|
+
"--zIndex": (0, import_runtime152.maybeCssVar)(zIndices.pageStickyHeader)
|
|
28731
28809
|
}],
|
|
28732
28810
|
top: ["top_var", {
|
|
28733
|
-
"--top": (0,
|
|
28811
|
+
"--top": (0, import_runtime152.maybeCssVar)(__maybeInc34(outerTop))
|
|
28734
28812
|
}]
|
|
28735
|
-
}), ...tid.header, children: /* @__PURE__ */ (0,
|
|
28736
|
-
/* @__PURE__ */ (0,
|
|
28813
|
+
}), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
|
|
28814
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime152.trussProps)({
|
|
28737
28815
|
...{
|
|
28738
28816
|
display: "df",
|
|
28739
28817
|
flexDirection: "fdc",
|
|
@@ -28745,28 +28823,28 @@ function WorkflowPageLayout(props) {
|
|
|
28745
28823
|
...aiMode && {
|
|
28746
28824
|
backgroundImage: "aiBackground",
|
|
28747
28825
|
minHeight: ["mh_var", {
|
|
28748
|
-
"--minHeight": (0,
|
|
28826
|
+
"--minHeight": (0, import_runtime152.maybeCssVar)(documentScrollBodyMinHeight())
|
|
28749
28827
|
}]
|
|
28750
28828
|
}
|
|
28751
28829
|
}), ...tid.body, children }),
|
|
28752
|
-
showFooter && /* @__PURE__ */ (0,
|
|
28830
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime152.trussProps)({
|
|
28753
28831
|
flexShrink: "fs0",
|
|
28754
28832
|
width: "w100",
|
|
28755
28833
|
height: ["h_var", {
|
|
28756
28834
|
"--height": `${mobileFooterHeightPx}px`
|
|
28757
28835
|
}]
|
|
28758
|
-
}), children: /* @__PURE__ */ (0,
|
|
28836
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime152.trussProps)({
|
|
28759
28837
|
...{
|
|
28760
28838
|
position: "fixed",
|
|
28761
28839
|
bottom: "bottom0",
|
|
28762
28840
|
width: ["w_var", {
|
|
28763
|
-
"--width": (0,
|
|
28841
|
+
"--width": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerWidth))
|
|
28764
28842
|
}],
|
|
28765
28843
|
height: ["h_var", {
|
|
28766
28844
|
"--height": `${mobileFooterHeightPx}px`
|
|
28767
28845
|
}],
|
|
28768
28846
|
zIndex: ["z_var", {
|
|
28769
|
-
"--zIndex": (0,
|
|
28847
|
+
"--zIndex": (0, import_runtime152.maybeCssVar)(zIndices.pageStickyFooter)
|
|
28770
28848
|
}],
|
|
28771
28849
|
display: "df",
|
|
28772
28850
|
alignItems: "aic",
|
|
@@ -28784,12 +28862,12 @@ function WorkflowPageLayout(props) {
|
|
|
28784
28862
|
...pageContentPaddingX
|
|
28785
28863
|
}), ...tid.footer, children: actions }) })
|
|
28786
28864
|
] }),
|
|
28787
|
-
navigationBlocker && /* @__PURE__ */ (0,
|
|
28865
|
+
navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
|
|
28788
28866
|
] });
|
|
28789
28867
|
}
|
|
28790
28868
|
|
|
28791
28869
|
// src/layouts/Workflow/FocusedFormLayout.tsx
|
|
28792
|
-
var
|
|
28870
|
+
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
28793
28871
|
function FocusedFormLayout(props) {
|
|
28794
28872
|
const {
|
|
28795
28873
|
onCancel,
|
|
@@ -28816,15 +28894,15 @@ function FocusedFormLayout(props) {
|
|
|
28816
28894
|
});
|
|
28817
28895
|
const activeId = useActiveJumpLink(jumpLinks.map((link) => link.id));
|
|
28818
28896
|
const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
|
|
28819
|
-
return /* @__PURE__ */ (0,
|
|
28820
|
-
showRail && /* @__PURE__ */ (0,
|
|
28821
|
-
/* @__PURE__ */ (0,
|
|
28897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)("div", { className: "df w100", children: [
|
|
28898
|
+
showRail && /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
|
|
28899
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(FormSectionLayout, { ...form, aiMode }) })
|
|
28822
28900
|
] }) });
|
|
28823
28901
|
}
|
|
28824
28902
|
|
|
28825
28903
|
// src/layouts/Workflow/StepperLayout.tsx
|
|
28826
28904
|
var import_react165 = require("react");
|
|
28827
|
-
var
|
|
28905
|
+
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
28828
28906
|
function StepperLayout(props) {
|
|
28829
28907
|
const { steps, defaultStep, onCancel, completeLabel, onComplete, onSaveAndExit, isDirty, aiMode, ...headerProps } = props;
|
|
28830
28908
|
const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
|
|
@@ -28834,7 +28912,7 @@ function StepperLayout(props) {
|
|
|
28834
28912
|
const isFirstStep = currentIndex <= 0;
|
|
28835
28913
|
const isLastStep = currentIndex >= stepTabs.length - 1;
|
|
28836
28914
|
const activeStep = stepTabs[currentIndex];
|
|
28837
|
-
return /* @__PURE__ */ (0,
|
|
28915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
|
|
28838
28916
|
WorkflowPageLayout,
|
|
28839
28917
|
{
|
|
28840
28918
|
...tid,
|
|
@@ -28979,6 +29057,7 @@ function getInitialStep(steps, defaultStep) {
|
|
|
28979
29057
|
Icon,
|
|
28980
29058
|
IconButton,
|
|
28981
29059
|
Icons,
|
|
29060
|
+
InlineFeedbackBanner,
|
|
28982
29061
|
JumpLink,
|
|
28983
29062
|
KEPT_GROUP,
|
|
28984
29063
|
Loader,
|