@homebound/beam 3.75.2 → 3.77.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 +401 -317
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +40 -10
- package/dist/index.d.ts +40 -10
- package/dist/index.js +390 -308
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -43,7 +43,9 @@ __export(index_exports, {
|
|
|
43
43
|
AvatarGroup: () => AvatarGroup,
|
|
44
44
|
Banner: () => Banner,
|
|
45
45
|
BaseFilter: () => BaseFilter,
|
|
46
|
+
BeamLogo: () => BeamLogo,
|
|
46
47
|
BeamProvider: () => BeamProvider,
|
|
48
|
+
BlueprintAiLogo: () => BlueprintAiLogo,
|
|
47
49
|
BoundCheckboxField: () => BoundCheckboxField,
|
|
48
50
|
BoundCheckboxGroupField: () => BoundCheckboxGroupField,
|
|
49
51
|
BoundChipSelectField: () => BoundChipSelectField,
|
|
@@ -24483,7 +24485,8 @@ function ContentHeader(props) {
|
|
|
24483
24485
|
const {
|
|
24484
24486
|
title,
|
|
24485
24487
|
description,
|
|
24486
|
-
actions
|
|
24488
|
+
actions,
|
|
24489
|
+
xss
|
|
24487
24490
|
} = props;
|
|
24488
24491
|
const tid = useTestIds(props, "contentHeader");
|
|
24489
24492
|
if (!title && !description && !actions) {
|
|
@@ -24498,15 +24501,18 @@ function ContentHeader(props) {
|
|
|
24498
24501
|
}]
|
|
24499
24502
|
}), ...tid.description, children: description });
|
|
24500
24503
|
return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { ...(0, import_runtime113.trussProps)({
|
|
24501
|
-
|
|
24502
|
-
|
|
24503
|
-
|
|
24504
|
-
|
|
24505
|
-
|
|
24506
|
-
|
|
24507
|
-
|
|
24508
|
-
|
|
24509
|
-
|
|
24504
|
+
...{
|
|
24505
|
+
display: "df",
|
|
24506
|
+
flexDirection: "fdc",
|
|
24507
|
+
gap: "gap_12px",
|
|
24508
|
+
width: "w_min_100_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px",
|
|
24509
|
+
left: "l_var_beam_side_nav_layout_width_0px",
|
|
24510
|
+
position: "sticky",
|
|
24511
|
+
backgroundColor: ["bgColor_var", {
|
|
24512
|
+
"--backgroundColor": "var(--b-surface)"
|
|
24513
|
+
}]
|
|
24514
|
+
},
|
|
24515
|
+
...xss
|
|
24510
24516
|
}), ...tid, children: [
|
|
24511
24517
|
/* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { className: "df aic jcsb mw0", children: [
|
|
24512
24518
|
title ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("h2", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }) : descriptionEl,
|
|
@@ -24516,36 +24522,11 @@ function ContentHeader(props) {
|
|
|
24516
24522
|
] });
|
|
24517
24523
|
}
|
|
24518
24524
|
|
|
24519
|
-
// src/components/HomeboundLogo.tsx
|
|
24520
|
-
var import_runtime114 = require("@homebound/truss/runtime");
|
|
24521
|
-
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
24522
|
-
var __maybeInc21 = (inc) => {
|
|
24523
|
-
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
24524
|
-
};
|
|
24525
|
-
function HomeboundLogo(props) {
|
|
24526
|
-
const {
|
|
24527
|
-
fill = "currentColor",
|
|
24528
|
-
width: width2 = "auto",
|
|
24529
|
-
height = "auto"
|
|
24530
|
-
} = props;
|
|
24531
|
-
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime114.trussProps)({
|
|
24532
|
-
fill: ["fill_var", {
|
|
24533
|
-
"--fill": (0, import_runtime114.maybeCssVar)(fill)
|
|
24534
|
-
}],
|
|
24535
|
-
width: ["w_var", {
|
|
24536
|
-
"--width": (0, import_runtime114.maybeCssVar)(__maybeInc21(width2))
|
|
24537
|
-
}],
|
|
24538
|
-
height: ["h_var", {
|
|
24539
|
-
"--height": (0, import_runtime114.maybeCssVar)(__maybeInc21(height))
|
|
24540
|
-
}]
|
|
24541
|
-
}), children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
|
|
24542
|
-
}
|
|
24543
|
-
|
|
24544
24525
|
// src/components/JumpLink.tsx
|
|
24545
24526
|
var import_react136 = require("react");
|
|
24546
24527
|
var import_react_aria60 = require("react-aria");
|
|
24547
|
-
var
|
|
24548
|
-
var
|
|
24528
|
+
var import_runtime114 = require("@homebound/truss/runtime");
|
|
24529
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
24549
24530
|
function JumpLink(props) {
|
|
24550
24531
|
const {
|
|
24551
24532
|
label,
|
|
@@ -24587,14 +24568,14 @@ function JumpLink(props) {
|
|
|
24587
24568
|
});
|
|
24588
24569
|
}
|
|
24589
24570
|
}
|
|
24590
|
-
return /* @__PURE__ */ (0,
|
|
24571
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("a", { ref, ...(0, import_react_aria60.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime114.trussProps)({
|
|
24591
24572
|
...jumpLinkStyles.baseStyles,
|
|
24592
24573
|
...active && jumpLinkStyles.activeStyles,
|
|
24593
24574
|
...isHovered && !disabled && jumpLinkStyles.hoverStyles,
|
|
24594
24575
|
...isFocusVisible && jumpLinkStyles.focusStyles,
|
|
24595
24576
|
...disabled && jumpLinkStyles.disabledStyles,
|
|
24596
24577
|
...disabled && active && jumpLinkStyles.disabledActiveStyles
|
|
24597
|
-
}), children: /* @__PURE__ */ (0,
|
|
24578
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", children: label }) });
|
|
24598
24579
|
}
|
|
24599
24580
|
var jumpLinkStyles = {
|
|
24600
24581
|
baseStyles: {
|
|
@@ -24641,11 +24622,112 @@ var jumpLinkStyles = {
|
|
|
24641
24622
|
}
|
|
24642
24623
|
};
|
|
24643
24624
|
|
|
24644
|
-
// src/components/
|
|
24625
|
+
// src/components/Logos/BeamLogo.tsx
|
|
24626
|
+
var import_runtime115 = require("@homebound/truss/runtime");
|
|
24627
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
24628
|
+
var __maybeInc21 = (inc) => {
|
|
24629
|
+
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
24630
|
+
};
|
|
24631
|
+
function BeamLogo(props) {
|
|
24632
|
+
const {
|
|
24633
|
+
fill = "currentColor",
|
|
24634
|
+
width: width2 = "auto",
|
|
24635
|
+
height = "auto"
|
|
24636
|
+
} = props;
|
|
24637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime115.trussProps)({
|
|
24638
|
+
fill: ["fill_var", {
|
|
24639
|
+
"--fill": (0, import_runtime115.maybeCssVar)(fill)
|
|
24640
|
+
}],
|
|
24641
|
+
width: ["w_var", {
|
|
24642
|
+
"--width": (0, import_runtime115.maybeCssVar)(__maybeInc21(width2))
|
|
24643
|
+
}],
|
|
24644
|
+
height: ["h_var", {
|
|
24645
|
+
"--height": (0, import_runtime115.maybeCssVar)(__maybeInc21(height))
|
|
24646
|
+
}]
|
|
24647
|
+
}), children: [
|
|
24648
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "10", y: "90", width: "32", height: "320" }),
|
|
24649
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "122", y: "172", width: "32", height: "158" }),
|
|
24650
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "346", y: "172", width: "32", height: "158" }),
|
|
24651
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "458", y: "90", width: "32", height: "320" }),
|
|
24652
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "10", y: "90", width: "480", height: "32" }),
|
|
24653
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "10", y: "378", width: "480", height: "32" }),
|
|
24654
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "10", y: "172", width: "480", height: "32" }),
|
|
24655
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("rect", { x: "10", y: "298", width: "480", height: "32" })
|
|
24656
|
+
] });
|
|
24657
|
+
}
|
|
24658
|
+
|
|
24659
|
+
// src/components/Logos/BlueprintAiLogo.tsx
|
|
24645
24660
|
var import_utils156 = require("@react-aria/utils");
|
|
24646
|
-
var import_react137 = require("react");
|
|
24647
24661
|
var import_runtime116 = require("@homebound/truss/runtime");
|
|
24648
24662
|
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
24663
|
+
var __maybeInc22 = (inc) => {
|
|
24664
|
+
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
24665
|
+
};
|
|
24666
|
+
function BlueprintAiLogo(props) {
|
|
24667
|
+
const {
|
|
24668
|
+
width: width2 = "auto",
|
|
24669
|
+
height = "auto"
|
|
24670
|
+
} = props;
|
|
24671
|
+
const gradientId = (0, import_utils156.useId)();
|
|
24672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("svg", { viewBox: "0 0 207 40", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime116.trussProps)({
|
|
24673
|
+
width: ["w_var", {
|
|
24674
|
+
"--width": (0, import_runtime116.maybeCssVar)(__maybeInc22(width2))
|
|
24675
|
+
}],
|
|
24676
|
+
height: ["h_var", {
|
|
24677
|
+
"--height": (0, import_runtime116.maybeCssVar)(__maybeInc22(height))
|
|
24678
|
+
}]
|
|
24679
|
+
}), children: [
|
|
24680
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("g", { transform: "translate(0.32171630859375, 3)", fill: `url(#${gradientId})`, children: [
|
|
24681
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M17.2834 12.4731L25.9591 3.79741C26.4761 3.2804 27.3148 3.28029 27.8319 3.79741L27.9224 3.89763C28.3464 4.41754 28.3169 5.18521 27.8319 5.67026L18.7856 14.7166H30.6756C31.4069 14.7166 32 15.3096 32 16.0409C31.9998 16.7719 31.407 17.3653 30.6756 17.3653H19.3545L27.5075 25.5183L27.5991 25.6196C27.9937 26.1046 27.9936 26.8039 27.5991 27.2888L27.5075 27.3901C26.9904 27.9072 26.1518 27.9072 25.6347 27.3901L17.2834 19.0388V30.6756C17.2834 31.4069 16.6904 32 15.9591 32C15.2281 31.9998 14.6347 31.407 14.6347 30.6756V18.8664L6.15733 27.3437C5.67242 27.8287 4.90483 27.8588 4.3847 27.4343L4.28448 27.3437C3.76784 26.8267 3.76779 25.989 4.28448 25.472L12.3912 17.3653H1.32435C0.638773 17.3653 0.0745504 16.8441 0.00646552 16.1767L0 16.0409C0 15.3096 0.593052 14.7166 1.32435 14.7166H12.9601L3.96013 5.71659C3.44299 5.19946 3.44322 4.3608 3.96013 3.84375L4.06034 3.75323C4.58047 3.32871 5.34806 3.35884 5.83297 3.84375L14.6347 12.6455V1.32435C14.6347 0.592974 15.2281 0.000199548 15.9591 0C16.6904 3.28853e-08 17.2834 0.593052 17.2834 1.32435V12.4731Z" }),
|
|
24682
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M202.994 28.2798V3.31983H206.322V28.2798H202.994Z" }),
|
|
24683
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M174.792 28.2798L185.928 3.31983H190.024L201.16 28.2798H197.48L194.664 21.9118H181.32L178.472 28.2798H174.792ZM182.696 18.7438H193.288L187.976 6.80783L182.696 18.7438Z" }),
|
|
24684
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M165.349 28.2478C160.581 28.6958 158.053 28.5038 158.149 23.7998V14.5198H154.597V11.6398H158.149V7.15983H161.413V11.6398H166.181V14.5198H161.413V22.5838C161.413 25.3358 161.541 25.6878 165.349 25.3998V28.2478Z" }),
|
|
24685
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M138.102 28.2798V11.6398H141.366V14.4878C142.55 12.4718 144.47 11.1278 147.222 11.1278C151.254 11.1278 153.334 13.5918 153.334 18.3598V28.2798H150.038V18.4558C150.038 15.6718 148.694 13.9118 146.262 13.9118C143.318 13.9118 141.366 16.5038 141.366 20.0558V28.2798H138.102Z" }),
|
|
24686
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M133.364 9.11183C132.052 9.11183 131.028 8.11983 131.028 6.80783C131.028 5.52783 132.052 4.50383 133.364 4.50383C134.676 4.50383 135.668 5.52783 135.668 6.80783C135.668 8.11983 134.612 9.11183 133.364 9.11183ZM131.764 28.2798V11.6398H134.996V28.2798H131.764Z" }),
|
|
24687
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M120.958 28.2798V11.6398H124.062V14.8078C125.15 12.5678 127.422 11.4478 130.718 11.4478V14.4878C126.782 14.4878 124.062 15.8958 124.062 18.9038V28.2798H120.958Z" }),
|
|
24688
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M102.558 34.6798V11.6398H105.822V14.2318C106.974 12.2798 108.894 11.0958 111.326 11.1278C115.678 11.1278 118.75 14.8078 118.75 20.0238C118.75 25.1438 115.678 28.7918 111.326 28.7918C108.894 28.7918 106.974 27.6078 105.822 25.6878V34.6798H102.558ZM110.622 26.0078C113.502 26.0078 115.518 23.5118 115.518 19.9918C115.518 16.4398 113.502 13.9118 110.622 13.9118C107.742 13.9118 105.694 16.4398 105.694 19.9918C105.694 23.5118 107.742 26.0078 110.622 26.0078Z" }),
|
|
24689
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M92.5547 28.7918C87.5947 28.7918 84.3307 25.1118 84.3307 19.9278C84.3307 14.7758 87.5947 11.1278 92.5547 11.1278C96.6187 11.1278 100.043 14.1678 100.043 19.7038V20.9838H87.6907C87.9147 24.0238 89.4827 26.1038 92.5547 26.1038C94.7947 26.1038 96.2987 24.7918 96.6187 23.4478H99.8507C99.3387 26.3918 96.4907 28.7918 92.5547 28.7918ZM87.6907 18.5518H96.7787C96.6507 15.8318 94.9227 13.9118 92.4587 13.9118C89.6107 13.9118 88.1067 15.7678 87.6907 18.5518Z" }),
|
|
24690
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M81.796 11.6398V28.2798H78.564V25.4318C77.38 27.4478 75.428 28.7918 72.676 28.7918C68.644 28.7918 66.596 26.3278 66.596 21.5598V11.6398H69.86V21.4638C69.86 24.2478 71.236 26.0078 73.636 26.0078C76.58 26.0078 78.564 23.4158 78.564 19.8638V11.6398H81.796Z" }),
|
|
24691
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M60.452 28.2798V2.99983H63.716V28.2798H60.452Z" }),
|
|
24692
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("path", { d: "M53.104 15.2238C56.048 15.8638 57.68 18.2638 57.68 21.4318C57.68 25.4638 54.384 28.2798 49.68 28.2798H38V3.31983H48.848C53.68 3.31983 56.624 5.62383 56.624 9.65583C56.624 12.4078 55.248 14.4558 53.104 15.2238ZM41.328 6.48783V14.0398H47.952C51.312 14.0398 53.168 12.7278 53.168 10.1358C53.168 7.60783 51.28 6.48783 47.792 6.48783H41.328ZM48.72 25.1118C52.24 25.1118 54.16 23.5438 54.16 20.7598C54.16 18.2638 52.272 16.9838 48.848 16.9838H41.328V25.1118H48.72Z" })
|
|
24693
|
+
] }),
|
|
24694
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("linearGradient", { id: gradientId, x1: "47.4999", y1: "35", x2: "51.8397", y2: "-28.0595", gradientUnits: "userSpaceOnUse", children: [
|
|
24695
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("stop", { offset: "0.135528", stopColor: "rgba(91, 33, 182, 1)" /* Purple800 */ }),
|
|
24696
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("stop", { offset: "0.705975", stopColor: "rgba(37, 99, 235, 1)" /* Blue600 */ })
|
|
24697
|
+
] }) })
|
|
24698
|
+
] });
|
|
24699
|
+
}
|
|
24700
|
+
|
|
24701
|
+
// src/components/Logos/HomeboundLogo.tsx
|
|
24702
|
+
var import_runtime117 = require("@homebound/truss/runtime");
|
|
24703
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
24704
|
+
var __maybeInc23 = (inc) => {
|
|
24705
|
+
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
24706
|
+
};
|
|
24707
|
+
function HomeboundLogo(props) {
|
|
24708
|
+
const {
|
|
24709
|
+
fill = "currentColor",
|
|
24710
|
+
width: width2 = "auto",
|
|
24711
|
+
height = "auto"
|
|
24712
|
+
} = props;
|
|
24713
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime117.trussProps)({
|
|
24714
|
+
fill: ["fill_var", {
|
|
24715
|
+
"--fill": (0, import_runtime117.maybeCssVar)(fill)
|
|
24716
|
+
}],
|
|
24717
|
+
width: ["w_var", {
|
|
24718
|
+
"--width": (0, import_runtime117.maybeCssVar)(__maybeInc23(width2))
|
|
24719
|
+
}],
|
|
24720
|
+
height: ["h_var", {
|
|
24721
|
+
"--height": (0, import_runtime117.maybeCssVar)(__maybeInc23(height))
|
|
24722
|
+
}]
|
|
24723
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
|
|
24724
|
+
}
|
|
24725
|
+
|
|
24726
|
+
// src/components/MaxLines.tsx
|
|
24727
|
+
var import_utils157 = require("@react-aria/utils");
|
|
24728
|
+
var import_react137 = require("react");
|
|
24729
|
+
var import_runtime118 = require("@homebound/truss/runtime");
|
|
24730
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
24649
24731
|
function MaxLines({
|
|
24650
24732
|
maxLines,
|
|
24651
24733
|
children
|
|
@@ -24653,7 +24735,7 @@ function MaxLines({
|
|
|
24653
24735
|
const elRef = (0, import_react137.useRef)(null);
|
|
24654
24736
|
const [hasMore, setHasMore] = (0, import_react137.useState)(false);
|
|
24655
24737
|
const [expanded, setExpanded] = (0, import_react137.useState)(false);
|
|
24656
|
-
(0,
|
|
24738
|
+
(0, import_utils157.useLayoutEffect)(() => {
|
|
24657
24739
|
if (!elRef.current) return;
|
|
24658
24740
|
setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
|
|
24659
24741
|
}, []);
|
|
@@ -24664,15 +24746,15 @@ function MaxLines({
|
|
|
24664
24746
|
if (!elRef.current) return;
|
|
24665
24747
|
!expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
|
|
24666
24748
|
}, [expanded]);
|
|
24667
|
-
(0,
|
|
24749
|
+
(0, import_utils157.useResizeObserver)({
|
|
24668
24750
|
ref: elRef,
|
|
24669
24751
|
onResize
|
|
24670
24752
|
});
|
|
24671
|
-
return /* @__PURE__ */ (0,
|
|
24672
|
-
/* @__PURE__ */ (0,
|
|
24753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { children: [
|
|
24754
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ref: elRef, ...(0, import_runtime118.trussProps)({
|
|
24673
24755
|
...!expanded ? {
|
|
24674
24756
|
WebkitLineClamp: ["lineClamp_var", {
|
|
24675
|
-
"--WebkitLineClamp": (0,
|
|
24757
|
+
"--WebkitLineClamp": (0, import_runtime118.maybeCssVar)(maxLines)
|
|
24676
24758
|
}],
|
|
24677
24759
|
overflow: "oh",
|
|
24678
24760
|
display: "d_negwebkit_box",
|
|
@@ -24680,7 +24762,7 @@ function MaxLines({
|
|
|
24680
24762
|
textOverflow: "to_ellipsis"
|
|
24681
24763
|
} : {}
|
|
24682
24764
|
}), children }),
|
|
24683
|
-
hasMore && /* @__PURE__ */ (0,
|
|
24765
|
+
hasMore && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
|
|
24684
24766
|
] });
|
|
24685
24767
|
}
|
|
24686
24768
|
|
|
@@ -24688,15 +24770,15 @@ function MaxLines({
|
|
|
24688
24770
|
var import_change_case8 = require("change-case");
|
|
24689
24771
|
|
|
24690
24772
|
// src/components/AppNav/AppNavGroup.tsx
|
|
24691
|
-
var
|
|
24773
|
+
var import_utils159 = require("@react-aria/utils");
|
|
24692
24774
|
var import_change_case7 = require("change-case");
|
|
24693
24775
|
var import_react140 = require("react");
|
|
24694
24776
|
|
|
24695
24777
|
// src/components/AppNav/AppNavGroupTrigger.tsx
|
|
24696
24778
|
var import_react138 = require("react");
|
|
24697
24779
|
var import_react_aria61 = require("react-aria");
|
|
24698
|
-
var
|
|
24699
|
-
var
|
|
24780
|
+
var import_runtime119 = require("@homebound/truss/runtime");
|
|
24781
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
24700
24782
|
function AppNavGroupTrigger(props) {
|
|
24701
24783
|
const {
|
|
24702
24784
|
label,
|
|
@@ -24728,11 +24810,11 @@ function AppNavGroupTrigger(props) {
|
|
|
24728
24810
|
hoverStyles: hoverStyles4,
|
|
24729
24811
|
pressedStyles: pressedStyles2
|
|
24730
24812
|
} = (0, import_react138.useMemo)(() => getNavLinkStyles("side"), []);
|
|
24731
|
-
return /* @__PURE__ */ (0,
|
|
24813
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("button", { type: "button", ...(0, import_react_aria61.mergeProps)(buttonProps, focusProps, hoverProps, tid.trigger, {
|
|
24732
24814
|
ref,
|
|
24733
24815
|
"aria-expanded": expanded,
|
|
24734
24816
|
"aria-controls": navGroupId,
|
|
24735
|
-
...(0,
|
|
24817
|
+
...(0, import_runtime119.mergeProps)(navLink, void 0, {
|
|
24736
24818
|
...baseStyles4,
|
|
24737
24819
|
...isFocusVisible && focusRingStyles2,
|
|
24738
24820
|
...isHovered && hoverStyles4,
|
|
@@ -24746,7 +24828,7 @@ function AppNavGroupTrigger(props) {
|
|
|
24746
24828
|
})
|
|
24747
24829
|
}), children: [
|
|
24748
24830
|
label,
|
|
24749
|
-
/* @__PURE__ */ (0,
|
|
24831
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime119.trussProps)({
|
|
24750
24832
|
...{
|
|
24751
24833
|
display: "df",
|
|
24752
24834
|
alignItems: "aic",
|
|
@@ -24756,7 +24838,7 @@ function AppNavGroupTrigger(props) {
|
|
|
24756
24838
|
...props.expanded ? {
|
|
24757
24839
|
transform: "transform_rotate_180deg"
|
|
24758
24840
|
} : {}
|
|
24759
|
-
}), children: /* @__PURE__ */ (0,
|
|
24841
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { icon: "chevronDown" }) })
|
|
24760
24842
|
] });
|
|
24761
24843
|
}
|
|
24762
24844
|
|
|
@@ -24899,9 +24981,9 @@ function useAppNavGroupExpanded(linkGroup) {
|
|
|
24899
24981
|
}
|
|
24900
24982
|
|
|
24901
24983
|
// src/components/AppNav/AppNavGroup.tsx
|
|
24902
|
-
var
|
|
24903
|
-
var
|
|
24904
|
-
var
|
|
24984
|
+
var import_runtime120 = require("@homebound/truss/runtime");
|
|
24985
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
24986
|
+
var __maybeInc24 = (inc) => {
|
|
24905
24987
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
24906
24988
|
};
|
|
24907
24989
|
function AppNavGroupView(props) {
|
|
@@ -24911,9 +24993,9 @@ function AppNavGroupView(props) {
|
|
|
24911
24993
|
} = props;
|
|
24912
24994
|
const tid = useTestIds(props, "linkGroup");
|
|
24913
24995
|
if (panelCollapsed) {
|
|
24914
|
-
return /* @__PURE__ */ (0,
|
|
24996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_jsx_runtime194.Fragment, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${(0, import_change_case7.camelCase)(link.label)}`] }, link.label)) });
|
|
24915
24997
|
}
|
|
24916
|
-
return /* @__PURE__ */ (0,
|
|
24998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(AppNavGroupDisclosure, { ...props });
|
|
24917
24999
|
}
|
|
24918
25000
|
function AppNavGroupDisclosure(props) {
|
|
24919
25001
|
const {
|
|
@@ -24938,31 +25020,31 @@ function AppNavGroupDisclosure(props) {
|
|
|
24938
25020
|
setContentHeight(`${contentEl.scrollHeight}px`);
|
|
24939
25021
|
}
|
|
24940
25022
|
}, [expanded, contentEl]);
|
|
24941
|
-
(0,
|
|
25023
|
+
(0, import_utils159.useResizeObserver)({
|
|
24942
25024
|
ref: contentRef,
|
|
24943
25025
|
onResize
|
|
24944
25026
|
});
|
|
24945
|
-
return /* @__PURE__ */ (0,
|
|
24946
|
-
/* @__PURE__ */ (0,
|
|
24947
|
-
/* @__PURE__ */ (0,
|
|
25027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "df fdc", ...tid, children: [
|
|
25028
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
|
|
25029
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime120.trussProps)({
|
|
24948
25030
|
overflow: "oh",
|
|
24949
25031
|
transition: "transitionHeight",
|
|
24950
25032
|
height: ["h_var", {
|
|
24951
|
-
"--height": (0,
|
|
25033
|
+
"--height": (0, import_runtime120.maybeCssVar)(__maybeInc24(contentHeight))
|
|
24952
25034
|
}]
|
|
24953
25035
|
}), ...tid.panel, ...!expanded ? {
|
|
24954
25036
|
inert: "true"
|
|
24955
|
-
} : {}, children: /* @__PURE__ */ (0,
|
|
25037
|
+
} : {}, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
|
|
24956
25038
|
] });
|
|
24957
25039
|
}
|
|
24958
25040
|
|
|
24959
25041
|
// src/components/AppNav/AppNavGroupMenu.tsx
|
|
24960
|
-
var
|
|
25042
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
24961
25043
|
function AppNavGroupMenu({
|
|
24962
25044
|
linkGroup,
|
|
24963
25045
|
...tid
|
|
24964
25046
|
}) {
|
|
24965
|
-
return /* @__PURE__ */ (0,
|
|
25047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
24966
25048
|
ButtonMenu,
|
|
24967
25049
|
{
|
|
24968
25050
|
trigger: {
|
|
@@ -24978,8 +25060,8 @@ function AppNavGroupMenu({
|
|
|
24978
25060
|
}
|
|
24979
25061
|
|
|
24980
25062
|
// src/components/AppNav/AppNavSectionView.tsx
|
|
24981
|
-
var
|
|
24982
|
-
var
|
|
25063
|
+
var import_runtime121 = require("@homebound/truss/runtime");
|
|
25064
|
+
var import_jsx_runtime196 = require("react/jsx-runtime");
|
|
24983
25065
|
function AppNavSectionView(props) {
|
|
24984
25066
|
const {
|
|
24985
25067
|
section,
|
|
@@ -25005,7 +25087,7 @@ function AppNavSectionView(props) {
|
|
|
25005
25087
|
"--borderColor": "var(--b-surface-separator)"
|
|
25006
25088
|
}]
|
|
25007
25089
|
};
|
|
25008
|
-
return /* @__PURE__ */ (0,
|
|
25090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime121.trussProps)({
|
|
25009
25091
|
...{
|
|
25010
25092
|
display: "df",
|
|
25011
25093
|
flexDirection: "fdc",
|
|
@@ -25013,7 +25095,7 @@ function AppNavSectionView(props) {
|
|
|
25013
25095
|
},
|
|
25014
25096
|
...showDivider ? dividerStyles : {}
|
|
25015
25097
|
}), ...tid, children: [
|
|
25016
|
-
section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0,
|
|
25098
|
+
section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime121.trussProps)({
|
|
25017
25099
|
fontWeight: "fw6",
|
|
25018
25100
|
fontSize: "fz_10px",
|
|
25019
25101
|
lineHeight: "lh_14px",
|
|
@@ -25026,18 +25108,18 @@ function AppNavSectionView(props) {
|
|
|
25026
25108
|
paddingBottom: "pb1",
|
|
25027
25109
|
textTransform: "ttu"
|
|
25028
25110
|
}), ...tid.label, children: section.label }),
|
|
25029
|
-
/* @__PURE__ */ (0,
|
|
25111
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
|
|
25030
25112
|
] });
|
|
25031
25113
|
}
|
|
25032
25114
|
|
|
25033
25115
|
// src/components/AppNav/AppNavItems.tsx
|
|
25034
|
-
var
|
|
25116
|
+
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
25035
25117
|
function AppNavItems(props) {
|
|
25036
25118
|
const { items, variant = "side", panelCollapsed = false, nested = false } = props;
|
|
25037
25119
|
const tid = useTestIds(props, "appNav");
|
|
25038
|
-
return /* @__PURE__ */ (0,
|
|
25120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_jsx_runtime197.Fragment, { children: items.map((item, idx) => {
|
|
25039
25121
|
if (isAppNavLink(item)) {
|
|
25040
|
-
return /* @__PURE__ */ (0,
|
|
25122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
|
|
25041
25123
|
NavLink,
|
|
25042
25124
|
{
|
|
25043
25125
|
variant,
|
|
@@ -25050,7 +25132,7 @@ function AppNavItems(props) {
|
|
|
25050
25132
|
);
|
|
25051
25133
|
}
|
|
25052
25134
|
if (isAppNavGroup(item)) {
|
|
25053
|
-
return variant === "global" ? /* @__PURE__ */ (0,
|
|
25135
|
+
return variant === "global" ? /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
|
|
25054
25136
|
AppNavGroupView,
|
|
25055
25137
|
{
|
|
25056
25138
|
linkGroup: item,
|
|
@@ -25061,7 +25143,7 @@ function AppNavItems(props) {
|
|
|
25061
25143
|
);
|
|
25062
25144
|
}
|
|
25063
25145
|
if (isAppNavSection(item)) {
|
|
25064
|
-
return /* @__PURE__ */ (0,
|
|
25146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
|
|
25065
25147
|
AppNavSectionView,
|
|
25066
25148
|
{
|
|
25067
25149
|
section: item,
|
|
@@ -25084,8 +25166,8 @@ var import_react141 = require("react");
|
|
|
25084
25166
|
var import_react_aria62 = require("react-aria");
|
|
25085
25167
|
var import_react_dom7 = require("react-dom");
|
|
25086
25168
|
var import_react_router_dom7 = require("react-router-dom");
|
|
25087
|
-
var
|
|
25088
|
-
var
|
|
25169
|
+
var import_runtime122 = require("@homebound/truss/runtime");
|
|
25170
|
+
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
25089
25171
|
function NavbarMobileMenu(props) {
|
|
25090
25172
|
const {
|
|
25091
25173
|
items
|
|
@@ -25103,11 +25185,11 @@ function NavbarMobileMenu(props) {
|
|
|
25103
25185
|
setIsOpen(false);
|
|
25104
25186
|
}, [pathname, search]);
|
|
25105
25187
|
const close = () => setIsOpen(false);
|
|
25106
|
-
return /* @__PURE__ */ (0,
|
|
25107
|
-
/* @__PURE__ */ (0,
|
|
25188
|
+
return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_jsx_runtime198.Fragment, { children: [
|
|
25189
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => setIsOpen((open) => !open), ...tid.mobileMenu }),
|
|
25108
25190
|
(0, import_react_dom7.createPortal)(
|
|
25109
25191
|
/* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
|
|
25110
|
-
/* @__PURE__ */ (0,
|
|
25192
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_framer_motion6.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(NavbarMobileDrawer, { items, onClose: close, tid }) }),
|
|
25111
25193
|
document.body
|
|
25112
25194
|
)
|
|
25113
25195
|
] });
|
|
@@ -25121,14 +25203,14 @@ function NavbarMobileDrawer({
|
|
|
25121
25203
|
const overlayTopStyle = {
|
|
25122
25204
|
top: bannerHeightPx
|
|
25123
25205
|
};
|
|
25124
|
-
return /* @__PURE__ */ (0,
|
|
25125
|
-
/* @__PURE__ */ (0,
|
|
25206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_jsx_runtime198.Fragment, { children: [
|
|
25207
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime122.mergeProps)(void 0, overlayTopStyle, {
|
|
25126
25208
|
position: "fixed",
|
|
25127
25209
|
right: "right0",
|
|
25128
25210
|
bottom: "bottom0",
|
|
25129
25211
|
left: "left0",
|
|
25130
25212
|
zIndex: ["z_var", {
|
|
25131
|
-
"--zIndex": (0,
|
|
25213
|
+
"--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.navbarMobileMenuScrim)
|
|
25132
25214
|
}],
|
|
25133
25215
|
backgroundColor: ["bgColor_var", {
|
|
25134
25216
|
"--backgroundColor": "var(--b-scrim)"
|
|
@@ -25143,7 +25225,7 @@ function NavbarMobileDrawer({
|
|
|
25143
25225
|
ease: "linear",
|
|
25144
25226
|
duration: 0.2
|
|
25145
25227
|
}, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
|
|
25146
|
-
/* @__PURE__ */ (0,
|
|
25228
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_react_aria62.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_framer_motion6.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime122.mergeProps)(void 0, overlayTopStyle, {
|
|
25147
25229
|
position: "fixed",
|
|
25148
25230
|
bottom: "bottom0",
|
|
25149
25231
|
left: "left0",
|
|
@@ -25153,7 +25235,7 @@ function NavbarMobileDrawer({
|
|
|
25153
25235
|
width: "w_260px",
|
|
25154
25236
|
overflow: "oh",
|
|
25155
25237
|
zIndex: ["z_var", {
|
|
25156
|
-
"--zIndex": (0,
|
|
25238
|
+
"--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.navbarMobileMenu)
|
|
25157
25239
|
}],
|
|
25158
25240
|
backgroundColor: ["bgColor_var", {
|
|
25159
25241
|
"--backgroundColor": "var(--b-surface)"
|
|
@@ -25168,7 +25250,7 @@ function NavbarMobileDrawer({
|
|
|
25168
25250
|
ease: "linear",
|
|
25169
25251
|
duration: 0.2
|
|
25170
25252
|
}, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
|
|
25171
|
-
/* @__PURE__ */ (0,
|
|
25253
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_runtime122.trussProps)({
|
|
25172
25254
|
...{
|
|
25173
25255
|
display: "df",
|
|
25174
25256
|
alignItems: "aic",
|
|
@@ -25183,11 +25265,11 @@ function NavbarMobileDrawer({
|
|
|
25183
25265
|
}]
|
|
25184
25266
|
},
|
|
25185
25267
|
...pageContentPaddingX
|
|
25186
|
-
}), children: /* @__PURE__ */ (0,
|
|
25187
|
-
/* @__PURE__ */ (0,
|
|
25268
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
|
|
25269
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
|
|
25188
25270
|
"nav",
|
|
25189
25271
|
{
|
|
25190
|
-
...(0,
|
|
25272
|
+
...(0, import_runtime122.trussProps)({
|
|
25191
25273
|
...{
|
|
25192
25274
|
flexGrow: "fg1",
|
|
25193
25275
|
overflowY: "oya",
|
|
@@ -25205,7 +25287,7 @@ function NavbarMobileDrawer({
|
|
|
25205
25287
|
}
|
|
25206
25288
|
},
|
|
25207
25289
|
...tid.mobileMenuPanel,
|
|
25208
|
-
children: /* @__PURE__ */ (0,
|
|
25290
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(AppNavItems, { items, panelCollapsed: false, ...tid })
|
|
25209
25291
|
}
|
|
25210
25292
|
)
|
|
25211
25293
|
] }, "navbarMobileMenuDrawer") })
|
|
@@ -25213,8 +25295,8 @@ function NavbarMobileDrawer({
|
|
|
25213
25295
|
}
|
|
25214
25296
|
|
|
25215
25297
|
// src/components/Navbar/Navbar.tsx
|
|
25216
|
-
var
|
|
25217
|
-
var
|
|
25298
|
+
var import_runtime123 = require("@homebound/truss/runtime");
|
|
25299
|
+
var import_jsx_runtime199 = require("react/jsx-runtime");
|
|
25218
25300
|
function Navbar(props) {
|
|
25219
25301
|
const {
|
|
25220
25302
|
brand,
|
|
@@ -25233,7 +25315,7 @@ function Navbar(props) {
|
|
|
25233
25315
|
overflows
|
|
25234
25316
|
} = useContentOverflow(!sm);
|
|
25235
25317
|
const showMobile = sm || overflows;
|
|
25236
|
-
return /* @__PURE__ */ (0,
|
|
25318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("nav", { ...(0, import_runtime123.trussProps)({
|
|
25237
25319
|
...{
|
|
25238
25320
|
backgroundColor: ["bgColor_var", {
|
|
25239
25321
|
"--backgroundColor": "var(--b-surface-raised)"
|
|
@@ -25249,10 +25331,10 @@ function Navbar(props) {
|
|
|
25249
25331
|
},
|
|
25250
25332
|
...headerContentPaddingX(showMobile)
|
|
25251
25333
|
}), ...tid, children: [
|
|
25252
|
-
/* @__PURE__ */ (0,
|
|
25253
|
-
/* @__PURE__ */ (0,
|
|
25254
|
-
showMobile && /* @__PURE__ */ (0,
|
|
25255
|
-
/* @__PURE__ */ (0,
|
|
25334
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
|
|
25335
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df aic fs0 gap2", children: [
|
|
25336
|
+
showMobile && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(NavbarMobileMenu, { items, ...tid }),
|
|
25337
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime123.trussProps)({
|
|
25256
25338
|
flexShrink: "fs0",
|
|
25257
25339
|
...hideBrandOnMobile && showMobile ? {
|
|
25258
25340
|
display: "dn"
|
|
@@ -25261,7 +25343,7 @@ function Navbar(props) {
|
|
|
25261
25343
|
] }),
|
|
25262
25344
|
!sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
|
|
25263
25345
|
// can expand again as space frees up.
|
|
25264
|
-
/* @__PURE__ */ (0,
|
|
25346
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ref: containerRef, ...(0, import_runtime123.trussProps)({
|
|
25265
25347
|
display: "df",
|
|
25266
25348
|
alignItems: "aic",
|
|
25267
25349
|
flexGrow: "fg1",
|
|
@@ -25270,11 +25352,11 @@ function Navbar(props) {
|
|
|
25270
25352
|
...overflows ? {
|
|
25271
25353
|
visibility: "visibility_hidden"
|
|
25272
25354
|
} : {}
|
|
25273
|
-
}), ...tid.items, children: /* @__PURE__ */ (0,
|
|
25355
|
+
}), ...tid.items, children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(AppNavItems, { variant: "global", items, ...tid }) }) })
|
|
25274
25356
|
] }),
|
|
25275
|
-
/* @__PURE__ */ (0,
|
|
25276
|
-
rightSlot && /* @__PURE__ */ (0,
|
|
25277
|
-
user && /* @__PURE__ */ (0,
|
|
25357
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df aic gap1", children: [
|
|
25358
|
+
rightSlot && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
|
|
25359
|
+
user && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(NavbarUserMenu, { user, ...tid.userMenu })
|
|
25278
25360
|
] })
|
|
25279
25361
|
] }) });
|
|
25280
25362
|
}
|
|
@@ -25282,7 +25364,7 @@ function NavbarUserMenu({
|
|
|
25282
25364
|
user,
|
|
25283
25365
|
...tid
|
|
25284
25366
|
}) {
|
|
25285
|
-
return /* @__PURE__ */ (0,
|
|
25367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
|
|
25286
25368
|
src: user.picture,
|
|
25287
25369
|
name: user.name,
|
|
25288
25370
|
size: "sm",
|
|
@@ -25291,8 +25373,8 @@ function NavbarUserMenu({
|
|
|
25291
25373
|
}
|
|
25292
25374
|
|
|
25293
25375
|
// src/components/Pagination.tsx
|
|
25294
|
-
var
|
|
25295
|
-
var
|
|
25376
|
+
var import_runtime124 = require("@homebound/truss/runtime");
|
|
25377
|
+
var import_jsx_runtime200 = require("react/jsx-runtime");
|
|
25296
25378
|
var defaultPage = {
|
|
25297
25379
|
offset: 0,
|
|
25298
25380
|
limit: 100
|
|
@@ -25324,7 +25406,7 @@ function Pagination(props) {
|
|
|
25324
25406
|
}
|
|
25325
25407
|
}
|
|
25326
25408
|
const tid = useTestIds(props, "pagination");
|
|
25327
|
-
return /* @__PURE__ */ (0,
|
|
25409
|
+
return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { ...(0, import_runtime124.trussProps)({
|
|
25328
25410
|
display: "df",
|
|
25329
25411
|
borderColor: ["bc_var", {
|
|
25330
25412
|
"--borderColor": "var(--b-surface-separator)"
|
|
@@ -25341,24 +25423,24 @@ function Pagination(props) {
|
|
|
25341
25423
|
paddingRight: "pr2",
|
|
25342
25424
|
paddingTop: "pt2"
|
|
25343
25425
|
}), ...tid, children: [
|
|
25344
|
-
/* @__PURE__ */ (0,
|
|
25345
|
-
/* @__PURE__ */ (0,
|
|
25426
|
+
/* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
|
|
25427
|
+
/* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
|
|
25346
25428
|
pageNumber: 1,
|
|
25347
25429
|
pageSize: val
|
|
25348
25430
|
}), autoSort: false, ...tid.pageSize }) }),
|
|
25349
|
-
/* @__PURE__ */ (0,
|
|
25350
|
-
/* @__PURE__ */ (0,
|
|
25431
|
+
/* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { className: "mla mta mba df", children: [
|
|
25432
|
+
/* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
|
|
25351
25433
|
first,
|
|
25352
25434
|
" ",
|
|
25353
25435
|
showLast ? `- ${last}` : "",
|
|
25354
25436
|
" of ",
|
|
25355
25437
|
totalCount
|
|
25356
25438
|
] }),
|
|
25357
|
-
/* @__PURE__ */ (0,
|
|
25439
|
+
/* @__PURE__ */ (0, import_jsx_runtime200.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
|
|
25358
25440
|
pageNumber: pageNumber - 1,
|
|
25359
25441
|
pageSize
|
|
25360
25442
|
}), disabled: !hasPrevPage, ...tid.previousIcon }),
|
|
25361
|
-
/* @__PURE__ */ (0,
|
|
25443
|
+
/* @__PURE__ */ (0, import_jsx_runtime200.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
|
|
25362
25444
|
pageNumber: pageNumber + 1,
|
|
25363
25445
|
pageSize
|
|
25364
25446
|
}), disabled: !hasNextPage, ...tid.nextIcon })
|
|
@@ -25380,10 +25462,10 @@ function toPageNumberSize(page) {
|
|
|
25380
25462
|
}
|
|
25381
25463
|
|
|
25382
25464
|
// src/components/ScrollShadows.tsx
|
|
25383
|
-
var
|
|
25465
|
+
var import_utils166 = require("@react-aria/utils");
|
|
25384
25466
|
var import_react142 = require("react");
|
|
25385
|
-
var
|
|
25386
|
-
var
|
|
25467
|
+
var import_runtime125 = require("@homebound/truss/runtime");
|
|
25468
|
+
var import_jsx_runtime201 = require("react/jsx-runtime");
|
|
25387
25469
|
function ScrollShadows(props) {
|
|
25388
25470
|
const {
|
|
25389
25471
|
children,
|
|
@@ -25407,7 +25489,7 @@ function ScrollShadows(props) {
|
|
|
25407
25489
|
const commonStyles = {
|
|
25408
25490
|
position: "absolute",
|
|
25409
25491
|
zIndex: ["z_var", {
|
|
25410
|
-
"--zIndex": (0,
|
|
25492
|
+
"--zIndex": (0, import_runtime125.maybeCssVar)(zIndices.scrollShadow)
|
|
25411
25493
|
}],
|
|
25412
25494
|
pointerEvents: "pointerEvents_none"
|
|
25413
25495
|
};
|
|
@@ -25440,7 +25522,7 @@ function ScrollShadows(props) {
|
|
|
25440
25522
|
...startShadowStyles2,
|
|
25441
25523
|
...{
|
|
25442
25524
|
background: ["background_var", {
|
|
25443
|
-
"--background": (0,
|
|
25525
|
+
"--background": (0, import_runtime125.maybeCssVar)(startGradient)
|
|
25444
25526
|
}]
|
|
25445
25527
|
}
|
|
25446
25528
|
}, {
|
|
@@ -25448,7 +25530,7 @@ function ScrollShadows(props) {
|
|
|
25448
25530
|
...endShadowStyles2,
|
|
25449
25531
|
...{
|
|
25450
25532
|
background: ["background_var", {
|
|
25451
|
-
"--background": (0,
|
|
25533
|
+
"--background": (0, import_runtime125.maybeCssVar)(endGradient)
|
|
25452
25534
|
}]
|
|
25453
25535
|
}
|
|
25454
25536
|
}];
|
|
@@ -25469,14 +25551,14 @@ function ScrollShadows(props) {
|
|
|
25469
25551
|
setShowEndShadow(start + boxSize < end);
|
|
25470
25552
|
}, [horizontal]);
|
|
25471
25553
|
const onResize = (0, import_react142.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
|
|
25472
|
-
(0,
|
|
25554
|
+
(0, import_utils166.useResizeObserver)({
|
|
25473
25555
|
ref: scrollRef,
|
|
25474
25556
|
onResize
|
|
25475
25557
|
});
|
|
25476
|
-
return /* @__PURE__ */ (0,
|
|
25558
|
+
return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...(0, import_runtime125.trussProps)({
|
|
25477
25559
|
display: "df",
|
|
25478
25560
|
flexDirection: ["fd_var", {
|
|
25479
|
-
"--flexDirection": (0,
|
|
25561
|
+
"--flexDirection": (0, import_runtime125.maybeCssVar)(!horizontal ? "column" : "row")
|
|
25480
25562
|
}],
|
|
25481
25563
|
position: "relative",
|
|
25482
25564
|
overflow: "oh",
|
|
@@ -25489,23 +25571,23 @@ function ScrollShadows(props) {
|
|
|
25489
25571
|
width: width2
|
|
25490
25572
|
}
|
|
25491
25573
|
}), ...tid, children: [
|
|
25492
|
-
/* @__PURE__ */ (0,
|
|
25574
|
+
/* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ...(0, import_runtime125.trussProps)({
|
|
25493
25575
|
...startShadowStyles,
|
|
25494
25576
|
...{
|
|
25495
25577
|
opacity: ["o_var", {
|
|
25496
|
-
"--opacity": (0,
|
|
25578
|
+
"--opacity": (0, import_runtime125.maybeCssVar)(showStartShadow ? 1 : 0)
|
|
25497
25579
|
}]
|
|
25498
25580
|
}
|
|
25499
25581
|
}), "data-chromatic": "ignore" }),
|
|
25500
|
-
/* @__PURE__ */ (0,
|
|
25582
|
+
/* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ...(0, import_runtime125.trussProps)({
|
|
25501
25583
|
...endShadowStyles,
|
|
25502
25584
|
...{
|
|
25503
25585
|
opacity: ["o_var", {
|
|
25504
|
-
"--opacity": (0,
|
|
25586
|
+
"--opacity": (0, import_runtime125.maybeCssVar)(showEndShadow ? 1 : 0)
|
|
25505
25587
|
}]
|
|
25506
25588
|
}
|
|
25507
25589
|
}), "data-chromatic": "ignore" }),
|
|
25508
|
-
/* @__PURE__ */ (0,
|
|
25590
|
+
/* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ...(0, import_runtime125.trussProps)({
|
|
25509
25591
|
...xss,
|
|
25510
25592
|
...{
|
|
25511
25593
|
overflow: "oa",
|
|
@@ -25518,7 +25600,7 @@ function ScrollShadows(props) {
|
|
|
25518
25600
|
|
|
25519
25601
|
// src/layouts/SideNavLayout/SideNavLayoutContext.tsx
|
|
25520
25602
|
var import_react143 = require("react");
|
|
25521
|
-
var
|
|
25603
|
+
var import_jsx_runtime202 = require("react/jsx-runtime");
|
|
25522
25604
|
var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
|
|
25523
25605
|
function loadStoredNavState() {
|
|
25524
25606
|
try {
|
|
@@ -25566,7 +25648,7 @@ function SideNavLayoutProvider(props) {
|
|
|
25566
25648
|
});
|
|
25567
25649
|
}, []);
|
|
25568
25650
|
const value = (0, import_react143.useMemo)(() => ({ navState, setNavState }), [navState, setNavState]);
|
|
25569
|
-
return /* @__PURE__ */ (0,
|
|
25651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SideNavLayoutContext.Provider, { value, children: props.children });
|
|
25570
25652
|
}
|
|
25571
25653
|
function useSideNavLayoutContext() {
|
|
25572
25654
|
return (0, import_react143.useContext)(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
|
|
@@ -25577,8 +25659,8 @@ function useHasSideNavLayoutProvider() {
|
|
|
25577
25659
|
}
|
|
25578
25660
|
|
|
25579
25661
|
// src/components/SideNav/SideNav.tsx
|
|
25580
|
-
var
|
|
25581
|
-
var
|
|
25662
|
+
var import_runtime126 = require("@homebound/truss/runtime");
|
|
25663
|
+
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
25582
25664
|
function SideNav(props) {
|
|
25583
25665
|
const {
|
|
25584
25666
|
top,
|
|
@@ -25591,8 +25673,8 @@ function SideNav(props) {
|
|
|
25591
25673
|
const tid = useTestIds(props, "sideNav");
|
|
25592
25674
|
const panelCollapsed = navState === "collapse";
|
|
25593
25675
|
const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
|
|
25594
|
-
return /* @__PURE__ */ (0,
|
|
25595
|
-
top !== void 0 && /* @__PURE__ */ (0,
|
|
25676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
|
|
25677
|
+
top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime126.trussProps)({
|
|
25596
25678
|
flexShrink: "fs0",
|
|
25597
25679
|
paddingLeft: "pl2",
|
|
25598
25680
|
paddingRight: "pr2",
|
|
@@ -25603,7 +25685,7 @@ function SideNav(props) {
|
|
|
25603
25685
|
paddingBottom: "pb4"
|
|
25604
25686
|
} : {}
|
|
25605
25687
|
}), ...tid.top, children: top }),
|
|
25606
|
-
/* @__PURE__ */ (0,
|
|
25688
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime126.trussProps)({
|
|
25607
25689
|
flexGrow: "fg1",
|
|
25608
25690
|
overflowY: "oya",
|
|
25609
25691
|
display: "df",
|
|
@@ -25615,8 +25697,8 @@ function SideNav(props) {
|
|
|
25615
25697
|
...top === void 0 ? {
|
|
25616
25698
|
paddingTop: "pt5"
|
|
25617
25699
|
} : {}
|
|
25618
|
-
}), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0,
|
|
25619
|
-
footer !== void 0 && /* @__PURE__ */ (0,
|
|
25700
|
+
}), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(AppNavItems, { items, panelCollapsed }) }),
|
|
25701
|
+
footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime126.trussProps)({
|
|
25620
25702
|
flexShrink: "fs0",
|
|
25621
25703
|
paddingLeft: "pl2",
|
|
25622
25704
|
paddingRight: "pr2",
|
|
@@ -25693,10 +25775,10 @@ var snackbarId = 1;
|
|
|
25693
25775
|
// src/components/Stepper.tsx
|
|
25694
25776
|
var import_react145 = require("react");
|
|
25695
25777
|
var import_react_aria63 = require("react-aria");
|
|
25696
|
-
var
|
|
25697
|
-
var
|
|
25778
|
+
var import_runtime127 = require("@homebound/truss/runtime");
|
|
25779
|
+
var import_jsx_runtime204 = require("react/jsx-runtime");
|
|
25698
25780
|
var import_react146 = require("react");
|
|
25699
|
-
var
|
|
25781
|
+
var __maybeInc25 = (inc) => {
|
|
25700
25782
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
25701
25783
|
};
|
|
25702
25784
|
function Stepper(props) {
|
|
@@ -25713,8 +25795,8 @@ function Stepper(props) {
|
|
|
25713
25795
|
const maxStepWidth = 200;
|
|
25714
25796
|
const minStepWidth = 100;
|
|
25715
25797
|
const gap = 8;
|
|
25716
|
-
return /* @__PURE__ */ (0,
|
|
25717
|
-
/* @__PURE__ */ (0,
|
|
25798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
|
|
25799
|
+
/* @__PURE__ */ (0, import_jsx_runtime204.jsx)("ol", { ...(0, import_runtime127.trussProps)({
|
|
25718
25800
|
padding: "p_0",
|
|
25719
25801
|
margin: "m_0",
|
|
25720
25802
|
listStyle: "lis_none",
|
|
@@ -25724,7 +25806,7 @@ function Stepper(props) {
|
|
|
25724
25806
|
}]
|
|
25725
25807
|
}), children: steps.map((step) => {
|
|
25726
25808
|
const isCurrent = currentStep === step.value;
|
|
25727
|
-
return /* @__PURE__ */ (0, import_react146.createElement)("li", { ...(0,
|
|
25809
|
+
return /* @__PURE__ */ (0, import_react146.createElement)("li", { ...(0, import_runtime127.trussProps)({
|
|
25728
25810
|
display: "df",
|
|
25729
25811
|
flexGrow: "fg1",
|
|
25730
25812
|
flexDirection: "fdc",
|
|
@@ -25734,9 +25816,9 @@ function Stepper(props) {
|
|
|
25734
25816
|
minWidth: ["mw_var", {
|
|
25735
25817
|
"--minWidth": `${minStepWidth}px`
|
|
25736
25818
|
}]
|
|
25737
|
-
}), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0,
|
|
25819
|
+
}), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
|
|
25738
25820
|
}) }),
|
|
25739
|
-
/* @__PURE__ */ (0,
|
|
25821
|
+
/* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime127.trussProps)({
|
|
25740
25822
|
marginTop: "mt1",
|
|
25741
25823
|
backgroundColor: ["bgColor_var", {
|
|
25742
25824
|
"--backgroundColor": "var(--b-field-border-default)"
|
|
@@ -25749,14 +25831,14 @@ function Stepper(props) {
|
|
|
25749
25831
|
"--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
|
|
25750
25832
|
}],
|
|
25751
25833
|
width: "w100"
|
|
25752
|
-
}), children: /* @__PURE__ */ (0,
|
|
25834
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime127.trussProps)({
|
|
25753
25835
|
backgroundColor: ["bgColor_var", {
|
|
25754
25836
|
"--backgroundColor": "var(--b-primary)"
|
|
25755
25837
|
}],
|
|
25756
25838
|
transition: "transition_width_200ms",
|
|
25757
25839
|
height: "h100",
|
|
25758
25840
|
width: ["w_var", {
|
|
25759
|
-
"--width": (0,
|
|
25841
|
+
"--width": (0, import_runtime127.maybeCssVar)(__maybeInc25(`${(lastCompletedStep + 1) / steps.length * 100}%`))
|
|
25760
25842
|
}]
|
|
25761
25843
|
}) }) })
|
|
25762
25844
|
] });
|
|
@@ -25792,7 +25874,7 @@ function StepButton(props) {
|
|
|
25792
25874
|
boxShadow: "bshFocus"
|
|
25793
25875
|
};
|
|
25794
25876
|
const tid = useTestIds(props, "stepButton");
|
|
25795
|
-
return /* @__PURE__ */ (0,
|
|
25877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime127.trussProps)({
|
|
25796
25878
|
...{
|
|
25797
25879
|
fontWeight: "fw6",
|
|
25798
25880
|
fontSize: "fz_14px",
|
|
@@ -25853,7 +25935,7 @@ function StepButton(props) {
|
|
|
25853
25935
|
} : {},
|
|
25854
25936
|
...isFocusVisible ? focusRingStyles2 : {}
|
|
25855
25937
|
}), ...tid[defaultTestId(label)], children: [
|
|
25856
|
-
/* @__PURE__ */ (0,
|
|
25938
|
+
/* @__PURE__ */ (0, import_jsx_runtime204.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
|
|
25857
25939
|
label
|
|
25858
25940
|
] });
|
|
25859
25941
|
}
|
|
@@ -25864,12 +25946,12 @@ function StepIcon({
|
|
|
25864
25946
|
isCurrent = false
|
|
25865
25947
|
}) {
|
|
25866
25948
|
if (state === "error") {
|
|
25867
|
-
return /* @__PURE__ */ (0,
|
|
25949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon, { icon: "errorCircle" });
|
|
25868
25950
|
}
|
|
25869
25951
|
if (state === "complete") {
|
|
25870
|
-
return /* @__PURE__ */ (0,
|
|
25952
|
+
return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon, { icon: "check" });
|
|
25871
25953
|
}
|
|
25872
|
-
return /* @__PURE__ */ (0,
|
|
25954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime127.trussProps)({
|
|
25873
25955
|
width: "w_10px",
|
|
25874
25956
|
height: "h_10px",
|
|
25875
25957
|
borderStyle: "bss",
|
|
@@ -25885,8 +25967,8 @@ function StepIcon({
|
|
|
25885
25967
|
// src/components/StepperTabs/StepperTab.tsx
|
|
25886
25968
|
var import_react147 = require("react");
|
|
25887
25969
|
var import_react_aria64 = require("react-aria");
|
|
25888
|
-
var
|
|
25889
|
-
var
|
|
25970
|
+
var import_runtime128 = require("@homebound/truss/runtime");
|
|
25971
|
+
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
25890
25972
|
function StepperTab(props) {
|
|
25891
25973
|
const {
|
|
25892
25974
|
label,
|
|
@@ -25917,7 +25999,7 @@ function StepperTab(props) {
|
|
|
25917
25999
|
const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
|
|
25918
26000
|
const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
|
|
25919
26001
|
const tid = useTestIds(props, "stepperTab");
|
|
25920
|
-
return /* @__PURE__ */ (0,
|
|
26002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("button", { ref, ...(0, import_react_aria64.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime128.trussProps)({
|
|
25921
26003
|
...stepperTabStyles.baseStyles,
|
|
25922
26004
|
...getStateStyles(active, completed),
|
|
25923
26005
|
...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
|
|
@@ -25925,10 +26007,10 @@ function StepperTab(props) {
|
|
|
25925
26007
|
...disabled ? stepperTabStyles.disabledStyles : {},
|
|
25926
26008
|
...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
|
|
25927
26009
|
}), ...tid[defaultTestId(value)], children: [
|
|
25928
|
-
!collapsed && /* @__PURE__ */ (0,
|
|
25929
|
-
/* @__PURE__ */ (0,
|
|
25930
|
-
/* @__PURE__ */ (0,
|
|
25931
|
-
/* @__PURE__ */ (0,
|
|
26010
|
+
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(import_jsx_runtime205.Fragment, { children: [
|
|
26011
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("span", { className: "dg jic mw0", children: [
|
|
26012
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.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 }),
|
|
26013
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsx)("span", { ...(0, import_runtime128.trussProps)({
|
|
25932
26014
|
gridArea: "gridArea_1_1",
|
|
25933
26015
|
overflow: "oh",
|
|
25934
26016
|
display: "d_negwebkit_box",
|
|
@@ -25943,7 +26025,7 @@ function StepperTab(props) {
|
|
|
25943
26025
|
} : {}
|
|
25944
26026
|
}), children: label })
|
|
25945
26027
|
] }),
|
|
25946
|
-
/* @__PURE__ */ (0,
|
|
26028
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsx)("span", { ...(0, import_runtime128.trussProps)({
|
|
25947
26029
|
flexShrink: "fs0",
|
|
25948
26030
|
marginLeft: "ml1",
|
|
25949
26031
|
transition: "transitionAll",
|
|
@@ -25953,10 +26035,10 @@ function StepperTab(props) {
|
|
|
25953
26035
|
opacity: "o100",
|
|
25954
26036
|
transform: "transform_scale_1_translateY_0"
|
|
25955
26037
|
} : {}
|
|
25956
|
-
}), children: /* @__PURE__ */ (0,
|
|
26038
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
|
|
25957
26039
|
] }),
|
|
25958
|
-
/* @__PURE__ */ (0,
|
|
25959
|
-
/* @__PURE__ */ (0,
|
|
26040
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsx)("span", { "aria-hidden": true, ...(0, import_runtime128.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
|
|
26041
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsx)(import_react_aria64.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
|
|
25960
26042
|
] });
|
|
25961
26043
|
}
|
|
25962
26044
|
function getStateStyles(active, completed) {
|
|
@@ -26037,8 +26119,8 @@ var stepperTabStyles = {
|
|
|
26037
26119
|
};
|
|
26038
26120
|
|
|
26039
26121
|
// src/components/StepperTabs/StepperTabs.tsx
|
|
26040
|
-
var
|
|
26041
|
-
var
|
|
26122
|
+
var import_runtime129 = require("@homebound/truss/runtime");
|
|
26123
|
+
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
26042
26124
|
var import_react148 = require("react");
|
|
26043
26125
|
function StepperTabs(props) {
|
|
26044
26126
|
const {
|
|
@@ -26054,7 +26136,7 @@ function StepperTabs(props) {
|
|
|
26054
26136
|
const collapsed = isMobile || !!forceCollapsed;
|
|
26055
26137
|
const capWidth = steps.length <= 3;
|
|
26056
26138
|
const currentStepIndex = Math.max(0, steps.findIndex((step) => step.value === currentStep));
|
|
26057
|
-
return /* @__PURE__ */ (0,
|
|
26139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("ol", { ...(0, import_runtime129.trussProps)({
|
|
26058
26140
|
padding: "p_0",
|
|
26059
26141
|
margin: "m_0",
|
|
26060
26142
|
listStyle: "lis_none",
|
|
@@ -26069,7 +26151,7 @@ function StepperTabs(props) {
|
|
|
26069
26151
|
}), children: steps.map((step, idx) => {
|
|
26070
26152
|
const isCurrent = idx === currentStepIndex;
|
|
26071
26153
|
const isCompleted = idx < currentStepIndex;
|
|
26072
|
-
return /* @__PURE__ */ (0, import_react148.createElement)("li", { ...(0,
|
|
26154
|
+
return /* @__PURE__ */ (0, import_react148.createElement)("li", { ...(0, import_runtime129.trussProps)({
|
|
26073
26155
|
display: "df",
|
|
26074
26156
|
flexGrow: "fg1",
|
|
26075
26157
|
flexBasis: "fb_0",
|
|
@@ -26081,7 +26163,7 @@ function StepperTabs(props) {
|
|
|
26081
26163
|
"--maxWidth": `${maxStepWidthPx}px`
|
|
26082
26164
|
}]
|
|
26083
26165
|
} : {}
|
|
26084
|
-
}), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0,
|
|
26166
|
+
}), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
|
|
26085
26167
|
}) }) });
|
|
26086
26168
|
}
|
|
26087
26169
|
var maxStepWidthPx = 280;
|
|
@@ -26089,8 +26171,8 @@ var gapPx = 6;
|
|
|
26089
26171
|
|
|
26090
26172
|
// src/components/SuperDrawer/components/SuperDrawerHeader.tsx
|
|
26091
26173
|
var import_react_dom8 = require("react-dom");
|
|
26092
|
-
var
|
|
26093
|
-
var
|
|
26174
|
+
var import_runtime130 = require("@homebound/truss/runtime");
|
|
26175
|
+
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
26094
26176
|
function SuperDrawerHeader(props) {
|
|
26095
26177
|
const {
|
|
26096
26178
|
hideControls
|
|
@@ -26107,20 +26189,20 @@ function SuperDrawerHeader(props) {
|
|
|
26107
26189
|
const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
|
|
26108
26190
|
const isDetail = currentContent !== firstContent;
|
|
26109
26191
|
const tid = useTestIds({}, "superDrawerHeader");
|
|
26110
|
-
return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0,
|
|
26111
|
-
isStructuredProps(props) ? /* @__PURE__ */ (0,
|
|
26112
|
-
/* @__PURE__ */ (0,
|
|
26113
|
-
/* @__PURE__ */ (0,
|
|
26192
|
+
return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
|
|
26193
|
+
isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
|
|
26194
|
+
/* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "fg1 df aic gap2", children: [
|
|
26195
|
+
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
|
|
26114
26196
|
props.left
|
|
26115
26197
|
] }),
|
|
26116
|
-
props.right && /* @__PURE__ */ (0,
|
|
26117
|
-
] }) : /* @__PURE__ */ (0,
|
|
26118
|
-
!hideControls && /* @__PURE__ */ (0,
|
|
26198
|
+
props.right && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "fs0", children: props.right })
|
|
26199
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "fg1", children: props.children }),
|
|
26200
|
+
!hideControls && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ...(0, import_runtime130.trussProps)({
|
|
26119
26201
|
flexShrink: "fs0",
|
|
26120
26202
|
...isDetail ? {
|
|
26121
26203
|
visibility: "vh"
|
|
26122
26204
|
} : {}
|
|
26123
|
-
}), children: /* @__PURE__ */ (0,
|
|
26205
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ButtonGroup, { buttons: [{
|
|
26124
26206
|
icon: "chevronLeft",
|
|
26125
26207
|
onClick: () => onPrevClick && onPrevClick(),
|
|
26126
26208
|
disabled: !onPrevClick
|
|
@@ -26140,7 +26222,7 @@ var import_framer_motion7 = require("framer-motion");
|
|
|
26140
26222
|
|
|
26141
26223
|
// src/components/SuperDrawer/useSuperDrawer.tsx
|
|
26142
26224
|
var import_react149 = require("react");
|
|
26143
|
-
var
|
|
26225
|
+
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
26144
26226
|
function useSuperDrawer() {
|
|
26145
26227
|
const {
|
|
26146
26228
|
drawerContentStack: contentStack,
|
|
@@ -26152,7 +26234,7 @@ function useSuperDrawer() {
|
|
|
26152
26234
|
function canCloseDrawerDetails(i, doChange) {
|
|
26153
26235
|
for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
|
|
26154
26236
|
if (!canClose(canCloseDrawerDetail)) {
|
|
26155
|
-
openModal({ content: /* @__PURE__ */ (0,
|
|
26237
|
+
openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
|
|
26156
26238
|
return false;
|
|
26157
26239
|
}
|
|
26158
26240
|
}
|
|
@@ -26172,7 +26254,7 @@ function useSuperDrawer() {
|
|
|
26172
26254
|
for (const canCloseDrawer of canCloseChecks.current) {
|
|
26173
26255
|
if (!canClose(canCloseDrawer)) {
|
|
26174
26256
|
openModal({
|
|
26175
|
-
content: /* @__PURE__ */ (0,
|
|
26257
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
|
|
26176
26258
|
});
|
|
26177
26259
|
return;
|
|
26178
26260
|
}
|
|
@@ -26267,8 +26349,8 @@ function canClose(canCloseCheck) {
|
|
|
26267
26349
|
}
|
|
26268
26350
|
|
|
26269
26351
|
// src/components/SuperDrawer/SuperDrawerContent.tsx
|
|
26270
|
-
var
|
|
26271
|
-
var
|
|
26352
|
+
var import_runtime131 = require("@homebound/truss/runtime");
|
|
26353
|
+
var import_jsx_runtime209 = require("react/jsx-runtime");
|
|
26272
26354
|
var SuperDrawerContent = ({
|
|
26273
26355
|
children,
|
|
26274
26356
|
actions
|
|
@@ -26288,17 +26370,17 @@ var SuperDrawerContent = ({
|
|
|
26288
26370
|
} = firstContent ?? {};
|
|
26289
26371
|
function wrapWithMotionAndMaybeBack(children2) {
|
|
26290
26372
|
if (kind === "open") {
|
|
26291
|
-
return /* @__PURE__ */ (0,
|
|
26373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_framer_motion7.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
|
|
26292
26374
|
} else if (kind === "detail") {
|
|
26293
|
-
return /* @__PURE__ */ (0,
|
|
26375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(import_framer_motion7.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
|
|
26294
26376
|
overflow: "auto"
|
|
26295
26377
|
}, transition: {
|
|
26296
26378
|
overflow: {
|
|
26297
26379
|
delay: 0.3
|
|
26298
26380
|
}
|
|
26299
26381
|
}, children: [
|
|
26300
|
-
/* @__PURE__ */ (0,
|
|
26301
|
-
/* @__PURE__ */ (0,
|
|
26382
|
+
/* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
|
|
26383
|
+
/* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_framer_motion7.motion.div, { initial: {
|
|
26302
26384
|
x: width2,
|
|
26303
26385
|
opacity: 0
|
|
26304
26386
|
}, animate: {
|
|
@@ -26316,7 +26398,7 @@ var SuperDrawerContent = ({
|
|
|
26316
26398
|
}, className: "pt2", children: children2 })
|
|
26317
26399
|
] }, "content");
|
|
26318
26400
|
} else {
|
|
26319
|
-
return /* @__PURE__ */ (0,
|
|
26401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime131.mergeProps)(void 0, {
|
|
26320
26402
|
overflow: "auto"
|
|
26321
26403
|
}, {
|
|
26322
26404
|
paddingTop: "pt3",
|
|
@@ -26327,9 +26409,9 @@ var SuperDrawerContent = ({
|
|
|
26327
26409
|
}) }, "content");
|
|
26328
26410
|
}
|
|
26329
26411
|
}
|
|
26330
|
-
return /* @__PURE__ */ (0,
|
|
26412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(import_jsx_runtime209.Fragment, { children: [
|
|
26331
26413
|
wrapWithMotionAndMaybeBack(children),
|
|
26332
|
-
actions && /* @__PURE__ */ (0,
|
|
26414
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("footer", { ...(0, import_runtime131.trussProps)({
|
|
26333
26415
|
borderTopStyle: "bts_solid",
|
|
26334
26416
|
borderTopWidth: "btw_1px",
|
|
26335
26417
|
borderColor: ["bc_var", {
|
|
@@ -26342,7 +26424,7 @@ var SuperDrawerContent = ({
|
|
|
26342
26424
|
display: "df",
|
|
26343
26425
|
alignItems: "aic",
|
|
26344
26426
|
justifyContent: "jcfe"
|
|
26345
|
-
}), children: /* @__PURE__ */ (0,
|
|
26427
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Button, { ...buttonProps }, i)) }) })
|
|
26346
26428
|
] });
|
|
26347
26429
|
};
|
|
26348
26430
|
|
|
@@ -26390,15 +26472,15 @@ var import_react150 = require("react");
|
|
|
26390
26472
|
var import_react_aria65 = require("react-aria");
|
|
26391
26473
|
var import_react_router = require("react-router");
|
|
26392
26474
|
var import_react_router_dom8 = require("react-router-dom");
|
|
26393
|
-
var
|
|
26394
|
-
var
|
|
26475
|
+
var import_runtime132 = require("@homebound/truss/runtime");
|
|
26476
|
+
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
26395
26477
|
function TabsWithContent(props) {
|
|
26396
26478
|
const styles = hideTabs(props) ? {} : {
|
|
26397
26479
|
paddingTop: "pt3"
|
|
26398
26480
|
};
|
|
26399
|
-
return /* @__PURE__ */ (0,
|
|
26400
|
-
/* @__PURE__ */ (0,
|
|
26401
|
-
/* @__PURE__ */ (0,
|
|
26481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
|
|
26482
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Tabs, { ...props }),
|
|
26483
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(TabContent, { ...props, contentXss: {
|
|
26402
26484
|
...styles,
|
|
26403
26485
|
...props.contentXss
|
|
26404
26486
|
} })
|
|
@@ -26423,7 +26505,7 @@ function TabContent(props) {
|
|
|
26423
26505
|
return (
|
|
26424
26506
|
// Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
|
|
26425
26507
|
// Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
|
|
26426
|
-
/* @__PURE__ */ (0,
|
|
26508
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime132.trussProps)(contentXss), children: selectedTab.render() }) })
|
|
26427
26509
|
);
|
|
26428
26510
|
}
|
|
26429
26511
|
function Tabs(props) {
|
|
@@ -26465,7 +26547,7 @@ function Tabs(props) {
|
|
|
26465
26547
|
setActive(selected);
|
|
26466
26548
|
}
|
|
26467
26549
|
}
|
|
26468
|
-
return /* @__PURE__ */ (0,
|
|
26550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("div", { ...(0, import_runtime132.trussProps)({
|
|
26469
26551
|
...{
|
|
26470
26552
|
display: "df",
|
|
26471
26553
|
alignItems: "aic",
|
|
@@ -26483,11 +26565,11 @@ function Tabs(props) {
|
|
|
26483
26565
|
}
|
|
26484
26566
|
} : {}
|
|
26485
26567
|
}), children: [
|
|
26486
|
-
!hideTabs(props) && /* @__PURE__ */ (0,
|
|
26568
|
+
!hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
|
|
26487
26569
|
const uniqueValue = uniqueTabValue(tab);
|
|
26488
|
-
return /* @__PURE__ */ (0,
|
|
26570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
|
|
26489
26571
|
}) }),
|
|
26490
|
-
right && /* @__PURE__ */ (0,
|
|
26572
|
+
right && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
|
|
26491
26573
|
] });
|
|
26492
26574
|
}
|
|
26493
26575
|
function TabImpl(props) {
|
|
@@ -26531,7 +26613,7 @@ function TabImpl(props) {
|
|
|
26531
26613
|
role: "tab",
|
|
26532
26614
|
tabIndex: active ? 0 : -1,
|
|
26533
26615
|
...others,
|
|
26534
|
-
...(0,
|
|
26616
|
+
...(0, import_runtime132.trussProps)({
|
|
26535
26617
|
...baseStyles4,
|
|
26536
26618
|
...active && activeStyles3,
|
|
26537
26619
|
...isDisabled && disabledStyles3,
|
|
@@ -26547,17 +26629,17 @@ function TabImpl(props) {
|
|
|
26547
26629
|
onClick: () => onClick(tab.value)
|
|
26548
26630
|
}
|
|
26549
26631
|
});
|
|
26550
|
-
const tabLabel = /* @__PURE__ */ (0,
|
|
26632
|
+
const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
|
|
26551
26633
|
label,
|
|
26552
|
-
(icon || endAdornment) && /* @__PURE__ */ (0,
|
|
26634
|
+
(icon || endAdornment) && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("span", { className: "ml1", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Icon, { icon }) : endAdornment })
|
|
26553
26635
|
] });
|
|
26554
26636
|
return isDisabled ? maybeTooltip({
|
|
26555
26637
|
title: resolveTooltip(disabled),
|
|
26556
26638
|
placement: "top",
|
|
26557
|
-
children: /* @__PURE__ */ (0,
|
|
26558
|
-
}) : isRouteTab(tab) ? /* @__PURE__ */ (0,
|
|
26639
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { ...tabProps, children: tabLabel })
|
|
26640
|
+
}) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_router_dom8.Link, { ...(0, import_react_aria65.mergeProps)(tabProps, interactiveProps, {
|
|
26559
26641
|
className: "navLink"
|
|
26560
|
-
}), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0,
|
|
26642
|
+
}), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("button", { ...{
|
|
26561
26643
|
...tabProps,
|
|
26562
26644
|
...interactiveProps
|
|
26563
26645
|
}, children: tabLabel });
|
|
@@ -26568,7 +26650,7 @@ function getTabStyles() {
|
|
|
26568
26650
|
const borderBottomStyles = {
|
|
26569
26651
|
borderBottomStyle: "bbs_solid",
|
|
26570
26652
|
borderBottomWidth: ["borderBottomWidth_var", {
|
|
26571
|
-
"--borderBottomWidth": (0,
|
|
26653
|
+
"--borderBottomWidth": (0, import_runtime132.maybeCssVar)(`${borderBottomWidthPx}px`)
|
|
26572
26654
|
}],
|
|
26573
26655
|
paddingBottom: ["pb_var", {
|
|
26574
26656
|
"--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
|
|
@@ -26665,7 +26747,7 @@ function hideTabs(props) {
|
|
|
26665
26747
|
}
|
|
26666
26748
|
|
|
26667
26749
|
// src/components/TagGroup.tsx
|
|
26668
|
-
var
|
|
26750
|
+
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
26669
26751
|
function TagGroup(props) {
|
|
26670
26752
|
const {
|
|
26671
26753
|
tags,
|
|
@@ -26673,9 +26755,9 @@ function TagGroup(props) {
|
|
|
26673
26755
|
...otherProps
|
|
26674
26756
|
} = props;
|
|
26675
26757
|
const tid = useTestIds(otherProps, "tagGroup");
|
|
26676
|
-
return /* @__PURE__ */ (0,
|
|
26677
|
-
tags.map((tag) => /* @__PURE__ */ (0,
|
|
26678
|
-
onEdit && /* @__PURE__ */ (0,
|
|
26758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
|
|
26759
|
+
tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
|
|
26760
|
+
onEdit && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
|
|
26679
26761
|
] });
|
|
26680
26762
|
}
|
|
26681
26763
|
|
|
@@ -26688,15 +26770,15 @@ function useToast() {
|
|
|
26688
26770
|
}
|
|
26689
26771
|
|
|
26690
26772
|
// src/layouts/SideNavLayout/SideNavLayout.tsx
|
|
26691
|
-
var
|
|
26692
|
-
var
|
|
26693
|
-
var
|
|
26773
|
+
var import_runtime133 = require("@homebound/truss/runtime");
|
|
26774
|
+
var import_jsx_runtime212 = require("react/jsx-runtime");
|
|
26775
|
+
var __maybeInc26 = (inc) => {
|
|
26694
26776
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
26695
26777
|
};
|
|
26696
26778
|
function SideNavLayout(props) {
|
|
26697
26779
|
const hasProvider = useHasSideNavLayoutProvider();
|
|
26698
|
-
if (hasProvider) return /* @__PURE__ */ (0,
|
|
26699
|
-
return /* @__PURE__ */ (0,
|
|
26780
|
+
if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(SideNavLayoutContent, { ...props });
|
|
26781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(SideNavLayoutContent, { ...props }) });
|
|
26700
26782
|
}
|
|
26701
26783
|
function SideNavLayoutContent(props) {
|
|
26702
26784
|
const {
|
|
@@ -26718,7 +26800,7 @@ function SideNavLayoutContent(props) {
|
|
|
26718
26800
|
const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
|
|
26719
26801
|
const navTop = bannerAndNavbarChromeTop();
|
|
26720
26802
|
const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
|
|
26721
|
-
const rail = showRail && /* @__PURE__ */ (0,
|
|
26803
|
+
const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { ...(0, import_runtime133.trussProps)({
|
|
26722
26804
|
...{
|
|
26723
26805
|
display: "df",
|
|
26724
26806
|
flexDirection: "fdc",
|
|
@@ -26742,14 +26824,14 @@ function SideNavLayoutContent(props) {
|
|
|
26742
26824
|
position: "sticky",
|
|
26743
26825
|
left: "left0",
|
|
26744
26826
|
zIndex: ["z_var", {
|
|
26745
|
-
"--zIndex": (0,
|
|
26827
|
+
"--zIndex": (0, import_runtime133.maybeCssVar)(zIndices.sideNav)
|
|
26746
26828
|
}],
|
|
26747
26829
|
top: ["top_var", {
|
|
26748
|
-
"--top": (0,
|
|
26830
|
+
"--top": (0, import_runtime133.maybeCssVar)(__maybeInc26(navTop))
|
|
26749
26831
|
}],
|
|
26750
26832
|
alignSelf: "asfs",
|
|
26751
26833
|
height: ["h_var", {
|
|
26752
|
-
"--height": (0,
|
|
26834
|
+
"--height": (0, import_runtime133.maybeCssVar)(__maybeInc26(railViewportHeight))
|
|
26753
26835
|
}],
|
|
26754
26836
|
width: ["w_var", {
|
|
26755
26837
|
"--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
|
|
@@ -26759,11 +26841,11 @@ function SideNavLayoutContent(props) {
|
|
|
26759
26841
|
position: "fixed",
|
|
26760
26842
|
left: "left0",
|
|
26761
26843
|
top: ["top_var", {
|
|
26762
|
-
"--top": (0,
|
|
26844
|
+
"--top": (0, import_runtime133.maybeCssVar)(__maybeInc26(navTop))
|
|
26763
26845
|
}],
|
|
26764
26846
|
bottom: "bottom0",
|
|
26765
26847
|
zIndex: ["z_var", {
|
|
26766
|
-
"--zIndex": (0,
|
|
26848
|
+
"--zIndex": (0, import_runtime133.maybeCssVar)(zIndices.sideNav)
|
|
26767
26849
|
}]
|
|
26768
26850
|
},
|
|
26769
26851
|
...collapsed ? {
|
|
@@ -26775,18 +26857,18 @@ function SideNavLayoutContent(props) {
|
|
|
26775
26857
|
}
|
|
26776
26858
|
}
|
|
26777
26859
|
}), ...tid.sideNav, children: [
|
|
26778
|
-
showCollapseToggle && /* @__PURE__ */ (0,
|
|
26779
|
-
/* @__PURE__ */ (0,
|
|
26860
|
+
showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
|
|
26861
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(SideNav, { ...sideNav }) })
|
|
26780
26862
|
] });
|
|
26781
|
-
return /* @__PURE__ */ (0,
|
|
26863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { ...(0, import_runtime133.mergeProps)(void 0, {
|
|
26782
26864
|
[beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
|
|
26783
26865
|
}, {
|
|
26784
26866
|
display: "df",
|
|
26785
26867
|
flexDirection: "fdr",
|
|
26786
26868
|
width: "w100"
|
|
26787
26869
|
}), ...tid, children: [
|
|
26788
|
-
contrastRail ? /* @__PURE__ */ (0,
|
|
26789
|
-
/* @__PURE__ */ (0,
|
|
26870
|
+
contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(ContrastScope, { children: rail }) : rail,
|
|
26871
|
+
/* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { ...(0, import_runtime133.trussProps)({
|
|
26790
26872
|
display: "df",
|
|
26791
26873
|
flexDirection: "fdc",
|
|
26792
26874
|
flexGrow: "fg1",
|
|
@@ -26802,9 +26884,9 @@ function SideNavLayoutContent(props) {
|
|
|
26802
26884
|
}
|
|
26803
26885
|
|
|
26804
26886
|
// src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
|
|
26805
|
-
var
|
|
26806
|
-
var
|
|
26807
|
-
var
|
|
26887
|
+
var import_runtime134 = require("@homebound/truss/runtime");
|
|
26888
|
+
var import_jsx_runtime213 = require("react/jsx-runtime");
|
|
26889
|
+
var __maybeInc27 = (inc) => {
|
|
26808
26890
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
26809
26891
|
};
|
|
26810
26892
|
function EnvironmentBannerLayout(props) {
|
|
@@ -26819,35 +26901,35 @@ function EnvironmentBannerLayout(props) {
|
|
|
26819
26901
|
[beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
|
|
26820
26902
|
};
|
|
26821
26903
|
const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
|
|
26822
|
-
return /* @__PURE__ */ (0,
|
|
26904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { ...(0, import_runtime134.mergeProps)(void 0, style, {
|
|
26823
26905
|
display: "df",
|
|
26824
26906
|
flexDirection: "fdc",
|
|
26825
26907
|
width: "wfc",
|
|
26826
26908
|
minWidth: "mw100"
|
|
26827
26909
|
}), ...tid, children: [
|
|
26828
|
-
showBanner && environmentBanner && /* @__PURE__ */ (0,
|
|
26910
|
+
showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime134.mergeProps)(void 0, {
|
|
26829
26911
|
height: environmentBannerSizePx
|
|
26830
26912
|
}, {
|
|
26831
26913
|
flexShrink: "fs0",
|
|
26832
26914
|
width: "w100"
|
|
26833
|
-
}), children: /* @__PURE__ */ (0,
|
|
26915
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime134.trussProps)({
|
|
26834
26916
|
position: "fixed",
|
|
26835
26917
|
top: "top0",
|
|
26836
26918
|
left: "left0",
|
|
26837
26919
|
zIndex: ["z_var", {
|
|
26838
|
-
"--zIndex": (0,
|
|
26920
|
+
"--zIndex": (0, import_runtime134.maybeCssVar)(zIndices.environmentBanner)
|
|
26839
26921
|
}],
|
|
26840
26922
|
width: ["w_var", {
|
|
26841
|
-
"--width": (0,
|
|
26923
|
+
"--width": (0, import_runtime134.maybeCssVar)(__maybeInc27(innerWidth))
|
|
26842
26924
|
}]
|
|
26843
|
-
}), ...tid.bannerSticky, children: /* @__PURE__ */ (0,
|
|
26925
|
+
}), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
|
|
26844
26926
|
children
|
|
26845
26927
|
] }) }) });
|
|
26846
26928
|
}
|
|
26847
26929
|
|
|
26848
26930
|
// src/layouts/FormSectionLayout/FormSectionLayout.tsx
|
|
26849
|
-
var
|
|
26850
|
-
var
|
|
26931
|
+
var import_runtime135 = require("@homebound/truss/runtime");
|
|
26932
|
+
var import_jsx_runtime214 = require("react/jsx-runtime");
|
|
26851
26933
|
function FormSectionLayout(props) {
|
|
26852
26934
|
const {
|
|
26853
26935
|
title,
|
|
@@ -26857,14 +26939,14 @@ function FormSectionLayout(props) {
|
|
|
26857
26939
|
sections
|
|
26858
26940
|
} = props;
|
|
26859
26941
|
const tid = useTestIds(props, "formSectionLayout");
|
|
26860
|
-
return /* @__PURE__ */ (0,
|
|
26861
|
-
/* @__PURE__ */ (0,
|
|
26862
|
-
/* @__PURE__ */ (0,
|
|
26863
|
-
/* @__PURE__ */ (0,
|
|
26864
|
-
/* @__PURE__ */ (0,
|
|
26865
|
-
actions && /* @__PURE__ */ (0,
|
|
26942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { className: "df fdc gap8 w100 pt4 maxw_720px mla mra sm_pl2 sm_pr2", ...tid, children: [
|
|
26943
|
+
/* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { className: "df fdc gap3", children: [
|
|
26944
|
+
/* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { className: "df fdc jcsb gap_12px", children: [
|
|
26945
|
+
/* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { className: "df jcsb aic", children: [
|
|
26946
|
+
/* @__PURE__ */ (0, import_jsx_runtime214.jsx)("h1", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
|
|
26947
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(Button, { ...action }, `${action.label}`)) })
|
|
26866
26948
|
] }),
|
|
26867
|
-
description && /* @__PURE__ */ (0,
|
|
26949
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime135.trussProps)({
|
|
26868
26950
|
fontWeight: "fw4",
|
|
26869
26951
|
fontSize: "fz_14px",
|
|
26870
26952
|
lineHeight: "lh_20px",
|
|
@@ -26875,13 +26957,13 @@ function FormSectionLayout(props) {
|
|
|
26875
26957
|
] }),
|
|
26876
26958
|
initialFields
|
|
26877
26959
|
] }),
|
|
26878
|
-
sections && /* @__PURE__ */ (0,
|
|
26960
|
+
sections && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
|
|
26879
26961
|
] });
|
|
26880
26962
|
}
|
|
26881
26963
|
|
|
26882
26964
|
// src/layouts/NavbarLayout/NavbarLayout.tsx
|
|
26883
26965
|
var import_react155 = require("react");
|
|
26884
|
-
var
|
|
26966
|
+
var import_runtime136 = require("@homebound/truss/runtime");
|
|
26885
26967
|
|
|
26886
26968
|
// src/layouts/useAutoHideOnScroll.ts
|
|
26887
26969
|
var import_react152 = require("react");
|
|
@@ -26974,7 +27056,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
|
|
|
26974
27056
|
}
|
|
26975
27057
|
|
|
26976
27058
|
// src/layouts/useMeasuredHeight.ts
|
|
26977
|
-
var
|
|
27059
|
+
var import_utils179 = require("@react-aria/utils");
|
|
26978
27060
|
var import_react153 = require("react");
|
|
26979
27061
|
function useMeasuredHeight(ref, enabled) {
|
|
26980
27062
|
const [height, setHeight] = (0, import_react153.useState)(0);
|
|
@@ -26983,7 +27065,7 @@ function useMeasuredHeight(ref, enabled) {
|
|
|
26983
27065
|
const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
|
|
26984
27066
|
setHeight((prev) => prev === next ? prev : next);
|
|
26985
27067
|
}, [ref]);
|
|
26986
|
-
(0,
|
|
27068
|
+
(0, import_utils179.useResizeObserver)({ ref, onResize: syncElementHeight });
|
|
26987
27069
|
(0, import_react153.useLayoutEffect)(() => {
|
|
26988
27070
|
syncElementHeight();
|
|
26989
27071
|
}, [enabled, syncElementHeight]);
|
|
@@ -26992,18 +27074,18 @@ function useMeasuredHeight(ref, enabled) {
|
|
|
26992
27074
|
|
|
26993
27075
|
// src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
|
|
26994
27076
|
var import_react154 = require("react");
|
|
26995
|
-
var
|
|
27077
|
+
var import_jsx_runtime215 = require("react/jsx-runtime");
|
|
26996
27078
|
var NavbarLayoutHeightContext = (0, import_react154.createContext)(0);
|
|
26997
27079
|
function NavbarLayoutHeightProvider({ value, children }) {
|
|
26998
|
-
return /* @__PURE__ */ (0,
|
|
27080
|
+
return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
|
|
26999
27081
|
}
|
|
27000
27082
|
function useNavbarLayoutHeight() {
|
|
27001
27083
|
return (0, import_react154.useContext)(NavbarLayoutHeightContext);
|
|
27002
27084
|
}
|
|
27003
27085
|
|
|
27004
27086
|
// src/layouts/NavbarLayout/NavbarLayout.tsx
|
|
27005
|
-
var
|
|
27006
|
-
var
|
|
27087
|
+
var import_jsx_runtime216 = require("react/jsx-runtime");
|
|
27088
|
+
var __maybeInc28 = (inc) => {
|
|
27007
27089
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
27008
27090
|
};
|
|
27009
27091
|
function NavbarLayout(props) {
|
|
@@ -27031,10 +27113,10 @@ function NavbarLayout(props) {
|
|
|
27031
27113
|
position: "sticky",
|
|
27032
27114
|
left: "left0",
|
|
27033
27115
|
zIndex: ["z_var", {
|
|
27034
|
-
"--zIndex": (0,
|
|
27116
|
+
"--zIndex": (0, import_runtime136.maybeCssVar)(zIndices.navbar)
|
|
27035
27117
|
}],
|
|
27036
27118
|
width: ["w_var", {
|
|
27037
|
-
"--width": (0,
|
|
27119
|
+
"--width": (0, import_runtime136.maybeCssVar)(__maybeInc28(innerWidth))
|
|
27038
27120
|
}]
|
|
27039
27121
|
}
|
|
27040
27122
|
) : (
|
|
@@ -27043,10 +27125,10 @@ function NavbarLayout(props) {
|
|
|
27043
27125
|
position: "fixed",
|
|
27044
27126
|
left: "left0",
|
|
27045
27127
|
zIndex: ["z_var", {
|
|
27046
|
-
"--zIndex": (0,
|
|
27128
|
+
"--zIndex": (0, import_runtime136.maybeCssVar)(zIndices.navbar)
|
|
27047
27129
|
}],
|
|
27048
27130
|
width: ["w_var", {
|
|
27049
|
-
"--width": (0,
|
|
27131
|
+
"--width": (0, import_runtime136.maybeCssVar)(__maybeInc28(innerWidth))
|
|
27050
27132
|
}],
|
|
27051
27133
|
transition: "transitionTop"
|
|
27052
27134
|
}
|
|
@@ -27055,20 +27137,20 @@ function NavbarLayout(props) {
|
|
|
27055
27137
|
const innerStyle = autoHideState !== "static" ? {
|
|
27056
27138
|
top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
|
|
27057
27139
|
} : void 0;
|
|
27058
|
-
const navbarEl = (0, import_react155.useMemo)(() => /* @__PURE__ */ (0,
|
|
27059
|
-
return /* @__PURE__ */ (0,
|
|
27140
|
+
const navbarEl = (0, import_react155.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(Navbar, { ...navbar }), [navbar]);
|
|
27141
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("div", { ...(0, import_runtime136.mergeProps)(void 0, cssVars, {
|
|
27060
27142
|
display: "df",
|
|
27061
27143
|
flexDirection: "fdc",
|
|
27062
27144
|
width: "wfc",
|
|
27063
27145
|
minWidth: "mw100"
|
|
27064
27146
|
}), ...tid, children: [
|
|
27065
|
-
/* @__PURE__ */ (0,
|
|
27147
|
+
/* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { ref: spacerRef, ...(0, import_runtime136.mergeProps)(void 0, {
|
|
27066
27148
|
height: navHeight
|
|
27067
27149
|
}, {
|
|
27068
27150
|
flexShrink: "fs0",
|
|
27069
27151
|
width: "w100"
|
|
27070
|
-
}), children: /* @__PURE__ */ (0,
|
|
27071
|
-
/* @__PURE__ */ (0,
|
|
27152
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime136.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
|
|
27153
|
+
/* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
|
|
27072
27154
|
] }) }) });
|
|
27073
27155
|
}
|
|
27074
27156
|
|
|
@@ -27076,8 +27158,8 @@ function NavbarLayout(props) {
|
|
|
27076
27158
|
var import_react156 = require("react");
|
|
27077
27159
|
|
|
27078
27160
|
// src/components/Headers/BaseHeader.tsx
|
|
27079
|
-
var
|
|
27080
|
-
var
|
|
27161
|
+
var import_runtime137 = require("@homebound/truss/runtime");
|
|
27162
|
+
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
27081
27163
|
function BaseHeader(props) {
|
|
27082
27164
|
const {
|
|
27083
27165
|
title,
|
|
@@ -27089,7 +27171,7 @@ function BaseHeader(props) {
|
|
|
27089
27171
|
} = props;
|
|
27090
27172
|
const tid = useTestIds(otherProps, "header");
|
|
27091
27173
|
useDocumentTitle(title, documentTitleSuffix);
|
|
27092
|
-
return /* @__PURE__ */ (0,
|
|
27174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("header", { ...tid, ...(0, import_runtime137.trussProps)({
|
|
27093
27175
|
display: "df",
|
|
27094
27176
|
flexDirection: "fdc",
|
|
27095
27177
|
paddingTop: "pt3",
|
|
@@ -27103,7 +27185,7 @@ function BaseHeader(props) {
|
|
|
27103
27185
|
"--backgroundColor": "var(--b-surface)"
|
|
27104
27186
|
}]
|
|
27105
27187
|
}), children: [
|
|
27106
|
-
/* @__PURE__ */ (0,
|
|
27188
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { ...(0, import_runtime137.trussProps)({
|
|
27107
27189
|
...{
|
|
27108
27190
|
display: "df",
|
|
27109
27191
|
justifyContent: "jcsb",
|
|
@@ -27117,9 +27199,9 @@ function BaseHeader(props) {
|
|
|
27117
27199
|
} : {}
|
|
27118
27200
|
}
|
|
27119
27201
|
}), children: [
|
|
27120
|
-
/* @__PURE__ */ (0,
|
|
27121
|
-
breadcrumbs && /* @__PURE__ */ (0,
|
|
27122
|
-
/* @__PURE__ */ (0,
|
|
27202
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "mw0", children: [
|
|
27203
|
+
breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Breadcrumbs, { ...breadcrumbs }),
|
|
27204
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)("h1", { ...tid.title, ...(0, import_runtime137.trussProps)({
|
|
27123
27205
|
fontWeight: "fw6",
|
|
27124
27206
|
fontSize: "fz_20px",
|
|
27125
27207
|
lineHeight: "lh_28px",
|
|
@@ -27128,22 +27210,22 @@ function BaseHeader(props) {
|
|
|
27128
27210
|
}]
|
|
27129
27211
|
}), children: title })
|
|
27130
27212
|
] }),
|
|
27131
|
-
/* @__PURE__ */ (0,
|
|
27213
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "fs0", children: rightSlot })
|
|
27132
27214
|
] }),
|
|
27133
27215
|
bottomSlot
|
|
27134
27216
|
] });
|
|
27135
27217
|
}
|
|
27136
27218
|
|
|
27137
27219
|
// src/components/Headers/PageHeader.tsx
|
|
27138
|
-
var
|
|
27139
|
-
var
|
|
27220
|
+
var import_runtime138 = require("@homebound/truss/runtime");
|
|
27221
|
+
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
27140
27222
|
function PageHeader2(props) {
|
|
27141
27223
|
const {
|
|
27142
27224
|
tabs,
|
|
27143
27225
|
...otherProps
|
|
27144
27226
|
} = props;
|
|
27145
27227
|
const tid = useTestIds(otherProps, "header");
|
|
27146
|
-
return /* @__PURE__ */ (0,
|
|
27228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { ...(0, import_runtime138.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
|
|
27147
27229
|
}
|
|
27148
27230
|
|
|
27149
27231
|
// src/layouts/useBannerAndNavbarHeight.ts
|
|
@@ -27152,9 +27234,9 @@ function useBannerAndNavbarHeight() {
|
|
|
27152
27234
|
}
|
|
27153
27235
|
|
|
27154
27236
|
// src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
|
|
27155
|
-
var
|
|
27156
|
-
var
|
|
27157
|
-
var
|
|
27237
|
+
var import_runtime139 = require("@homebound/truss/runtime");
|
|
27238
|
+
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
27239
|
+
var __maybeInc29 = (inc) => {
|
|
27158
27240
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
27159
27241
|
};
|
|
27160
27242
|
function PageHeaderLayout(props) {
|
|
@@ -27184,43 +27266,43 @@ function PageHeaderLayout(props) {
|
|
|
27184
27266
|
const innerCss = autoHideState === "static" ? {
|
|
27185
27267
|
position: "sticky",
|
|
27186
27268
|
left: ["left_var", {
|
|
27187
|
-
"--left": (0,
|
|
27269
|
+
"--left": (0, import_runtime139.maybeCssVar)(__maybeInc29(headerLeft))
|
|
27188
27270
|
}],
|
|
27189
27271
|
width: ["w_var", {
|
|
27190
|
-
"--width": (0,
|
|
27272
|
+
"--width": (0, import_runtime139.maybeCssVar)(__maybeInc29(headerWidth))
|
|
27191
27273
|
}],
|
|
27192
27274
|
zIndex: ["z_var", {
|
|
27193
|
-
"--zIndex": (0,
|
|
27275
|
+
"--zIndex": (0, import_runtime139.maybeCssVar)(zIndices.pageStickyHeader)
|
|
27194
27276
|
}]
|
|
27195
27277
|
} : {
|
|
27196
27278
|
position: "fixed",
|
|
27197
27279
|
left: ["left_var", {
|
|
27198
|
-
"--left": (0,
|
|
27280
|
+
"--left": (0, import_runtime139.maybeCssVar)(__maybeInc29(headerLeft))
|
|
27199
27281
|
}],
|
|
27200
27282
|
width: ["w_var", {
|
|
27201
|
-
"--width": (0,
|
|
27283
|
+
"--width": (0, import_runtime139.maybeCssVar)(__maybeInc29(headerWidth))
|
|
27202
27284
|
}],
|
|
27203
27285
|
zIndex: ["z_var", {
|
|
27204
|
-
"--zIndex": (0,
|
|
27286
|
+
"--zIndex": (0, import_runtime139.maybeCssVar)(zIndices.pageStickyHeader)
|
|
27205
27287
|
}],
|
|
27206
27288
|
transition: "transitionTop"
|
|
27207
27289
|
};
|
|
27208
27290
|
const innerStyle = autoHideState !== "static" ? {
|
|
27209
27291
|
top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
|
|
27210
27292
|
} : void 0;
|
|
27211
|
-
const pageHeaderEl = (0, import_react156.useMemo)(() => /* @__PURE__ */ (0,
|
|
27212
|
-
return /* @__PURE__ */ (0,
|
|
27293
|
+
const pageHeaderEl = (0, import_react156.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
|
|
27294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { ...(0, import_runtime139.mergeProps)(void 0, cssVars, {
|
|
27213
27295
|
display: "df",
|
|
27214
27296
|
flexDirection: "fdc",
|
|
27215
27297
|
width: "w100"
|
|
27216
27298
|
}), ...tid, children: [
|
|
27217
|
-
/* @__PURE__ */ (0,
|
|
27299
|
+
/* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ref: spacerRef, ...(0, import_runtime139.mergeProps)(void 0, {
|
|
27218
27300
|
height: headerHeight
|
|
27219
27301
|
}, {
|
|
27220
27302
|
flexShrink: "fs0",
|
|
27221
27303
|
width: "w100"
|
|
27222
|
-
}), children: /* @__PURE__ */ (0,
|
|
27223
|
-
/* @__PURE__ */ (0,
|
|
27304
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime139.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
|
|
27305
|
+
/* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
|
|
27224
27306
|
] }) });
|
|
27225
27307
|
}
|
|
27226
27308
|
|
|
@@ -27228,17 +27310,17 @@ function PageHeaderLayout(props) {
|
|
|
27228
27310
|
var import_react158 = require("react");
|
|
27229
27311
|
|
|
27230
27312
|
// src/components/Headers/WorkflowHeader.tsx
|
|
27231
|
-
var
|
|
27313
|
+
var import_jsx_runtime220 = require("react/jsx-runtime");
|
|
27232
27314
|
function WorkflowHeader(props) {
|
|
27233
27315
|
const { stepperTabs, ...otherProps } = props;
|
|
27234
27316
|
const tid = useTestIds(otherProps, "header");
|
|
27235
|
-
return /* @__PURE__ */ (0,
|
|
27317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
|
|
27236
27318
|
}
|
|
27237
27319
|
|
|
27238
27320
|
// src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
|
|
27239
27321
|
var import_react157 = require("react");
|
|
27240
27322
|
var import_react_router_dom9 = require("react-router-dom");
|
|
27241
|
-
var
|
|
27323
|
+
var import_jsx_runtime221 = require("react/jsx-runtime");
|
|
27242
27324
|
function useUnsavedChangesGuard(options) {
|
|
27243
27325
|
const { isDirty, onCancel } = options;
|
|
27244
27326
|
const { openModal } = useModal();
|
|
@@ -27261,7 +27343,7 @@ function useUnsavedChangesGuard(options) {
|
|
|
27261
27343
|
}
|
|
27262
27344
|
openModal({
|
|
27263
27345
|
allowClosing: false,
|
|
27264
|
-
content: /* @__PURE__ */ (0,
|
|
27346
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
|
|
27265
27347
|
});
|
|
27266
27348
|
};
|
|
27267
27349
|
const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
|
|
@@ -27273,7 +27355,7 @@ function UnsavedChangesNavigationModal(props) {
|
|
|
27273
27355
|
(0, import_react157.useEffect)(() => {
|
|
27274
27356
|
openModal({
|
|
27275
27357
|
allowClosing: false,
|
|
27276
|
-
content: /* @__PURE__ */ (0,
|
|
27358
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
|
|
27277
27359
|
});
|
|
27278
27360
|
return () => closeModal();
|
|
27279
27361
|
}, []);
|
|
@@ -27281,7 +27363,7 @@ function UnsavedChangesNavigationModal(props) {
|
|
|
27281
27363
|
}
|
|
27282
27364
|
|
|
27283
27365
|
// src/layouts/WorkflowLayout/WorkflowActions.tsx
|
|
27284
|
-
var
|
|
27366
|
+
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
27285
27367
|
function WorkflowActions(props) {
|
|
27286
27368
|
const {
|
|
27287
27369
|
isFirstStep,
|
|
@@ -27295,20 +27377,20 @@ function WorkflowActions(props) {
|
|
|
27295
27377
|
onContinue,
|
|
27296
27378
|
primaryDisabled
|
|
27297
27379
|
} = props;
|
|
27298
|
-
return /* @__PURE__ */ (0,
|
|
27299
|
-
/* @__PURE__ */ (0,
|
|
27300
|
-
/* @__PURE__ */ (0,
|
|
27301
|
-
/* @__PURE__ */ (0,
|
|
27302
|
-
onSaveAndExit && /* @__PURE__ */ (0,
|
|
27303
|
-
isLastStep ? /* @__PURE__ */ (0,
|
|
27380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
|
|
27381
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
|
|
27382
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic gap1", children: [
|
|
27383
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
|
|
27384
|
+
onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
|
|
27385
|
+
isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
|
|
27304
27386
|
] })
|
|
27305
27387
|
] });
|
|
27306
27388
|
}
|
|
27307
27389
|
|
|
27308
27390
|
// src/layouts/WorkflowLayout/WorkflowLayout.tsx
|
|
27309
|
-
var
|
|
27310
|
-
var
|
|
27311
|
-
var
|
|
27391
|
+
var import_runtime140 = require("@homebound/truss/runtime");
|
|
27392
|
+
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
27393
|
+
var __maybeInc30 = (inc) => {
|
|
27312
27394
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
27313
27395
|
};
|
|
27314
27396
|
function WorkflowLayout(props) {
|
|
@@ -27349,7 +27431,7 @@ function WorkflowLayout(props) {
|
|
|
27349
27431
|
const isFirstStep = currentIndex <= 0;
|
|
27350
27432
|
const isLastStep = currentIndex === stepTabs.length - 1;
|
|
27351
27433
|
const activeStep = stepTabs[currentIndex];
|
|
27352
|
-
const buttons = /* @__PURE__ */ (0,
|
|
27434
|
+
const buttons = /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
|
|
27353
27435
|
const onContinue = activeStep?.onContinue;
|
|
27354
27436
|
if (onContinue) {
|
|
27355
27437
|
const allowed = await onContinue();
|
|
@@ -27370,7 +27452,7 @@ function WorkflowLayout(props) {
|
|
|
27370
27452
|
}
|
|
27371
27453
|
};
|
|
27372
27454
|
}, [showFooter]);
|
|
27373
|
-
const headerEl = /* @__PURE__ */ (0,
|
|
27455
|
+
const headerEl = /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
|
|
27374
27456
|
WorkflowHeader,
|
|
27375
27457
|
{
|
|
27376
27458
|
...headerProps,
|
|
@@ -27383,44 +27465,44 @@ function WorkflowLayout(props) {
|
|
|
27383
27465
|
}
|
|
27384
27466
|
}
|
|
27385
27467
|
);
|
|
27386
|
-
return /* @__PURE__ */ (0,
|
|
27387
|
-
/* @__PURE__ */ (0,
|
|
27468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(DocumentScrollLayoutProvider, { children: [
|
|
27469
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ...(0, import_runtime140.mergeProps)(void 0, cssVars, {
|
|
27388
27470
|
display: "df",
|
|
27389
27471
|
flexDirection: "fdc",
|
|
27390
27472
|
width: "w100"
|
|
27391
27473
|
}), ...tid, children: [
|
|
27392
|
-
/* @__PURE__ */ (0,
|
|
27474
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime140.trussProps)({
|
|
27393
27475
|
position: "sticky",
|
|
27394
27476
|
left: "left0",
|
|
27395
27477
|
width: ["w_var", {
|
|
27396
|
-
"--width": (0,
|
|
27478
|
+
"--width": (0, import_runtime140.maybeCssVar)(__maybeInc30(headerWidth))
|
|
27397
27479
|
}],
|
|
27398
27480
|
zIndex: ["z_var", {
|
|
27399
|
-
"--zIndex": (0,
|
|
27481
|
+
"--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.pageStickyHeader)
|
|
27400
27482
|
}],
|
|
27401
27483
|
top: ["top_var", {
|
|
27402
|
-
"--top": (0,
|
|
27484
|
+
"--top": (0, import_runtime140.maybeCssVar)(__maybeInc30(outerTop))
|
|
27403
27485
|
}]
|
|
27404
27486
|
}), ...tid.header, children: headerEl }),
|
|
27405
|
-
/* @__PURE__ */ (0,
|
|
27406
|
-
showFooter && /* @__PURE__ */ (0,
|
|
27487
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
|
|
27488
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ...(0, import_runtime140.trussProps)({
|
|
27407
27489
|
flexShrink: "fs0",
|
|
27408
27490
|
width: "w100",
|
|
27409
27491
|
height: ["h_var", {
|
|
27410
27492
|
"--height": `${mobileFooterHeightPx}px`
|
|
27411
27493
|
}]
|
|
27412
|
-
}), children: /* @__PURE__ */ (0,
|
|
27494
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ...(0, import_runtime140.trussProps)({
|
|
27413
27495
|
...{
|
|
27414
27496
|
position: "fixed",
|
|
27415
27497
|
bottom: "bottom0",
|
|
27416
27498
|
width: ["w_var", {
|
|
27417
|
-
"--width": (0,
|
|
27499
|
+
"--width": (0, import_runtime140.maybeCssVar)(__maybeInc30(headerWidth))
|
|
27418
27500
|
}],
|
|
27419
27501
|
height: ["h_var", {
|
|
27420
27502
|
"--height": `${mobileFooterHeightPx}px`
|
|
27421
27503
|
}],
|
|
27422
27504
|
zIndex: ["z_var", {
|
|
27423
|
-
"--zIndex": (0,
|
|
27505
|
+
"--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.pageStickyFooter)
|
|
27424
27506
|
}],
|
|
27425
27507
|
display: "df",
|
|
27426
27508
|
alignItems: "aic",
|
|
@@ -27438,7 +27520,7 @@ function WorkflowLayout(props) {
|
|
|
27438
27520
|
...pageContentPaddingX
|
|
27439
27521
|
}), ...tid.footer, children: buttons }) })
|
|
27440
27522
|
] }),
|
|
27441
|
-
navigationBlocker && /* @__PURE__ */ (0,
|
|
27523
|
+
navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
|
|
27442
27524
|
] });
|
|
27443
27525
|
}
|
|
27444
27526
|
var mobileFooterHeightPx = 80;
|
|
@@ -27463,7 +27545,9 @@ function getInitialStep(steps, defaultStep) {
|
|
|
27463
27545
|
AvatarGroup,
|
|
27464
27546
|
Banner,
|
|
27465
27547
|
BaseFilter,
|
|
27548
|
+
BeamLogo,
|
|
27466
27549
|
BeamProvider,
|
|
27550
|
+
BlueprintAiLogo,
|
|
27467
27551
|
BoundCheckboxField,
|
|
27468
27552
|
BoundCheckboxGroupField,
|
|
27469
27553
|
BoundChipSelectField,
|