@homebound/beam 2.411.0-alpha.1 → 2.412.0

package/dist/index.js

@@ -6359,6 +6359,10 @@ import { Fragment as Fragment7, useCallback as useCallback4, useMemo as useMemo1
 import { useMenuTrigger } from "react-aria";
 import { useMenuTriggerState } from "react-stately";
 
+// src/components/Button.tsx
+import { useMemo as useMemo11, useState as useState9 } from "react";
+import { useButton as useButton4, useFocusRing as useFocusRing4, useHover as useHover5 } from "react-aria";
+
 // src/components/internal/OverlayTrigger.tsx
 import { useRef as useRef7 } from "react";
 import { useOverlayPosition } from "react-aria";
@@ -6483,185 +6487,10 @@ var pressedStyles = Css.addIn(
   Css.br100.bgGray900.contentEmpty.w100.h100.absolute.top0.left0.add("opacity", "0.2").$
 ).$;
 
-// src/components/Button.tsx
-import { useMemo as useMemo10, useState as useState9 } from "react";
-import { useButton as useButton3, useFocusRing as useFocusRing3, useHover as useHover4 } from "react-aria";
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs11 } from "@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] = useState9(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 } = useButton3(
-    {
-      ...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 } = useFocusRing3(ariaProps);
-  const { hoverProps, isHovered } = useHover4(ariaProps);
-  const { baseStyles: baseStyles5, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3, focusStyles: focusStyles2 } = useMemo10(
-    () => getButtonStyles(variant, size, contrast),
-    [variant, size, contrast]
-  );
-  const buttonContent = /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    icon && /* @__PURE__ */ jsx24(Icon, { xss: iconStyles[size], icon }),
-    labelInFlight && asyncInProgress ? labelInFlight : label,
-    (endAdornment || asyncInProgress) && /* @__PURE__ */ jsx24("span", { css: Css.ml1.$, children: asyncInProgress ? /* @__PURE__ */ jsx24(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
-import { useMemo as useMemo11 } from "react";
-import { mergeProps as mergeProps2, useButton as useButton4, useFocusRing as useFocusRing4, useHover as useHover5 } from "react-aria";
-import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { useMemo as useMemo10 } from "react";
+import { mergeProps as mergeProps2, useButton as useButton3, useFocusRing as useFocusRing3, useHover as useHover4 } from "react-aria";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 function NavLink(props) {
   const {
     disabled: isDisabled,
@@ -6675,10 +6504,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 } = useButton4({ ...ariaProps, elementType: href ? "a" : "button" }, ref);
-  const { hoverProps, isHovered } = useHover5({ isDisabled });
-  const { isFocusVisible, focusProps } = useFocusRing4(ariaProps);
-  const { baseStyles: baseStyles5, activeStyles: activeStyles4, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3 } = useMemo11(
+  const { buttonProps, isPressed } = useButton3({ ...ariaProps, elementType: href ? "a" : "button" }, ref);
+  const { hoverProps, isHovered } = useHover4({ isDisabled });
+  const { isFocusVisible, focusProps } = useFocusRing3(ariaProps);
+  const { baseStyles: baseStyles5, activeStyles: activeStyles4, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3 } = useMemo10(
     () => getNavLinkStyles(variant, contrast),
     [variant, contrast]
   );
@@ -6698,9 +6527,9 @@ function NavLink(props) {
       ...isPressed && pressedStyles3
     }
   };
-  const linkContent = /* @__PURE__ */ jsxs12(Fragment6, { children: [
+  const linkContent = /* @__PURE__ */ jsxs11(Fragment5, { children: [
     label,
-    icon && /* @__PURE__ */ jsx25("span", { css: Css.ml1.$, children: /* @__PURE__ */ jsx25(Icon, { icon }) })
+    icon && /* @__PURE__ */ jsx24("span", { css: Css.ml1.$, children: /* @__PURE__ */ jsx24(Icon, { icon }) })
   ] });
   return getButtonOrLink(linkContent, href, { ...mergeProps2(buttonProps, focusProps, hoverProps), ...linkAttributes });
 }
@@ -6731,7 +6560,7 @@ var navLinkVariantStyles = (contrast) => ({
 });
 
 // src/components/internal/OverlayTrigger.tsx
-import { jsx as jsx26, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 function OverlayTrigger(props) {
   const {
     trigger,
@@ -6763,8 +6592,8 @@ function OverlayTrigger(props) {
   );
   return (
     // 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.
-    /* @__PURE__ */ jsxs13("div", { css: Css.dib.add("lineHeight", 0).$, children: [
-      isTextButton(trigger) ? /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs12("div", { css: Css.dib.add("lineHeight", 0).$, children: [
+      isTextButton(trigger) ? /* @__PURE__ */ jsx25(
         Button,
         {
           variant: variant ? variant : "secondary",
@@ -6772,14 +6601,14 @@ function OverlayTrigger(props) {
           ...trigger,
           menuTriggerProps,
           buttonRef,
-          endAdornment: !hideEndAdornment ? /* @__PURE__ */ jsx26(Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null,
+          endAdornment: !hideEndAdornment ? /* @__PURE__ */ jsx25(Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null,
           disabled,
           tooltip,
           onClick: menuTriggerProps.onPress ?? noop,
           forceFocusStyles: showActiveBorder && state.isOpen,
           ...tid
         }
-      ) : isNavLinkButton(trigger) ? /* @__PURE__ */ jsx26(
+      ) : isNavLinkButton(trigger) ? /* @__PURE__ */ jsx25(
         NavLink,
         {
           ...trigger,
@@ -6790,7 +6619,7 @@ function OverlayTrigger(props) {
           buttonRef,
           ...tid
         }
-      ) : isIconButton(trigger) ? /* @__PURE__ */ jsx26(
+      ) : isIconButton(trigger) ? /* @__PURE__ */ jsx25(
         IconButton,
         {
           ...trigger,
@@ -6802,7 +6631,7 @@ function OverlayTrigger(props) {
           onClick: menuTriggerProps.onPress ?? noop,
           forceFocusStyles: showActiveBorder && state.isOpen
         }
-      ) : /* @__PURE__ */ jsx26(
+      ) : /* @__PURE__ */ jsx25(
         AvatarButton,
         {
           ...trigger,
@@ -6815,7 +6644,7 @@ function OverlayTrigger(props) {
           forceFocusStyles: showActiveBorder && state.isOpen
         }
       ),
-      state.isOpen && /* @__PURE__ */ jsx26(
+      state.isOpen && /* @__PURE__ */ jsx25(
         Popover,
         {
           triggerRef: buttonRef,
@@ -6842,6 +6671,179 @@ function labelOr(trigger, fallback) {
   return typeof trigger.label === "string" ? trigger.label : fallback;
 }
 
+// src/components/Button.tsx
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs13 } from "@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] = useState9(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 } = useButton4(
+    {
+      ...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 } = useFocusRing4(ariaProps);
+  const { hoverProps, isHovered } = useHover5(ariaProps);
+  const { baseStyles: baseStyles5, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, pressedStyles: pressedStyles3, focusStyles: focusStyles2 } = useMemo11(
+    () => getButtonStyles(variant, size, contrast),
+    [variant, size, contrast]
+  );
+  const buttonContent = /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    icon && /* @__PURE__ */ jsx26(Icon, { xss: iconStyles[size], icon }),
+    labelInFlight && asyncInProgress ? labelInFlight : label,
+    (endAdornment || asyncInProgress) && /* @__PURE__ */ jsx26("span", { css: Css.ml1.$, children: asyncInProgress ? /* @__PURE__ */ jsx26(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
 import { jsx as jsx27, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 function EditColumnsButton(props) {
@@ -6873,29 +6875,32 @@ function EditColumnsButton(props) {
     },
     [columns, api]
   );
-  return /* @__PURE__ */ jsx27(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx27(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs14(
     "div",
     {
       css: {
         ...Css.dg.gtc("1fr auto").gap2.bgWhite.p2.maxwPx(326).$,
         "&:hover": Css.bshHover.$
       },
-      children: options.map((option) => /* @__PURE__ */ jsxs14(Fragment7, { children: [
-        /* @__PURE__ */ jsx27("div", { css: Css.sm.truncate.pr1.$, children: option.label }),
-        /* @__PURE__ */ jsx27(
-          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__ */ jsxs14(Fragment7, { children: [
+          /* @__PURE__ */ jsx27("div", { css: Css.sm.truncate.pr1.$, children: option.label }),
+          /* @__PURE__ */ jsx27(
+            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__ */ jsx27("div", { css: Css.gc("1 / -1").df.jcc.$, children: /* @__PURE__ */ jsx27(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+      ]
     }
   ) });
 }
@@ -7662,8 +7667,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;
@@ -7682,9 +7688,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";
@@ -17087,7 +17093,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
           }
         ),