@homebound/beam 2.407.0 → 2.408.0

package/dist/index.cjs

@@ -6676,14 +6676,10 @@ var import_react25 = require("react");
 var import_react_aria10 = require("react-aria");
 var import_react_stately2 = require("react-stately");
 
-// src/components/Button.tsx
+// src/components/internal/OverlayTrigger.tsx
 var import_react24 = require("react");
 var import_react_aria9 = require("react-aria");
 
-// src/components/internal/OverlayTrigger.tsx
-var import_react23 = require("react");
-var import_react_aria8 = require("react-aria");
-
 // src/components/Avatar/AvatarButton.tsx
 var import_react21 = require("react");
 var import_react_aria6 = require("react-aria");
@@ -6804,10 +6800,185 @@ var pressedStyles = Css.addIn(
   Css.br100.bgGray900.contentEmpty.w100.h100.absolute.top0.left0.add("opacity", "0.2").$
 ).$;
 
-// src/components/NavLink.tsx
+// src/components/Button.tsx
 var import_react22 = require("react");
 var import_react_aria7 = require("react-aria");
 var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+function Button(props) {
+  const {
+    onClick: onPress,
+    disabled,
+    endAdornment,
+    menuTriggerProps,
+    tooltip,
+    openInNew,
+    download,
+    contrast = false,
+    forceFocusStyles = false,
+    labelInFlight,
+    ...otherProps
+  } = props;
+  const asLink = typeof onPress === "string";
+  const showExternalLinkIcon = asLink && isAbsoluteUrl(onPress) || openInNew;
+  const [asyncInProgress, setAsyncInProgress] = (0, import_react22.useState)(false);
+  const isDisabled = !!disabled;
+  const ariaProps = { onPress, isDisabled: isDisabled || asyncInProgress, ...otherProps, ...menuTriggerProps };
+  const {
+    label,
+    // Default the icon based on other properties.
+    icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : void 0,
+    variant = "primary",
+    size = "sm",
+    buttonRef
+  } = ariaProps;
+  const ref = useGetRef(buttonRef);
+  const tid = useTestIds(props, labelOr(ariaProps, "button"));
+  const { buttonProps, isPressed } = (0, import_react_aria7.useButton)(
+    {
+      ...ariaProps,
+      onPress: asLink ? noop : (e) => {
+        const result = onPress(e);
+        if (isPromise(result)) {
+          setAsyncInProgress(true);
+          result.finally(() => setAsyncInProgress(false));
+        }
+        return result;
+      },
+      elementType: asLink ? "a" : "button"
+    },
+    ref
+  );
+  const { isFocusVisible, focusProps } = (0, import_react_aria7.useFocusRing)(ariaProps);
+  const { hoverProps, isHovered } = (0, import_react_aria7.useHover)(ariaProps);
+  const { baseStyles: baseStyles5, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3, focusStyles: focusStyles2 } = (0, import_react22.useMemo)(
+    () => getButtonStyles(variant, size, contrast),
+    [variant, size, contrast]
+  );
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { xss: iconStyles[size], icon }),
+    labelInFlight && asyncInProgress ? labelInFlight : label,
+    (endAdornment || asyncInProgress) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: Css.ml1.$, children: asyncInProgress ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader, { size: "xs", contrast }) : endAdornment })
+  ] });
+  const buttonAttrs = {
+    ref,
+    ...buttonProps,
+    ...focusProps,
+    ...hoverProps,
+    className: asLink ? navLink : void 0,
+    css: {
+      ...Css.buttonBase.tt("inherit").$,
+      ...baseStyles5,
+      ...isHovered && !isPressed ? hoverStyles4 : {},
+      ...isPressed ? pressedStyles3 : {},
+      ...isDisabled || asyncInProgress ? { ...disabledStyles4, ...Css.cursorNotAllowed.$ } : {},
+      ...isFocusVisible || forceFocusStyles ? focusStyles2 : {}
+    },
+    ...tid
+  };
+  return maybeTooltip({
+    title: resolveTooltip(disabled, tooltip),
+    placement: "top",
+    children: getButtonOrLink(buttonContent, onPress, buttonAttrs, openInNew, download)
+  });
+}
+function getButtonStyles(variant, size, contrast) {
+  const styles = variantStyles(contrast)[variant];
+  if (variant === "text") {
+    return styles;
+  }
+  return {
+    ...styles,
+    baseStyles: { ...styles.baseStyles, ...sizeStyles[size] }
+  };
+}
+var variantStyles = (contrast) => ({
+  primary: {
+    baseStyles: Css.bgBlue600.white.$,
+    hoverStyles: Css.bgBlue700.$,
+    pressedStyles: Css.bgBlue800.$,
+    disabledStyles: Css.bgBlue200.if(contrast).gray600.bgBlue900.$,
+    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
+  },
+  secondary: {
+    baseStyles: Css.bgWhite.bcGray300.bw1.ba.blue600.$,
+    hoverStyles: Css.bgGray100.if(contrast).bgGray300.$,
+    pressedStyles: Css.bgGray200.if(contrast).bgGray100.$,
+    disabledStyles: Css.bgWhite.blue300.$,
+    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
+  },
+  secondaryBlack: {
+    baseStyles: Css.bgWhite.bcGray300.bw1.ba.gray900.$,
+    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 */}`).$
+  },
+  tertiary: {
+    baseStyles: Css.bgTransparent.blue600.if(contrast).white.$,
+    hoverStyles: Css.bgGray100.if(contrast).bgGray700.white.$,
+    pressedStyles: Css.blue800.if(contrast).bgWhite.gray900.$,
+    disabledStyles: Css.gray400.if(contrast).gray700.$,
+    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(96, 165, 250, 1)" /* Blue400 */}`).bgGray700.white.$
+  },
+  tertiaryDanger: {
+    baseStyles: Css.bgTransparent.red600.if(contrast).red400.$,
+    hoverStyles: Css.bgGray100.if(contrast).bgGray700.white.$,
+    pressedStyles: Css.red800.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(239, 68, 68, 1)" /* Red500 */}`).if(contrast).boxShadow(`0px 0px 0px 2px ${"rgba(239, 68, 68, 1)" /* Red500 */}`).$
+  },
+  danger: {
+    baseStyles: Css.bgRed600.white.$,
+    hoverStyles: Css.bgRed700.$,
+    pressedStyles: Css.bgRed800.$,
+    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.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.$,
+    hoverStyles: Css.bgYellow300.$,
+    pressedStyles: Css.bgYellow400.$,
+    disabledStyles: Css.bgYellow200.if(contrast).bgYellow900.white.$,
+    focusStyles: Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
+  },
+  text: {
+    baseStyles: Css.blue700.add("fontSize", "inherit").if(contrast).blue400.$,
+    hoverStyles: Css.blue600.if(contrast).blue300.$,
+    pressedStyles: Css.blue700.if(contrast).blue200.$,
+    disabledStyles: Css.blue300.if(contrast).blue700.$,
+    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
+  },
+  // Todo: handle contrast variant
+  textSecondary: {
+    baseStyles: Css.blue600.add("fontSize", "inherit").$,
+    hoverStyles: Css.bgGray100.$,
+    pressedStyles: Css.blue600.$,
+    disabledStyles: Css.bgWhite.blue300.$,
+    focusStyles: Css.blue600.$
+  }
+});
+var sizeStyles = {
+  sm: Css.hPx(32).pxPx(12).$,
+  md: Css.hPx(40).px2.$,
+  lg: Css.hPx(48).px3.$
+};
+var iconStyles = {
+  sm: Css.mrPx(4).$,
+  md: Css.mr1.$,
+  lg: Css.mrPx(10).$
+};
+
+// src/components/NavLink.tsx
+var import_react23 = require("react");
+var import_react_aria8 = require("react-aria");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
 function NavLink(props) {
   const {
     disabled: isDisabled,
@@ -6821,10 +6992,10 @@ function NavLink(props) {
   const ariaProps = { children: label, isDisabled, ...menuTriggerProps, ...otherProps };
   const { href, active = false, icon = false, variant } = ariaProps;
   const ref = useGetRef(buttonRef);
-  const { buttonProps, isPressed } = (0, import_react_aria7.useButton)({ ...ariaProps, elementType: href ? "a" : "button" }, ref);
-  const { hoverProps, isHovered } = (0, import_react_aria7.useHover)({ isDisabled });
-  const { isFocusVisible, focusProps } = (0, import_react_aria7.useFocusRing)(ariaProps);
-  const { baseStyles: baseStyles5, activeStyles: activeStyles4, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3 } = (0, import_react22.useMemo)(
+  const { buttonProps, isPressed } = (0, import_react_aria8.useButton)({ ...ariaProps, elementType: href ? "a" : "button" }, ref);
+  const { hoverProps, isHovered } = (0, import_react_aria8.useHover)({ isDisabled });
+  const { isFocusVisible, focusProps } = (0, import_react_aria8.useFocusRing)(ariaProps);
+  const { baseStyles: baseStyles5, activeStyles: activeStyles4, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3 } = (0, import_react23.useMemo)(
     () => getNavLinkStyles(variant, contrast),
     [variant, contrast]
   );
@@ -6844,11 +7015,11 @@ function NavLink(props) {
       ...isPressed && pressedStyles3
     }
   };
-  const linkContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+  const linkContent = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
     label,
-    icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: Css.ml1.$, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { icon }) })
+    icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { css: Css.ml1.$, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon }) })
   ] });
-  return getButtonOrLink(linkContent, href, { ...(0, import_react_aria7.mergeProps)(buttonProps, focusProps, hoverProps), ...linkAttributes });
+  return getButtonOrLink(linkContent, href, { ...(0, import_react_aria8.mergeProps)(buttonProps, focusProps, hoverProps), ...linkAttributes });
 }
 function getNavLinkStyles(variant, contrast) {
   return navLinkVariantStyles(contrast)[variant];
@@ -6877,7 +7048,7 @@ var navLinkVariantStyles = (contrast) => ({
 });
 
 // src/components/internal/OverlayTrigger.tsx
-var import_jsx_runtime24 = (
+var import_jsx_runtime25 = (
   // Add `line-height: 0` to prevent the Icon button and Avatar buttons from inheriting the line-height, causing them to be taller than they should.
   require("@emotion/react/jsx-runtime")
 );
@@ -6896,8 +7067,8 @@ function OverlayTrigger(props) {
     showActiveBorder = false,
     contrast = false
   } = props;
-  const popoverRef = (0, import_react23.useRef)(null);
-  const { overlayProps: positionProps } = (0, import_react_aria8.useOverlayPosition)({
+  const popoverRef = (0, import_react24.useRef)(null);
+  const { overlayProps: positionProps } = (0, import_react_aria9.useOverlayPosition)({
     targetRef: buttonRef,
     overlayRef: popoverRef,
     shouldFlip: true,
@@ -6910,8 +7081,8 @@ function OverlayTrigger(props) {
     props,
     isTextButton(trigger) ? defaultTestId(labelOr(trigger, "overlayTrigger")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { css: Css.dib.add("lineHeight", 0).$, children: [
-    isTextButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { css: Css.dib.add("lineHeight", 0).$, children: [
+    isTextButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Button,
       {
         variant: variant ? variant : "secondary",
@@ -6919,14 +7090,14 @@ function OverlayTrigger(props) {
         ...trigger,
         menuTriggerProps,
         buttonRef,
-        endAdornment: !hideEndAdornment ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null,
+        endAdornment: !hideEndAdornment ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null,
         disabled,
         tooltip,
         onClick: menuTriggerProps.onPress ?? noop,
         forceFocusStyles: showActiveBorder && state.isOpen,
         ...tid
       }
-    ) : isNavLinkButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    ) : isNavLinkButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       NavLink,
       {
         ...trigger,
@@ -6937,7 +7108,7 @@ function OverlayTrigger(props) {
         buttonRef,
         ...tid
       }
-    ) : isIconButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    ) : isIconButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       IconButton,
       {
         ...trigger,
@@ -6949,7 +7120,7 @@ function OverlayTrigger(props) {
         onClick: menuTriggerProps.onPress ?? noop,
         forceFocusStyles: showActiveBorder && state.isOpen
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       AvatarButton,
       {
         ...trigger,
@@ -6962,7 +7133,7 @@ function OverlayTrigger(props) {
         forceFocusStyles: showActiveBorder && state.isOpen
       }
     ),
-    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Popover,
       {
         triggerRef: buttonRef,
@@ -6988,176 +7159,10 @@ function labelOr(trigger, fallback) {
   return typeof trigger.label === "string" ? trigger.label : fallback;
 }
 
-// src/components/Button.tsx
-var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
-function Button(props) {
-  const {
-    onClick: onPress,
-    disabled,
-    endAdornment,
-    menuTriggerProps,
-    tooltip,
-    openInNew,
-    download,
-    contrast = false,
-    forceFocusStyles = false,
-    labelInFlight,
-    ...otherProps
-  } = props;
-  const asLink = typeof onPress === "string";
-  const showExternalLinkIcon = asLink && isAbsoluteUrl(onPress) || openInNew;
-  const [asyncInProgress, setAsyncInProgress] = (0, import_react24.useState)(false);
-  const isDisabled = !!disabled;
-  const ariaProps = { onPress, isDisabled: isDisabled || asyncInProgress, ...otherProps, ...menuTriggerProps };
-  const {
-    label,
-    // Default the icon based on other properties.
-    icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : void 0,
-    variant = "primary",
-    size = "sm",
-    buttonRef
-  } = ariaProps;
-  const ref = useGetRef(buttonRef);
-  const tid = useTestIds(props, labelOr(ariaProps, "button"));
-  const { buttonProps, isPressed } = (0, import_react_aria9.useButton)(
-    {
-      ...ariaProps,
-      onPress: asLink ? noop : (e) => {
-        const result = onPress(e);
-        if (isPromise(result)) {
-          setAsyncInProgress(true);
-          result.finally(() => setAsyncInProgress(false));
-        }
-        return result;
-      },
-      elementType: asLink ? "a" : "button"
-    },
-    ref
-  );
-  const { isFocusVisible, focusProps } = (0, import_react_aria9.useFocusRing)(ariaProps);
-  const { hoverProps, isHovered } = (0, import_react_aria9.useHover)(ariaProps);
-  const { baseStyles: baseStyles5, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3, focusStyles: focusStyles2 } = (0, import_react24.useMemo)(
-    () => getButtonStyles(variant, size, contrast),
-    [variant, size, contrast]
-  );
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { xss: iconStyles[size], icon }),
-    labelInFlight && asyncInProgress ? labelInFlight : label,
-    (endAdornment || asyncInProgress) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { css: Css.ml1.$, children: asyncInProgress ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loader, { size: "xs", contrast }) : endAdornment })
-  ] });
-  const buttonAttrs = {
-    ref,
-    ...buttonProps,
-    ...focusProps,
-    ...hoverProps,
-    className: asLink ? navLink : void 0,
-    css: {
-      ...Css.buttonBase.tt("inherit").$,
-      ...baseStyles5,
-      ...isHovered && !isPressed ? hoverStyles4 : {},
-      ...isPressed ? pressedStyles3 : {},
-      ...isDisabled || asyncInProgress ? { ...disabledStyles4, ...Css.cursorNotAllowed.$ } : {},
-      ...isFocusVisible || forceFocusStyles ? focusStyles2 : {}
-    },
-    ...tid
-  };
-  return maybeTooltip({
-    title: resolveTooltip(disabled, tooltip),
-    placement: "top",
-    children: getButtonOrLink(buttonContent, onPress, buttonAttrs, openInNew, download)
-  });
-}
-function getButtonStyles(variant, size, contrast) {
-  const styles = variantStyles(contrast)[variant];
-  if (variant === "text") {
-    return styles;
-  }
-  return {
-    ...styles,
-    baseStyles: { ...styles.baseStyles, ...sizeStyles[size] }
-  };
-}
-var variantStyles = (contrast) => ({
-  primary: {
-    baseStyles: Css.bgBlue600.white.$,
-    hoverStyles: Css.bgBlue700.$,
-    pressedStyles: Css.bgBlue800.$,
-    disabledStyles: Css.bgBlue200.if(contrast).gray600.bgBlue900.$,
-    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
-  },
-  secondary: {
-    baseStyles: Css.bgWhite.bcGray300.bw1.ba.blue600.$,
-    hoverStyles: Css.bgGray100.if(contrast).bgGray300.$,
-    pressedStyles: Css.bgGray200.if(contrast).bgGray100.$,
-    disabledStyles: Css.bgWhite.blue300.$,
-    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
-  },
-  tertiary: {
-    baseStyles: Css.bgTransparent.blue600.if(contrast).white.$,
-    hoverStyles: Css.bgGray100.if(contrast).bgGray700.white.$,
-    pressedStyles: Css.blue800.if(contrast).bgWhite.gray900.$,
-    disabledStyles: Css.gray400.if(contrast).gray700.$,
-    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(96, 165, 250, 1)" /* Blue400 */}`).bgGray700.white.$
-  },
-  tertiaryDanger: {
-    baseStyles: Css.bgTransparent.red600.if(contrast).red400.$,
-    hoverStyles: Css.bgGray100.if(contrast).bgGray700.white.$,
-    pressedStyles: Css.red800.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(239, 68, 68, 1)" /* Red500 */}`).if(contrast).boxShadow(`0px 0px 0px 2px ${"rgba(239, 68, 68, 1)" /* Red500 */}`).$
-  },
-  danger: {
-    baseStyles: Css.bgRed600.white.$,
-    hoverStyles: Css.bgRed700.$,
-    pressedStyles: Css.bgRed800.$,
-    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.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.$,
-    hoverStyles: Css.bgYellow300.$,
-    pressedStyles: Css.bgYellow400.$,
-    disabledStyles: Css.bgYellow200.if(contrast).bgYellow900.white.$,
-    focusStyles: Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
-  },
-  text: {
-    baseStyles: Css.blue700.add("fontSize", "inherit").if(contrast).blue400.$,
-    hoverStyles: Css.blue600.if(contrast).blue300.$,
-    pressedStyles: Css.blue700.if(contrast).blue200.$,
-    disabledStyles: Css.blue300.if(contrast).blue700.$,
-    focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
-  },
-  // Todo: handle contrast variant
-  textSecondary: {
-    baseStyles: Css.blue600.add("fontSize", "inherit").$,
-    hoverStyles: Css.bgGray100.$,
-    pressedStyles: Css.blue600.$,
-    disabledStyles: Css.bgWhite.blue300.$,
-    focusStyles: Css.blue600.$
-  }
-});
-var sizeStyles = {
-  sm: Css.hPx(32).pxPx(12).$,
-  md: Css.hPx(40).px2.$,
-  lg: Css.hPx(48).px3.$
-};
-var iconStyles = {
-  sm: Css.mrPx(4).$,
-  md: Css.mr1.$,
-  lg: Css.mrPx(10).$
-};
-
 // src/components/Table/components/EditColumnsButton.tsx
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 function EditColumnsButton(props) {
-  const { defaultOpen, disabled, columns, trigger, title, api } = props;
+  const { defaultOpen, disabled, columns, trigger, api } = props;
   const state = (0, import_react_stately2.useMenuTriggerState)({ isOpen: defaultOpen });
   const buttonRef = (0, import_react25.useRef)(null);
   const { menuTriggerProps } = (0, import_react_aria10.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
@@ -7184,28 +7189,29 @@ function EditColumnsButton(props) {
     },
     [columns, api]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       css: {
-        ...Css.bgWhite.py5.px3.maxwPx(380).bshBasic.$,
+        ...Css.dg.gtc("1fr auto").gap2.bgWhite.p2.maxwPx(326).$,
         "&:hover": Css.bshHover.$
       },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: Css.gray500.xsSb.mb1.ttu.$, children: title || "Select columns to show" }),
+      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: Css.sm.truncate.pr1.$, children: option.label }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          CheckboxGroup,
+          Switch,
           {
-            label: title || "Select columns to show",
-            onChange: (values) => setSelectedValues(values),
-            values: selectedValues,
-            options,
-            columns: 2,
-            labelStyle: "hidden"
+            compact: true,
+            selected: selectedValues.includes(option.value),
+            onChange: (value) => setSelectedValues(
+              value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)
+            ),
+            labelStyle: "hidden",
+            label: option.label,
+            ...tid[`option${option.value}`]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: Css.mt1.$, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "tertiary", label: "Clear selections", onClick: () => setSelectedValues([]) }) })
-      ]
+        )
+      ] }, option.value))
     }
   ) });
 }
@@ -12475,13 +12481,13 @@ function SelectToggle({ id, disabled }) {
 // src/components/Table/utils/columns.tsx
 var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
 function column(columnDef) {
-  return { ...columnDef };
+  return { canHide: true, initVisible: true, ...columnDef };
 }
 function dateColumn(columnDef) {
-  return { ...columnDef, align: "left" };
+  return { canHide: true, initVisible: true, ...columnDef, align: "left" };
 }
 function numericColumn(columnDef) {
-  return { ...columnDef, align: "right" };
+  return { canHide: true, initVisible: true, ...columnDef, align: "right" };
 }
 function actionColumn(columnDef) {
   return { clientSideSort: false, ...columnDef, align: "center", isAction: true, wrapAction: false };
@@ -16649,11 +16655,38 @@ function isGridTableProps(props) {
   return "rows" in props;
 }
 function GridTableLayoutComponent(props) {
-  const { pageTitle, breadcrumb, tableProps, layoutState, primaryAction, secondaryAction, tertiaryAction } = props;
+  const {
+    pageTitle,
+    breadcrumb,
+    tableProps,
+    layoutState,
+    primaryAction,
+    secondaryAction,
+    tertiaryAction,
+    hideEditColumns = false
+  } = props;
+  const tid = useTestIds(props);
+  const columns = tableProps.columns;
+  const hasHideableColumns = (0, import_react95.useMemo)(() => {
+    if (hideEditColumns) return false;
+    validateColumns(columns);
+    return columns.some((c) => c.canHide);
+  }, [columns, hideEditColumns]);
+  const api = (0, import_react95.useMemo)(
+    () => tableProps.api ?? new GridTableApiImpl(),
+    [tableProps.api]
+  );
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = layoutState?.filterDefs || layoutState?.search;
+  const showTableActions = layoutState?.filterDefs || layoutState?.search || hasHideableColumns;
   const isVirtualized = tableProps.as === "virtual";
   const breakpoints = useBreakpoint();
+  const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
+  (0, import_react95.useEffect)(() => {
+    if (layoutState?.setVisibleColumnIds) {
+      layoutState.setVisibleColumnIds(visibleColumnIds);
+    }
+  }, [visibleColumnIds, layoutState]);
+  const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
   return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
       Header2,
@@ -16665,33 +16698,65 @@ function GridTableLayoutComponent(props) {
         tertiaryAction
       }
     ),
-    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(TableActions, { onlyRight: !layoutState?.search, children: [
-      layoutState?.search && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(SearchBox, { onSearch: layoutState.setSearchString }),
-      layoutState?.filterDefs && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-        _Filters,
+    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(TableActions, { onlyRight: !layoutState?.search && hasHideableColumns, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { css: Css.df.gap1.$, children: [
+        layoutState?.search && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(SearchBox, { onSearch: layoutState.setSearchString }),
+        layoutState?.filterDefs && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+          _Filters,
+          {
+            filterDefs: layoutState.filterDefs,
+            filter: layoutState.filter,
+            onChange: layoutState.setFilter,
+            groupBy: layoutState.groupBy,
+            numberOfInlineFilters: breakpoints.mdAndDown ? 2 : void 0
+          }
+        )
+      ] }),
+      hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+        EditColumnsButton,
         {
-          filterDefs: layoutState.filterDefs,
-          filter: layoutState.filter,
-          onChange: layoutState.setFilter,
-          groupBy: layoutState.groupBy,
-          numberOfInlineFilters: breakpoints.mdAndDown ? 2 : void 0
+          columns,
+          api,
+          tooltip: "Display columns",
+          trigger: { icon: "kanban", label: "", variant: "secondaryBlack" },
+          ...tid.editColumnsButton
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(ScrollableContent, { virtualized: isVirtualized, children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(GridTable, { ...tableProps, filter: clientSearch, style: { allWhite: true }, stickyHeader: true }) : /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(ScrollableContent, { virtualized: isVirtualized, children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+      GridTable,
+      {
+        ...tableProps,
+        api,
+        filter: clientSearch,
+        style: { allWhite: true },
+        stickyHeader: true,
+        visibleColumnsStorageKey
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
       QueryTable,
       {
         ...tableProps,
+        api,
         filter: clientSearch,
         style: { allWhite: true },
-        stickyHeader: true
+        stickyHeader: true,
+        visibleColumnsStorageKey
       }
     ) })
   ] });
 }
 var GridTableLayout = import_react95.default.memo(GridTableLayoutComponent);
+function validateColumns(columns) {
+  for (const col of columns) {
+    if (!col.id || !col.name) {
+      throw new Error("Columns must have id and name properties when EditColumnsButtons is enabled");
+    }
+  }
+}
 function useGridTableLayoutState({
   persistedFilter,
+  persistedColumns,
   search,
   groupBy: maybeGroupBy
 }) {
@@ -16699,6 +16764,11 @@ function useGridTableLayoutState({
   const { filter, setFilter } = usePersistedFilter(persistedFilter ?? filterFallback);
   const groupBy = useGroupBy(maybeGroupBy ?? { none: "none" });
   const [searchString, setSearchString] = (0, import_react95.useState)("");
+  const columnsFallback = "unset-columns";
+  const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(
+    persistedColumns?.storageKey ?? columnsFallback,
+    void 0
+  );
   return {
     filter,
     setFilter,
@@ -16706,7 +16776,10 @@ function useGridTableLayoutState({
     searchString,
     setSearchString,
     search,
-    groupBy: maybeGroupBy ? groupBy : void 0
+    groupBy: maybeGroupBy ? groupBy : void 0,
+    visibleColumnIds: persistedColumns ? visibleColumnIds : void 0,
+    setVisibleColumnIds: persistedColumns ? setVisibleColumnIds : void 0,
+    persistedColumnsStorageKey: persistedColumns?.storageKey
   };
 }
 function Header2(props) {