@homebound/beam 4.16.1 → 4.18.0

package/dist/index.cjs

@@ -11727,6 +11727,7 @@ function TextFieldBase(props) {
   } = fieldProps ?? {};
   const {
     label,
+    tooltip,
     required,
     labelProps,
     inputProps,
@@ -11748,7 +11749,6 @@ function TextFieldBase(props) {
     borderOnHover = fieldProps?.borderOnHover ?? false,
     textAreaMinHeight = 96,
     clearable = false,
-    tooltip,
     visuallyDisabled = fieldProps?.visuallyDisabled ?? true,
     errorInTooltip = fieldProps?.errorInTooltip ?? false,
     hideErrorMessage = false,
@@ -11769,6 +11769,9 @@ function TextFieldBase(props) {
     forceFocus = false,
     forceHover = false
   } = internalProps;
+  const hasVisibleLabel = !!label && labelStyle !== "inline" && labelStyle !== "hidden" && !compound;
+  const isInteractive = !inputProps.disabled && !inputProps.readOnly;
+  const tooltipLocation = hasVisibleLabel ? "label" : !isInteractive ? "field" : void 0;
   const errorMessageId = `${inputProps.id}-error`;
   const labelSuffix = useLabelSuffix(required, inputProps.readOnly);
   const tid = useTestIds(props, defaultTestId(label));
@@ -12060,9 +12063,9 @@ function TextFieldBase(props) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...(0, import_runtime31.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
-      label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, ...tid.label }),
+      label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, tooltip: tooltipLocation === "label" ? tooltip : void 0, ...tid.label }),
       maybeTooltip({
-        title: tooltip,
+        title: tooltipLocation === "field" ? tooltip : void 0,
         placement: "top",
         children: inputProps.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...(0, import_runtime31.trussProps)({
           // Use input wrapper to get common styles, but then we need to override some
@@ -13525,6 +13528,27 @@ function getVariantStyles(variant, type) {
       }
     };
   }
+  if (variant === "bold") {
+    return {
+      background: {
+        ...getBoldBackground(type),
+        ...{
+          color: "white"
+        }
+      },
+      iconColor: "rgba(255, 255, 255, 1)" /* White */,
+      typography: {
+        fontWeight: "fw6",
+        fontSize: "fz_10px",
+        lineHeight: "lh_14px",
+        textTransform: "ttu"
+      },
+      padding: {
+        paddingLeft: "pl_6px",
+        paddingRight: "pr_6px"
+      }
+    };
+  }
   return {
     ...getPrimaryStyles(type),
     typography: {
@@ -13539,6 +13563,38 @@ function getVariantStyles(variant, type) {
     }
   };
 }
+function getBoldBackground(type) {
+  switch (type) {
+    case "info":
+      return {
+        backgroundColor: "bgBlue600"
+      };
+    case "update":
+      return {
+        backgroundColor: "bgYellow600"
+      };
+    case "warning":
+      return {
+        backgroundColor: "bgOrange600"
+      };
+    case "error":
+      return {
+        backgroundColor: "bgRed600"
+      };
+    case "success":
+      return {
+        backgroundColor: "bgGreen600"
+      };
+    case "ai":
+      return {
+        backgroundColor: "bgPurple600"
+      };
+    default:
+      return {
+        backgroundColor: "bgGray600"
+      };
+  }
+}
 function getPrimaryStyles(type) {
   switch (type) {
     case "info":
@@ -16519,9 +16575,9 @@ function Card(props) {
       icon: "verticalDots",
       color: isList ? "--b-on-surface-muted" /* OnSurfaceMuted */ : "--b-on-primary" /* OnPrimary */
     }, items: buttonMenuItems }) }),
-    tag && !isList && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "absolute l_1 tp_4px", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
+    tag && !isList && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "absolute l_1 tp_4px", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Tag, { type: tag.type, variant: tag.variant, text: tag.text, ...tid.tag }) }),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "df fdc aifs g_1", children: [
-      tag && isList && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag }),
+      tag && isList && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Tag, { type: tag.type, variant: tag.variant, text: tag.text, ...tid.tag }),
       /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime61.trussProps)({
           fontWeight: "fw6",
@@ -19295,7 +19351,7 @@ function TreeSelectFieldBase(props) {
       maxWidth: "maxw100"
     } : {}
   }), ref: comboBoxRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ComboBoxInput, { ...otherProps, fullWidth, labelStyle, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue, getOptionLabel, borderless, tooltip: resolveTooltip(disabled, void 0, readOnly), resetField, nothingSelectedText, isTree: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ComboBoxInput, { ...otherProps, fullWidth, labelStyle, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue, getOptionLabel, borderless, tooltip: resolveTooltip(disabled, props.tooltip, readOnly), resetField, nothingSelectedText, isTree: true }),
     state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       Popover,
       {
@@ -19544,6 +19600,7 @@ function ComboBoxBase(props) {
     onAddNew,
     autoSort = true,
     hideChips = false,
+    tooltip,
     ...otherProps
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
@@ -19776,7 +19833,7 @@ function ComboBoxBase(props) {
       maxWidth: "maxw100"
     } : {}
   }), ref: comboBoxRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ComboBoxInput, { ...otherProps, inputStylePalette, fullWidth, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions, getOptionValue, getOptionLabel, nothingSelectedText, borderless, tooltip: resolveTooltip(disabled, void 0, readOnly), resetField, hideChips, ...proposalProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ComboBoxInput, { ...otherProps, inputStylePalette, fullWidth, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions, getOptionValue, getOptionLabel, nothingSelectedText, borderless, tooltip: resolveTooltip(disabled, tooltip, readOnly), resetField, hideChips, ...proposalProps }),
     state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       Popover,
       {
@@ -20162,6 +20219,7 @@ function InlineFeedbackBanner(props) {
   const {
     type,
     tagText,
+    tagVariant,
     description,
     actions = []
   } = props;
@@ -20174,10 +20232,12 @@ function InlineFeedbackBanner(props) {
   const tid = useTestIds(props, "inlineFeedbackBanner");
   const tagProps = tagText ? {
     type: tagType,
+    variant: tagVariant,
     icon,
     text: tagText
   } : {
     type: tagType,
+    variant: tagVariant,
     icon,
     text: fallbackTagText,
     iconOnly: true
@@ -20450,6 +20510,7 @@ var import_jsx_runtime116 = require("react/jsx-runtime");
 function LabeledGroupField(props) {
   const {
     label,
+    tooltip,
     labelStyle,
     labelProps,
     groupProps,
@@ -20463,7 +20524,7 @@ function LabeledGroupField(props) {
   } = props;
   const isHiddenLabel = labelStyle === "hidden";
   const isLeftLabel = labelStyle === "left";
-  const labelElement = /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: isHiddenLabel, inline: isLeftLabel });
+  const labelElement = /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, tooltip, hidden: isHiddenLabel, inline: isLeftLabel });
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { ...groupProps, ...(0, import_runtime87.trussProps)({
     width: "w100",
     ...isLeftLabel ? {
@@ -20491,6 +20552,7 @@ function CheckboxGroup(props) {
   const {
     options,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     errorMsg,
@@ -20510,7 +20572,7 @@ function CheckboxGroup(props) {
   } = (0, import_react_aria39.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, defaultTestId(label));
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { ...(0, import_runtime88.trussProps)({
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": (0, import_runtime88.maybeCssVar)(`repeat(${columns}, auto)`)
@@ -20741,6 +20803,7 @@ var import_jsx_runtime121 = require("react/jsx-runtime");
 function DateFieldBase(props) {
   const {
     label,
+    tooltip,
     disabled,
     required,
     value,
@@ -20933,7 +20996,7 @@ function DateFieldBase(props) {
         },
         endAdornment: !iconLeft && EndFieldButtons,
         startAdornment: !hideCalendarIcon && iconLeft && calendarButton,
-        tooltip: resolveTooltip(disabled, void 0, readOnly),
+        tooltip: resolveTooltip(disabled, tooltip, readOnly),
         ...others
       }
     ),
@@ -21148,6 +21211,7 @@ function MultiLineSelectField(props) {
     getOptionValue = (opt) => opt.id,
     getOptionLabel = (opt) => opt.name,
     labelStyle,
+    tooltip,
     ...otherProps
   } = props;
   const tid = useTestIds(props, "");
@@ -21163,7 +21227,7 @@ function MultiLineSelectField(props) {
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Label, { ...tid.label, label: props.label }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Label, { ...tid.label, label: props.label, tooltip }) }),
     /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { ...(0, import_runtime91.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
@@ -21739,6 +21803,7 @@ function MultiSelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     options,
@@ -21773,7 +21838,7 @@ function MultiSelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime98.trussProps)(getSelectCardOptionsCss({
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime98.trussProps)(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -21987,6 +22052,7 @@ function NumberField(props) {
     readOnly,
     type,
     label,
+    tooltip,
     onBlur,
     onFocus,
     errorMsg,
@@ -22146,7 +22212,7 @@ function NumberField(props) {
       onFocus,
       errorMsg,
       helperText,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       ...proposalProps,
       ...otherProps
     }
@@ -22229,6 +22295,7 @@ function RadioGroupField(props) {
     errorMsg,
     helperText,
     layout = "vertical",
+    tooltip,
     ...otherProps
   } = props;
   const name = (0, import_react99.useMemo)(() => `radio-group-${++nextNameId}`, []);
@@ -22262,7 +22329,7 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, tooltip, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime100.trussProps)({
           display: "df",
@@ -22564,7 +22631,7 @@ function RichTextFieldImpl(props) {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { labelProps: {}, label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { labelProps: {}, label, tooltip: props.tooltip }),
       /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "beam-trix-editor", children: [
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("input", { type: "hidden", id: `input-${id}`, value }),
         (0, import_react101.createElement)("trix-editor", {
@@ -22587,7 +22654,7 @@ function RichTextFieldImpl(props) {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { label, tooltip: props.tooltip }),
       /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime101.trussProps)({
         minHeight: "mh_120px",
         backgroundColor: ["bgColor_var", {
@@ -22732,6 +22799,7 @@ function SelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     value,
     options,
@@ -22760,7 +22828,7 @@ function SelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime102.trussProps)(getSelectCardOptionsCss({
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime102.trussProps)(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -23095,6 +23163,7 @@ function TextAreaField(props) {
     preventNewLines,
     onEnter,
     maxLines,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -23134,7 +23203,7 @@ function TextAreaField(props) {
       inputRef,
       inputWrapRef,
       textAreaMinHeight: preventNewLines ? 0 : void 0,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       ...proposalProps
     }
   );
@@ -23202,6 +23271,7 @@ function TextField(props) {
     onEnter,
     onEscapeBubble,
     hideErrorMessage,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -23244,7 +23314,7 @@ function TextField(props) {
       labelProps,
       inputProps,
       inputRef,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       hideErrorMessage,
       ...proposalProps
     }
@@ -23314,6 +23384,7 @@ function ToggleChipGroup(props) {
   const {
     values,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     options,
     required,
@@ -23342,7 +23413,7 @@ function ToggleChipGroup(props) {
       justifyContent: "jcsb"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
+    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix, tooltip }),
     /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_runtime104.trussProps)({
       display: "df",
       gap: "g_1",