@homebound/beam 4.15.0 → 4.16.1

package/README.md

@@ -4,7 +4,7 @@
 
 Homebound's React component design system.
 
-_To see the latest designs, check out the [Figma](https://www.figma.com/file/aWUE4pPeUTgrYZ4vaTYZQU/%E2%9C%A8Beam-Design-System-Refresh?node-id=0%3A1) file._
+_To see the latest designs, check out the [Figma](https://www.figma.com/design/62R8KiDklvgBBSH0mQGWHo/BEAM_27_LIBRARY?node-id=0-1&p=f&m=draw) file._
 
 ## Page layout shells
 

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": {"AiFieldBg":"--b-ai-field-bg","AiFieldFg":"--b-ai-field-fg","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","ButtonSecondaryFg":"--b-button-secondary-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","ChoiceDisabled":"--b-choice-disabled","ChoiceSelected":"--b-choice-selected","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","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","NavGlobalItemBgActive":"--b-nav-global-item-bg-active","NavGlobalItemBgHover":"--b-nav-global-item-bg-hover","NavGlobalItemBgPressed":"--b-nav-global-item-bg-pressed","NavGlobalText":"--b-nav-global-text","NavGlobalTextActive":"--b-nav-global-text-active","NavGlobalTextDisabled":"--b-nav-global-text-disabled","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","NeutralFillHover":"--b-neutral-fill-hover","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","OnSurfaceDisabled":"--b-on-surface-disabled","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceRaisedHover":"--b-on-surface-raised-hover","OnSurfaceRaisedPressed":"--b-on-surface-raised-pressed","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionFill":"--b-selection-fill","SelectionIndicator":"--b-selection-indicator","Surface":"--b-surface","SurfaceDisabled":"--b-surface-disabled","SurfaceHover":"--b-surface-hover","SurfaceRaised":"--b-surface-raised","SurfaceRaisedHover":"--b-surface-raised-hover","SurfaceRaisedPressed":"--b-surface-raised-pressed","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": {"AiFieldBg":"--b-ai-field-bg","AiFieldFg":"--b-ai-field-fg","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","ButtonSecondaryFg":"--b-button-secondary-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","ChoiceDisabled":"--b-choice-disabled","ChoiceSelected":"--b-choice-selected","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","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","NavGlobalItemBgActive":"--b-nav-global-item-bg-active","NavGlobalItemBgHover":"--b-nav-global-item-bg-hover","NavGlobalItemBgPressed":"--b-nav-global-item-bg-pressed","NavGlobalText":"--b-nav-global-text","NavGlobalTextActive":"--b-nav-global-text-active","NavGlobalTextDisabled":"--b-nav-global-text-disabled","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","NeutralFillHover":"--b-neutral-fill-hover","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","OnSurfaceActive":"--b-on-surface-active","OnSurfaceDisabled":"--b-on-surface-disabled","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceRaisedHover":"--b-on-surface-raised-hover","OnSurfaceRaisedPressed":"--b-on-surface-raised-pressed","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionFill":"--b-selection-fill","SelectionIndicator":"--b-selection-indicator","Surface":"--b-surface","SurfaceActive":"--b-surface-active","SurfaceActiveHover":"--b-surface-active-hover","SurfaceDisabled":"--b-surface-disabled","SurfaceHover":"--b-surface-hover","SurfaceRaised":"--b-surface-raised","SurfaceRaisedHover":"--b-surface-raised-hover","SurfaceRaisedPressed":"--b-surface-raised-pressed","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"},
   "keyframes": {"loadingDots":"@keyframes loadingDots { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }","spin":"@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }","pulse":"@keyframes pulse { 50% { opacity: 0.6; } }","aiStarLoader":"@keyframes aiStarLoader { 0%, 66.67%, 100% { transform: scale(0.5); } 33.33% { transform: scale(1); } }"},
   "abbreviations": {
     "animation": {"kind":"variable","props":["animation"],"incremented":false},

package/dist/index.cjs

@@ -500,6 +500,7 @@ var Tokens = /* @__PURE__ */ ((Tokens63) => {
   Tokens63["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
   Tokens63["OnPrimary"] = "--b-on-primary";
   Tokens63["OnSurface"] = "--b-on-surface";
+  Tokens63["OnSurfaceActive"] = "--b-on-surface-active";
   Tokens63["OnSurfaceDisabled"] = "--b-on-surface-disabled";
   Tokens63["OnSurfaceMuted"] = "--b-on-surface-muted";
   Tokens63["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
@@ -511,6 +512,8 @@ var Tokens = /* @__PURE__ */ ((Tokens63) => {
   Tokens63["SelectionFill"] = "--b-selection-fill";
   Tokens63["SelectionIndicator"] = "--b-selection-indicator";
   Tokens63["Surface"] = "--b-surface";
+  Tokens63["SurfaceActive"] = "--b-surface-active";
+  Tokens63["SurfaceActiveHover"] = "--b-surface-active-hover";
   Tokens63["SurfaceDisabled"] = "--b-surface-disabled";
   Tokens63["SurfaceHover"] = "--b-surface-hover";
   Tokens63["SurfaceRaised"] = "--b-surface-raised";
@@ -6786,6 +6789,22 @@ function shallowEqual(objA, objB) {
   if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
     return false;
   }
+  if (objA instanceof Map || objB instanceof Map) {
+    if (!(objA instanceof Map && objB instanceof Map) || objA.size !== objB.size) return false;
+    for (const [key, value] of objA) {
+      if (!objB.has(key) || !Object.is(value, objB.get(key))) return false;
+    }
+    return true;
+  }
+  if (objA instanceof Set || objB instanceof Set) {
+    if (!(objA instanceof Set && objB instanceof Set) || objA.size !== objB.size) return false;
+    for (const value of objA) {
+      if (!objB.has(value)) return false;
+    }
+    return true;
+  }
+  if (Array.isArray(objA) !== Array.isArray(objB)) return false;
+  if (!Array.isArray(objA) && (!isPlainObject(objA) || !isPlainObject(objB))) return false;
   const keysA = Object.keys(objA);
   const keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) {
@@ -6793,12 +6812,16 @@ function shallowEqual(objA, objB) {
   }
   for (let i = 0; i < keysA.length; i++) {
     const currentKey = keysA[i];
-    if (!objB.hasOwnProperty(currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
+    if (!Object.prototype.hasOwnProperty.call(objB, currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
       return false;
     }
   }
   return true;
 }
+function isPlainObject(value) {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
 
 // src/hooks/useComputed.ts
 function useComputed(fn, deps) {
@@ -8757,6 +8780,22 @@ var filledBoxStyles = {
 var filledBoxHoverStyles = {
   backgroundColor: "bgBlue900"
 };
+var indeterminateBoxStyles = {
+  borderColor: ["bc_var", {
+    "--borderColor": "var(--b-surface-active)"
+  }],
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface-active)"
+  }]
+};
+var indeterminateHoverStyles = {
+  borderColor: ["bc_var", {
+    "--borderColor": "var(--b-surface-active-hover)"
+  }],
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface-active-hover)"
+  }]
+};
 var disabledBoxStyles = {
   backgroundColor: ["bgColor_var", {
     "--backgroundColor": "var(--b-field-bg-disabled)"
@@ -8815,20 +8854,27 @@ function StyledCheckbox(props) {
   } = (0, import_react_aria5.useHover)({
     isDisabled
   });
-  const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
+  const showSelected = Boolean(isSelected) && !isDisabled;
+  const showIndeterminate = isIndeterminate && !isDisabled;
+  const markIcon = isIndeterminate ? dashMark(isDisabled ? "--b-on-primary" /* OnPrimary */ : "--b-on-surface-active" /* OnSurfaceActive */) : isSelected ? checkmarkSmall : "";
   const tid = useTestIds(props);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { ...hoverProps, ...(0, import_runtime19.trussProps)({
     ...baseStyles,
-    ...(isSelected && !isDisabled || isIndeterminate) && filledBoxStyles,
-    ...(isSelected && !isDisabled || isIndeterminate) && isHovered && filledBoxHoverStyles,
+    ...showSelected && filledBoxStyles,
+    ...showIndeterminate && indeterminateBoxStyles,
+    ...showSelected && isHovered && filledBoxHoverStyles,
+    ...showIndeterminate && isHovered && indeterminateHoverStyles,
     ...isDisabled && disabledBoxStyles,
     ...isDisabled && isSelected && disabledSelectedBoxStyles,
     ...isFocusVisible && focusRingStyles,
-    ...isHovered && hoverBorderStyles
+    // Selected and empty boxes still use the palette hover border. Indeterminate hover sets its own.
+    ...isHovered && !showIndeterminate && hoverBorderStyles
   }), "aria-hidden": "true", "data-checked": isSelected ? true : isIndeterminate ? "mixed" : false, ...tid.checkbox, children: markIcon });
 }
 var checkmarkSmall = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime19.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M6.66669 10.3907L4.47135 8.19533L3.52869 9.138L6.66669 12.276L13.138 5.80467L12.1954 4.862L6.66669 10.3907Z", fill: `var(${"--b-on-primary" /* OnPrimary */})` }) });
-var dashSmall = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime19.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: `var(${"--b-on-primary" /* OnPrimary */})` }) });
+function dashMark(fillToken) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime19.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: `var(${fillToken})` }) });
+}
 
 // src/inputs/Checkbox.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");