@homebound/beam 2.400.0 → 2.401.0

package/dist/index.d.cts

@@ -4197,7 +4197,7 @@ declare class CssBuilder<T extends Properties> {
     get transition(): CssBuilder<T & {
         transition: csstype.Property.Transition<string> | undefined;
     }>;
-    /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "4px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
+    /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
     get buttonBase(): CssBuilder<T & {
         fontWeight: csstype.Property.FontWeight | undefined;
     } & {
@@ -5002,7 +5002,7 @@ interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
 }
 declare function Button(props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
 type ButtonSize = "sm" | "md" | "lg";
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "caution" | "danger" | "text" | "textSecondary";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "tertiaryQuaternary" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
 
 interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     /** The icon to use within the button. */
@@ -6872,8 +6872,6 @@ interface RadioGroupFieldProps<K extends string> extends Pick<PresentationFieldP
     helperText?: string | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
-    /** The group name for the radio group. Only for legacy pages with custom layouts - avoid using this. */
-    unsupportedNameHack?: string;
 }
 /**
  * Provides a radio group with label.

package/dist/index.d.ts

@@ -4197,7 +4197,7 @@ declare class CssBuilder<T extends Properties> {
     get transition(): CssBuilder<T & {
         transition: csstype.Property.Transition<string> | undefined;
     }>;
-    /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "4px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
+    /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
     get buttonBase(): CssBuilder<T & {
         fontWeight: csstype.Property.FontWeight | undefined;
     } & {
@@ -5002,7 +5002,7 @@ interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
 }
 declare function Button(props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
 type ButtonSize = "sm" | "md" | "lg";
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "caution" | "danger" | "text" | "textSecondary";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "tertiaryQuaternary" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
 
 interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     /** The icon to use within the button. */
@@ -6872,8 +6872,6 @@ interface RadioGroupFieldProps<K extends string> extends Pick<PresentationFieldP
     helperText?: string | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
-    /** The group name for the radio group. Only for legacy pages with custom layouts - avoid using this. */
-    unsupportedNameHack?: string;
 }
 /**
  * Provides a radio group with label.

package/dist/index.js

@@ -3855,11 +3855,11 @@ var CssBuilder = class _CssBuilder {
     );
   }
   // buttonBase
-  /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "4px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
+  /** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
   get buttonBase() {
     return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add(
       "borderRadius",
-      "4px"
+      "8px"
     ).add("display", "inline-flex").add("alignItems", "center").add("whiteSpace", "nowrap").add(
       "transition",
       "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"
@@ -6829,10 +6829,10 @@ var variantStyles = (contrast) => ({
     focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
   },
   secondary: {
-    baseStyles: Css.bgWhite.bcGray300.bw1.ba.gray800.$,
+    baseStyles: Css.bgWhite.bcGray300.bw1.ba.blue600.$,
     hoverStyles: Css.bgGray100.if(contrast).bgGray300.$,
     pressedStyles: Css.bgGray200.if(contrast).bgGray100.$,
-    disabledStyles: Css.bgWhite.gray400.$,
+    disabledStyles: Css.bgWhite.blue300.$,
     focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
   },
   tertiary: {
@@ -6849,6 +6849,13 @@ var variantStyles = (contrast) => ({
     disabledStyles: Css.gray400.if(contrast).gray700.$,
     focusStyles: Css.boxShadow(`0px 0px 0px 2px ${"rgba(255,255,255,1)" /* White */}, 0px 0px 0px 4px ${"rgba(239, 68, 68, 1)" /* Red500 */}`).if(contrast).boxShadow(`0px 0px 0px 2px ${"rgba(239, 68, 68, 1)" /* Red500 */}`).$
   },
+  tertiaryQuaternary: {
+    baseStyles: Css.bgTransparent.gray900.if(contrast).gray400.$,
+    hoverStyles: Css.bgGray100.if(contrast).bgGray700.white.$,
+    pressedStyles: Css.gray900.if(contrast).bgWhite.gray900.$,
+    disabledStyles: Css.gray400.if(contrast).gray700.$,
+    focusStyles: Css.boxShadow(`0px 0px 0px 2px ${"rgba(255,255,255,1)" /* White */}, 0px 0px 0px 4px ${"rgba(36, 36, 36, 1)" /* Gray900 */}`).if(contrast).boxShadow(`0px 0px 0px 2px ${"rgba(175, 175, 175, 1)" /* Gray500 */}`).$
+  },
   danger: {
     baseStyles: Css.bgRed600.white.$,
     hoverStyles: Css.bgRed700.$,
@@ -6856,6 +6863,13 @@ var variantStyles = (contrast) => ({
     disabledStyles: Css.bgRed200.if(contrast).bgRed900.gray600.$,
     focusStyles: Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
   },
+  quaternary: {
+    baseStyles: Css.bgGray900.white.$,
+    hoverStyles: Css.bgGray700.$,
+    pressedStyles: Css.bgGray800.$,
+    disabledStyles: Css.bgGray200.if(contrast).bgGray900.gray600.$,
+    focusStyles: Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
+  },
   caution: {
     baseStyles: Css.bgYellow200.gray900.$,
     hoverStyles: Css.bgYellow300.$,
@@ -6872,11 +6886,11 @@ var variantStyles = (contrast) => ({
   },
   // Todo: handle contrast variant
   textSecondary: {
-    baseStyles: Css.gray900.add("fontSize", "inherit").$,
+    baseStyles: Css.blue600.add("fontSize", "inherit").$,
     hoverStyles: Css.bgGray100.$,
-    pressedStyles: Css.gray900.$,
-    disabledStyles: Css.bgWhite.gray400.$,
-    focusStyles: Css.gray900.$
+    pressedStyles: Css.blue600.$,
+    disabledStyles: Css.bgWhite.blue300.$,
+    focusStyles: Css.blue600.$
   }
 });
 var sizeStyles = {
@@ -11458,28 +11472,17 @@ import { useRadioGroupState } from "react-stately";
 import { jsx as jsx68, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var nextNameId = 0;
 function RadioGroupField(props) {
-  const {
-    label,
-    labelStyle,
-    value,
-    onChange,
-    options,
-    disabled = false,
-    errorMsg,
-    helperText,
-    unsupportedNameHack,
-    ...otherProps
-  } = props;
-  const groupName = useMemo18(() => unsupportedNameHack ?? `radio-group-${++nextNameId}`, [unsupportedNameHack]);
+  const { label, labelStyle, value, onChange, options, disabled = false, errorMsg, helperText, ...otherProps } = props;
+  const name = useMemo18(() => `radio-group-${++nextNameId}`, []);
   const state = useRadioGroupState({
-    name: groupName,
+    name,
     value,
     onChange: (value2) => onChange(value2),
     isDisabled: disabled,
     isReadOnly: false
   });
   const tid = useTestIds(props, defaultTestId(label));
-  const { labelProps, radioGroupProps } = useRadioGroup({ label, isDisabled: disabled, name: groupName }, state);
+  const { labelProps, radioGroupProps } = useRadioGroup({ label, isDisabled: disabled }, state);
   return (
     // default styling to position `<Label />` above.
     /* @__PURE__ */ jsxs38("div", { css: Css.df.fdc.gap1.aifs.if(labelStyle === "left").fdr.gap2.jcsb.$, children: [
@@ -11493,7 +11496,7 @@ function RadioGroupField(props) {
             children: /* @__PURE__ */ jsx68(
               Radio,
               {
-                parentId: groupName,
+                parentId: name,
                 option,
                 state: { ...state, isDisabled },
                 ...otherProps,
@@ -11541,7 +11544,6 @@ function Radio(props) {
         disabled,
         "aria-labelledby": labelId,
         ...inputProps,
-        name: parentId,
         ...focusProps,
         ...others
       }