@homebound/beam 3.33.1 → 3.34.0

package/dist/index.cjs

@@ -21797,24 +21797,32 @@ function Tag(props) {
     type,
     xss,
     preventTooltip = false,
+    iconOnly,
+    icon,
     ...otherProps
   } = props;
-  const typeStyles2 = getStyles(type);
+  const isIconOnly = !!iconOnly && !!icon;
+  const {
+    background,
+    iconColor
+  } = getStyles(type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = (0, import_react116.useState)(false);
   const ref = (0, import_react116.useRef)(null);
   (0, import_utils129.useResizeObserver)({
     ref,
     onResize: () => {
-      if (ref.current) {
+      if (!isIconOnly && ref.current) {
         setShowTooltip(ref.current.offsetHeight < ref.current.scrollHeight);
       }
     }
   });
+  const tooltipTitle = !preventTooltip ? isIconOnly ? text : showTooltip ? text : void 0 : void 0;
   return maybeTooltip({
-    title: !preventTooltip && showTooltip ? text : void 0,
+    title: tooltipTitle,
     children: /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("span", { ...tid, ...(0, import_runtime85.trussProps)({
       ...{
+        position: "relative",
         display: "dif",
         fontWeight: "fw6",
         fontSize: "fz_10px",
@@ -21822,18 +21830,23 @@ function Tag(props) {
         textTransform: "ttu",
         alignItems: "aic",
         gap: "gap_4px",
-        paddingLeft: "pl_6px",
-        paddingRight: "pr_6px",
         paddingTop: "pt_2px",
         paddingBottom: "pb_2px",
         color: "gray900",
         borderRadius: "br4"
       },
-      ...typeStyles2,
+      ...isIconOnly ? {
+        paddingLeft: "pl_2px",
+        paddingRight: "pr_2px"
+      } : {
+        paddingLeft: "pl_6px",
+        paddingRight: "pr_6px"
+      },
+      ...background,
       ...xss
     }), children: [
-      otherProps.icon && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Icon, { icon: otherProps.icon, inc: 1.5 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { ref, className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", children: text })
+      icon && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Icon, { icon, inc: 1.75, color: iconColor }) }),
+      isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "absolute oh cli_inset_50 clp_none bd_0 h_1px m_neg1px w_1px p_0 wsnw o0", children: text }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { ref, className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", children: text })
     ] })
   });
 }
@@ -21841,23 +21854,38 @@ function getStyles(type) {
   switch (type) {
     case "info":
       return {
-        backgroundColor: "bgBlue100"
+        background: {
+          backgroundColor: "bgBlue100"
+        },
+        iconColor: "rgba(37, 99, 235, 1)" /* Blue600 */
       };
     case "caution":
       return {
-        backgroundColor: "bgYellow200"
+        background: {
+          backgroundColor: "bgYellow200"
+        },
+        iconColor: "rgba(161, 98, 7, 1)" /* Yellow700 */
       };
     case "warning":
       return {
-        backgroundColor: "bgRed200"
+        background: {
+          backgroundColor: "bgRed200"
+        },
+        iconColor: "rgba(194, 65, 12, 1)" /* Orange700 */
       };
     case "success":
       return {
-        backgroundColor: "bgGreen200"
+        background: {
+          backgroundColor: "bgGreen200"
+        },
+        iconColor: "rgba(5, 150, 105, 1)" /* Green600 */
       };
     default:
       return {
-        backgroundColor: "bgGray200"
+        background: {
+          backgroundColor: "bgGray200"
+        },
+        iconColor: "rgba(100, 100, 100, 1)" /* Gray700 */
       };
   }
 }