@splunk/react-ui 4.21.0 → 4.21.1

package/Image.js

@@ -1,407 +1,451 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* reexport */ Image_Image)
-});
-
-;// CONCATENATED MODULE: external "react"
-const external_react_namespaceObject = require("react");
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
-;// CONCATENATED MODULE: external "prop-types"
-const external_prop_types_namespaceObject = require("prop-types");
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/endsWith"
-const endsWith_namespaceObject = require("lodash/endsWith");
-var endsWith_default = /*#__PURE__*/__webpack_require__.n(endsWith_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/omit"
-const omit_namespaceObject = require("lodash/omit");
-var omit_default = /*#__PURE__*/__webpack_require__.n(omit_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/toLower"
-const toLower_namespaceObject = require("lodash/toLower");
-var toLower_default = /*#__PURE__*/__webpack_require__.n(toLower_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/File"
-const File_namespaceObject = require("@splunk/react-ui/File");
-var File_default = /*#__PURE__*/__webpack_require__.n(File_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/ui-utils/format"
-const format_namespaceObject = require("@splunk/ui-utils/format");
-;// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-const i18n_namespaceObject = require("@splunk/ui-utils/i18n");
-;// CONCATENATED MODULE: external "@splunk/themes"
-const themes_namespaceObject = require("@splunk/themes");
-;// CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-const Cross_namespaceObject = require("@splunk/react-icons/Cross");
-var Cross_default = /*#__PURE__*/__webpack_require__.n(Cross_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-const Close_namespaceObject = require("@splunk/react-icons/enterprise/Close");
-var Close_default = /*#__PURE__*/__webpack_require__.n(Close_namespaceObject);
-;// CONCATENATED MODULE: ./src/Image/icons/Cross.tsx
-
-
-
-
-
-
-var CrossIcon = function CrossIcon() {
-  var _useSplunkTheme = (0,themes_namespaceObject.useSplunkTheme)(),
-      isEnterprise = _useSplunkTheme.isEnterprise,
-      isCompact = _useSplunkTheme.isCompact;
-
-  var prismaSize = isCompact ? '20px' : '24px';
-
-  var removeScreenReaderText = (0,i18n_namespaceObject._)('Remove');
-
-  var crossIconFamily = isEnterprise ? /*#__PURE__*/external_react_default().createElement((Close_default()), {
-    hideDefaultTooltip: true,
-    screenReaderText: removeScreenReaderText
-  }) : /*#__PURE__*/external_react_default().createElement((Cross_default()), {
-    "aria-label": removeScreenReaderText,
-    height: prismaSize,
-    width: prismaSize
-  });
-  return crossIconFamily;
-};
-
-/* harmony default export */ const Cross = (CrossIcon);
-;// CONCATENATED MODULE: external "styled-components"
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Message"
-const Message_namespaceObject = require("@splunk/react-ui/Message");
-var Message_default = /*#__PURE__*/__webpack_require__.n(Message_namespaceObject);
-;// CONCATENATED MODULE: ./src/Image/ImageStyles.ts
-
-
-
-
-var StyledImagePreview = external_styled_components_default().div.withConfig({
-  displayName: "ImageStyles__StyledImagePreview",
-  componentId: "sc-16ooypp-0"
-})(["position:relative;min-height:", ";", ""], (0,themes_namespaceObject.pick)({
-  enterprise: '30px',
-  prisma: themes_namespaceObject.variables.inputHeight
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["border:", ";"], themes_namespaceObject.variables.border),
-  prisma: (0,external_styled_components_namespaceObject.css)(["border-radius:", ";overflow:hidden;margin-top:12px;background-color:", ";"], themes_namespaceObject.variables.borderRadius, themes_namespaceObject.variables.interactiveColorBackground)
-}));
-var StyledLabelContainer = external_styled_components_default().div.withConfig({
-  displayName: "ImageStyles__StyledLabelContainer",
-  componentId: "sc-16ooypp-1"
-})(["", ";flex-direction:row;justify-content:space-between;background-color:", ";color:", ";opacity:0.9;position:absolute;width:100%;"], themes_namespaceObject.mixins.reset('flex'), (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.gray92,
-    dark: themes_namespaceObject.variables.gray30
-  },
-  prisma: themes_namespaceObject.mixins.overlayColors(themes_namespaceObject.variables.interactiveColorBackground, themes_namespaceObject.variables.interactiveColorOverlaySelected)
-}), themes_namespaceObject.variables.contentColorMuted);
-var StyledRemoveClickable = external_styled_components_default()((Clickable_default())).withConfig({
-  displayName: "ImageStyles__StyledRemoveClickable",
-  componentId: "sc-16ooypp-2"
-})(["cursor:pointer;", " padding:", ";text-align:center;height:inherit;&:focus{", "}&:hover{background-color:", ";color:", ";}"], (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["flex:0 0 26px;"]),
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";border-radius:50%;"], themes_namespaceObject.variables.contentColorMuted)
-}), (0,themes_namespaceObject.pick)({
-  enterprise: '3px 0',
-  prisma: {
-    comfortable: '0 8px',
-    compact: '0 6px'
-  }
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["box-shadow:", ";color:", ";"], themes_namespaceObject.variables.focusShadow, themes_namespaceObject.variables.linkColor),
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";background-color:", ";box-shadow:0 0 0 3px ", ";"], themes_namespaceObject.variables.contentColorActive, themes_namespaceObject.variables.interactiveColorOverlayHover, themes_namespaceObject.variables.focusColor)
-}), (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.gray96,
-    dark: themes_namespaceObject.variables.gray30
-  },
-  prisma: themes_namespaceObject.variables.interactiveColorOverlayHover
-}), (0,themes_namespaceObject.pick)({
-  enterprise: themes_namespaceObject.variables.linkColor,
-  prisma: themes_namespaceObject.variables.contentColorActive
-}));
-var StyledLabel = external_styled_components_default().div.withConfig({
-  displayName: "ImageStyles__StyledLabel",
-  componentId: "sc-16ooypp-3"
-})(["color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 0 0px;padding:", ";", ""], themes_namespaceObject.variables.contentColorActive, (0,themes_namespaceObject.pick)({
-  enterprise: '3px 0 3px 10px',
-  prisma: {
-    comfortable: '10px 10px',
-    compact: '6px 10px'
-  }
-}), function (_ref) {
-  var $disabled = _ref.$disabled;
-  return $disabled && (0,external_styled_components_namespaceObject.css)(["background-color:", ";color:", ";cursor:not-allowed;"], (0,themes_namespaceObject.pick)({
-    enterprise: themes_namespaceObject.variables.gray96,
-    prisma: themes_namespaceObject.variables.interactiveColorBackgroundDisabled
-  }), themes_namespaceObject.variables.contentColorDisabled);
-});
-var StyledImageThumbnail = external_styled_components_default().img.withConfig({
-  displayName: "ImageStyles__StyledImageThumbnail",
-  componentId: "sc-16ooypp-4"
-})(["", ";margin:0 auto;max-height:", "px;max-width:100%;"], themes_namespaceObject.mixins.reset('block'), function (props) {
-  return props.maxHeight;
-});
-var StyledErrorMessage = external_styled_components_default()((Message_default())).withConfig({
-  displayName: "ImageStyles__StyledErrorMessage",
-  componentId: "sc-16ooypp-5"
-})(["margin-top:", ";"], (0,themes_namespaceObject.pick)({
-  enterprise: themes_namespaceObject.variables.spacingQuarter,
-  prisma: '12px'
-}));
-
-;// CONCATENATED MODULE: ./src/Image/Image.tsx
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
-
-
-
-
-
-var propTypes = {
-  allowExtensions: external_prop_types_default().arrayOf((external_prop_types_default()).string),
-  defaultFilename: (external_prop_types_default()).string,
-  defaultImageDataURI: (external_prop_types_default()).string,
-  disabled: (external_prop_types_default()).bool,
-  dropAnywhere: (external_prop_types_default()).bool,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-  error: (external_prop_types_default()).bool,
-  maxHeight: (external_prop_types_default()).number,
-  onImageChange: (external_prop_types_default()).func
-};
-var defaultProps = {
-  allowExtensions: ['gif', 'jpeg', 'jpg', 'png'],
-  disabled: false,
-  dropAnywhere: false,
-  error: false,
-  maxHeight: 180
-};
-
-/**
- * Image provides the ability to accept image files and present a preview of the image.
- */
-var Image = /*#__PURE__*/function (_Component) {
-  _inherits(Image, _Component);
-
-  var _super = _createSuper(Image);
-
-  _createClass(Image, null, [{
-    key: "isAllowedFilename",
-    // @docs-props-type ImagePropsBase
-    value: function isAllowedFilename(filename, allowExtensions) {
-      return !!filename && allowExtensions.some(function (extension) {
-        return endsWith_default()(toLower_default()(filename), ".".concat(toLower_default()(extension)));
-      });
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
+            /******/;
+            e.d(t, {
+                a: t
+            });
+            /******/            return t;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (r, t) => {
+            /******/ for (var a in t) {
+                /******/ if (e.o(t, a) && !e.o(r, a)) {
+                    /******/ Object.defineProperty(r, a, {
+                        enumerable: true,
+                        get: t[a]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ X
+    });
+    // CONCATENATED MODULE: external "react"
+    const t = require("react");
+    var a =  e.n(t);
+    // CONCATENATED MODULE: external "prop-types"
+    const o = require("prop-types");
+    var n =  e.n(o);
+    // CONCATENATED MODULE: external "lodash/endsWith"
+    const i = require("lodash/endsWith");
+    var l =  e.n(i);
+    // CONCATENATED MODULE: external "lodash/omit"
+    const s = require("lodash/omit");
+    var c =  e.n(s);
+    // CONCATENATED MODULE: external "lodash/toLower"
+    const u = require("lodash/toLower");
+    var p =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-ui/File"
+    const f = require("@splunk/react-ui/File");
+    var d =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
+    const m = require("@splunk/ui-utils/format");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const v = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const b = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
+    const y = require("@splunk/react-icons/Cross");
+    var g =  e.n(y);
+    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
+    const h = require("@splunk/react-icons/enterprise/Close");
+    var x =  e.n(h);
+    // CONCATENATED MODULE: ./src/Image/icons/Cross.tsx
+    var w = function e() {
+        var r = (0, b.useSplunkTheme)(), t = r.isEnterprise, o = r.isCompact;
+        var n = o ? "20px" : "24px";
+        var i = (0, v._)("Remove");
+        var l = t ?  a().createElement(x(), {
+            hideDefaultTooltip: true,
+            screenReaderText: i
+        }) :  a().createElement(g(), {
+            "aria-label": i,
+            height: n,
+            width: n
+        });
+        return l;
+    };
+    /* harmony default export */    const k = w;
+    // CONCATENATED MODULE: external "styled-components"
+    const C = require("styled-components");
+    var R =  e.n(C);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const S = require("@splunk/react-ui/Clickable");
+    var I =  e.n(S);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Message"
+    const _ = require("@splunk/react-ui/Message");
+    var O =  e.n(_);
+    // CONCATENATED MODULE: ./src/Image/ImageStyles.ts
+    var E = R().div.withConfig({
+        displayName: "ImageStyles__StyledImagePreview",
+        componentId: "sc-16ooypp-0"
+    })([ "position:relative;min-height:", ";", "" ], (0, b.pick)({
+        enterprise: "30px",
+        prisma: b.variables.inputHeight
+    }), (0, b.pick)({
+        enterprise: (0, C.css)([ "border:", ";" ], b.variables.border),
+        prisma: (0, C.css)([ "border-radius:", ";overflow:hidden;margin-top:12px;background-color:", ";" ], b.variables.borderRadius, b.variables.interactiveColorBackground)
+    }));
+    var j = R().div.withConfig({
+        displayName: "ImageStyles__StyledLabelContainer",
+        componentId: "sc-16ooypp-1"
+    })([ "", ";flex-direction:row;justify-content:space-between;background-color:", ";color:", ";opacity:0.9;position:absolute;width:100%;" ], b.mixins.reset("flex"), (0, 
+    b.pick)({
+        enterprise: {
+            light: b.variables.gray92,
+            dark: b.variables.gray30
+        },
+        prisma: b.mixins.overlayColors(b.variables.interactiveColorBackground, b.variables.interactiveColorOverlaySelected)
+    }), b.variables.contentColorMuted);
+    var q = R()(I()).withConfig({
+        displayName: "ImageStyles__StyledRemoveClickable",
+        componentId: "sc-16ooypp-2"
+    })([ "cursor:pointer;", " padding:", ";text-align:center;height:inherit;&:focus{", "}&:hover{background-color:", ";color:", ";}" ], (0, 
+    b.pick)({
+        enterprise: (0, C.css)([ "flex:0 0 26px;" ]),
+        prisma: (0, C.css)([ "color:", ";border-radius:50%;" ], b.variables.contentColorMuted)
+    }), (0, b.pick)({
+        enterprise: "3px 0",
+        prisma: {
+            comfortable: "0 8px",
+            compact: "0 6px"
+        }
+    }), (0, b.pick)({
+        enterprise: (0, C.css)([ "box-shadow:", ";color:", ";" ], b.variables.focusShadow, b.variables.linkColor),
+        prisma: (0, C.css)([ "color:", ";background-color:", ";box-shadow:0 0 0 3px ", ";" ], b.variables.contentColorActive, b.variables.interactiveColorOverlayHover, b.variables.focusColor)
+    }), (0, b.pick)({
+        enterprise: {
+            light: b.variables.gray96,
+            dark: b.variables.gray30
+        },
+        prisma: b.variables.interactiveColorOverlayHover
+    }), (0, b.pick)({
+        enterprise: b.variables.linkColor,
+        prisma: b.variables.contentColorActive
+    }));
+    var D = R().div.withConfig({
+        displayName: "ImageStyles__StyledLabel",
+        componentId: "sc-16ooypp-3"
+    })([ "color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 0 0px;padding:", ";", "" ], b.variables.contentColorActive, (0, 
+    b.pick)({
+        enterprise: "3px 0 3px 10px",
+        prisma: {
+            comfortable: "10px 10px",
+            compact: "6px 10px"
+        }
+    }), (function(e) {
+        var r = e.$disabled;
+        return r && (0, C.css)([ "background-color:", ";color:", ";cursor:not-allowed;" ], (0, 
+        b.pick)({
+            enterprise: b.variables.gray96,
+            prisma: b.variables.interactiveColorBackgroundDisabled
+        }), b.variables.contentColorDisabled);
+    }));
+    var P = R().img.withConfig({
+        displayName: "ImageStyles__StyledImageThumbnail",
+        componentId: "sc-16ooypp-4"
+    })([ "", ";margin:0 auto;max-height:", "px;max-width:100%;" ], b.mixins.reset("block"), (function(e) {
+        return e.maxHeight;
+    }));
+    var A = R()(O()).withConfig({
+        displayName: "ImageStyles__StyledErrorMessage",
+        componentId: "sc-16ooypp-5"
+    })([ "margin-top:", ";" ], (0, b.pick)({
+        enterprise: b.variables.spacingQuarter,
+        prisma: "12px"
+    }));
+    // CONCATENATED MODULE: ./src/Image/Image.tsx
+    function F(e) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            F = function e(r) {
+                return typeof r;
+            };
+        } else {
+            F = function e(r) {
+                return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
+            };
+        }
+        return F(e);
+    }
+    function T() {
+        T = Object.assign || function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var a in t) {
+                    if (Object.prototype.hasOwnProperty.call(t, a)) {
+                        e[a] = t[a];
+                    }
+                }
+            }
+            return e;
+        };
+        return T.apply(this, arguments);
     }
-  }]);
-
-  function Image(props) {
-    var _this;
-
-    _classCallCheck(this, Image);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "fileReader", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "handleAddFiles", function (files) {
-      if (files.length > 0) {
-        var file = files[0];
-
-        if (_this.fileReader.readyState === 1) {
-          _this.fileReader.abort();
+    function H(e, r) {
+        if (!(e instanceof r)) {
+            throw new TypeError("Cannot call a class as a function");
         }
-
-        _this.fileReader.onload = function () {
-          var event = {
-            filename: file.name,
-            imageDataURI: _this.fileReader.result // TS: guaranteed by readAsDataURL call below (see spec)
-
-          };
-
-          _this.setState(event);
-
-          if (Image.isAllowedFilename(file.name, _this.props.allowExtensions)) {
-            var _this$props$onImageCh, _this$props;
-
-            (_this$props$onImageCh = (_this$props = _this.props).onImageChange) === null || _this$props$onImageCh === void 0 ? void 0 : _this$props$onImageCh.call(_this$props, event);
-          }
+    }
+    function U(e, r) {
+        for (var t = 0; t < r.length; t++) {
+            var a = r[t];
+            a.enumerable = a.enumerable || false;
+            a.configurable = true;
+            if ("value" in a) a.writable = true;
+            Object.defineProperty(e, a.key, a);
+        }
+    }
+    function M(e, r, t) {
+        if (r) U(e.prototype, r);
+        if (t) U(e, t);
+        return e;
+    }
+    function N(e, r) {
+        if (typeof r !== "function" && r !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        e.prototype = Object.create(r && r.prototype, {
+            constructor: {
+                value: e,
+                writable: true,
+                configurable: true
+            }
+        });
+        if (r) L(e, r);
+    }
+    function L(e, r) {
+        L = Object.setPrototypeOf || function e(r, t) {
+            r.__proto__ = t;
+            return r;
         };
-
-        _this.fileReader.readAsDataURL(file);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleRemoveFile", function () {
-      var _this$props$onImageCh2, _this$props2;
-
-      if (_this.fileReader.readyState === 1) {
-        _this.fileReader.abort();
-      }
-
-      var event = {
-        filename: null,
-        imageDataURI: null
-      };
-
-      _this.setState(event);
-
-      (_this$props$onImageCh2 = (_this$props2 = _this.props).onImageChange) === null || _this$props$onImageCh2 === void 0 ? void 0 : _this$props$onImageCh2.call(_this$props2, event);
-    });
-
-    _this.state = {
-      filename: props.defaultFilename,
-      imageDataURI: props.defaultImageDataURI
-    };
-    _this.fileReader = new FileReader();
-    return _this;
-  }
-
-  _createClass(Image, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (false) {}
+        return L(e, r);
+    }
+    function B(e) {
+        var r = W();
+        return function t() {
+            var a = z(e), o;
+            if (r) {
+                var n = z(this).constructor;
+                o = Reflect.construct(a, arguments, n);
+            } else {
+                o = a.apply(this, arguments);
+            }
+            return $(this, o);
+        };
+    }
+    function $(e, r) {
+        if (r && (F(r) === "object" || typeof r === "function")) {
+            return r;
+        }
+        return Q(e);
+    }
+    function Q(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        }
+        return e;
+    }
+    function W() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    function z(e) {
+        z = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
+            return r.__proto__ || Object.getPrototypeOf(r);
+        };
+        return z(e);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          allowExtensions = _this$props3.allowExtensions,
-          maxHeight = _this$props3.maxHeight,
-          disabled = _this$props3.disabled,
-          error = _this$props3.error;
-      var _this$state = this.state,
-          filename = _this$state.filename,
-          imageDataURI = _this$state.imageDataURI;
-      var accept = allowExtensions.map(function (extension) {
-        return ".".concat(extension);
-      }).join(', '); // TODO: Error text should be customizable, error should support a string prop for customization SUI-5414
-
-      var hasError = filename && !Image.isAllowedFilename(filename, allowExtensions) || error;
-
-      var errorText = (0,i18n_namespaceObject._)('This file extension is unsupported.');
-
-      var removeLabel = (0,format_namespaceObject.sprintf)((0,i18n_namespaceObject._)('Remove "%(filename)s"'), {
-        filename: filename
-      });
-      return /*#__PURE__*/external_react_default().createElement("div", {
-        "data-test": "image"
-      }, /*#__PURE__*/external_react_default().createElement((File_default()), _extends({}, omit_default()(this.props, ['allowExtensions', 'defaultFilename', 'defaultImageDataURI', 'maxHeight', 'onImageChange']), {
-        accept: accept,
-        allowMultiple: false,
-        error: hasError,
-        onRequestAdd: this.handleAddFiles,
-        "data-test": "file"
-      }), filename && imageDataURI && !hasError && /*#__PURE__*/external_react_default().createElement(StyledImagePreview, null, /*#__PURE__*/external_react_default().createElement(StyledLabelContainer, null, /*#__PURE__*/external_react_default().createElement(StyledLabel, {
-        "data-test": "label",
-        $disabled: disabled
-      }, filename), !disabled && /*#__PURE__*/external_react_default().createElement(StyledRemoveClickable, {
-        onClick: this.handleRemoveFile,
-        "data-test": "remove",
-        "aria-label": removeLabel
-      }, /*#__PURE__*/external_react_default().createElement(Cross, null))), /*#__PURE__*/external_react_default().createElement(StyledImageThumbnail, {
-        alt: filename,
-        "data-test": "preview",
-        maxHeight: maxHeight,
-        src: imageDataURI
-      }))), hasError && /*#__PURE__*/external_react_default().createElement(StyledErrorMessage, {
-        appearance: "fill",
-        type: "error"
-      }, errorText));
+    function G(e, r, t) {
+        if (r in e) {
+            Object.defineProperty(e, r, {
+                value: t,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[r] = t;
+        }
+        return e;
     }
-  }]);
-
-  return Image;
-}(external_react_namespaceObject.Component);
-
-_defineProperty(Image, "propTypes", propTypes);
-
-_defineProperty(Image, "defaultProps", defaultProps);
-
-/* harmony default export */ const Image_Image = (Image);
-;// CONCATENATED MODULE: ./src/Image/index.ts
-
-
-module.exports = __webpack_exports__;
-/******/ })()
-;
+    var J = {
+        allowExtensions: n().arrayOf(n().string),
+        defaultFilename: n().string,
+        defaultImageDataURI: n().string,
+        disabled: n().bool,
+        dropAnywhere: n().bool,
+        elementRef: n().oneOfType([ n().func, n().object ]),
+        error: n().bool,
+        maxHeight: n().number,
+        onImageChange: n().func
+    };
+    var K = {
+        allowExtensions: [ "gif", "jpeg", "jpg", "png" ],
+        disabled: false,
+        dropAnywhere: false,
+        error: false,
+        maxHeight: 180
+    };
+    /**
+ * Image provides the ability to accept image files and present a preview of the image.
+ */    var V =  function(e) {
+        N(t, e);
+        var r = B(t);
+        M(t, null, [ {
+            key: "isAllowedFilename",
+            // @docs-props-type ImagePropsBase
+            value: function e(r, t) {
+                return !!r && t.some((function(e) {
+                    return l()(p()(r), ".".concat(p()(e)));
+                }));
+            }
+        } ]);
+        function t(e) {
+            var a;
+            H(this, t);
+            a = r.call(this, e);
+            G(Q(a), "fileReader", void 0);
+            G(Q(a), "handleAddFiles", (function(e) {
+                if (e.length > 0) {
+                    var r = e[0];
+                    if (a.fileReader.readyState === 1) {
+                        a.fileReader.abort();
+                    }
+                    a.fileReader.onload = function() {
+                        var e = {
+                            filename: r.name,
+                            imageDataURI: a.fileReader.result
+                        };
+                        a.setState(e);
+                        if (t.isAllowedFilename(r.name, a.props.allowExtensions)) {
+                            var o, n;
+                            (o = (n = a.props).onImageChange) === null || o === void 0 ? void 0 : o.call(n, e);
+                        }
+                    };
+                    a.fileReader.readAsDataURL(r);
+                }
+            }));
+            G(Q(a), "handleRemoveFile", (function() {
+                var e, r;
+                if (a.fileReader.readyState === 1) {
+                    a.fileReader.abort();
+                }
+                var t = {
+                    filename: null,
+                    imageDataURI: null
+                };
+                a.setState(t);
+                (e = (r = a.props).onImageChange) === null || e === void 0 ? void 0 : e.call(r, t);
+            }));
+            a.state = {
+                filename: e.defaultFilename,
+                imageDataURI: e.defaultImageDataURI
+            };
+            a.fileReader = new FileReader;
+            return a;
+        }
+        M(t, [ {
+            key: "componentDidUpdate",
+            value: function e(r) {
+                if (false) {}
+            }
+        }, {
+            key: "render",
+            value: function e() {
+                var r = this.props, o = r.allowExtensions, n = r.maxHeight, i = r.disabled, l = r.error;
+                var s = this.state, u = s.filename, p = s.imageDataURI;
+                var f = o.map((function(e) {
+                    return ".".concat(e);
+                })).join(", ");
+ // TODO: Error text should be customizable, error should support a string prop for customization SUI-5414
+                                var b = u && !t.isAllowedFilename(u, o) || l;
+                var y = (0, v._)("This file extension is unsupported.");
+                var g = (0, m.sprintf)((0, v._)('Remove "%(filename)s"'), {
+                    filename: u
+                });
+                
+                return a().createElement("div", {
+                    "data-test": "image"
+                },  a().createElement(d(), T({}, c()(this.props, [ "allowExtensions", "defaultFilename", "defaultImageDataURI", "maxHeight", "onImageChange" ]), {
+                    accept: f,
+                    allowMultiple: false,
+                    error: b,
+                    onRequestAdd: this.handleAddFiles,
+                    "data-test": "file"
+                }), u && p && !b &&  a().createElement(E, null,  a().createElement(j, null,  a().createElement(D, {
+                    "data-test": "label",
+                    $disabled: i
+                }, u), !i &&  a().createElement(q, {
+                    onClick: this.handleRemoveFile,
+                    "data-test": "remove",
+                    "aria-label": g
+                },  a().createElement(k, null))),  a().createElement(P, {
+                    alt: u,
+                    "data-test": "preview",
+                    maxHeight: n,
+                    src: p
+                }))), b &&  a().createElement(A, {
+                    appearance: "fill",
+                    type: "error"
+                }, y));
+            }
+        } ]);
+        return t;
+    }(t.Component);
+    G(V, "propTypes", J);
+    G(V, "defaultProps", K);
+    /* harmony default export */    const X = V;
+    // CONCATENATED MODULE: ./src/Image/index.ts
+    module.exports = r;
+    /******/})();