@pingux/astro 1.17.0-alpha.0 → 1.17.0-alpha.3

package/lib/components/Image/Image.js

@@ -1,187 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-
-var _templateObject;
-
-var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "sx"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React, { forwardRef, useRef, useImperativeHandle, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { Image as ThemeUIImage } from 'theme-ui';
-import { useHover } from '@react-aria/interactions';
-import { keyframes } from '@emotion/react';
-import { usePropWarning, useStatusClasses, useFallbackImage } from '../../hooks';
-import { Box } from '../../index';
-import { neutral } from '../../styles/colors';
-/**
- * Basic image component.
- * Built on top of [Image from Theme-UI](https://theme-ui.com/components/image/).
- * If you are looking to add an icon please use [Icon component](/icon--default).
- */
-
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var Image = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      fallbackImage = props.fallbackImage,
-      fallbackTimeout = props.fallbackTimeout,
-      isDisabled = props.isDisabled,
-      src = props.src,
-      sx = props.sx,
-      others = _objectWithoutProperties(props, _excluded);
-
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isLoading = _useState2[0],
-      setIsLoading = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      loadedSuccessfully = _useState4[0],
-      setLoadedSuccessfully = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hasTimedOut = _useState6[0],
-      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
-  // https://github.com/facebook/react/issues/14010#issuecomment-433788147
-
-
-  var isLoadingRef = useRef(isLoading);
-
-  var setIsLoadingWithRef = function setIsLoadingWithRef(newState) {
-    setIsLoading(newState);
-    isLoadingRef.current = newState;
-  };
-
-  var setImgSrc = function setImgSrc() {
-    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
-      return fallbackImage;
-    }
-
-    return src;
-  };
-
-  var imgSrc = useMemo(function () {
-    return setImgSrc();
-  }, [src, isLoading, hasTimedOut]);
-  var imgRef = useRef();
-  /* istanbul ignore next */
-
-  useImperativeHandle(ref, function () {
-    return imgRef.current;
-  });
-  usePropWarning(props, 'disabled', 'isDisabled');
-
-  var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
-  var _useStatusClasses = useStatusClasses(className, {
-    isDisabled: isDisabled,
-    isHovered: isHovered,
-    isLoading: isLoading
-  }),
-      classNames = _useStatusClasses.classNames;
-
-  var onImageLoad = function onImageLoad() {
-    if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
-      setIsLoadingWithRef(false);
-      setLoadedSuccessfully(true);
-    }
-  };
-
-  var onImageError = function onImageError() {
-    setIsLoadingWithRef(false);
-  };
-
-  var onFallbackTimeout = function onFallbackTimeout() {
-    if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
-      setIsLoadingWithRef(false);
-      setHasTimedOut(true);
-    }
-  };
-
-  useFallbackImage(_objectSpread({
-    onImageLoad: onImageLoad,
-    onImageError: onImageError,
-    onFallbackTimeout: onFallbackTimeout
-  }, props));
-  var skeletonFrames = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), neutral[90], neutral[70]);
-  var skeletonSx = {
-    backgroundColor: neutral[90],
-    // eslint-disable-next-line react/prop-types
-    width: (sx === null || sx === void 0 ? void 0 : sx.width) || '100%',
-    // eslint-disable-next-line react/prop-types
-    height: (sx === null || sx === void 0 ? void 0 : sx.height) || '100%',
-    animation: isLoading && "".concat(skeletonFrames, " 1.5s ease-in-out 0.5s infinite alternate")
-  };
-
-  var Skeleton = function Skeleton(_ref) {
-    var children = _ref.children;
-    return ___EmotionJSX(Box, {
-      sx: skeletonSx,
-      "data-testid": "skeleton-image"
-    }, children);
-  };
-
-  var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
-    className: classNames,
-    ref: imgRef,
-    alt: "Image",
-    role: "img",
-    src: imgSrc,
-    sx: sx
-  }, others, hoverProps));
-
-  if (isLoading || !loadedSuccessfully && !fallbackImage) {
-    return ___EmotionJSX(Skeleton, null);
-  }
-
-  return themeUiImage;
-});
-Image.propTypes = {
-  /** The styling variation of the image. */
-  variant: PropTypes.string,
-
-  /** Whether the image is disabled; applies disabled styling. */
-  isDisabled: PropTypes.bool,
-
-  /**  The HTML element used to render the image. */
-  as: PropTypes.string,
-
-  /**  Source of image(Image path). */
-  src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
-  /**  Load failure fault-tolerant src
-   * We do recommend using JS File or Blob object as an src for the "fallbackImage".
-   * Here is some documentation on how to create a blob image [https://developer.mozilla.org/en-US/docs/Web/API/Blob].
-   * Also please note that URLs are accepted, but if the URL cannot be loaded,
-   * the fallback image will not be rendered so it's not recommended.
-   * */
-  fallbackImage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
-  /**  Time in milliseconds that component should wait for a response from src address. */
-  fallbackTimeout: PropTypes.number
-};
-Image.defaultProps = {
-  isDisabled: false,
-  as: 'img',
-  fallbackTimeout: 5000
-};
-Image.displayName = 'Image';
-export default Image;

package/lib/components/Image/Image.stories.js

@@ -1,121 +0,0 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState } from 'react';
-import isChromatic from 'chromatic/isChromatic';
-import Image from '.';
-import { chiefIdentityChampions, pingImg } from './imageConstants';
-import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
-import { Box, Button } from '../../index';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Image',
-  component: Image,
-  argTypes: {
-    isDisabled: {},
-    variant: {
-      control: {
-        type: 'none'
-      }
-    },
-    as: {
-      control: {
-        type: 'none',
-        options: htmlElements
-      },
-      defaultValue: 'img'
-    },
-    src: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: pingImg
-    }
-  }
-};
-export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
-  return ___EmotionJSX(Image, args);
-};
-export var Avatar = function Avatar() {
-  return ___EmotionJSX(Image, {
-    src: pingImg,
-    variant: "images.avatar"
-  });
-};
-export var CustomSizeAndRadius = function CustomSizeAndRadius() {
-  return ___EmotionJSX(Image, {
-    src: chiefIdentityChampions,
-    sx: {
-      width: '70px',
-      height: '70px',
-      borderRadius: 8,
-      bg: 'neutral.90'
-    }
-  });
-};
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(Image, {
-    src: pingImg,
-    isDisabled: true
-  });
-};
-export var FallbackImage = function FallbackImage() {
-  return ___EmotionJSX(Image, {
-    fallbackImage: pingImg,
-    src: "https://deelay.me/7000/https://picsum.photos/150/150",
-    sx: {
-      width: '150px',
-      height: '150px'
-    }
-  });
-};
-export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
-  var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
-  return ___EmotionJSX(Image, {
-    src: imageSrc,
-    sx: {
-      width: '150px',
-      height: '150px'
-    }
-  });
-};
-WithSkeletonLoadSuccess.args = {
-  useLocalSrc: isChromatic()
-};
-export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
-  return ___EmotionJSX(Image, {
-    src: "https://deelay.me/7000/https://picsum.photos/150/150",
-    sx: {
-      width: '150px',
-      height: '150px'
-    }
-  });
-};
-export var UpdatingImageSrc = function UpdatingImageSrc() {
-  var _useState = useState(chiefIdentityChampions),
-      _useState2 = _slicedToArray(_useState, 2),
-      image = _useState2[0],
-      setImage = _useState2[1];
-
-  var handleButtonPress = function handleButtonPress() {
-    var src = image === pingImg ? chiefIdentityChampions : pingImg;
-    setImage(src);
-  };
-
-  return ___EmotionJSX(Box, {
-    sx: {
-      width: '200px'
-    }
-  }, ___EmotionJSX(Button, {
-    onPress: handleButtonPress
-  }, "Change Image"), ___EmotionJSX(Image, {
-    src: image,
-    sx: {
-      width: '200px',
-      height: '200px',
-      mt: '25px'
-    }
-  }));
-};

package/lib/components/Image/Image.test.js

@@ -1,168 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React from 'react';
-import { act } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
-import Image from '.';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var testSrc = 'test-src';
-var testFallbackSrc = 'test-fallback-src';
-var skeletonImageId = 'skeleton-image';
-var defaultProps = {
-  src: testSrc,
-  fallbackImage: testFallbackSrc
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-
-  return renderFn(___EmotionJSX(Image, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
-
-axeTest(getComponent);
-var fallbackImageObj = null;
-jest.mock('../../hooks/useFallbackImage', function () {
-  return function (props) {
-    fallbackImageObj = _objectSpread({}, props);
-    return [];
-  };
-});
-test('an image is rendered', function () {
-  getComponent();
-  act(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  var img = screen.getByRole('img');
-  expect(img).toBeInstanceOf(HTMLImageElement);
-  expect(img).toBeInTheDocument();
-});
-test('an image is rendered with no fallback', function () {
-  getComponent({
-    fallbackImage: null
-  });
-  act(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  var img = screen.getByRole('img');
-  expect(img).toBeInstanceOf(HTMLImageElement);
-  expect(img).toBeInTheDocument();
-});
-test('image shows disabled status', function () {
-  getComponent({
-    isDisabled: true
-  });
-  act(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  var img = screen.getByRole('img');
-  expect(img).toHaveClass('is-disabled');
-});
-test('image source is able to be changed', function () {
-  var src2 = 'second-src';
-
-  var _getComponent = getComponent(),
-      rerender = _getComponent.rerender;
-
-  act(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  getComponent({
-    src: src2
-  }, {
-    renderFn: rerender
-  });
-  act(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  expect(screen.getByRole('img')).toHaveAttribute('src', src2);
-});
-describe('test Image component with useFallbackImage hook', function () {
-  test('image component will use src if loaded correctly', function () {
-    getComponent();
-    act(function () {
-      fallbackImageObj.onImageLoad();
-    });
-    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  });
-  test('image component will use fallbackImg if src loaded with error', function () {
-    getComponent();
-    act(function () {
-      fallbackImageObj.onImageError();
-    });
-    var img = screen.getByRole('img');
-    expect(img).toHaveAttribute('src', testFallbackSrc);
-  });
-  test('image component will use fallbackImg if src timed out', function () {
-    getComponent();
-    act(function () {
-      fallbackImageObj.onFallbackTimeout();
-    });
-    var img = screen.getByRole('img');
-    expect(img).toHaveAttribute('src', testFallbackSrc);
-  });
-  test('if image loads after timeout src still be the fallback', function () {
-    getComponent();
-    act(function () {
-      fallbackImageObj.onFallbackTimeout();
-      fallbackImageObj.onImageLoad();
-    });
-    var img = screen.getByRole('img');
-    expect(img).toHaveAttribute('src', testFallbackSrc);
-  });
-  test('if image loads before timeout src still be the the origin one', function () {
-    getComponent();
-    act(function () {
-      fallbackImageObj.onImageLoad();
-      fallbackImageObj.onFallbackTimeout();
-    });
-    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  });
-  test('the skeleton loading will appear if no fallback image is given', function () {
-    getComponent({
-      fallbackImage: null
-    });
-    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
-    act(function () {
-      fallbackImageObj.onImageLoad();
-    });
-    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  });
-  test('the skeleton will be shown instead of img if no fallback image is given and image load failed', function () {
-    getComponent({
-      fallbackImage: null
-    });
-    act(function () {
-      fallbackImageObj.onImageError();
-    });
-    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
-  });
-  test('the skeleton will be shown instead of img if no fallback image is given and image load timed out', function () {
-    getComponent({
-      fallbackImage: null
-    });
-    act(function () {
-      fallbackImageObj.onFallbackTimeout();
-    });
-    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
-  });
-});

package/lib/components/Image/imageConstants.js

@@ -1,2 +0,0 @@
-export var pingImg = 'data:image/png;base64,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';
-export var chiefIdentityChampions = 'https://images.pingidentity.com/image/upload/f_auto,q_auto,w_auto,c_scale/ping_dam/content/dam/ping-6-2-assets/images/company/our-company/chief-identity-champions.png';

package/lib/components/Image/index.js

@@ -1 +0,0 @@
-export { default } from './Image';

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -1,115 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"];
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import ImageFilterHdrIcon from 'mdi-react/ImageFilterHdrIcon';
-import CameraAltIcon from 'mdi-react/CameraAltIcon';
-import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
-import { useHover } from '@react-aria/interactions';
-import { useFocusRing } from '@react-aria/focus';
-import { Box, Button, Icon, Image } from '../../index';
-import Loader from '../Loader';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var defaultPreviewImage = props.defaultPreviewImage,
-      defaultPreviewNode = props.defaultPreviewNode,
-      isImageType = props.isImageType,
-      isLoading = props.isLoading,
-      loaderSize = props.loaderSize,
-      isMenuOpen = props.isMenuOpen,
-      previewImage = props.previewImage,
-      previewWidth = props.previewWidth,
-      widthHeightSx = props.widthHeightSx,
-      others = _objectWithoutProperties(props, _excluded);
-
-  var buttonRef = useRef();
-  /* istanbul ignore next */
-
-  useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
-
-  var _useFocusRing = useFocusRing(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
-  var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
-  var noImagePreview = defaultPreviewNode || ___EmotionJSX(Icon, {
-    icon: ImageFilterHdrIcon,
-    color: "neutral.60",
-    size: 24,
-    "data-testid": "image-upload-no-image-preview"
-  });
-
-  var imagePreview = ___EmotionJSX(Image, {
-    src: previewImage,
-    sx: {
-      width: previewWidth,
-      height: 'auto',
-      maxHeight: '100%'
-    },
-    alt: "uploaded file preview",
-    "data-testid": "image-upload-image-preview"
-  });
-
-  var loadingPreview = ___EmotionJSX(Box, {
-    variant: "imageUpload.hoveredPreview.wrapper",
-    sx: widthHeightSx,
-    "data-testid": "image-upload-hovered-preview"
-  }, ___EmotionJSX(Loader, {
-    color: isFocusVisible || isMenuOpen ? 'active' : 'white',
-    size: loaderSize,
-    sx: {
-      zIndex: 1
-    },
-    "data-testid": "image-preview-button__loader"
-  }), (previewImage || previewImage === defaultPreviewImage || !isImageType) && ___EmotionJSX(Box, {
-    variant: "imageUpload.hoveredPreview.shaded"
-  }));
-
-  var hoveredPreview = ___EmotionJSX(Box, {
-    variant: "imageUpload.hoveredPreview.wrapper",
-    sx: widthHeightSx,
-    "data-testid": "image-upload-hovered-preview"
-  }, ___EmotionJSX(Icon, {
-    icon: CameraAltIcon,
-    color: isFocusVisible || isMenuOpen ? 'active' : 'white',
-    size: 24,
-    sx: {
-      zIndex: 1
-    }
-  }), (previewImage || previewImage === defaultPreviewImage || !isImageType) && ___EmotionJSX(Box, {
-    variant: "imageUpload.hoveredPreview.shaded"
-  }));
-
-  return ___EmotionJSX(Box, _extends({
-    tabindex: 0,
-    sx: widthHeightSx
-  }, hoverProps), ___EmotionJSX(Button, _extends({
-    ref: buttonRef,
-    variant: "imageUpload",
-    sx: widthHeightSx,
-    "data-testid": "image-preview-button",
-    "aria-label": "Image preview"
-  }, mergeProps(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
-});
-ImagePreviewButton.propTypes = {
-  defaultPreviewImage: PropTypes.string,
-  defaultPreviewNode: PropTypes.node,
-  isImageType: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isMenuOpen: PropTypes.bool,
-  loaderSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  previewImage: PropTypes.string,
-  previewWidth: PropTypes.number,
-  widthHeightSx: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number
-  })
-};
-ImagePreviewButton.displayName = 'ImagePreviewButton';
-export default ImagePreviewButton;