@homebound/beam 4.17.0 → 4.18.0

package/dist/index.d.cts

@@ -5367,12 +5367,12 @@ declare function ProposedValue$1(props: ProposedValueProps): React$1.JSX.Element
 
 type TagXss = Margin | "backgroundColor" | "color";
 type TagType = "info" | "update" | "warning" | "error" | "success" | "neutral" | "ai" | "strikethrough";
-type TagVariant = "primary" | "secondary";
+type TagVariant = "primary" | "secondary" | "bold";
 type TagPropsBase<X> = {
     /** Required even if using `iconOnly + preventTooltip`. In those cases an accessibility friendly message is expected */
     text: ReactNode;
     type?: TagType;
-    /** Defaults to "primary". Secondary is intended for use in TagGroup. */
+    /** Defaults to "primary". Secondary is intended for use in TagGroup. Bold is a darker fill with white text. */
     variant?: TagVariant;
     xss?: X;
     /** A tooltip will automatically be displayed if the text is truncated. Set to true to prevent this behavior.
@@ -5393,10 +5393,11 @@ declare function Tag<X extends Only<Xss<TagXss>, X>>(props: TagProps<X>): React$
 type CardSlotBase<K extends string> = {
     kind: K;
 };
-/** Tag props for badge slots — mirrors Tag (type, icon, iconOnly) with string-only text. */
+/** Tag props for badge slots — mirrors Tag (type, variant, icon, iconOnly) with string-only text. */
 type CardBadgeTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 } & ({
     iconOnly?: false;
     icon?: IconKey;
@@ -7520,6 +7521,7 @@ type ImageFitType = "contain" | "cover";
 type CardTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 };
 type CardProps = {
     title: string;
@@ -8351,6 +8353,7 @@ type InlineFeedbackBannerAction = ActionButtonProps | ({
 type InlineFeedbackBannerProps = {
     type: InlineFeedbackBannerType;
     tagText?: TagProps<any>["text"];
+    tagVariant?: TagVariant;
     description: ReactNode;
     /** Rendered in order, always as text buttons (menu triggers included). */
     actions?: InlineFeedbackBannerAction[];

package/dist/index.d.ts

@@ -5367,12 +5367,12 @@ declare function ProposedValue$1(props: ProposedValueProps): React$1.JSX.Element
 
 type TagXss = Margin | "backgroundColor" | "color";
 type TagType = "info" | "update" | "warning" | "error" | "success" | "neutral" | "ai" | "strikethrough";
-type TagVariant = "primary" | "secondary";
+type TagVariant = "primary" | "secondary" | "bold";
 type TagPropsBase<X> = {
     /** Required even if using `iconOnly + preventTooltip`. In those cases an accessibility friendly message is expected */
     text: ReactNode;
     type?: TagType;
-    /** Defaults to "primary". Secondary is intended for use in TagGroup. */
+    /** Defaults to "primary". Secondary is intended for use in TagGroup. Bold is a darker fill with white text. */
     variant?: TagVariant;
     xss?: X;
     /** A tooltip will automatically be displayed if the text is truncated. Set to true to prevent this behavior.
@@ -5393,10 +5393,11 @@ declare function Tag<X extends Only<Xss<TagXss>, X>>(props: TagProps<X>): React$
 type CardSlotBase<K extends string> = {
     kind: K;
 };
-/** Tag props for badge slots — mirrors Tag (type, icon, iconOnly) with string-only text. */
+/** Tag props for badge slots — mirrors Tag (type, variant, icon, iconOnly) with string-only text. */
 type CardBadgeTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 } & ({
     iconOnly?: false;
     icon?: IconKey;
@@ -7520,6 +7521,7 @@ type ImageFitType = "contain" | "cover";
 type CardTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 };
 type CardProps = {
     title: string;
@@ -8351,6 +8353,7 @@ type InlineFeedbackBannerAction = ActionButtonProps | ({
 type InlineFeedbackBannerProps = {
     type: InlineFeedbackBannerType;
     tagText?: TagProps<any>["text"];
+    tagVariant?: TagVariant;
     description: ReactNode;
     /** Rendered in order, always as text buttons (menu triggers included). */
     actions?: InlineFeedbackBannerAction[];

package/dist/index.js

@@ -13051,6 +13051,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: {
@@ -13065,6 +13086,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":
@@ -16045,9 +16098,9 @@ function Card(props) {
       icon: "verticalDots",
       color: isList ? "--b-on-surface-muted" /* OnSurfaceMuted */ : "--b-on-primary" /* OnPrimary */
     }, items: buttonMenuItems }) }),
-    tag && !isList && /* @__PURE__ */ jsx79("div", { className: "absolute l_1 tp_4px", children: /* @__PURE__ */ jsx79(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
+    tag && !isList && /* @__PURE__ */ jsx79("div", { className: "absolute l_1 tp_4px", children: /* @__PURE__ */ jsx79(Tag, { type: tag.type, variant: tag.variant, text: tag.text, ...tid.tag }) }),
     /* @__PURE__ */ jsxs51("div", { className: "df fdc aifs g_1", children: [
-      tag && isList && /* @__PURE__ */ jsx79(Tag, { type: tag.type, text: tag.text, ...tid.tag }),
+      tag && isList && /* @__PURE__ */ jsx79(Tag, { type: tag.type, variant: tag.variant, text: tag.text, ...tid.tag }),
       /* @__PURE__ */ jsxs51("div", { children: [
         /* @__PURE__ */ jsx79("div", { ...trussProps52({
           fontWeight: "fw6",
@@ -19695,6 +19748,7 @@ function InlineFeedbackBanner(props) {
   const {
     type,
     tagText,
+    tagVariant,
     description,
     actions = []
   } = props;
@@ -19707,10 +19761,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