@splunk/react-ui 4.20.0 → 4.21.1

package/Image.js

@@ -1,563 +1,451 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 202);
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ 0:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
-/***/ 1:
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Clickable");
-
-/***/ }),
-
-/***/ 138:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/endsWith");
-
-/***/ }),
-
-/***/ 139:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/File");
-
-/***/ }),
-
-/***/ 140:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Message");
-
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
-/***/ 202:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ src_Image_Image; });
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(2);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(1);
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
-
-// EXTERNAL MODULE: external "lodash/endsWith"
-var endsWith_ = __webpack_require__(138);
-var endsWith_default = /*#__PURE__*/__webpack_require__.n(endsWith_);
-
-// EXTERNAL MODULE: external "lodash/omit"
-var omit_ = __webpack_require__(5);
-var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
-
-// EXTERNAL MODULE: external "lodash/toLower"
-var toLower_ = __webpack_require__(36);
-var toLower_default = /*#__PURE__*/__webpack_require__.n(toLower_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/File"
-var File_ = __webpack_require__(139);
-var File_default = /*#__PURE__*/__webpack_require__.n(File_);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/format"
-var format_ = __webpack_require__(29);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(4);
-
-// EXTERNAL MODULE: external "@splunk/themes"
-var themes_ = __webpack_require__(0);
-
-// EXTERNAL MODULE: external "@splunk/react-icons/Cross"
-var Cross_ = __webpack_require__(26);
-var Cross_default = /*#__PURE__*/__webpack_require__.n(Cross_);
-
-// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Close"
-var Close_ = __webpack_require__(27);
-var Close_default = /*#__PURE__*/__webpack_require__.n(Close_);
-
-// CONCATENATED MODULE: ./src/Image/icons/Cross.tsx
-
-
-
-
-
-
-var Cross_CrossIcon = function CrossIcon() {
-  var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
-      isEnterprise = _useSplunkTheme.isEnterprise,
-      isCompact = _useSplunkTheme.isCompact;
-
-  var prismaSize = isCompact ? '20px' : '24px';
-
-  var removeScreenReaderText = Object(i18n_["_"])('Remove');
-
-  var crossIconFamily = isEnterprise ? /*#__PURE__*/external_react_default.a.createElement(Close_default.a, {
-    hideDefaultTooltip: true,
-    screenReaderText: removeScreenReaderText
-  }) : /*#__PURE__*/external_react_default.a.createElement(Cross_default.a, {
-    "aria-label": removeScreenReaderText,
-    height: prismaSize,
-    width: prismaSize
-  });
-  return crossIconFamily;
-};
-
-/* harmony default export */ var Cross = (Cross_CrossIcon);
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(3);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(12);
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Message"
-var Message_ = __webpack_require__(140);
-var Message_default = /*#__PURE__*/__webpack_require__.n(Message_);
-
-// CONCATENATED MODULE: ./src/Image/ImageStyles.ts
-
-
-
-
-var StyledImagePreview = external_styled_components_default.a.div.withConfig({
-  displayName: "ImageStyles__StyledImagePreview",
-  componentId: "sc-16ooypp-0"
-})(["position:relative;min-height:", ";", ""], Object(themes_["pick"])({
-  enterprise: '30px',
-  prisma: themes_["variables"].inputHeight
-}), Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["border:", ";"], themes_["variables"].border),
-  prisma: Object(external_styled_components_["css"])(["border-radius:", ";overflow:hidden;margin-top:12px;background-color:", ";"], themes_["variables"].borderRadius, themes_["variables"].interactiveColorBackground)
-}));
-var StyledLabelContainer = external_styled_components_default.a.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_["mixins"].reset('flex'), Object(themes_["pick"])({
-  enterprise: {
-    light: themes_["variables"].gray92,
-    dark: themes_["variables"].gray30
-  },
-  prisma: themes_["mixins"].overlayColors(themes_["variables"].interactiveColorBackground, themes_["variables"].interactiveColorOverlaySelected)
-}), themes_["variables"].contentColorMuted);
-var StyledRemoveClickable = external_styled_components_default()(Clickable_default.a).withConfig({
-  displayName: "ImageStyles__StyledRemoveClickable",
-  componentId: "sc-16ooypp-2"
-})(["cursor:pointer;", " padding:", ";text-align:center;height:inherit;&:focus{", "}&:hover{background-color:", ";color:", ";}"], Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["flex:0 0 26px;"]),
-  prisma: Object(external_styled_components_["css"])(["color:", ";border-radius:50%;"], themes_["variables"].contentColorMuted)
-}), Object(themes_["pick"])({
-  enterprise: '3px 0',
-  prisma: {
-    comfortable: '0 8px',
-    compact: '0 6px'
-  }
-}), Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";color:", ";"], themes_["variables"].focusShadow, themes_["variables"].linkColor),
-  prisma: Object(external_styled_components_["css"])(["color:", ";background-color:", ";box-shadow:0 0 0 3px ", ";"], themes_["variables"].contentColorActive, themes_["variables"].interactiveColorOverlayHover, themes_["variables"].focusColor)
-}), Object(themes_["pick"])({
-  enterprise: {
-    light: themes_["variables"].gray96,
-    dark: themes_["variables"].gray30
-  },
-  prisma: themes_["variables"].interactiveColorOverlayHover
-}), Object(themes_["pick"])({
-  enterprise: themes_["variables"].linkColor,
-  prisma: themes_["variables"].contentColorActive
-}));
-var StyledLabel = external_styled_components_default.a.div.withConfig({
-  displayName: "ImageStyles__StyledLabel",
-  componentId: "sc-16ooypp-3"
-})(["color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 0 0px;padding:", ";", ""], themes_["variables"].contentColorActive, Object(themes_["pick"])({
-  enterprise: '3px 0 3px 10px',
-  prisma: {
-    comfortable: '10px 10px',
-    compact: '6px 10px'
-  }
-}), function (_ref) {
-  var $disabled = _ref.$disabled;
-  return $disabled && Object(external_styled_components_["css"])(["background-color:", ";color:", ";cursor:not-allowed;"], Object(themes_["pick"])({
-    enterprise: themes_["variables"].gray96,
-    prisma: themes_["variables"].interactiveColorBackgroundDisabled
-  }), themes_["variables"].contentColorDisabled);
-});
-var StyledImageThumbnail = external_styled_components_default.a.img.withConfig({
-  displayName: "ImageStyles__StyledImageThumbnail",
-  componentId: "sc-16ooypp-4"
-})(["", ";margin:0 auto;max-height:", "px;max-width:100%;"], themes_["mixins"].reset('block'), function (props) {
-  return props.maxHeight;
-});
-var StyledErrorMessage = external_styled_components_default()(Message_default.a).withConfig({
-  displayName: "ImageStyles__StyledErrorMessage",
-  componentId: "sc-16ooypp-5"
-})(["margin-top:", ";"], Object(themes_["pick"])({
-  enterprise: themes_["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.a.arrayOf(external_prop_types_default.a.string),
-  defaultFilename: external_prop_types_default.a.string,
-  defaultImageDataURI: external_prop_types_default.a.string,
-  disabled: external_prop_types_default.a.bool,
-  dropAnywhere: external_prop_types_default.a.bool,
-  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-  error: external_prop_types_default.a.bool,
-  maxHeight: external_prop_types_default.a.number,
-  onImageChange: external_prop_types_default.a.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_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 = Object(i18n_["_"])('This file extension is unsupported.');
-
-      var removeLabel = Object(format_["sprintf"])(Object(i18n_["_"])('Remove "%(filename)s"'), {
-        filename: filename
-      });
-      return /*#__PURE__*/external_react_default.a.createElement("div", {
-        "data-test": "image"
-      }, /*#__PURE__*/external_react_default.a.createElement(File_default.a, _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.a.createElement(StyledImagePreview, null, /*#__PURE__*/external_react_default.a.createElement(StyledLabelContainer, null, /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
-        "data-test": "label",
-        $disabled: disabled
-      }, filename), !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledRemoveClickable, {
-        onClick: this.handleRemoveFile,
-        "data-test": "remove",
-        "aria-label": removeLabel
-      }, /*#__PURE__*/external_react_default.a.createElement(Cross, null))), /*#__PURE__*/external_react_default.a.createElement(StyledImageThumbnail, {
-        alt: filename,
-        "data-test": "preview",
-        maxHeight: maxHeight,
-        src: imageDataURI
-      }))), hasError && /*#__PURE__*/external_react_default.a.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_["Component"]);
-
-_defineProperty(Image_Image, "propTypes", propTypes);
-
-_defineProperty(Image_Image, "defaultProps", defaultProps);
-
-/* harmony default export */ var src_Image_Image = (Image_Image);
-// CONCATENATED MODULE: ./src/Image/index.ts
-
-
-
-/***/ }),
-
-/***/ 26:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/Cross");
-
-/***/ }),
-
-/***/ 27:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/enterprise/Close");
-
-/***/ }),
-
-/***/ 29:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/format");
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 36:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/toLower");
-
-/***/ }),
-
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-
-/***/ 5:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/omit");
-
-/***/ })
-
-/******/ });
+    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;
+    /******/})();