@homebound/beam 4.32.0 → 4.33.0

package/dist/index.d.cts

@@ -8185,7 +8185,7 @@ type EntityLockupProps = {
     description?: ReactNode;
     /** Trailing content aligned to the right, e.g. a Tag and price. */
     right?: ReactNode;
-    /** Smaller variant for dense lists, e.g. sidebars. */
+    /** Forces the compact layout at any width, e.g. in sidebars. It applies anyway when the lockup is 400px wide or less. */
     compact?: boolean;
 };
 /** Image thumbnail beside a title and description, identifying an entity such as a product or option. */

package/dist/index.d.ts

@@ -8185,7 +8185,7 @@ type EntityLockupProps = {
     description?: ReactNode;
     /** Trailing content aligned to the right, e.g. a Tag and price. */
     right?: ReactNode;
-    /** Smaller variant for dense lists, e.g. sidebars. */
+    /** Forces the compact layout at any width, e.g. in sidebars. It applies anyway when the lockup is 400px wide or less. */
     compact?: boolean;
 };
 /** Image thumbnail beside a title and description, identifying an entity such as a product or option. */

package/dist/index.js

@@ -16826,103 +16826,105 @@ function EntityLockup(props) {
   } = props;
   const tid = useTestIds(props, "entityLockup");
   const styles = compact ? compactStyles : defaultStyles;
-  return /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.container), ...tid, children: [
-    /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.image), children: /* @__PURE__ */ jsx92("img", { src: imgSrc, alt: title, loading: "lazy", className: "w100 h100 obf_cover db", ...tid.image }) }),
-    /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.body), children: [
-      /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.text), children: [
-        /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.heading), children: [
-          isDefined(eyebrow) && /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.eyebrow), ...tid.eyebrow, children: eyebrow }),
-          /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.title), ...tid.title, children: title })
+  return (
+    // `defaultStyles` query this container's width to switch to compact.
+    /* @__PURE__ */ jsx92("div", { className: "w100 mw0 ctis cn_entityLockup", ...tid, children: /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.container), children: [
+      /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.image), children: /* @__PURE__ */ jsx92("img", { src: imgSrc, alt: title, loading: "lazy", className: "w100 h100 obf_cover db", ...tid.image }) }),
+      /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.body), children: [
+        /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.text), children: [
+          /* @__PURE__ */ jsxs57("div", { ...trussProps59(styles.heading), children: [
+            isDefined(eyebrow) && /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.eyebrow), ...tid.eyebrow, children: eyebrow }),
+            /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.title), ...tid.title, children: title })
+          ] }),
+          isDefined(description) && /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.description), ...tid.description, children: description })
         ] }),
-        isDefined(description) && /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.description), ...tid.description, children: description })
-      ] }),
-      isDefined(right) && /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.right), ...tid.right, children: right })
-    ] })
-  ] });
+        isDefined(right) && /* @__PURE__ */ jsx92("div", { ...trussProps59(styles.right), ...tid.right, children: right })
+      ] })
+    ] }) })
+  );
 }
 var defaultStyles = {
   container: {
     display: "df",
     alignItems: "aifs",
-    gap: "g_2"
+    gap: "g_2 container_entityLockup_max_width_400px_g_12px"
   },
   image: {
     flexShrink: "fs0",
-    height: "h_96px",
-    width: "w_96px",
+    height: "h_96px container_entityLockup_max_width_400px_h_62px",
+    width: "w_96px container_entityLockup_max_width_400px_w_62px",
     borderRadius: "br8",
     borderStyle: "bss",
     borderWidth: "bw1",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-field-border-default)"
+    borderColor: ["bc_var container_entityLockup_max_width_400px_bc_var", {
+      "--borderColor": "var(--b-field-border-default)",
+      "--container_entityLockup_max_width_400px_borderColor": "var(--b-surface-separator)"
     }],
     overflow: "oh",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
     }]
   },
-  // On small screens, `right` moves under the description so the text keeps its width.
   body: {
     display: "df",
     flexGrow: "fg1",
     minWidth: "mw0",
-    gap: "g_2 sm_g_1",
-    flexDirection: "sm_fdc"
+    gap: "g_2 container_entityLockup_max_width_400px_g_12px",
+    alignSelf: "container_entityLockup_max_width_400px_asStretch"
   },
   text: {
     display: "df",
     flexDirection: "fdc",
     minWidth: "mw0",
     flexGrow: "fg1",
-    gap: "g_1"
+    gap: "g_1 container_entityLockup_max_width_400px_g_2px",
+    paddingTop: "container_entityLockup_max_width_400px_pt_4px"
   },
   heading: {
     display: "df",
     flexDirection: "fdc",
-    gap: "g_2px"
+    gap: "g_2px container_entityLockup_max_width_400px_g_0"
   },
   eyebrow: {
-    fontWeight: "fw4",
-    fontSize: "fz_14px",
-    lineHeight: "lh_20px",
+    fontWeight: "fw4 container_entityLockup_max_width_400px_fw4",
+    fontSize: "fz_14px container_entityLockup_max_width_400px_fz_12px",
+    lineHeight: "lh_20px container_entityLockup_max_width_400px_lh_16px",
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }]
   },
   title: {
-    fontWeight: "fw6",
-    fontSize: "fz_14px",
-    lineHeight: "lh_20px",
+    fontWeight: "fw6 container_entityLockup_max_width_400px_fw6",
+    fontSize: "fz_14px container_entityLockup_max_width_400px_fz_12px",
+    lineHeight: "lh_20px container_entityLockup_max_width_400px_lh_16px",
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }]
   },
   description: {
-    fontWeight: "fw4",
-    fontSize: "fz_12px",
-    lineHeight: "lh_16px",
+    fontWeight: "fw4 container_entityLockup_max_width_400px_fw4",
+    fontSize: "fz_12px container_entityLockup_max_width_400px_fz_10px",
+    lineHeight: "lh_16px container_entityLockup_max_width_400px_lh_14px",
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }]
   },
-  // Capped at half the row so wide content can't squeeze the text to nothing; on small screens it gets its own row.
-  // A lone child (fewer than two elements) stays right-aligned instead of falling to the start under `jcsb`.
+  // Capped at half the row so wide content can't squeeze the text to nothing.
   right: {
     flexShrink: "fs0",
-    maxWidth: "maxw50 sm_maxw_none",
+    maxWidth: "maxw50",
     display: "df",
-    flexDirection: "fdc sm_fdr",
-    alignItems: "aife sm_aic",
+    flexDirection: "fdc",
+    alignItems: "aife",
     gap: "g_6px",
-    alignSelf: "asfs sm_asStretch",
-    textAlign: "tar",
-    justifyContent: "sm_jcsb sm_n_has_nth_child_2_jcfe"
+    alignSelf: "asfs",
+    textAlign: "tar"
   }
 };
 var compactStyles = {
   container: {
     display: "df",
-    alignItems: "aic",
+    alignItems: "aifs",
     gap: "g_12px"
   },
   image: {