@homebound/beam 2.413.0-alpha.6 → 2.413.1

package/dist/index.cjs

@@ -7065,7 +7065,7 @@ function Button(props) {
     // Default the icon based on other properties.
     icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : void 0,
     variant = "primary",
-    size = "md",
+    size = "sm",
     buttonRef
   } = ariaProps;
   const ref = useGetRef(buttonRef);
@@ -7575,7 +7575,7 @@ var nonKindGridColumnKeys = [
   "isAction",
   "id",
   "canHide",
-  "initVisible",
+  "initHidden",
   "expandColumns",
   "initExpanded",
   "hideOnExpand",
@@ -8704,7 +8704,7 @@ function RowImpl(props) {
       const cellElementWithHandle = import_react33.default.cloneElement(cellElement, {
         css: {
           ...cellElement.props.css || {},
-          ...Css.relative.$
+          ...!maybeSticky && Css.relative.$
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
           cellElement.props.children,
@@ -8834,7 +8834,7 @@ function TextFieldBase(props) {
   const fieldStyles = {
     container: Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
     inputWrapper: {
-      ...Css[typeScale].df.aic.br8.pxPx(textFieldBasePadding).w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).white.if(labelStyle === "left").w(labelLeftFieldWidth).$,
+      ...Css[typeScale].df.aic.br4.pxPx(textFieldBasePadding).w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).white.if(labelStyle === "left").w(labelLeftFieldWidth).$,
       // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
       // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
       // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
@@ -12855,13 +12855,13 @@ function SelectToggle({ id, disabled }) {
 // src/components/Table/utils/columns.tsx
 var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 function column(columnDef) {
-  return { canHide: true, initVisible: true, ...columnDef };
+  return { canHide: true, initHidden: false, ...columnDef };
 }
 function dateColumn(columnDef) {
-  return { canHide: true, initVisible: true, ...columnDef, align: "left" };
+  return { canHide: true, initHidden: false, ...columnDef, align: "left" };
 }
 function numericColumn(columnDef) {
-  return { canHide: true, initVisible: true, ...columnDef, align: "right" };
+  return { canHide: true, initHidden: false, ...columnDef, align: "right" };
 }
 function actionColumn(columnDef) {
   return { clientSideSort: false, ...columnDef, align: "center", isAction: true, wrapAction: false };
@@ -13057,7 +13057,7 @@ var ColumnState = class {
   constructor(states, storage, column2) {
     this.states = states;
     this.column = column2;
-    this.visible = storage.wasVisible(column2.id) ?? (column2.canHide ? column2.initVisible ?? false : true);
+    this.visible = storage.wasVisible(column2.id) ?? (column2.canHide ? !(column2.initHidden ?? true) : true);
     if (this.visible && (storage.wasExpanded(column2.id) ?? column2.initExpanded)) {
       this.expanded = true;
       this.doExpand();
@@ -14605,7 +14605,7 @@ var variantStyles2 = {
 
 // src/components/BeamContext.tsx
 var import_react103 = require("react");
-var import_react_aria45 = require("react-aria");
+var import_react_aria46 = require("react-aria");
 
 // src/components/Modal/Modal.tsx
 var import_utils72 = require("@react-aria/utils");
@@ -16247,14 +16247,27 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react90 = require("react");
 var import_react_router_dom4 = require("react-router-dom");
-var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime124 = (
+  // Adding index to key to prevent rendering issues when multiple items have the same label
+  require("@emotion/react/jsx-runtime")
+);
 function PageHeaderBreadcrumbs({ breadcrumb }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
-  const breadcrumbs = Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb];
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: Css.df.aic.mbPx(4).$, ...tids, children: breadcrumbs.map((breadcrumb2, i) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_react90.Fragment, { children: [
-    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: Css.smSb.gray700.mr1.ml1.$, children: "/" }),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_router_dom4.Link, { to: breadcrumb2.href, css: Css.smSb.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: breadcrumb2.label })
-  ] }, `bc-${breadcrumb2.label}`)) });
+  const breadcrumbs = (0, import_react90.useMemo)(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
+  const [collapsed, setCollapsed] = (0, import_react90.useState)(true);
+  function renderBreadcrumb(bc, index, hideDivisor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_react90.Fragment, { children: [
+      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: Css.smSb.gray700.mx1.myPx(2).$, children: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_router_dom4.Link, { to: bc.href, css: Css.smSb.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: bc.label }),
+      bc.right
+    ] }, `${bc.label}-${index}`);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: Css.df.aic.mbPx(4).$, children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+    renderBreadcrumb(breadcrumbs[0], 0),
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { ...tids.expand, css: Css.gray700.pxPx(8).$, onClick: () => setCollapsed(false), children: "..." }),
+    renderBreadcrumb(breadcrumbs[breadcrumbs.length - 2], breadcrumbs.length - 2, true),
+    renderBreadcrumb(breadcrumbs[breadcrumbs.length - 1], breadcrumbs.length - 1)
+  ] }) : breadcrumbs.map((bc, i) => renderBreadcrumb(bc, i)) });
 }
 
 // src/components/Layout/FormPageLayout.tsx
@@ -16512,6 +16525,7 @@ function isSelectionButtonMenuProps(props) {
 
 // src/components/Filters/FilterDropdownMenu.tsx
 var import_react97 = require("react");
+var import_react_aria45 = require("react-aria");
 
 // src/components/CountBadge.tsx
 var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
@@ -16566,6 +16580,7 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           SelectField,
           {
+            compact: true,
             sizeToContent: true,
             options: [
               // Always show the 'Any' option
@@ -16588,6 +16603,7 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           DateField,
           {
+            compact: true,
             labelStyle: "inline",
             value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date(),
             label: "Date",
@@ -16614,6 +16630,7 @@ var DateRangeFilter = class extends BaseFilter {
       /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         DateRangeField,
         {
+          compact: true,
           labelStyle: "inline",
           isRangeFilterField: true,
           placeholder: placeholderText,
@@ -16667,6 +16684,7 @@ var MultiFilter = class extends BaseFilter {
       MultiSelectField,
       {
         ...props,
+        compact: !vertical,
         label: this.label,
         values: value || [],
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16731,6 +16749,7 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           NumberField,
           {
+            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16748,6 +16767,7 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           NumberField,
           {
+            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16792,6 +16812,7 @@ var SingleFilter = class extends BaseFilter {
         options,
         getOptionValue: (o) => o === allOption ? void 0 : getOptionValue(o),
         getOptionLabel: (o) => o === allOption ? nothingSelectedText ?? "All" : getOptionLabel(o),
+        compact: !vertical,
         value,
         label: this.label,
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16818,6 +16839,7 @@ var TreeFilter = class extends BaseFilter {
         ...props,
         label: this.label,
         values: value,
+        compact: !vertical,
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
         sizeToContent: !inModal && !vertical,
         onSelect: (options) => {
@@ -16843,6 +16865,7 @@ var BooleanFilter = class extends BaseFilter {
       SelectField,
       {
         ...props,
+        compact: !vertical,
         label: this.label,
         value: String(value),
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16992,6 +17015,7 @@ function Filters(props) {
     SelectField,
     {
       label: "Group by",
+      compact: !vertical,
       labelStyle: !vertical ? "inline" : "above",
       sizeToContent: !vertical,
       options: groupBy.options,
@@ -17015,7 +17039,6 @@ function Filters(props) {
           Button,
           {
             label: "More Filters",
-            size: "md",
             endAdornment: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(CountBadge, { count: numModalFilters, hideIfZero: true }),
             variant: "secondary",
             onClick: () => openModal({
@@ -17025,7 +17048,7 @@ function Filters(props) {
             ...testId.moreFiltersBtn
           }
         ),
-        Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
+        Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
       ]
     }
   );
@@ -17079,6 +17102,20 @@ function FilterDropdownMenu(props) {
   const { filter, onChange, filterDefs, groupBy } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
   const [isOpen, setIsOpen] = (0, import_react97.useState)(false);
+  const buttonRef = (0, import_react97.useRef)(null);
+  const filterContentRef = (0, import_react97.useRef)(null);
+  const { overlayProps } = (0, import_react_aria45.useOverlay)(
+    {
+      isOpen,
+      onClose: () => setIsOpen(false),
+      isDismissable: true,
+      shouldCloseOnInteractOutside: (element) => {
+        if (buttonRef.current?.contains(element)) return false;
+        return true;
+      }
+    },
+    filterContentRef
+  );
   const activeFilterCount = (0, import_react97.useMemo)(() => getActiveFilterCount(filter), [filter]);
   const filterImpls = (0, import_react97.useMemo)(() => buildFilterImpls(filterDefs), [filterDefs]);
   const renderFilters = () => {
@@ -17088,7 +17125,7 @@ function FilterDropdownMenu(props) {
     return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, false) }, key));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { ref: buttonRef, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       Button,
       {
         label: "Filter",
@@ -17102,12 +17139,13 @@ function FilterDropdownMenu(props) {
         onClick: () => setIsOpen(!isOpen),
         ...testId.button
       }
-    ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { css: Css.df.aic.fww.gap1.order(1).$, children: [
+    ) }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { ref: filterContentRef, ...overlayProps, css: Css.df.aic.fww.gap1.order(1).$, children: [
       groupBy && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
         SelectField,
         {
           label: "Group by",
+          compact: true,
           labelStyle: "inline",
           sizeToContent: true,
           options: groupBy.options,
@@ -17118,7 +17156,7 @@ function FilterDropdownMenu(props) {
         }
       ),
       renderFilters(),
-      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
+      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
     ] }),
     !isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       FilterChips,
@@ -17170,7 +17208,7 @@ function FilterChips({
   if (chips.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { css: Css.df.gap1.fww.aic.order(1).$, children: [
     chips,
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
   ] });
 }
 function buildFilterImpls(filterDefs) {
@@ -17721,7 +17759,7 @@ function BeamProvider({ children, ...presentationProps }) {
     };
   }, [modalBodyDiv, modalFooterDiv, modalHeaderDiv, sdHeaderDiv]);
   return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(BeamContext.Provider, { value: { ...context }, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(PresentationProvider, { ...presentationProps, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(RightPaneProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(SnackbarProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(ToastProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(import_react_aria45.OverlayProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(import_react_aria46.OverlayProvider, { children: [
       children,
       modalRef.current && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Modal, { ...modalRef.current })
     ] }),
@@ -17747,14 +17785,14 @@ function useBeamContext() {
 
 // src/components/ButtonDatePicker.tsx
 var import_react104 = require("react");
-var import_react_aria46 = require("react-aria");
+var import_react_aria47 = require("react-aria");
 var import_react_stately18 = require("react-stately");
 var import_jsx_runtime151 = require("@emotion/react/jsx-runtime");
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = (0, import_react_stately18.useMenuTriggerState)({ isOpen: defaultOpen });
   const buttonRef = (0, import_react104.useRef)(null);
-  const { menuTriggerProps, menuProps } = (0, import_react_aria46.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
+  const { menuTriggerProps, menuProps } = (0, import_react_aria47.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
     isTextButton(trigger) ? defaultTestId(labelOr(trigger, "buttonDatePicker")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
@@ -17774,7 +17812,7 @@ function ButtonDatePicker(props) {
 
 // src/components/ButtonGroup.tsx
 var import_react105 = require("react");
-var import_react_aria47 = require("react-aria");
+var import_react_aria48 = require("react-aria");
 var import_jsx_runtime152 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("@emotion/react/jsx-runtime")
@@ -17791,9 +17829,9 @@ function GroupButton(props) {
   const { icon, iconInc, iconColor, text, active, onClick: onPress, disabled, size, tooltip, ...otherProps } = props;
   const ariaProps = { onPress, isDisabled: !!disabled, ...otherProps };
   const ref = (0, import_react105.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_react_aria47.useButton)(ariaProps, ref);
-  const { isFocusVisible, focusProps } = (0, import_react_aria47.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria47.useHover)(ariaProps);
+  const { buttonProps, isPressed } = (0, import_react_aria48.useButton)(ariaProps, ref);
+  const { isFocusVisible, focusProps } = (0, import_react_aria48.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria48.useHover)(ariaProps);
   const tid = useTestIds(props);
   return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { css: getButtonStyles2(), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
@@ -17850,7 +17888,7 @@ var iconStyles2 = {
 
 // src/components/Card.tsx
 var import_react107 = require("react");
-var import_react_aria48 = require("react-aria");
+var import_react_aria49 = require("react-aria");
 
 // src/components/Tag.tsx
 var import_utils116 = require("@react-aria/utils");
@@ -17909,7 +17947,7 @@ function Card(props) {
     tag
   } = props;
   const tid = useTestIds(props, "card");
-  const { hoverProps, isHovered } = (0, import_react_aria48.useHover)({ isDisabled });
+  const { hoverProps, isHovered } = (0, import_react_aria49.useHover)({ isDisabled });
   const isList = type === "list";
   const imgHeight = isList ? 96 : bordered ? 224 : 256;
   const styles = (0, import_react107.useMemo)(
@@ -18184,12 +18222,12 @@ var gridCloneKey = "dndgrid-clone";
 var activeGridItemClass = "dndgrid-active";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
-var import_react_aria49 = require("react-aria");
+var import_react_aria50 = require("react-aria");
 var import_jsx_runtime157 = require("@emotion/react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const { dragHandleProps, icon = "move", compact = false, color } = props;
-  const { focusProps, isFocusVisible } = (0, import_react_aria49.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria49.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_react_aria50.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria50.useHover)({});
   const tid = useTestIds(props, "dragHandle");
   const iconButtonNormal2 = Css.hPx(28).wPx(28).br8.bw2.$;
   const iconButtonCompact2 = Css.hPx(18).wPx(18).br4.bw1.$;
@@ -18201,7 +18239,7 @@ function DnDGridItemHandle(props) {
         ...Css.cursor("grab").bcTransparent.bss.bgTransparent.outline0.dif.aic.jcc.transition.if(isFocusVisible).bcBlue700.$,
         ...isHovered && Css.bgGray200.$
       },
-      ...(0, import_react_aria49.mergeProps)(dragHandleProps, focusProps, hoverProps),
+      ...(0, import_react_aria50.mergeProps)(dragHandleProps, focusProps, hoverProps),
       ...tid,
       children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Icon, { icon, inc: compact ? 2 : void 0, color })
     }
@@ -18515,7 +18553,7 @@ var snackbarId = 1;
 
 // src/components/Stepper.tsx
 var import_react116 = require("react");
-var import_react_aria50 = require("react-aria");
+var import_react_aria51 = require("react-aria");
 var import_jsx_runtime163 = require("@emotion/react/jsx-runtime");
 function Stepper(props) {
   const { steps, currentStep, onChange } = props;
@@ -18559,9 +18597,9 @@ function StepButton(props) {
   const { label, disabled, state, isCurrent, onClick } = props;
   const ariaProps = { onPress: onClick, isDisabled: disabled };
   const ref = (0, import_react116.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_react_aria50.useButton)(ariaProps, ref);
-  const { isFocusVisible, focusProps } = (0, import_react_aria50.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria50.useHover)(ariaProps);
+  const { buttonProps, isPressed } = (0, import_react_aria51.useButton)(ariaProps, ref);
+  const { isFocusVisible, focusProps } = (0, import_react_aria51.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria51.useHover)(ariaProps);
   const focusRingStyles2 = state === "error" ? Css.bshDanger.$ : Css.bshFocus.$;
   const tid = useTestIds(props, "stepButton");
   return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
@@ -18848,7 +18886,7 @@ var SuperDrawerContent = ({ children, actions }) => {
 // src/components/Tabs.tsx
 var import_change_case7 = require("change-case");
 var import_react118 = require("react");
-var import_react_aria51 = require("react-aria");
+var import_react_aria52 = require("react-aria");
 var import_react_router2 = require("react-router");
 var import_react_router_dom5 = require("react-router-dom");
 var import_jsx_runtime168 = require("@emotion/react/jsx-runtime");
@@ -18891,7 +18929,7 @@ function Tabs(props) {
   const selected = isRouteTabs(props) ? uniqueTabValue(
     props.tabs.find((t) => !!(0, import_react_router2.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0]
   ) : props.selected;
-  const { isFocusVisible, focusProps } = (0, import_react_aria51.useFocusRing)();
+  const { isFocusVisible, focusProps } = (0, import_react_aria52.useFocusRing)();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = (0, import_react118.useState)(selected);
   const ref = (0, import_react118.useRef)(null);
@@ -18936,7 +18974,7 @@ function TabImpl(props) {
   const { tab, onClick, active, onKeyUp, onBlur, focusProps, isFocusVisible = false, ...others } = props;
   const { disabled = false, name: label, icon, endAdornment } = tab;
   const isDisabled = !!disabled;
-  const { hoverProps, isHovered } = (0, import_react_aria51.useHover)({ isDisabled });
+  const { hoverProps, isHovered } = (0, import_react_aria52.useHover)({ isDisabled });
   const { baseStyles: baseStyles5, activeStyles: activeStyles4, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, activeHoverStyles } = (0, import_react118.useMemo)(
     () => getTabStyles(),
     []
@@ -18959,7 +18997,7 @@ function TabImpl(props) {
       ...isFocusVisible && active && focusRingStyles2
     }
   };
-  const interactiveProps = (0, import_react_aria51.mergeProps)(focusProps, hoverProps, {
+  const interactiveProps = (0, import_react_aria52.mergeProps)(focusProps, hoverProps, {
     onKeyUp,
     onBlur,
     ...isRouteTab(tab) ? {} : { onClick: () => onClick(tab.value) }