@homebound/beam 3.42.4 → 3.43.0

package/dist/Css.json

@@ -2,7 +2,7 @@
   "increment": 8,
   "breakpoints": {"ifPrint":"@media print","ifSm":"@media screen and (max-width: 599px)","ifMd":"@media screen and (min-width: 600px) and (max-width: 1024px)","ifSmOrMd":"@media screen and (max-width: 1024px)","ifMdAndUp":"@media screen and (min-width: 600px)","ifMdAndDown":"@media screen and (max-width: 1024px)","ifLg":"@media screen and (min-width: 1025px)","ifMdOrLg":"@media screen and (min-width: 600px)"},
   "typography": ["xs2","xs2Sb","xs","xsSb","sm","smSb","md","mdSb","lg","xl","xl2"],
-  "tokens": {"ButtonCautionDisabledBg":"--b-button-caution-disabled-bg","ButtonCautionDisabledFg":"--b-button-caution-disabled-fg","ButtonDangerDisabledBg":"--b-button-danger-disabled-bg","ButtonDangerDisabledFg":"--b-button-danger-disabled-fg","ButtonGhostDisabledFg":"--b-button-ghost-disabled-fg","ButtonGhostFg":"--b-button-ghost-fg","ButtonPrimaryDisabledBg":"--b-button-primary-disabled-bg","ButtonPrimaryDisabledFg":"--b-button-primary-disabled-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","Danger":"--b-danger","DangerPressed":"--b-danger-pressed","EnvBrandDev":"--b-env-brand-dev","EnvBrandLocalProd":"--b-env-brand-local-prod","EnvBrandProd":"--b-env-brand-prod","EnvBrandQa":"--b-env-brand-qa","FieldBgDefault":"--b-field-bg-default","FieldBgDisabled":"--b-field-bg-disabled","FieldBgHover":"--b-field-bg-hover","FieldBorderDefault":"--b-field-border-default","FieldBorderError":"--b-field-border-error","FieldBorderFocus":"--b-field-border-focus","FieldBorderHover":"--b-field-border-hover","FieldTextDisabled":"--b-field-text-disabled","FocusRingInset":"--b-focus-ring-inset","FocusRingMuted":"--b-focus-ring-muted","ListRowBgHover":"--b-list-row-bg-hover","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","MenuItemBgHover":"--b-menu-item-bg-hover","NavItemBgActive":"--b-nav-item-bg-active","NavItemBgHover":"--b-nav-item-bg-hover","NavItemBgPressed":"--b-nav-item-bg-pressed","NavText":"--b-nav-text","NavTextActive":"--b-nav-text-active","NavTextDisabled":"--b-nav-text-disabled","NavTextFocusVisible":"--b-nav-text-focus-visible","NavTextPressed":"--b-nav-text-pressed","NeutralFillHoverStrong":"--b-neutral-fill-hover-strong","NeutralFillHoverSubtle":"--b-neutral-fill-hover-subtle","NeutralFillPressed":"--b-neutral-fill-pressed","NeutralSurfacePressed":"--b-neutral-surface-pressed","OnPrimary":"--b-on-primary","OnSurface":"--b-on-surface","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceSubtle":"--b-on-surface-subtle","PopoverSurface":"--b-popover-surface","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionIndicator":"--b-selection-indicator","StatusSuccessFg":"--b-status-success-fg","Surface":"--b-surface","SurfaceSeparator":"--b-surface-separator","SurfaceSubtle":"--b-surface-subtle","TextDisabled":"--b-text-disabled","TextHelper":"--b-text-helper","TextLabel":"--b-text-label","TextLinkDefault":"--b-text-link-default","TextLinkDisabled":"--b-text-link-disabled","TextLinkHover":"--b-text-link-hover","TextLinkPressed":"--b-text-link-pressed","TextPlaceholder":"--b-text-placeholder","TextSelection":"--b-text-selection"},
+  "tokens": {"ButtonCautionDisabledBg":"--b-button-caution-disabled-bg","ButtonCautionDisabledFg":"--b-button-caution-disabled-fg","ButtonDangerDisabledBg":"--b-button-danger-disabled-bg","ButtonDangerDisabledFg":"--b-button-danger-disabled-fg","ButtonGhostDisabledFg":"--b-button-ghost-disabled-fg","ButtonGhostFg":"--b-button-ghost-fg","ButtonPrimaryDisabledBg":"--b-button-primary-disabled-bg","ButtonPrimaryDisabledFg":"--b-button-primary-disabled-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","Danger":"--b-danger","DangerPressed":"--b-danger-pressed","EnvBrandDev":"--b-env-brand-dev","EnvBrandLocalProd":"--b-env-brand-local-prod","EnvBrandProd":"--b-env-brand-prod","EnvBrandQa":"--b-env-brand-qa","FieldBgDefault":"--b-field-bg-default","FieldBgDisabled":"--b-field-bg-disabled","FieldBgHover":"--b-field-bg-hover","FieldBorderDefault":"--b-field-border-default","FieldBorderError":"--b-field-border-error","FieldBorderFocus":"--b-field-border-focus","FieldBorderHover":"--b-field-border-hover","FieldTextDisabled":"--b-field-text-disabled","FocusRingInset":"--b-focus-ring-inset","FocusRingMuted":"--b-focus-ring-muted","ListRowBgHover":"--b-list-row-bg-hover","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","MenuItemBgHover":"--b-menu-item-bg-hover","NavItemBgActive":"--b-nav-item-bg-active","NavItemBgHover":"--b-nav-item-bg-hover","NavItemBgPressed":"--b-nav-item-bg-pressed","NavText":"--b-nav-text","NavTextActive":"--b-nav-text-active","NavTextDisabled":"--b-nav-text-disabled","NavTextFocusVisible":"--b-nav-text-focus-visible","NavTextPressed":"--b-nav-text-pressed","NeutralFillHoverStrong":"--b-neutral-fill-hover-strong","NeutralFillHoverSubtle":"--b-neutral-fill-hover-subtle","NeutralFillPressed":"--b-neutral-fill-pressed","NeutralSurfacePressed":"--b-neutral-surface-pressed","OnPrimary":"--b-on-primary","OnSurface":"--b-on-surface","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceSubtle":"--b-on-surface-subtle","OnSurfaceDisabled":"--b-on-surface-disabled","OnSurfaceRaisedHover":"--b-on-surface-raised-hover","OnSurfaceRaisedPressed":"--b-on-surface-raised-pressed","PopoverSurface":"--b-popover-surface","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionIndicator":"--b-selection-indicator","StatusSuccessFg":"--b-status-success-fg","Surface":"--b-surface","SurfaceRaised":"--b-surface-raised","SurfaceRaisedHover":"--b-surface-raised-hover","SurfaceRaisedPressed":"--b-surface-raised-pressed","SurfaceDisabled":"--b-surface-disabled","SurfaceSeparator":"--b-surface-separator","SurfaceSubtle":"--b-surface-subtle","TextDisabled":"--b-text-disabled","TextHelper":"--b-text-helper","TextLabel":"--b-text-label","TextLinkDefault":"--b-text-link-default","TextLinkDisabled":"--b-text-link-disabled","TextLinkHover":"--b-text-link-hover","TextLinkPressed":"--b-text-link-pressed","TextPlaceholder":"--b-text-placeholder","TextSelection":"--b-text-selection"},
   "abbreviations": {
     "ba": {"kind":"static","defs":{"borderStyle":"solid","borderWidth":"1px"}},
     "bt": {"kind":"static","defs":{"borderTopStyle":"solid","borderTopWidth":"1px"}},

package/dist/index.cjs

@@ -428,6 +428,9 @@ var Tokens = /* @__PURE__ */ ((Tokens2) => {
   Tokens2["OnSurface"] = "--b-on-surface";
   Tokens2["OnSurfaceMuted"] = "--b-on-surface-muted";
   Tokens2["OnSurfaceSubtle"] = "--b-on-surface-subtle";
+  Tokens2["OnSurfaceDisabled"] = "--b-on-surface-disabled";
+  Tokens2["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
+  Tokens2["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
   Tokens2["PopoverSurface"] = "--b-popover-surface";
   Tokens2["Primary"] = "--b-primary";
   Tokens2["PrimaryHover"] = "--b-primary-hover";
@@ -436,6 +439,10 @@ var Tokens = /* @__PURE__ */ ((Tokens2) => {
   Tokens2["SelectionIndicator"] = "--b-selection-indicator";
   Tokens2["StatusSuccessFg"] = "--b-status-success-fg";
   Tokens2["Surface"] = "--b-surface";
+  Tokens2["SurfaceRaised"] = "--b-surface-raised";
+  Tokens2["SurfaceRaisedHover"] = "--b-surface-raised-hover";
+  Tokens2["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
+  Tokens2["SurfaceDisabled"] = "--b-surface-disabled";
   Tokens2["SurfaceSeparator"] = "--b-surface-separator";
   Tokens2["SurfaceSubtle"] = "--b-surface-subtle";
   Tokens2["TextDisabled"] = "--b-text-disabled";
@@ -5827,7 +5834,8 @@ function IconButton(props) {
     download = false,
     forceFocusStyles = false,
     label,
-    preventTooltip = false
+    preventTooltip = false,
+    __storyState
   } = props;
   const isDisabled = !!disabled;
   const ariaProps = {
@@ -5838,20 +5846,25 @@ function IconButton(props) {
   };
   const ref = useGetRef(buttonRef);
   const {
-    buttonProps
+    buttonProps,
+    isPressed: isPressedFromEvents
   } = (0, import_react_aria2.useButton)({
     ...ariaProps,
     onPress: typeof onPress === "string" ? noop : onPress,
     elementType: typeof onPress === "string" ? "a" : "button"
   }, ref);
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isPressing = isPressed || active;
   const {
     focusProps,
-    isFocusVisible
+    isFocusVisible: isFocusVisibleFromEvents
   } = (0, import_react_aria2.useFocusRing)(ariaProps);
   const {
     hoverProps,
-    isHovered
+    isHovered: isHoveredFromEvents
   } = (0, import_react_aria2.useHover)(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const testIds = useTestIds(props, icon);
   const isCircle = variant === "circle";
   const isOutline = variant === "outline";
@@ -5868,7 +5881,7 @@ function IconButton(props) {
       ...base,
       ...isHovered && hover,
       ...(isFocusVisible || forceFocusStyles) && focus,
-      ...active && pressed,
+      ...isPressing && pressed,
       ...isDisabled && iconButtonStylesDisabled,
       ...bgColor && {
         backgroundColor: ["bgColor_var", {
@@ -5876,7 +5889,7 @@ function IconButton(props) {
         }]
       }
     };
-  }, [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, active, bgColor, forceFocusStyles]);
+  }, [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, isPressing, bgColor, forceFocusStyles]);
   const iconColor = isCircle ? circleIconColor : defaultIconColor;
   const buttonAttrs = {
     ...testIds,
@@ -5887,7 +5900,7 @@ function IconButton(props) {
     ...(0, import_runtime9.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles),
     "aria-label": label
   };
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "--b-text-disabled" /* TextDisabled */ : isCircle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : isCircle ? 2.5 : inc });
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : isOutline && isPressing ? "--b-on-surface-raised-pressed" /* OnSurfaceRaisedPressed */ : isOutline && isHovered ? "--b-on-surface-raised-hover" /* OnSurfaceRaisedHover */ : isCircle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : isCircle ? 2.5 : inc });
   return maybeTooltip({
     title: resolveTooltip(disabled ?? (preventTooltip ? void 0 : label), tooltip),
     placement: "top",
@@ -5908,7 +5921,10 @@ var iconButtonStylesReset = {
   transition: "transition"
 };
 var iconButtonStylesDisabled = {
-  cursor: "cursorNotAllowed"
+  cursor: "cursorNotAllowed",
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface-disabled)"
+  }]
 };
 var variantStyles = {
   default: {
@@ -5983,26 +5999,28 @@ var variantStyles = {
       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"
+      alignItems: "aic",
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface-raised)"
+      }]
     },
     hover: {
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
+        "--backgroundColor": "var(--b-surface-raised-hover)"
       }]
     },
     focus: {
       boxShadow: "bshFocus"
     },
     pressed: {
-      backgroundColor: "bgGray200"
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface-raised-pressed)"
+      }]
     }
   }
 };
@@ -23568,7 +23586,9 @@ function Navbar(props) {
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
   return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("nav", { ...(0, import_runtime100.trussProps)({
-    backgroundColor: "bgGray800",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface-raised)"
+    }],
     flexShrink: "fs0",
     display: "df",
     alignItems: "aic",