@react-spectrum/button 3.17.6 → 3.18.0

package/dist/uk-UA.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,8EAAY,CAAC;AAC7C","sources":["packages/@react-spectrum/button/intl/uk-UA.json"],"sourcesContent":["{\n  \"pending\": \"в очікуванні\"\n}\n"],"names":[],"version":3,"file":"uk-UA.module.js.map"}

package/dist/zh-CN.main.js

@@ -1,6 +0,0 @@
-module.exports = {
-    "pending": `\u{5F85}\u{5904}\u{7406}`
-};
-
-
-//# sourceMappingURL=zh-CN.main.js.map

package/dist/zh-CN.main.js.map

@@ -1 +0,0 @@
-{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-CN.json"],"sourcesContent":["{\n  \"pending\": \"待处理\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -1,8 +0,0 @@
-var $6e4b63af77288b7a$exports = {};
-$6e4b63af77288b7a$exports = {
-    "pending": `\u{5F85}\u{5904}\u{7406}`
-};
-
-
-export {$6e4b63af77288b7a$exports as default};
-//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js

@@ -1,8 +0,0 @@
-var $6e4b63af77288b7a$exports = {};
-$6e4b63af77288b7a$exports = {
-    "pending": `\u{5F85}\u{5904}\u{7406}`
-};
-
-
-export {$6e4b63af77288b7a$exports as default};
-//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-CN.json"],"sourcesContent":["{\n  \"pending\": \"待处理\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -1,6 +0,0 @@
-module.exports = {
-    "pending": `\u{5F85}\u{8655}\u{7406}`
-};
-
-
-//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -1 +0,0 @@
-{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-TW.json"],"sourcesContent":["{\n  \"pending\": \"待處理\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -1,8 +0,0 @@
-var $be993a68bccef72a$exports = {};
-$be993a68bccef72a$exports = {
-    "pending": `\u{5F85}\u{8655}\u{7406}`
-};
-
-
-export {$be993a68bccef72a$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -1,8 +0,0 @@
-var $be993a68bccef72a$exports = {};
-$be993a68bccef72a$exports = {
-    "pending": `\u{5F85}\u{8655}\u{7406}`
-};
-
-
-export {$be993a68bccef72a$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-TW.json"],"sourcesContent":["{\n  \"pending\": \"待處理\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/src/ActionButton.tsx

@@ -1,104 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {classNames, ClearSlots, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import CornerTriangle from '@spectrum-icons/ui/CornerTriangle';
-import {FocusableRef} from '@react-types/shared';
-import {FocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-import React from 'react';
-import {SpectrumActionButtonProps} from '@react-types/button';
-import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
-import {Text} from '@react-spectrum/text';
-import {useButton} from '@react-aria/button';
-import {useHover} from '@react-aria/interactions';
-import {useProviderProps} from '@react-spectrum/provider';
-
-/**
- * ActionButtons allow users to perform an action.
- * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
- */
-export const ActionButton = React.forwardRef(function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
-  props = useProviderProps(props);
-  props = useSlotProps(props, 'actionButton');
-  let textProps = useSlotProps({UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')}, 'text');
-
-  let {
-    isQuiet,
-    isDisabled,
-    staticColor,
-    children,
-    autoFocus,
-    // @ts-ignore (private)
-    holdAffordance,
-    // @ts-ignore (private)
-    hideButtonText,
-    ...otherProps
-  } = props;
-
-  let domRef = useFocusableRef(ref);
-  let {buttonProps, isPressed} = useButton(props, domRef);
-  let {hoverProps, isHovered} = useHover({isDisabled});
-  let {styleProps} = useStyleProps(otherProps);
-  let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));
-
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
-      <button
-        {...styleProps}
-        {...mergeProps(buttonProps, hoverProps)}
-        ref={domRef}
-        className={
-          classNames(
-            styles,
-            'spectrum-ActionButton',
-            {
-              'spectrum-ActionButton--quiet': isQuiet,
-              'spectrum-ActionButton--staticColor': !!staticColor,
-              'spectrum-ActionButton--staticWhite': staticColor === 'white',
-              'spectrum-ActionButton--staticBlack': staticColor === 'black',
-              'is-active': isPressed,
-              'is-disabled': isDisabled,
-              'is-hovered': isHovered
-            },
-            styleProps.className
-          )
-        }>
-        {holdAffordance &&
-          <CornerTriangle UNSAFE_className={classNames(styles, 'spectrum-ActionButton-hold')} />
-        }
-        <ClearSlots>
-          <SlotProvider
-            slots={{
-              icon: {
-                size: 'S',
-                UNSAFE_className: classNames(
-                  styles,
-                  'spectrum-Icon',
-                  {
-                    'spectrum-ActionGroup-itemIcon': hideButtonText
-                  }
-                )
-              },
-              text: {
-                ...textProps
-              }
-            }}>
-            {typeof children === 'string' || isTextOnly
-              ? <Text>{children}</Text>
-              : children}
-          </SlotProvider>
-        </ClearSlots>
-      </button>
-    </FocusRing>
-  );
-});

package/src/Button.tsx

@@ -1,207 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {
-  classNames,
-  SlotProvider,
-  useFocusableRef,
-  useHasChild,
-  useSlotProps,
-  useStyleProps
-} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
-import {FocusRing} from '@react-aria/focus';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {isAppleDevice, isFirefox, mergeProps, useId} from '@react-aria/utils';
-import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ElementType, ReactElement, useEffect, useState} from 'react';
-import {SpectrumButtonProps} from '@react-types/button';
-import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
-import {Text} from '@react-spectrum/text';
-import {useButton} from '@react-aria/button';
-import {useFocus, useHover} from '@react-aria/interactions';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useProviderProps} from '@react-spectrum/provider';
-
-function disablePendingProps(props) {
-  // Don't allow interaction while isPending is true
-  if (props.isPending) {
-    props.onPress = undefined;
-    props.onPressStart = undefined;
-    props.onPressEnd = undefined;
-    props.onPressChange = undefined;
-    props.onPressUp = undefined;
-    props.onKeyDown = undefined;
-    props.onKeyUp = undefined;
-    props.onClick = undefined;
-    props.href = undefined;
-  }
-  return props;
-}
-
-/**
- * Buttons allow users to perform an action or to navigate to another page.
- * They have multiple styles for various needs, and are ideal for calling attention to
- * where a user needs to do something in order to move forward in a flow.
- */
-export const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {
-  props = useProviderProps(props);
-  props = useSlotProps(props, 'button');
-  props = disablePendingProps(props);
-  let {
-    elementType: Element = 'button',
-    children,
-    variant,
-    style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',
-    staticColor,
-    isDisabled,
-    isPending,
-    autoFocus,
-    ...otherProps
-  } = props;
-  let domRef = useFocusableRef(ref);
-  let {buttonProps, isPressed} = useButton(props, domRef);
-  let {hoverProps, isHovered} = useHover({isDisabled});
-  let [isFocused, onFocusChange] = useState(false);
-  let {focusProps} = useFocus({onFocusChange, isDisabled});
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');
-  let {styleProps} = useStyleProps(otherProps);
-  let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);
-  let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);
-  // an aria label will block children and their labels from being read, this is undesirable for pending state
-  let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
-  let [isProgressVisible, setIsProgressVisible] = useState(false);
-  let backupButtonId = useId();
-  let buttonId = buttonProps.id || backupButtonId;
-  let iconId = useId();
-  let textId = useId();
-  let spinnerId = useId();
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout>;
-
-    if (isPending) {
-      // Start timer when isPending is set to true.
-      timeout = setTimeout(() => {
-        setIsProgressVisible(true);
-      }, 1000);
-    } else {
-      // Exit loading state when isPending is set to false. */
-      setIsProgressVisible(false);
-    }
-    return () => {
-      // Clean up on unmount or when user removes isPending prop before entering loading state.
-      clearTimeout(timeout);
-    };
-  }, [isPending]);
-
-  if (variant === 'cta') {
-    variant = 'accent';
-  } else if (variant === 'overBackground') {
-    variant = 'primary';
-    staticColor = 'white';
-  }
-
-  const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
-  const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
-
-  let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';
-  if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {
-    ariaLive = 'off';
-  }
-
-  let isPendingProps = isPending ? {
-    onClick: (e) => {
-      if (e.currentTarget instanceof HTMLButtonElement) {
-        e.preventDefault();
-      }
-    }
-  } : {
-    // no-op. 
-    // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.
-    onClick: () => {}
-  };
-
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
-      <Element
-        {...styleProps}
-        {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}
-        id={buttonId}
-        ref={domRef}
-        data-variant={variant}
-        data-style={style}
-        data-static-color={staticColor || undefined}
-        aria-disabled={isPending ? 'true' : undefined}
-        aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}
-        aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}
-        className={
-          classNames(
-            styles,
-            'spectrum-Button',
-            {
-              'spectrum-Button--iconOnly': hasIcon && !hasLabel,
-              'is-disabled': isDisabled || isProgressVisible,
-              'is-active': isPressed,
-              'is-hovered': isHovered,
-              'spectrum-Button--pending': isProgressVisible
-            },
-            styleProps.className
-          )
-        }>
-        <SlotProvider
-          slots={{
-            icon: {
-              id: iconId,
-              size: 'S',
-              UNSAFE_className: classNames(styles, 'spectrum-Icon')
-            },
-            text: {
-              id: textId,
-              UNSAFE_className: classNames(styles, 'spectrum-Button-label')
-            }
-          }}>
-          {typeof children === 'string'
-            ? <Text>{children}</Text>
-            : children}
-          {isPending && (
-            <div
-              aria-hidden="true"
-              style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}
-              className={classNames(styles, 'spectrum-Button-circleLoader')}>
-              <ProgressCircle
-                aria-label={isPendingAriaLiveLabel}
-                isIndeterminate
-                size="S"
-                staticColor={staticColor} />
-            </div>
-          )}
-          {isPending &&
-            <>
-              <div aria-live={isFocused ? ariaLive : 'off'}>
-                {isProgressVisible &&
-                  <div role="img" aria-labelledby={isPendingAriaLiveLabelledby} />
-                }
-              </div>
-              {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.
-              Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button
-              https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari
-              The aria-live may cause extra announcements in other browsers. */}
-              <div id={spinnerId} role="img" aria-label={isPendingAriaLiveLabel} />
-            </>
-          }
-        </SlotProvider>
-      </Element>
-    </FocusRing>
-  );
-}) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;

package/src/ClearButton.tsx

@@ -1,81 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaButtonElementTypeProps, ButtonProps} from '@react-types/button';
-import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import CrossSmall from '@spectrum-icons/ui/CrossSmall';
-import {DOMProps, FocusableRef, StyleProps} from '@react-types/shared';
-import {FocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-import React, {ElementType} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
-import {useButton} from '@react-aria/button';
-import {useHover} from '@react-aria/interactions';
-
-interface ClearButtonProps<T extends ElementType = 'button'> extends ButtonProps, AriaButtonElementTypeProps<T>, DOMProps, StyleProps {
-  focusClassName?: string,
-  variant?: 'overBackground',
-  excludeFromTabOrder?: boolean,
-  preventFocus?: boolean,
-  inset?: boolean
-}
-
-export const ClearButton = React.forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
-  let {
-    children = <CrossSmall UNSAFE_className={styles['spectrum-Icon']} />,
-    focusClassName,
-    variant,
-    autoFocus,
-    isDisabled,
-    preventFocus,
-    elementType = preventFocus ? 'div' : 'button' as ElementType,
-    inset = false,
-    ...otherProps
-  } = props;
-  let domRef = useFocusableRef(ref);
-  let {buttonProps, isPressed} = useButton({...props, elementType}, domRef);
-  let {hoverProps, isHovered} = useHover({isDisabled});
-  let {styleProps} = useStyleProps(otherProps);
-
-  // For cases like the clear button in a search field, remove the tabIndex so
-  // iOS 14 with VoiceOver doesn't focus the button and hide the keyboard when
-  // moving the cursor over the clear button.
-  if (preventFocus) {
-    delete buttonProps.tabIndex;
-  }
-
-  let ElementType = elementType;
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusClassName)} autoFocus={autoFocus}>
-      <ElementType
-        {...styleProps}
-        {...mergeProps(buttonProps, hoverProps)}
-        ref={domRef}
-        className={
-          classNames(
-            styles,
-            'spectrum-ClearButton',
-            {
-              [`spectrum-ClearButton--${variant}`]: variant,
-              'is-disabled': isDisabled,
-              'is-active': isPressed,
-              'is-hovered': isHovered,
-              'spectrum-ClearButton--inset': inset
-            },
-            styleProps.className
-          )
-        }>
-        {children}
-      </ElementType>
-    </FocusRing>
-  );
-});

package/src/FieldButton.tsx

@@ -1,81 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ButtonProps} from '@react-types/button';
-import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared';
-import {FocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-import React from 'react';
-import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
-import {useButton} from '@react-aria/button';
-import {useHover} from '@react-aria/interactions';
-
-interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
-  isQuiet?: boolean,
-  isActive?: boolean,
-  validationState?: 'valid' | 'invalid',
-  isInvalid?: boolean,
-  focusRingClass?: string
-}
-
-// @private
-export const FieldButton = React.forwardRef(function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
-  props = useSlotProps(props, 'button');
-  let {
-    isQuiet,
-    isDisabled,
-    validationState,
-    isInvalid,
-    children,
-    autoFocus,
-    isActive,
-    focusRingClass,
-    ...otherProps
-  } = props;
-  let domRef = useFocusableRef(ref) as RefObject<HTMLButtonElement | null>;
-  let {buttonProps, isPressed} = useButton(props, domRef);
-  let {hoverProps, isHovered} = useHover({isDisabled});
-  let {styleProps} = useStyleProps(otherProps);
-
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusRingClass)} autoFocus={autoFocus}>
-      <button
-        {...mergeProps(buttonProps, hoverProps)}
-        ref={domRef}
-        className={
-          classNames(
-            styles,
-            'spectrum-FieldButton',
-            {
-              'spectrum-FieldButton--quiet': isQuiet,
-              'is-active': isActive || isPressed,
-              'is-disabled': isDisabled,
-              'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',
-              'is-hovered': isHovered
-            },
-            styleProps.className
-          )
-        }>
-        <SlotProvider
-          slots={{
-            icon: {
-              size: 'S',
-              UNSAFE_className: classNames(styles, 'spectrum-Icon')
-            }
-          }}>
-          {children}
-        </SlotProvider>
-      </button>
-    </FocusRing>
-  );
-});

package/src/LogicButton.tsx

@@ -1,64 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
-import {FocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-import React from 'react';
-import {SpectrumLogicButtonProps} from '@react-types/button';
-import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
-import {useButton} from '@react-aria/button';
-import {useHover} from '@react-aria/interactions';
-import {useProviderProps} from '@react-spectrum/provider';
-
-/**
- * A LogicButton displays an operator within a boolean logic sequence.
- */
-export const LogicButton = React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {
-  props = useProviderProps(props);
-  let {
-    variant,
-    children,
-    isDisabled,
-    autoFocus,
-    ...otherProps
-  } = props;
-  let domRef = useFocusableRef(ref);
-  let {buttonProps, isPressed} = useButton(props, domRef);
-  let {hoverProps, isHovered} = useHover({isDisabled});
-  let {styleProps} = useStyleProps(otherProps);
-
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
-      <button
-        {...styleProps}
-        {...mergeProps(buttonProps, hoverProps)}
-        ref={domRef}
-        className={
-          classNames(
-            styles,
-            'spectrum-LogicButton',
-            {
-              [`spectrum-LogicButton--${variant}`]: variant,
-              'is-disabled': isDisabled,
-              'is-active': isPressed,
-              'is-hovered': isHovered
-            },
-            styleProps.className
-          )
-        }>
-        <span className={classNames(styles, 'spectrum-Button-label')}>{children}</span>
-      </button>
-    </FocusRing>
-  );
-});