@homebound/beam 2.401.0 → 2.403.0

package/dist/index.d.cts

@@ -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" | "tertiaryQuaternary" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
 
 interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     /** The icon to use within the button. */
@@ -7034,11 +7034,13 @@ type ToggleChipItemProps = {
      * If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip.
      */
     disabled?: boolean | ReactNode;
+    readonly?: boolean;
 };
 interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
     options: ToggleChipItemProps[];
     values: string[];
+    readonly?: boolean;
     required?: boolean;
     onChange: (values: string[]) => void;
     xss?: ToggleChipXss;

package/dist/index.d.ts

@@ -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" | "tertiaryQuaternary" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
 
 interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     /** The icon to use within the button. */
@@ -7034,11 +7034,13 @@ type ToggleChipItemProps = {
      * If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip.
      */
     disabled?: boolean | ReactNode;
+    readonly?: boolean;
 };
 interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
     options: ToggleChipItemProps[];
     values: string[];
+    readonly?: boolean;
     required?: boolean;
     onChange: (values: string[]) => void;
     xss?: ToggleChipXss;

package/dist/index.js

@@ -6849,13 +6849,6 @@ 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.$,
@@ -6864,11 +6857,11 @@ var variantStyles = (contrast) => ({
     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 */}`).$
+    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 */}`).$
   },
   caution: {
     baseStyles: Css.bgYellow200.gray900.$,
@@ -12111,8 +12104,16 @@ import { jsx as jsx76, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 function ToggleChipGroup(props) {
   const { fieldProps } = usePresentationContext();
   const { labelLeftFieldWidth = "50%" } = fieldProps ?? {};
-  const { values, label, labelStyle = fieldProps?.labelStyle ?? "above", options, required, xss } = props;
-  const state = useCheckboxGroupState2({ ...props, value: values });
+  const {
+    values,
+    label,
+    labelStyle = fieldProps?.labelStyle ?? "above",
+    options,
+    required,
+    xss,
+    readonly = false
+  } = props;
+  const state = useCheckboxGroupState2({ ...props, isReadOnly: readonly, value: values });
   const { groupProps, labelProps } = useCheckboxGroup2(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
@@ -12139,6 +12140,7 @@ function ToggleChipGroup(props) {
             selected: state.value.includes(o.value),
             label: o.label,
             disabled: o.disabled,
+            readonly: o.readonly,
             startAdornment: o.startAdornment,
             xss,
             ...tid[o.value]
@@ -12150,10 +12152,21 @@ function ToggleChipGroup(props) {
   ] });
 }
 function ToggleChip2(props) {
-  const { label, value, groupState, selected: isSelected, disabled = false, startAdornment, xss, ...others } = props;
+  const {
+    label,
+    value,
+    groupState,
+    selected: isSelected,
+    disabled = false,
+    readonly = false,
+    startAdornment,
+    xss,
+    ...others
+  } = props;
   const isDisabled = !!disabled;
+  const isReadOnly = !!readonly;
   const ref = useRef34(null);
-  const { inputProps } = useCheckboxGroupItem2({ value, "aria-label": label, isDisabled }, groupState, ref);
+  const { inputProps } = useCheckboxGroupItem2({ value, "aria-label": label, isReadOnly, isDisabled }, groupState, ref);
   const { isFocusVisible, focusProps } = useFocusRing9();
   const tooltip = resolveTooltip(disabled);
   return maybeTooltip({
@@ -12167,7 +12180,7 @@ function ToggleChip2(props) {
           ...isSelected ? {
             ...Css.color(xss?.color ?? "rgba(255,255,255,1)" /* White */).bgColor(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */).$,
             ":hover:not([data-disabled='true'])": Css.bgColor(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */).$
-          } : { ":hover:not([data-disabled='true'])": Css.bgGray300.$ },
+          } : { ":hover:not([data-disabled='true'])": Css.if(!groupState.isReadOnly).bgGray300.$ },
           ...isFocusVisible ? Css.bshFocus.$ : {}
         },
         "data-selected": isSelected,
@@ -15505,7 +15518,7 @@ function PageHeader(props) {
           {
             label: cancelAction.label,
             onClick: cancelAction.onClick,
-            variant: "secondary",
+            variant: "quaternary",
             disabled: cancelAction.disabled,
             tooltip: cancelAction.tooltip
           }
@@ -16134,7 +16147,7 @@ function FilterModal(props) {
         }
       ),
       /* @__PURE__ */ jsxs64("div", { css: Css.df.gap1.$, children: [
-        /* @__PURE__ */ jsx134(Button, { label: "Cancel", variant: "tertiary", onClick: closeModal, ...testId.modalClose }),
+        /* @__PURE__ */ jsx134(Button, { label: "Cancel", variant: "quaternary", onClick: closeModal, ...testId.modalClose }),
         /* @__PURE__ */ jsx134(
           Button,
           {
@@ -17672,7 +17685,7 @@ function ConfirmCloseModal(props) {
       /* @__PURE__ */ jsx162(
         Button,
         {
-          variant: "tertiary",
+          variant: "quaternary",
           label: discardText,
           onClick: () => {
             onClose();