@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/components/Image/Image.js

@@ -0,0 +1,198 @@
+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", "alt", "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, useAriaLabelWarning } 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,
+      alt = props.alt,
+      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 ariaLabel = props['aria-label'] || alt;
+  useAriaLabelWarning('Image', ariaLabel);
+
+  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: alt,
+    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,
+
+  /** Descriptive text for an image. This is *highly* recommended in most cases.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt).
+   * */
+  alt: PropTypes.string,
+
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string
+};
+Image.defaultProps = {
+  isDisabled: false,
+  as: 'img',
+  fallbackTimeout: 5000
+};
+Image.displayName = 'Image';
+export default Image;

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

@@ -0,0 +1,130 @@
+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 '../../utils/devUtils/constants/images';
+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, _extends({}, args, {
+    alt: "Ping identity square logo"
+  }));
+};
+export var Avatar = function Avatar() {
+  return ___EmotionJSX(Image, {
+    src: pingImg,
+    variant: "images.avatar",
+    alt: "Ping identity round avatar"
+  });
+};
+export var CustomSizeAndRadius = function CustomSizeAndRadius() {
+  return ___EmotionJSX(Image, {
+    src: chiefIdentityChampions,
+    sx: {
+      width: '70px',
+      height: '70px',
+      borderRadius: 8,
+      bg: 'neutral.90'
+    },
+    alt: "Terry Crews in a red suite"
+  });
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(Image, {
+    src: pingImg,
+    isDisabled: true,
+    alt: "Ping identity square logo"
+  });
+};
+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'
+    },
+    alt: "Random image"
+  });
+};
+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'
+    },
+    alt: "Random image"
+  });
+};
+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'
+    },
+    alt: "Random image"
+  });
+};
+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'
+    },
+    alt: image === pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
+  }));
+};

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

@@ -0,0 +1,177 @@
+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 with alt text', function () {
+  getComponent({
+    alt: 'Test'
+  });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(screen.getByAltText('Test')).toBeInTheDocument();
+});
+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/index.js

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

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -0,0 +1,115 @@
+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;