@homebound/beam 3.27.0 → 3.28.0

package/dist/index.cjs

@@ -267,9 +267,6 @@ __export(index_exports, {
   getTableStyles: () => getTableStyles,
   headerRenderFn: () => headerRenderFn,
   hoverStyles: () => hoverStyles,
-  iconButtonCircleStylesHover: () => iconButtonCircleStylesHover,
-  iconButtonContrastStylesHover: () => iconButtonContrastStylesHover,
-  iconButtonStylesHover: () => iconButtonStylesHover,
   iconCardStylesHover: () => iconCardStylesHover,
   increment: () => increment,
   insertAtIndex: () => insertAtIndex,
@@ -5789,19 +5786,28 @@ function IconButton(props) {
   const testIds = useTestIds(props, icon);
   const isCircle = variant === "circle";
   const isOutline = variant === "outline";
-  const styles = (0, import_react10.useMemo)(() => ({
-    ...iconButtonStylesReset,
-    ...isCircle ? iconButtonCircle : isOutline ? iconButtonOutline : compact ? iconButtonCompact : iconButtonNormal,
-    ...isHovered && (isCircle || isOutline ? iconButtonCircleStylesHover : iconButtonTokenHover),
-    ...isFocusVisible || forceFocusStyles ? isCircle ? iconButtonCircleStylesFocus : iconButtonStylesFocus : {},
-    ...active && (isCircle || isOutline ? activeStylesCircle : iconButtonTokenHover),
-    ...isDisabled && iconButtonStylesDisabled,
-    ...bgColor && {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": (0, import_runtime9.maybeCssVar)(bgColor)
-      }]
-    }
-  }), [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, active, bgColor, forceFocusStyles]);
+  const styles = (0, import_react10.useMemo)(() => {
+    const variantKey = isCircle ? "circle" : isOutline ? "outline" : compact ? "compact" : "default";
+    const {
+      base,
+      hover,
+      focus,
+      pressed
+    } = variantStyles[variantKey];
+    return {
+      ...iconButtonStylesReset,
+      ...base,
+      ...isHovered && hover,
+      ...(isFocusVisible || forceFocusStyles) && focus,
+      ...active && pressed,
+      ...isDisabled && iconButtonStylesDisabled,
+      ...bgColor && {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": (0, import_runtime9.maybeCssVar)(bgColor)
+        }]
+      }
+    };
+  }, [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, active, bgColor, forceFocusStyles]);
   const iconColor = isCircle ? circleIconColor : defaultIconColor;
   const buttonAttrs = {
     ...testIds,
@@ -5832,71 +5838,104 @@ var iconButtonStylesReset = {
   justifyContent: "jcc",
   transition: "transition"
 };
-var iconButtonNormal = {
-  height: "h_28px",
-  width: "w_28px",
-  borderRadius: "br8",
-  borderWidth: "bw2"
-};
-var iconButtonCompact = {
-  height: "h_18px",
-  width: "w_18px",
-  borderRadius: "br4",
-  borderWidth: "bw1"
-};
-var iconButtonCircle = {
-  borderRadius: "br100",
-  width: "w_48px",
-  height: "h_48px",
-  borderColor: "bcGray300",
-  borderStyle: "bss",
-  borderWidth: "bw1",
-  display: "df",
-  justifyContent: "jcc",
-  alignItems: "aic"
-};
-var iconButtonOutline = {
-  borderRadius: "br8",
-  width: "w_48px",
-  height: "h_40px",
-  backgroundColor: ["bgColor_var", {
-    "--backgroundColor": "var(--b-surface)"
-  }],
-  borderColor: ["bc_var", {
-    "--borderColor": "var(--b-surface-separator)"
-  }],
-  borderStyle: "bss",
-  borderWidth: "bw1",
-  display: "df",
-  justifyContent: "jcc",
-  alignItems: "aic"
-};
-var iconButtonTokenHover = {
-  backgroundColor: ["bgColor_var", {
-    "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
-  }]
-};
-var iconButtonStylesHover = {
-  backgroundColor: "bgGray200"
-};
-var iconButtonContrastStylesHover = iconButtonTokenHover;
-var iconButtonCircleStylesHover = {
-  backgroundColor: "bgBlue100",
-  borderColor: "bcBlue200"
-};
-var iconButtonStylesFocus = {
-  borderColor: "bcBlue700"
-};
-var iconButtonCircleStylesFocus = {
-  backgroundColor: "bgBlue100",
-  borderColor: "bcBlue700"
-};
 var iconButtonStylesDisabled = {
   cursor: "cursorNotAllowed"
 };
-var activeStylesCircle = {
-  backgroundColor: "bgGray200",
-  borderColor: "bcGray200"
+var variantStyles = {
+  default: {
+    base: {
+      height: "h_28px",
+      width: "w_28px",
+      borderRadius: "br8",
+      borderWidth: "bw2"
+    },
+    hover: {
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
+      }]
+    },
+    focus: {
+      borderColor: "bcBlue700"
+    },
+    pressed: {
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
+      }]
+    }
+  },
+  compact: {
+    base: {
+      height: "h_18px",
+      width: "w_18px",
+      borderRadius: "br4",
+      borderWidth: "bw1"
+    },
+    hover: {
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
+      }]
+    },
+    focus: {
+      borderColor: "bcBlue700"
+    },
+    pressed: {
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
+      }]
+    }
+  },
+  circle: {
+    base: {
+      borderRadius: "br100",
+      width: "w_48px",
+      height: "h_48px",
+      borderColor: "bcGray300",
+      borderStyle: "bss",
+      borderWidth: "bw1",
+      display: "df",
+      justifyContent: "jcc",
+      alignItems: "aic"
+    },
+    hover: {
+      backgroundColor: "bgBlue100",
+      borderColor: "bcBlue200"
+    },
+    focus: {
+      backgroundColor: "bgBlue100",
+      borderColor: "bcBlue700"
+    },
+    pressed: {
+      backgroundColor: "bgGray200",
+      borderColor: "bcGray200"
+    }
+  },
+  outline: {
+    base: {
+      borderRadius: "br8",
+      width: "w_42px",
+      height: "h_40px",
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface)"
+      }],
+      borderColor: "bcGray300",
+      borderStyle: "bss",
+      borderWidth: "bw1",
+      display: "df",
+      justifyContent: "jcc",
+      alignItems: "aic"
+    },
+    hover: {
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
+      }]
+    },
+    focus: {
+      boxShadow: "bshFocus"
+    },
+    pressed: {
+      backgroundColor: "bgGray200"
+    }
+  }
 };
 
 // src/components/Table/utils/TableState.ts
@@ -10259,7 +10298,7 @@ function Button(props) {
   });
 }
 function getButtonStyles(variant, size) {
-  const styles = variantStyles[variant];
+  const styles = variantStyles2[variant];
   if (variant === "text") {
     return styles;
   }
@@ -10271,7 +10310,7 @@ function getButtonStyles(variant, size) {
     }
   };
 }
-var variantStyles = {
+var variantStyles2 = {
   primary: {
     baseStyles: {
       backgroundColor: ["bgColor_var", {
@@ -17204,7 +17243,7 @@ function Banner(props) {
   } = props;
   const tid = useTestIds(others, "banner");
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { ...(0, import_runtime58.trussProps)({
-    ...variantStyles2[type],
+    ...variantStyles3[type],
     ...{
       display: "df",
       alignItems: "aic",
@@ -17233,7 +17272,7 @@ var typeToIcon = {
   alert: "errorCircle",
   error: "xCircle"
 };
-var variantStyles2 = {
+var variantStyles3 = {
   success: {
     backgroundColor: "bgGreen100",
     color: "gray900"
@@ -21936,20 +21975,20 @@ function DnDGridItemHandle(props) {
     isHovered
   } = (0, import_react_aria50.useHover)({});
   const tid = useTestIds(props, "dragHandle");
-  const iconButtonNormal2 = {
+  const iconButtonNormal = {
     height: "h_28px",
     width: "w_28px",
     borderRadius: "br8",
     borderWidth: "bw2"
   };
-  const iconButtonCompact2 = {
+  const iconButtonCompact = {
     height: "h_18px",
     width: "w_18px",
     borderRadius: "br4",
     borderWidth: "bw1"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("button", { ...(0, import_runtime88.trussProps)({
-    ...compact ? iconButtonCompact2 : iconButtonNormal2,
+    ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
       cursor: "cursor_grab",
       borderColor: "bcTransparent",
@@ -22037,7 +22076,7 @@ function EnvironmentBanner(props) {
   }), role: "banner", ...tid, children: [
     getInvertedCorner("left", bgColorVar),
     getInvertedCorner("right", bgColorVar),
-    /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative z2 df aic jcsb h100 pl2 mdandup_pl6 pr2 mdandup_pr6", ...tid.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative z2 df aic jcsb h100 pl1 mdandup_pl5 pr1 mdandup_pr5", ...tid.content, children: [
       /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("span", { className: "df aic gap2 fg1 mh0 oh", ...tid.left, children: [
         /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
@@ -22148,7 +22187,7 @@ function getInvertedCorner(side, bgColorVar) {
     } : {}
   }) }) });
 }
-var environmentBannerSizePx = 32;
+var environmentBannerSizePx = 34;
 
 // src/components/EnvironmentBanner/setEnvironmentFavicon.ts
 function setEnvironmentFavicon(env, favicons) {
@@ -24857,9 +24896,6 @@ function PageHeaderLayout(props) {
   getTableStyles,
   headerRenderFn,
   hoverStyles,
-  iconButtonCircleStylesHover,
-  iconButtonContrastStylesHover,
-  iconButtonStylesHover,
   iconCardStylesHover,
   increment,
   insertAtIndex,