@homebound/beam 3.0.0-alpha.8 → 3.0.0-alpha.9

package/dist/index.cjs

@@ -20592,20 +20592,49 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react110.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
+var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime157 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
-  const { children, minColumnWidth, gap, columns } = props;
-  const { gridStyles } = useResponsiveGrid({ minColumnWidth, gap, columns });
-  const config = (0, import_react111.useMemo)(() => ({ minColumnWidth, gap, columns }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { css: { ...gridStyles }, children }) });
+  const {
+    children,
+    minColumnWidth,
+    gap,
+    columns
+  } = props;
+  const {
+    gridStyles
+  } = useResponsiveGrid({
+    minColumnWidth,
+    gap,
+    columns
+  });
+  const config = (0, import_react111.useMemo)(() => ({
+    minColumnWidth,
+    gap,
+    columns
+  }), [minColumnWidth, gap, columns]);
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime83.trussProps)({
+    ...gridStyles
+  }), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
+var import_runtime84 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
 function ResponsiveGridItem(props) {
-  const { colSpan, children } = props;
-  const { gridItemProps, gridItemStyles } = useResponsiveGridItem({ colSpan });
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...gridItemProps, css: { ...gridItemStyles }, children });
+  const {
+    colSpan,
+    children
+  } = props;
+  const {
+    gridItemProps,
+    gridItemStyles
+  } = useResponsiveGridItem({
+    colSpan
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...gridItemProps, ...(0, import_runtime84.trussProps)({
+    ...gridItemStyles
+  }), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
@@ -20757,7 +20786,7 @@ function HbSpinnerProvider({
 // src/components/MaxLines.tsx
 var import_utils126 = require("@react-aria/utils");
 var import_react115 = require("react");
-var import_runtime83 = require("@homebound/truss/runtime");
+var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -20782,7 +20811,7 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ref: elRef, ...(0, import_runtime83.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ref: elRef, ...(0, import_runtime85.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maxLines
@@ -20800,7 +20829,7 @@ function MaxLines({
 // src/components/ScrollShadows.tsx
 var import_utils127 = require("@react-aria/utils");
 var import_react116 = require("react");
-var import_runtime84 = require("@homebound/truss/runtime");
+var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -20889,7 +20918,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ...(0, import_runtime84.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ...(0, import_runtime86.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": !horizontal ? "column" : "row"
@@ -20905,7 +20934,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime84.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -20913,7 +20942,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime84.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -20921,7 +20950,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime84.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -20994,7 +21023,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react118 = require("react");
 var import_react_aria51 = require("react-aria");
-var import_runtime85 = require("@homebound/truss/runtime");
+var import_runtime87 = require("@homebound/truss/runtime");
 var import_jsx_runtime162 = require("react/jsx-runtime");
 var import_react119 = require("react");
 var __maybeInc13 = (inc) => {
@@ -21015,7 +21044,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("ol", { ...(0, import_runtime85.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("ol", { ...(0, import_runtime87.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -21025,7 +21054,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react119.createElement)("li", { ...(0, import_runtime85.trussProps)({
+      return /* @__PURE__ */ (0, import_react119.createElement)("li", { ...(0, import_runtime87.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -21037,7 +21066,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime85.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime87.trussProps)({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -21048,7 +21077,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime85.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime87.trussProps)({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -21089,7 +21118,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime85.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime87.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -21157,7 +21186,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime85.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime87.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -21172,7 +21201,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom5 = require("react-dom");
-var import_runtime86 = require("@homebound/truss/runtime");
+var import_runtime88 = require("@homebound/truss/runtime");
 var import_jsx_runtime163 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -21198,7 +21227,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime86.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime88.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -21378,7 +21407,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime87 = require("@homebound/truss/runtime");
+var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -21427,7 +21456,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_framer_motion4.motion.div, { ...(0, import_runtime87.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_framer_motion4.motion.div, { ...(0, import_runtime89.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -21468,7 +21497,7 @@ var import_react121 = require("react");
 var import_react_aria52 = require("react-aria");
 var import_react_router2 = require("react-router");
 var import_react_router_dom5 = require("react-router-dom");
-var import_runtime88 = require("@homebound/truss/runtime");
+var import_runtime90 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -21501,7 +21530,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime88.trussProps)(contentXss), children: isRouteTab(selectedTab) ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_router2.Route, { path: selectedTab.path, render: selectedTab.render }) : selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime90.trussProps)(contentXss), children: isRouteTab(selectedTab) ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_router2.Route, { path: selectedTab.path, render: selectedTab.render }) : selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -21540,7 +21569,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime90.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -21604,7 +21633,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime88.trussProps)({
+    ...(0, import_runtime90.trussProps)({
       ...baseStyles5,
       ...active && activeStyles4,
       ...isDisabled && disabledStyles4,