@box/blueprint-web 13.19.0 → 14.0.1

package/dist/lib-esm/combobox/combobox.js

@@ -356,63 +356,68 @@ const RootInner = ({
       hideLabel: hideLabel
     }), jsx(PopoverAnchor, {
       store: comboboxStore,
-      children: jsxs("div", {
+      children: jsx("div", {
         ref: comboboxContainerRef,
         className: clsx(styles.comboboxContainer, {
           [styles.error]: hasError,
           [styles.withChips]: showChipsGroup || showSingleSelectChip,
           [styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon)
         }),
-        "data-testid": "combobox-container",
         onClick: handleFocusInputOnEvent,
-        children: [showChipsGroup && jsx(ChipsGroup, {
+        "data-testid": "combobox-container",
+        children: jsxs("div", {
+          className: styles.comboboxContainerInner,
           onClick: handleFocusInputOnEvent,
-          children: selectedValue.map(selected => jsx(InputChip, {
-            avatar: getDisplayAvatarFromOptionValue(selected, options, displayAvatar),
-            label: getDisplayValueFromOptionValue(selected, options, displayValue),
-            onDelete: () => removeMultiSelectInputChip(selected),
-            tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip),
-            variant: getDisplayChipVariantFromOptionValue(selected, options, displayChipVariant)
-          }, selected))
-        }), showSingleSelectChip && jsx(InputChip, {
-          label: getDisplayValueFromOptionValue(selectedValue, options, displayValue),
-          onDelete: showComboboxCancelButton ? undefined : removeSingleSelectInputChip,
-          tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip),
-          variant: getDisplayChipVariantFromOptionValue(selectedValue, options, displayChipVariant)
-        }), jsxs("div", {
-          className: styles.textInputWrapper,
-          children: [jsx(Combobox$1, {
-            ...comboboxProps,
-            ref: reference,
-            "aria-describedby": ariaDescribedBy,
-            ...(hasError && {
-              'aria-invalid': 'true'
-            }),
-            "aria-required": required,
-            autoSelect: false,
-            className: styles.textInput,
-            disabled: disabled,
-            id: comboboxId,
-            onBlur: composeEventHandlers(onBlur, handleOnBlur),
-            onFocus: handleOnFocus,
-            onKeyDown: handleKeyDown,
-            required: required,
-            store: comboboxStore
-          }), jsx("div", {
-            className: styles.comboboxButtons,
-            children: showComboboxCancelButton ? jsx(ComboboxCancel, {
-              onClick: resetSelectedValue,
-              // eslint-disable-next-line react/jsx-no-bind
-              render: cancelProps => jsx(IconButton, {
-                ...cancelProps,
-                "aria-label": clearButtonAriaLabel,
-                icon: enableModernizedComponents ? XMark : XMark$1,
-                size: "x-small"
+          role: "presentation",
+          children: [showChipsGroup && jsx(ChipsGroup, {
+            onClick: handleFocusInputOnEvent,
+            children: selectedValue.map(selected => jsx(InputChip, {
+              avatar: getDisplayAvatarFromOptionValue(selected, options, displayAvatar),
+              label: getDisplayValueFromOptionValue(selected, options, displayValue),
+              onDelete: () => removeMultiSelectInputChip(selected),
+              tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip),
+              variant: getDisplayChipVariantFromOptionValue(selected, options, displayChipVariant)
+            }, selected))
+          }), showSingleSelectChip && jsx(InputChip, {
+            label: getDisplayValueFromOptionValue(selectedValue, options, displayValue),
+            onDelete: showComboboxCancelButton ? undefined : removeSingleSelectInputChip,
+            tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip),
+            variant: getDisplayChipVariantFromOptionValue(selectedValue, options, displayChipVariant)
+          }), jsxs("div", {
+            className: styles.textInputWrapper,
+            children: [jsx(Combobox$1, {
+              ...comboboxProps,
+              ref: reference,
+              "aria-describedby": ariaDescribedBy,
+              ...(hasError && {
+                'aria-invalid': 'true'
               }),
+              "aria-required": required,
+              autoSelect: false,
+              className: styles.textInput,
+              disabled: disabled,
+              id: comboboxId,
+              onBlur: composeEventHandlers(onBlur, handleOnBlur),
+              onFocus: handleOnFocus,
+              onKeyDown: handleKeyDown,
+              required: required,
               store: comboboxStore
-            }) : endComboboxIcon
+            }), jsx("div", {
+              className: styles.comboboxButtons,
+              children: showComboboxCancelButton ? jsx(ComboboxCancel, {
+                onClick: resetSelectedValue,
+                // eslint-disable-next-line react/jsx-no-bind
+                render: cancelProps => jsx(IconButton, {
+                  ...cancelProps,
+                  "aria-label": clearButtonAriaLabel,
+                  icon: enableModernizedComponents ? XMark : XMark$1,
+                  size: "x-small"
+                }),
+                store: comboboxStore
+              }) : endComboboxIcon
+            })]
           })]
-        })]
+        })
       })
     }), jsx(InlineError, {
       className: styles.inlineError,
@@ -470,15 +475,19 @@ const RootInner = ({
       sameWidth: true,
       store: comboboxStore,
       unmountOnHide: unmountOnHide,
-      children: jsx(Collection, {
-        experimentalVirtualization: experimentalVirtualization,
-        inputValue: inputValue,
-        loadingAriaLabel: loadingAriaLabel,
-        noResultMessage: noResultMessage,
-        options: filteredOptions,
-        overscan: 2,
-        renderOptionFn: renderOptionFn,
-        showLoading: showLoading
+      children: jsx("div", {
+        className: styles.popoverInner,
+        role: "presentation",
+        children: jsx(Collection, {
+          experimentalVirtualization: experimentalVirtualization,
+          inputValue: inputValue,
+          loadingAriaLabel: loadingAriaLabel,
+          noResultMessage: noResultMessage,
+          options: filteredOptions,
+          overscan: 2,
+          renderOptionFn: renderOptionFn,
+          showLoading: showLoading
+        })
       })
     }) : null]
   });

package/dist/lib-esm/combobox/combobox.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--355f7","label":"bp_combobox_module_label--355f7","textInput":"bp_combobox_module_textInput--355f7","popover":"bp_combobox_module_popover--355f7","disabled":"bp_combobox_module_disabled--355f7","hiddenLabel":"bp_combobox_module_hiddenLabel--355f7","comboboxContainer":"bp_combobox_module_comboboxContainer--355f7","withComboboxButtons":"bp_combobox_module_withComboboxButtons--355f7","error":"bp_combobox_module_error--355f7","textInputWrapper":"bp_combobox_module_textInputWrapper--355f7","comboboxButtons":"bp_combobox_module_comboboxButtons--355f7","withChips":"bp_combobox_module_withChips--355f7","inlineError":"bp_combobox_module_inlineError--355f7","option":"bp_combobox_module_option--355f7","indicator":"bp_combobox_module_indicator--355f7","indicatorIcon":"bp_combobox_module_indicatorIcon--355f7","optionWithIndicator":"bp_combobox_module_optionWithIndicator--355f7","loadingIndicator":"bp_combobox_module_loadingIndicator--355f7"};
+var styles = {"container":"bp_combobox_module_container--c4fe7","label":"bp_combobox_module_label--c4fe7","textInput":"bp_combobox_module_textInput--c4fe7","popover":"bp_combobox_module_popover--c4fe7","disabled":"bp_combobox_module_disabled--c4fe7","hiddenLabel":"bp_combobox_module_hiddenLabel--c4fe7","comboboxContainer":"bp_combobox_module_comboboxContainer--c4fe7","comboboxContainerInner":"bp_combobox_module_comboboxContainerInner--c4fe7","withChips":"bp_combobox_module_withChips--c4fe7","error":"bp_combobox_module_error--c4fe7","withComboboxButtons":"bp_combobox_module_withComboboxButtons--c4fe7","textInputWrapper":"bp_combobox_module_textInputWrapper--c4fe7","comboboxButtons":"bp_combobox_module_comboboxButtons--c4fe7","inlineError":"bp_combobox_module_inlineError--c4fe7","popoverInner":"bp_combobox_module_popoverInner--c4fe7","option":"bp_combobox_module_option--c4fe7","indicator":"bp_combobox_module_indicator--c4fe7","indicatorIcon":"bp_combobox_module_indicatorIcon--c4fe7","optionWithIndicator":"bp_combobox_module_optionWithIndicator--c4fe7","loadingIndicator":"bp_combobox_module_loadingIndicator--c4fe7"};
 
 export { styles as default };

package/dist/lib-esm/combobox/types.d.ts

@@ -15,7 +15,7 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
     /**
      * The list of values for the combobox items.
      */
-    options: T[];
+    options: ReadonlyArray<T>;
     /**
      * If set to `true`, the combobox input can contain any arbitrary value.
      * In other words, options just behave as suggestions and the user input
@@ -291,7 +291,7 @@ export interface ComboboxOptionProps extends Pick<SelectItemProps, 'hideOnClick'
     className?: string;
 }
 export interface CollectionProps<T> {
-    options: Array<T>;
+    options: ReadonlyArray<T>;
     experimentalVirtualization: boolean;
     inputValue: string;
     renderOptionFn: (option: T) => React.ReactElement;

package/dist/lib-esm/combobox-group/combobox-group-combobox.js

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import { forwardRef, useCallback, useEffect } from 'react';
 import '@box/blueprint-web-assets/tokens/px-tokens';
 import '@radix-ui/react-tooltip';
-import 'tabbable';
 import { Combobox } from '../combobox/combobox.js';
 import { useComboboxGroupContext } from './combobox-group-context.js';
 import styles from './combobox-group.module.js';

package/dist/lib-esm/data-table/data-table-wrapper.js

@@ -4,6 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useScroll, ScrollContext } from '../util-components/scrollable-container/scrollable-container.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import styles from './data-table.module.js';
+import { useTableScrollCorrection } from './use-table-scroll-correction.js';
 
 const hideActionWrapperRightOffsetPx = 30;
 const DataTableWrapper = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -17,6 +18,7 @@ const DataTableWrapper = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     value,
     onScrollThrottled
   } = useScroll(localRef);
+  useTableScrollCorrection(localRef);
   const {
     offsetTillEndX,
     isScrolledX,

package/dist/lib-esm/data-table/use-table-scroll-correction.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+export declare function getScrollableAncestors(element: HTMLElement): HTMLElement[];
+/**
+ * corrects the scroll position of the ancestor element to make the element visible
+ */
+export declare function scrollElementIntoAncestor(ancestor: HTMLElement, element: HTMLElement): void;
+/**
+ * Attaches a corrective scroll listener to the container referenced by
+ * `containerRef`. When keyboard focus moves to a descendant element,
+ * react-aria's Chrome-specific scroll path may leave the focused element
+ * partially or fully out of view. This hook schedules a corrective
+ * `scrollBy` in the animation frame after react-aria's own frame, ensuring
+ * the focused element is visible.
+ */
+export declare function useTableScrollCorrection(containerRef: RefObject<HTMLDivElement | null>): void;

package/dist/lib-esm/data-table/use-table-scroll-correction.js

@@ -0,0 +1,211 @@
+import { getInteractionModality } from '@react-aria/interactions';
+import { useEffect } from 'react';
+
+const getElementPadding = element => {
+  const style = getComputedStyle(element);
+  return {
+    paddingTop: parseFloat(style.paddingTop) || 0,
+    paddingRight: parseFloat(style.paddingRight) || 0,
+    paddingBottom: parseFloat(style.paddingBottom) || 0,
+    paddingLeft: parseFloat(style.paddingLeft) || 0
+  };
+};
+const getViewportDimensions = () => {
+  const {
+    visualViewport
+  } = window;
+  if (!visualViewport) {
+    return {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  }
+  return {
+    top: 0,
+    right: visualViewport.width,
+    bottom: visualViewport.height,
+    left: 0
+  };
+};
+function getScrollableAncestors(element) {
+  const ancestors = [];
+  let node = element.parentElement;
+  while (node) {
+    const {
+      overflowY,
+      overflowX
+    } = getComputedStyle(node);
+    const isScrollableY = /(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight;
+    const isScrollableX = /(auto|scroll|overlay)/.test(overflowX) && node.scrollWidth > node.clientWidth;
+    if (isScrollableY || isScrollableX) {
+      ancestors.push(node);
+    }
+    node = node.parentElement;
+  }
+  const root = document.scrollingElement;
+  if (root && root instanceof HTMLElement) {
+    ancestors.push(root);
+  }
+  return ancestors;
+}
+/**
+ * corrects the scroll position of the ancestor element to make the element visible
+ */
+function scrollElementIntoAncestor(ancestor, element) {
+  const {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  } = getElementPadding(ancestor);
+  const eRect = element.getBoundingClientRect();
+  const isRootScroller = ancestor === document.scrollingElement;
+  const aRect = isRootScroller ? getViewportDimensions() : ancestor.getBoundingClientRect();
+  let dy = 0;
+  if (eRect.top < aRect.top + paddingTop) {
+    dy = eRect.top - aRect.top - paddingTop;
+  } else if (eRect.bottom > aRect.bottom - paddingBottom) {
+    dy = eRect.bottom - aRect.bottom + paddingBottom;
+  }
+  let dx = 0;
+  if (eRect.left < aRect.left + paddingLeft) {
+    dx = eRect.left - aRect.left - paddingLeft;
+  } else if (eRect.right > aRect.right - paddingRight) {
+    dx = eRect.right - aRect.right + paddingRight;
+  }
+  if (dx !== 0 || dy !== 0) {
+    ancestor.scrollBy({
+      left: dx,
+      top: dy,
+      behavior: 'instant'
+    });
+  }
+}
+/**
+ * Scrolls `element` into the visible area of `container`, respecting the
+ * container's CSS `scroll-padding`. Uses manual `scrollBy` instead of native
+ * `element.scrollIntoView` to work around Chromium bug #40074749, which causes
+ * `scrollIntoView` on `<td>` elements to skip the real scroll container.
+ *
+ * Horizontal correction is skipped for `<tr>` elements because rows span the
+ * full table width and would cause erroneous horizontal scrolling.
+ */
+function scrollElementIntoContainer(container, element) {
+  const {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  } = getElementPadding(container);
+  const cRect = container.getBoundingClientRect();
+  const eRect = element.getBoundingClientRect();
+  const stickyHeader = container.querySelector('table > thead > tr');
+  const stickyHeaderRect = stickyHeader instanceof HTMLElement ? stickyHeader.getBoundingClientRect() : null;
+  // Get the viewport dimensions to check if the element is completely visible
+  const {
+    top: viewportTop,
+    right: viewportRight,
+    bottom: viewportBottom,
+    left: viewportLeft
+  } = getViewportDimensions();
+  const visibleTop = Math.max(cRect.top, viewportTop);
+  const visibleRight = Math.min(cRect.right, viewportRight);
+  const visibleBottom = Math.min(cRect.bottom, viewportBottom);
+  const visibleLeft = Math.max(cRect.left, viewportLeft);
+  const isRow = element.tagName === 'TR';
+  const isInsideTableHead = element.closest('thead') !== null;
+  const stickyHeaderOverlayTopInset = stickyHeaderRect && !isInsideTableHead ? Math.max(0, stickyHeaderRect.bottom - visibleTop) : 0;
+  const topInset = paddingTop + stickyHeaderOverlayTopInset;
+  const row = element.closest('tr');
+  const firstRowCell = row?.firstElementChild instanceof HTMLElement ? row.firstElementChild : null;
+  const firstRowCellRect = firstRowCell?.getBoundingClientRect();
+  const firstRowCellStyle = firstRowCell ? getComputedStyle(firstRowCell) : null;
+  const isFirstCellSticky = firstRowCellStyle?.position === 'sticky';
+  const isWithinStickyFirstCell = Boolean(isFirstCellSticky && firstRowCell && (firstRowCell === element || firstRowCell.contains(element)));
+  const stickyFirstCellOverlayLeftInset = firstRowCellRect && isFirstCellSticky ? Math.max(0, firstRowCellRect.right - visibleLeft) : 0;
+  const leftInset = isWithinStickyFirstCell ? paddingLeft : paddingLeft + stickyFirstCellOverlayLeftInset;
+  let dy = 0;
+  if (eRect.top < visibleTop + topInset) {
+    dy = eRect.top - visibleTop - topInset;
+  } else if (eRect.bottom > visibleBottom - paddingBottom) {
+    dy = eRect.bottom - visibleBottom + paddingBottom;
+  }
+  let dx = 0;
+  if (!isRow) {
+    if (eRect.left < visibleLeft + leftInset) {
+      dx = eRect.left - visibleLeft - leftInset;
+    } else if (eRect.right > visibleRight - paddingRight) {
+      dx = eRect.right - visibleRight + paddingRight;
+    }
+  }
+  if (dx !== 0 || dy !== 0) {
+    const prevScrollTop = container.scrollTop;
+    const prevScrollLeft = container.scrollLeft;
+    container.scrollBy({
+      left: dx,
+      top: dy,
+      behavior: 'instant'
+    });
+    const actualDy = container.scrollTop - prevScrollTop;
+    const actualDx = container.scrollLeft - prevScrollLeft;
+    const didNotFullyApply = Math.abs(actualDy - dy) > 0.5 || Math.abs(actualDx - dx) > 0.5;
+    // Check if scroll wrapper was able to correctly show focused element
+    // If not, change scroll position of the ancestor elements to make element visible
+    if (didNotFullyApply) {
+      const outerAncestors = getScrollableAncestors(container);
+      outerAncestors.forEach(ancestor => {
+        scrollElementIntoAncestor(ancestor, element);
+      });
+    }
+  }
+}
+/**
+ * Attaches a corrective scroll listener to the container referenced by
+ * `containerRef`. When keyboard focus moves to a descendant element,
+ * react-aria's Chrome-specific scroll path may leave the focused element
+ * partially or fully out of view. This hook schedules a corrective
+ * `scrollBy` in the animation frame after react-aria's own frame, ensuring
+ * the focused element is visible.
+ */
+function useTableScrollCorrection(containerRef) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    let raf1 = 0;
+    let raf2 = 0;
+    const onFocusIn = e => {
+      const modality = getInteractionModality();
+      const target = e.target;
+      const containsTarget = container.contains(target);
+      if (modality !== 'keyboard') {
+        return;
+      }
+      if (!containsTarget) {
+        return;
+      }
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      // react-aria schedules its (broken) scroll in one rAF; we run in
+      // the following frame to override the incorrect final position.
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => {
+          scrollElementIntoContainer(container, target);
+        });
+      });
+    };
+    container.addEventListener('focusin', onFocusIn);
+    // eslint-disable-next-line consistent-return
+    return () => {
+      container.removeEventListener('focusin', onFocusIn);
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+    // since it is a ref, it will not trigger a re-render, however eslint still warns to add it to the dependency array
+  }, [containerRef]);
+}
+
+export { getScrollableAncestors, scrollElementIntoAncestor, useTableScrollCorrection };

package/dist/lib-esm/empty-state/empty-state.d.ts

@@ -11,12 +11,10 @@ export declare const EmptyState: import("react").ForwardRefExoticComponent<Empty
      */
     PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib-esm/guided-tooltip/guided-tooltip-footer.d.ts

@@ -11,23 +11,19 @@ export declare const GuidedTooltipFooter: (({ children, className, ...rest }: Gu
     ActionsContainer: ({ children, className, ...rest }: GuidedTooltipActionsContainerProps) => import("react/jsx-runtime").JSX.Element;
     PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     SecondaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib-esm/guided-tooltip/guided-tooltip.d.ts

@@ -5,23 +5,19 @@ export declare const GuidedTooltip: (({ children, onOpenChange, open, container,
         ActionsContainer: ({ children, className, ...rest }: import("./types").GuidedTooltipActionsContainerProps) => import("react/jsx-runtime").JSX.Element;
         PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
         SecondaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;