@atlaskit/button 21.1.4 → 21.1.6

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -1,619 +0,0 @@
-import React, { useRef } from 'react';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
-import { useId } from '@atlaskit/ds-lib/use-id';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
-import * as colors from '@atlaskit/theme/colors';
-import VisuallyHidden from '@atlaskit/visually-hidden';
-import { SplitButtonContext, useSplitButtonContext } from '../../containers/split-button/split-button-context';
-import blockEvents from './block-events';
-import { LOADING_LABEL } from './constants';
-import renderLoadingOverlay from './loading-overlay';
-const buttonStyles = xcss({
-  display: 'inline-flex',
-  boxSizing: 'border-box',
-  width: 'auto',
-  maxWidth: '100%',
-  position: 'relative',
-  alignItems: 'baseline',
-  justifyContent: 'center',
-  columnGap: 'space.050',
-  borderRadius: 'border.radius.100',
-  borderWidth: 'border.width.0',
-  flexShrink: 0,
-  height: '2rem',
-  font: 'font.body',
-  fontWeight: 'font.weight.medium',
-  paddingBlock: 'space.075',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  textAlign: 'center',
-  transition: 'background 0.1s ease-out',
-  verticalAlign: 'middle',
-  '::after': {
-    borderRadius: 'inherit',
-    inset: 'space.0',
-    borderStyle: 'solid',
-    borderWidth: "var(--ds-border-width, 1px)",
-    pointerEvents: 'none',
-    position: 'absolute'
-  }
-});
-const defaultInteractiveStyles = xcss({
-  ':hover': {
-    background: "var(--ds-background-neutral-hovered, #091e4214)",
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text, ${colors.N500})`
-  },
-  ':active': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-neutral-pressed, ${colors.B75})`,
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text, ${colors.B400})`
-  }
-});
-const defaultInteractiveRefreshedStyles = xcss({
-  ':hover': {
-    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
-    color: 'color.text.subtle'
-  },
-  ':active': {
-    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
-    color: 'color.text.subtle'
-  }
-});
-const defaultStyles = xcss({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-  background: `var(--ds-background-neutral, ${colors.N20A})`,
-  // @ts-expect-error — using tokens for explicit fallback usage.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
-  color: `var(--ds-text, ${colors.N500})`,
-  ':visited': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text, ${colors.N500})`
-  },
-  ':hover': {
-    // @ts-expect-error — using tokens for explicit fallback usage.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
-    color: `var(--ds-text, ${colors.N500})`
-  },
-  ':active': {
-    // @ts-expect-error — using tokens for explicit fallback usage.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
-    color: `var(--ds-text, ${colors.N500})`
-  },
-  ':focus': {
-    // @ts-expect-error — using tokens for explicit fallback usage.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
-    color: `var(--ds-text, ${colors.N500})`
-  }
-});
-const defaultRefreshedStyles = xcss({
-  background: "var(--ds-background-neutral-subtle, #00000000)",
-  color: 'color.text.subtle',
-  '::after': {
-    content: '""',
-    borderColor: 'color.border'
-  },
-  ':visited': {
-    color: 'color.text.subtle'
-  },
-  ':hover': {
-    color: 'color.text.subtle'
-  },
-  ':active': {
-    color: 'color.text.subtle'
-  },
-  ':focus': {
-    color: 'color.text.subtle'
-  }
-});
-const primaryStyles = xcss({
-  background: "var(--ds-background-brand-bold, #0052CC)",
-  color: 'color.text.inverse',
-  ':visited': {
-    color: 'color.text.inverse'
-  },
-  ':hover': {
-    color: 'color.text.inverse'
-  },
-  ':active': {
-    color: 'color.text.inverse'
-  },
-  ':focus': {
-    color: 'color.text.inverse'
-  }
-});
-const primaryInteractiveStyles = xcss({
-  ':hover': {
-    // @ts-expect-error
-    color: "var(--ds-text-inverse, #FFFFFF)",
-    background: "var(--ds-background-brand-bold-hovered, #0065FF)"
-  },
-  ':active': {
-    // @ts-expect-error
-    color: "var(--ds-text-inverse, #FFFFFF)",
-    background: "var(--ds-background-brand-bold-pressed, #0747A6)"
-  }
-});
-const warningStyles = xcss({
-  background: "var(--ds-background-warning-bold, #FFAB00)",
-  // @ts-expect-error
-  color: "var(--ds-text-warning-inverse, #172B4D)",
-  ':visited': {
-    // @ts-expect-error
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  },
-  ':hover': {
-    // @ts-expect-error
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  },
-  ':active': {
-    // @ts-expect-error
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  },
-  ':focus': {
-    // @ts-expect-error
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  }
-});
-const warningInteractiveStyles = xcss({
-  ':hover': {
-    // @ts-expect-error
-    color: "var(--ds-text-warning-inverse, #172B4D)",
-    background: "var(--ds-background-warning-bold-hovered, #FFC400)"
-  },
-  ':active': {
-    // @ts-expect-error
-    color: "var(--ds-text-warning-inverse, #172B4D)",
-    background: "var(--ds-background-warning-bold-pressed, #FF991F)"
-  }
-});
-const dangerStyles = xcss({
-  background: "var(--ds-background-danger-bold, #DE350B)",
-  color: 'color.text.inverse',
-  ':visited': {
-    color: 'color.text.inverse'
-  },
-  ':hover': {
-    color: 'color.text.inverse'
-  },
-  ':active': {
-    color: 'color.text.inverse'
-  },
-  ':focus': {
-    color: 'color.text.inverse'
-  }
-});
-const dangerInteractiveStyles = xcss({
-  ':hover': {
-    color: 'color.text.inverse',
-    background: "var(--ds-background-danger-bold-hovered, #FF5630)"
-  },
-  ':active': {
-    color: 'color.text.inverse',
-    background: "var(--ds-background-danger-bold-pressed, #BF2600)"
-  }
-});
-const discoveryStyles = xcss({
-  background: "var(--ds-background-discovery-bold, #5243AA)",
-  color: 'color.text.inverse',
-  ':visited': {
-    color: 'color.text.inverse'
-  },
-  ':hover': {
-    color: 'color.text.inverse'
-  },
-  ':active': {
-    color: 'color.text.inverse'
-  },
-  ':focus': {
-    color: 'color.text.inverse'
-  }
-});
-const discoveryInteractiveStyles = xcss({
-  ':hover': {
-    color: 'color.text.inverse',
-    background: "var(--ds-background-discovery-bold-hovered, #8777D9)"
-  },
-  ':active': {
-    color: 'color.text.inverse',
-    background: "var(--ds-background-discovery-bold-pressed, #5243AA)"
-  }
-});
-const subtleStyles = xcss({
-  background: "var(--ds-background-neutral-subtle, transparent)",
-  // @ts-expect-error
-  color: "var(--ds-text, #42526E)",
-  ':visited': {
-    // @ts-expect-error
-    color: "var(--ds-text, #42526E)"
-  },
-  ':hover': {
-    // @ts-expect-error
-    color: "var(--ds-text, #42526E)"
-  },
-  ':active': {
-    // @ts-expect-error
-    color: "var(--ds-text, #42526E)"
-  },
-  ':focus': {
-    // @ts-expect-error
-    color: "var(--ds-text, #42526E)"
-  }
-});
-const subtleRefreshedStyles = xcss({
-  background: "var(--ds-background-neutral-subtle, transparent)",
-  color: 'color.text.subtle',
-  ':visited': {
-    color: 'color.text.subtle'
-  },
-  ':hover': {
-    color: 'color.text.subtle'
-  },
-  ':active': {
-    color: 'color.text.subtle'
-  },
-  ':focus': {
-    color: 'color.text.subtle'
-  }
-});
-const subtleInteractiveStyles = xcss({
-  ':hover': {
-    background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
-    // @ts-expect-error
-    color: "var(--ds-text, #42526E)"
-  },
-  ':active': {
-    background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
-    // @ts-expect-error
-    color: "var(--ds-text, #42526E)"
-  }
-});
-const subtleInteractiveRefreshedStyles = xcss({
-  ':hover': {
-    background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
-    color: 'color.text.subtle'
-  },
-  ':active': {
-    background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
-    color: 'color.text.subtle'
-  }
-});
-
-// Reinforce existing styles with higher specificity
-// to defend against global anchor styles from products,
-// preventing issues in Jira and Confluence.
-const linkDefensiveStyles = xcss({
-  textDecoration: 'none',
-  ':hover': {
-    textDecoration: 'none'
-  },
-  ':active': {
-    textDecoration: 'none'
-  },
-  ':focus': {
-    textDecoration: 'none'
-  },
-  ':visited': {
-    textDecoration: 'none'
-  }
-});
-const disabledStyles = xcss({
-  cursor: 'not-allowed',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: `var(--ds-background-disabled, ${colors.N20A})`,
-  color: 'color.text.disabled',
-  '::after': {
-    content: 'none'
-  },
-  ':visited': {
-    color: 'color.text.disabled'
-  },
-  ':hover': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-disabled, ${colors.N20A})`,
-    color: 'color.text.disabled'
-  },
-  ':active': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-disabled, ${colors.N20A})`,
-    color: 'color.text.disabled'
-  },
-  ':focus': {
-    color: 'color.text.disabled'
-  }
-});
-const selectedStyles = xcss({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: `var(--ds-background-selected, ${colors.N700})`,
-  // @ts-expect-error
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-selected, ${colors.N20})`,
-  ':visited': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`
-  },
-  ':hover': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`
-  },
-  ':active': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`
-  },
-  ':focus': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`
-  }
-});
-const selectedRefreshedStyles = xcss({
-  background: "var(--ds-background-selected, #E9F2FF)",
-  color: 'color.text.selected',
-  '::after': {
-    content: '""',
-    borderColor: 'color.border.selected'
-  },
-  ':visited': {
-    color: 'color.text.selected'
-  },
-  ':hover': {
-    color: 'color.text.selected'
-  },
-  ':active': {
-    color: 'color.text.selected'
-  },
-  ':focus': {
-    color: 'color.text.selected'
-  }
-});
-const selectedInsideSplitButtonStyles = xcss({
-  // This is 2 so it appears above the split button divider when selected.
-  // See split-button.tsx.
-  // @ts-expect-error — We need a local zindex just for button.
-  zIndex: 2
-});
-const selectedInteractiveStyles = xcss({
-  ':hover': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-selected-hovered, ${colors.N700})`
-  },
-  ':active': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-selected-pressed, ${colors.N700})`
-  }
-});
-
-// TODO: Remove me once we kill color fallbacks
-const selectedWarningStyles = xcss({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: `var(--ds-background-selected, ${colors.Y400})`,
-  // @ts-expect-error
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-selected, ${colors.N800})`,
-  ':hover': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-selected, ${colors.Y400})`
-  },
-  ':active': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-selected, ${colors.Y400})`
-  }
-});
-
-// TODO: Remove me once we kill color fallbacks
-const selectedDangerStyles = xcss({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: `var(--ds-background-selected, ${colors.R500})`,
-  // @ts-expect-error
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-selected, ${colors.N20})`,
-  ':hover': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-selected, ${colors.R500})`
-  },
-  ':active': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    background: `var(--ds-background-selected, ${colors.R500})`
-  }
-});
-
-// TODO: Remove me once we kill color fallbacks
-const selectedDiscoveryStyles = xcss({
-  background: "var(--ds-background-selected, #403294)",
-  // @ts-expect-error
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-selected, ${colors.N20})`,
-  ':hover': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    background: "var(--ds-background-selected, #403294)"
-  },
-  ':active': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: `var(--ds-text-selected, ${colors.N20})`,
-    background: "var(--ds-background-selected, #403294)"
-  }
-});
-const spacingCompactStyles = xcss({
-  columnGap: 'space.050',
-  height: '1.5rem',
-  paddingBlock: 'space.025',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  verticalAlign: 'middle'
-});
-const circleStyles = xcss({
-  borderRadius: 'border.radius.circle'
-});
-const fullWidthStyles = xcss({
-  width: '100%'
-});
-const loadingStyles = xcss({
-  cursor: 'progress'
-});
-const iconButtonStyles = xcss({
-  height: '2rem',
-  width: '2rem',
-  paddingInlineEnd: 'space.0',
-  paddingInlineStart: 'space.0'
-});
-const iconButtonCompactStyles = xcss({
-  width: '1.5rem',
-  height: '1.5rem'
-});
-const buttonIconBeforeStyles = xcss({
-  paddingInlineStart: 'space.100'
-});
-const buttonIconAfterStyles = xcss({
-  paddingInlineEnd: 'space.100'
-});
-const splitButtonStyles = xcss({
-  ':focus-visible': {
-    zIndex: 'card'
-  }
-});
-const navigationSplitButtonStyles = xcss({
-  width: '24px',
-  backgroundColor: 'color.background.neutral.subtle',
-  paddingInlineEnd: 'space.075',
-  paddingInlineStart: 'space.075'
-});
-const loadingOverlayStyles = xcss({
-  display: 'flex',
-  position: 'absolute',
-  alignItems: 'center',
-  justifyContent: 'center',
-  insetBlockEnd: 'space.0',
-  insetBlockStart: 'space.0',
-  insetInlineEnd: 'space.0',
-  insetInlineStart: 'space.0'
-});
-
-/**
- * __Use button base__
- *
- * A React hook that accepts a set of common Button props,
- * and processes them to return consistent base props for usage
- * across various Button components.
- *
- * It also:
- * - Implements auto focus when enabled.
- * - Appends the `onClick` event with UFO analytics tracking.
- *
- * @private
- */
-const useButtonBase = ({
-  appearance: propAppearance = 'default',
-  autoFocus = false,
-  buttonType,
-  isDisabled: propIsDisabled = false,
-  isLoading = false,
-  isSelected: propIsSelected = false,
-  // TODO: Separate Icon Button styling from button base
-  isIconButton = false,
-  isCircle = false,
-  // TODO: Separate icon slot styling from button base
-  hasIconBefore = false,
-  hasIconAfter = false,
-  children,
-  onClick,
-  onMouseDownCapture,
-  onMouseUpCapture,
-  onKeyDownCapture,
-  onKeyUpCapture,
-  onTouchStartCapture,
-  onTouchEndCapture,
-  onPointerDownCapture,
-  onPointerUpCapture,
-  onClickCapture,
-  ref,
-  shouldFitContainer = false,
-  spacing: propSpacing = 'default',
-  testId,
-  ariaLabel,
-  ariaLabelledBy
-}) => {
-  const localRef = useRef(null);
-  const splitButtonContext = useSplitButtonContext();
-  const loadingLabelId = useId();
-  const isSplitButton = Boolean(splitButtonContext);
-  const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
-  const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
-  const appearance = isDefaultAppearanceSplitButton && fg('platform-component-visual-refresh') ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
-  const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
-  const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
-  const isInteractive = !isDisabled && !isLoading;
-  // Also treat loading buttons as disabled
-  const isEffectivelyDisabled = isDisabled || isLoading;
-  const isSelected = propIsSelected && !isDisabled;
-  useAutoFocus(localRef, autoFocus);
-  return {
-    ref: mergeRefs([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), buttonType === 'link' && linkDefensiveStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
-    // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'danger' && selectedDangerStyles,
-    // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'warning' && selectedWarningStyles,
-    // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
-    isDisabled: isEffectivelyDisabled,
-    children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
-      value: undefined
-    }, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: loadingOverlayStyles
-    }, renderLoadingOverlay({
-      spacing,
-      appearance,
-      isDisabled,
-      isSelected,
-      testId
-    })) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
-      id: loadingLabelId
-    }, LOADING_LABEL)),
-    'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? `${ariaLabel} ${LOADING_LABEL}` : ariaLabel,
-    'aria-labelledby': isLoading && ariaLabelledBy ? `${ariaLabelledBy} ${loadingLabelId}` : ariaLabelledBy,
-    ...blockEvents(isEffectivelyDisabled, {
-      onClick,
-      onMouseDownCapture,
-      onMouseUpCapture,
-      onKeyDownCapture,
-      onKeyUpCapture,
-      onTouchStartCapture,
-      onTouchEndCapture,
-      onPointerDownCapture,
-      onPointerUpCapture,
-      onClickCapture
-    })
-  };
-};
-export default useButtonBase;