@homebound/beam 2.411.0-alpha.1 → 2.412.0

package/dist/index.cjs

@@ -6727,10 +6727,14 @@ var import_react26 = require("react");
 var import_react_aria10 = require("react-aria");
 var import_react_stately2 = require("react-stately");
 
-// src/components/internal/OverlayTrigger.tsx
+// src/components/Button.tsx
 var import_react25 = require("react");
 var import_react_aria9 = require("react-aria");
 
+// src/components/internal/OverlayTrigger.tsx
+var import_react24 = require("react");
+var import_react_aria8 = require("react-aria");
+
 // src/components/Avatar/AvatarButton.tsx
 var import_react22 = require("react");
 var import_react_aria6 = require("react-aria");
@@ -6851,185 +6855,10 @@ var pressedStyles = Css.addIn(
   Css.br100.bgGray900.contentEmpty.w100.h100.absolute.top0.left0.add("opacity", "0.2").$
 ).$;
 
-// src/components/Button.tsx
+// src/components/NavLink.tsx
 var import_react23 = require("react");
 var import_react_aria7 = require("react-aria");
 var import_jsx_runtime24 = 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_react23.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_react23.useMemo)(
-    () => getButtonStyles(variant, size, contrast),
-    [variant, size, contrast]
-  );
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { xss: iconStyles[size], icon }),
-    labelInFlight && asyncInProgress ? labelInFlight : label,
-    (endAdornment || asyncInProgress) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { css: Css.ml1.$, children: asyncInProgress ? /* @__PURE__ */ (0, import_jsx_runtime24.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).px1.$,
-  lg: Css.hPx(48).px3.$
-};
-var iconStyles = {
-  sm: Css.mrPx(4).$,
-  md: Css.mr1.$,
-  lg: Css.mrPx(10).$
-};
-
-// src/components/NavLink.tsx
-var import_react24 = require("react");
-var import_react_aria8 = require("react-aria");
-var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
 function NavLink(props) {
   const {
     disabled: isDisabled,
@@ -7043,10 +6872,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_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_react24.useMemo)(
+  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_react23.useMemo)(
     () => getNavLinkStyles(variant, contrast),
     [variant, contrast]
   );
@@ -7066,11 +6895,11 @@ function NavLink(props) {
       ...isPressed && pressedStyles3
     }
   };
-  const linkContent = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+  const linkContent = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
     label,
-    icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { css: Css.ml1.$, children: /* @__PURE__ */ (0, import_jsx_runtime25.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_aria8.mergeProps)(buttonProps, focusProps, hoverProps), ...linkAttributes });
+  return getButtonOrLink(linkContent, href, { ...(0, import_react_aria7.mergeProps)(buttonProps, focusProps, hoverProps), ...linkAttributes });
 }
 function getNavLinkStyles(variant, contrast) {
   return navLinkVariantStyles(contrast)[variant];
@@ -7099,7 +6928,7 @@ var navLinkVariantStyles = (contrast) => ({
 });
 
 // src/components/internal/OverlayTrigger.tsx
-var import_jsx_runtime26 = (
+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")
 );
@@ -7118,8 +6947,8 @@ function OverlayTrigger(props) {
     showActiveBorder = false,
     contrast = false
   } = props;
-  const popoverRef = (0, import_react25.useRef)(null);
-  const { overlayProps: positionProps } = (0, import_react_aria9.useOverlayPosition)({
+  const popoverRef = (0, import_react24.useRef)(null);
+  const { overlayProps: positionProps } = (0, import_react_aria8.useOverlayPosition)({
     targetRef: buttonRef,
     overlayRef: popoverRef,
     shouldFlip: true,
@@ -7132,8 +6961,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_runtime26.jsxs)("div", { css: Css.dib.add("lineHeight", 0).$, children: [
-    isTextButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime26.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",
@@ -7141,14 +6970,14 @@ function OverlayTrigger(props) {
         ...trigger,
         menuTriggerProps,
         buttonRef,
-        endAdornment: !hideEndAdornment ? /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)(
+    ) : isNavLinkButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       NavLink,
       {
         ...trigger,
@@ -7159,7 +6988,7 @@ function OverlayTrigger(props) {
         buttonRef,
         ...tid
       }
-    ) : isIconButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    ) : isIconButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       IconButton,
       {
         ...trigger,
@@ -7171,7 +7000,7 @@ function OverlayTrigger(props) {
         onClick: menuTriggerProps.onPress ?? noop,
         forceFocusStyles: showActiveBorder && state.isOpen
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       AvatarButton,
       {
         ...trigger,
@@ -7184,7 +7013,7 @@ function OverlayTrigger(props) {
         forceFocusStyles: showActiveBorder && state.isOpen
       }
     ),
-    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Popover,
       {
         triggerRef: buttonRef,
@@ -7210,6 +7039,179 @@ function labelOr(trigger, fallback) {
   return typeof trigger.label === "string" ? trigger.label : fallback;
 }
 
+// src/components/Button.tsx
+var import_jsx_runtime26 = 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_react25.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_react25.useMemo)(
+    () => getButtonStyles(variant, size, contrast),
+    [variant, size, contrast]
+  );
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { xss: iconStyles[size], icon }),
+    labelInFlight && asyncInProgress ? labelInFlight : label,
+    (endAdornment || asyncInProgress) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { css: Css.ml1.$, children: asyncInProgress ? /* @__PURE__ */ (0, import_jsx_runtime26.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).px1.$,
+  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_runtime27 = require("@emotion/react/jsx-runtime");
 function EditColumnsButton(props) {
@@ -7241,29 +7243,32 @@ function EditColumnsButton(props) {
     },
     [columns, api]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       css: {
         ...Css.dg.gtc("1fr auto").gap2.bgWhite.p2.maxwPx(326).$,
         "&:hover": Css.bshHover.$
       },
-      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: Css.sm.truncate.pr1.$, children: option.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          Switch,
-          {
-            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}`]
-          }
-        )
-      ] }, option.value))
+      children: [
+        options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: Css.sm.truncate.pr1.$, children: option.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            Switch,
+            {
+              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}`]
+            }
+          )
+        ] }, option.value)),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: Css.gc("1 / -1").df.jcc.$, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+      ]
     }
   ) });
 }
@@ -8030,8 +8035,9 @@ function ColumnResizeHandle({
       startWidthRef.current = currentWidth;
       const rect = handleRef.current?.getBoundingClientRect();
       if (rect) {
-        startHandleRightRef.current = rect.right;
-        setGuideLineX(rect.right);
+        const handleCenter = rect.right - rect.width / 2;
+        startHandleRightRef.current = handleCenter;
+        setGuideLineX(handleCenter);
       }
       if (scrollableEl?.parentElement) {
         scrollableParentRef.current = scrollableEl.parentElement;
@@ -8050,9 +8056,9 @@ function ColumnResizeHandle({
           setGuideLineTop(tableRect.top);
           setGuideLineHeight(tableRect.height);
         }
-      } else {
-        setGuideLineTop(0);
-        setGuideLineHeight(window.innerHeight);
+      } else if (rect) {
+        setGuideLineTop(rect.top);
+        setGuideLineHeight(rect.height);
       }
       document.body.style.cursor = "col-resize";
       document.body.style.userSelect = "none";
@@ -17446,7 +17452,7 @@ function GridTableLayoutComponent(props) {
             columns,
             api,
             tooltip: "Display columns",
-            trigger: { icon: "kanban", label: "", variant: "secondaryBlack" },
+            trigger: { icon: "kanban", size: "md", label: "", variant: "secondaryBlack" },
             ...tid.editColumnsButton
           }
         ),