@homebound/beam 4.9.2 → 4.10.0

package/dist/index.cjs

@@ -11189,6 +11189,8 @@ function TextFieldBase(props) {
   const compactFieldHeight = 32;
   const showProposal = proposedValue !== void 0;
   const showOriginal = originalValue !== void 0 && originalValue !== "";
+  const originalBelow = showOriginal && !inputProps.readOnly && !compound ? originalValue : void 0;
+  const showErrorAndHelper = alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly;
   const [bgColor, hoverBgColor, disabledBgColor] = showProposal ? ["--b-ai-field-bg" /* AiFieldBg */, "rgba(237, 233, 254, 1)" /* Purple100 */, "--b-field-bg-disabled" /* FieldBgDisabled */] : inputStylePalette ? getInputStylePalette(inputStylePalette) : borderOnHover ? (
     // Use transparent backgrounds to blend with the table row hover color
     ["rgba(0,0,0,0)" /* Transparent */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(247, 245, 245, 1)" /* Gray100 */]
@@ -11514,21 +11516,6 @@ function TextFieldBase(props) {
             children: [
               labelStyle === "inline" && label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(InlineLabel, { multiline, labelProps, label, ...tid.label }),
               startAdornment && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "df aic asc fs0 br4 pr1", children: startAdornment }),
-              showOriginal && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { ...(0, import_runtime31.trussProps)({
-                display: "df",
-                alignItems: "aic",
-                flexShrink: "fs0",
-                paddingRight: "pr1",
-                textDecoration: "tdlt",
-                color: ["color_var", {
-                  "--color": "var(--b-on-surface-muted)"
-                }],
-                ...multiline ? {
-                  alignSelf: "asfs",
-                  paddingTop: "pt_11px",
-                  paddingBottom: "pb_11px"
-                } : {}
-              }), ...tid.originalValue, children: originalValue }),
               unfocusedPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 "div",
                 {
@@ -11578,18 +11565,40 @@ function TextFieldBase(props) {
           }
         )
       }),
-      labelStyle !== "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-        errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-        helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HelperText, { helperText, ...tid.helperText })
+      labelStyle !== "left" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        originalBelow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+        showErrorAndHelper && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HelperText, { helperText, ...tid.helperText })
+        ] })
       ] })
     ] }),
-    labelStyle === "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly && (errorMsg && !errorInTooltip || helperText)) && // Reduces the margin between the error/helper text and input field
+    labelStyle === "left" && (originalBelow || alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly && (errorMsg && !errorInTooltip || helperText)) && // Reduces the margin between the error/helper text and input field
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt_neg8px", children: [
-      errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HelperText, { helperText, ...tid.helperText })
+      originalBelow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+      showErrorAndHelper && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HelperText, { helperText, ...tid.helperText })
+      ] })
     ] })
   ] });
 }
+function OriginalValue(props) {
+  const {
+    originalValue,
+    ...others
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...(0, import_runtime31.trussProps)({
+    color: ["color_var", {
+      "--color": "var(--b-text-helper)"
+    }],
+    fontWeight: "fw4",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
+    marginTop: "mt_4px",
+    textDecoration: "tdlt"
+  }), ...others, children: originalValue });
+}
 function getInputStylePalette(inputStylePalette) {
   switch (inputStylePalette) {
     case "success":