@splunk/react-ui 4.42.0 → 5.0.0-beta.2

package/File.js

@@ -20,13 +20,13 @@
             // EXTERNAL MODULE: external "@splunk/themes"
                         var c = t(3563);
             // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
-            var p = s().span.withConfig({
+            var d = s().span.withConfig({
                 displayName: "ScreenReaderContentStyles__Styled",
                 componentId: "sc-1lnohwp-0"
             })([ "", ";" ], c.mixins.screenReaderContent());
             // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContent.tsx
-            function d() {
-                return d = Object.assign ? Object.assign.bind() : function(e) {
+            function p() {
+                return p = Object.assign ? Object.assign.bind() : function(e) {
                     for (var r = 1; r < arguments.length; r++) {
                         var t = arguments[r];
                         for (var a in t) {
@@ -34,7 +34,7 @@
                         }
                     }
                     return e;
-                }, d.apply(null, arguments);
+                }, p.apply(null, arguments);
             }
             function u(e, r) {
                 if (null == e) return {};
@@ -69,7 +69,7 @@
                 var r = e.children, t = e.elementRef, a = u(e, [ "children", "elementRef" ]);
                 // @docs-props-type ScreenReaderContentPropsBase
                                 
-                return n().createElement(p, d({
+                return n().createElement(d, p({
                     "data-test": "screen-reader-content",
                     ref: t
                 }, a), r);
@@ -180,8 +180,8 @@
         t.r(a);
         // EXPORTS
                 t.d(a, {
-            Item: () => /* reexport */ se,
-            default: () => /* reexport */ Ge
+            Item: () => /* reexport */ oe,
+            default: () => /* reexport */ Pe
         });
         // EXTERNAL MODULE: external "react"
                 var e = t(9497);
@@ -192,36 +192,33 @@
         // CONCATENATED MODULE: external "lodash/debounce"
         const o = require("lodash/debounce");
         var l =  t.n(o);
-        // CONCATENATED MODULE: external "lodash/omit"
-        const s = require("lodash/omit");
+        // CONCATENATED MODULE: external "lodash/isString"
+        const s = require("lodash/isString");
         var c =  t.n(s);
         // CONCATENATED MODULE: external "lodash/toUpper"
-        const p = require("lodash/toUpper");
-        var d =  t.n(p);
-        // CONCATENATED MODULE: external "lodash/isString"
-        const u = require("lodash/isString");
-        var v =  t.n(u);
+        const d = require("lodash/toUpper");
+        var p =  t.n(d);
         // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-        const f = require("@splunk/react-ui/EventListener");
-        var m =  t.n(f);
+        const u = require("@splunk/react-ui/EventListener");
+        var v =  t.n(u);
         // EXTERNAL MODULE: external "@splunk/themes"
-                var b = t(3563);
+                var f = t(3563);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-        const h = require("@splunk/ui-utils/i18n");
+        const m = require("@splunk/ui-utils/i18n");
         // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-        const y = require("@splunk/ui-utils/id");
+        const b = require("@splunk/ui-utils/id");
         // CONCATENATED MODULE: external "lodash/isUndefined"
-        const g = require("lodash/isUndefined");
-        var x =  t.n(g);
+        const h = require("lodash/isUndefined");
+        var g =  t.n(h);
         // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-        const C = require("@splunk/react-icons/Cross");
-        var w =  t.n(C);
+        const y = require("@splunk/react-icons/Cross");
+        var x =  t.n(y);
         // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-        const k = require("@splunk/react-icons/enterprise/Close");
-        var S =  t.n(k);
+        const C = require("@splunk/react-icons/enterprise/Close");
+        var k =  t.n(C);
         // CONCATENATED MODULE: external "@splunk/react-ui/Progress"
-        const O = require("@splunk/react-ui/Progress");
-        var I =  t.n(O);
+        const w = require("@splunk/react-ui/Progress");
+        var S =  t.n(w);
         // CONCATENATED MODULE: external "@splunk/ui-utils/format"
         const _ = require("@splunk/ui-utils/format");
         // CONCATENATED MODULE: ./src/File/FileContext.tsx
@@ -229,13 +226,13 @@
             disabled: false
         });
         E.displayName = "File";
-        /* harmony default export */        const R = E;
+        /* harmony default export */        const O = E;
         // CONCATENATED MODULE: external "@splunk/react-icons/SVGEnterprise"
-        const L = require("@splunk/react-icons/SVGEnterprise");
-        var P =  t.n(L);
+        const I = require("@splunk/react-icons/SVGEnterprise");
+        var R =  t.n(I);
         // CONCATENATED MODULE: ./src/File/PaperClip.tsx
-        function j() {
-            return j = Object.assign ? Object.assign.bind() : function(e) {
+        function L() {
+            return L = Object.assign ? Object.assign.bind() : function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var t = arguments[r];
                     for (var a in t) {
@@ -243,11 +240,11 @@
                     }
                 }
                 return e;
-            }, j.apply(null, arguments);
+            }, L.apply(null, arguments);
         }
         function q(e) {
             
-            return r().createElement(P(), j({
+            return r().createElement(R(), L({
                 hideDefaultTooltip: true,
                 viewBox: "0 0 16 16",
                 width: "16px",
@@ -258,30 +255,30 @@
             }));
         }
         // CONCATENATED MODULE: external "@splunk/react-icons/ArrowsCircularDouble"
-        const D = require("@splunk/react-icons/ArrowsCircularDouble");
-        var T =  t.n(D);
+        const P = require("@splunk/react-icons/ArrowsCircularDouble");
+        var $ =  t.n(P);
         // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Refresh"
-        const $ = require("@splunk/react-icons/enterprise/Refresh");
-        var N =  t.n($);
+        const j = require("@splunk/react-icons/enterprise/Refresh");
+        var T =  t.n(j);
         // CONCATENATED MODULE: ./src/File/Retry.tsx
-        function M() {
-            var e = (0, b.useSplunkTheme)(), t = e.density, a = e.family;
+        function D() {
+            var e = (0, f.useSplunkTheme)(), t = e.density, a = e.family;
             var n = t === "compact" ? "20px" : "24px";
             if (a === "enterprise") {
                 
-                return r().createElement(N(), {
+                return r().createElement(T(), {
                     screenReaderText: null
                 });
             }
             
-            return r().createElement(T(), {
+            return r().createElement($(), {
                 width: n,
                 height: n
             });
         }
         // CONCATENATED MODULE: ./src/File/Trash.tsx
-        function F() {
-            return F = Object.assign ? Object.assign.bind() : function(e) {
+        function A() {
+            return A = Object.assign ? Object.assign.bind() : function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var t = arguments[r];
                     for (var a in t) {
@@ -289,13 +286,13 @@
                     }
                 }
                 return e;
-            }, F.apply(null, arguments);
+            }, A.apply(null, arguments);
         }
-        function H(e) {
-            var t = (0, b.useSplunkTheme)(), a = t.density;
+        function N(e) {
+            var t = (0, f.useSplunkTheme)(), a = t.density;
             var n = a === "compact" ? "20px" : "24px";
             
-            return r().createElement(P(), F({
+            return r().createElement(R(), A({
                 hideDefaultTooltip: true,
                 viewBox: "0 0 24 24",
                 width: n,
@@ -306,169 +303,180 @@
             }));
         }
         // EXTERNAL MODULE: external "styled-components"
-                var A = t(232);
-        var B =  t.n(A);
+                var M = t(232);
+        var H =  t.n(M);
         // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-        const z = require("@splunk/react-ui/Box");
-        var V =  t.n(z);
+        const F = require("@splunk/react-ui/Box");
+        var z =  t.n(F);
         // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const G = require("@splunk/react-ui/Clickable");
-        var Z =  t.n(G);
+        const V = require("@splunk/react-ui/Clickable");
+        var B =  t.n(V);
         // CONCATENATED MODULE: external "@splunk/themes/mixins"
-        const W = require("@splunk/themes/mixins");
+        const G = require("@splunk/themes/mixins");
         // CONCATENATED MODULE: ./src/File/ItemStyles.ts
-        var U = B()(V()).withConfig({
+        var Z = H()(z()).withConfig({
             displayName: "ItemStyles__StyledBox",
             componentId: "sc-1fsk3kr-0"
         })([ "position:relative;width:100%;max-width:400px;margin:", ";background-color:", ";border-radius:", ";min-height:32px;color:", ";", " ", " ", " ", ";" ], (0, 
-        b.pick)({
+        f.pick)({
             enterprise: "5px auto 0",
             prisma: {
                 comfortable: "8px auto 0",
                 compact: "4px auto 0"
             }
-        }), (0, b.pick)({
+        }), (0, f.pick)({
             enterprise: {
-                light: b.variables.gray92,
-                dark: b.variables.gray45
+                light: f.variables.gray92,
+                dark: f.variables.gray45
             },
-            prisma: b.variables.interactiveColorBackground
-        }), (0, b.pick)({
+            // TODO(SUI-6298): Should use a semantically correct token
+            prisma: {
+                light: "#eeeeee",
+                dark: "#272a2f"
+            }
+        }), (0, f.pick)({
             enterprise: "2px",
-            prisma: b.variables.borderRadius
-        }), (0, b.pick)({
-            enterprise: b.variables.textGray,
-            prisma: b.variables.contentColorDefault
-        }), (0, b.pick)({
-            prisma: (0, A.css)([ "border:1px solid ", ";padding-left:12px;" ], b.variables.neutral200),
-            enterprise: (0, A.css)([ "line-height:24px;" ])
-        }), (0, b.pick)({
+            prisma: f.variables.borderRadius
+        }), (0, f.pick)({
+            enterprise: f.variables.textGray,
+            prisma: f.variables.contentColorDefault
+        }), (0, f.pick)({
+            prisma: (0, M.css)([ "border:1px solid ", ";padding-left:12px;" ], f.variables.neutral200),
+            enterprise: (0, M.css)([ "line-height:24px;" ])
+        }), (0, f.pick)({
             enterprise: {
-                compact: (0, A.css)([ "min-height:24px;" ])
+                compact: (0, M.css)([ "min-height:24px;" ])
             }
         }), (function(e) {
             var r = e.$error;
-            return r && (0, b.pick)({
-                enterprise: (0, A.css)([ "box-shadow:inset 0 0 0 1px ", ";" ], b.variables.errorColor),
-                prisma: (0, A.css)([ "box-shadow:inset 0 0 0 1px ", ";background-color:", ";" ], b.variables.accentColorNegative, b.variables.interactiveColorBackground)
+            return r && (0, f.pick)({
+                enterprise: (0, M.css)([ "box-shadow:inset 0 0 0 1px ", ";" ], f.variables.errorColor),
+                prisma: (0, M.css)([ "box-shadow:inset 0 0 0 1px ", ";background-color:", ";" ], f.variables.interactiveColorAccentError, (0, 
+                f.pick)({
+                    light: "#eeeeee",
+                    dark: "#272a2f"
+                }))
             });
         }), (function(e) {
             var r = e.$disabled;
-            return r && (0, A.css)([ "cursor:not-allowed;background-color:", ";" ], (0, b.pick)({
+            return r && (0, M.css)([ "cursor:not-allowed;background-color:", ";" ], (0, f.pick)({
                 enterprise: {
-                    dark: b.variables.gray60,
-                    light: b.variables.gray96
+                    dark: f.variables.gray60,
+                    light: f.variables.gray96
                 },
-                prisma: (0, W.overlayColors)(b.variables.interactiveColorBackground, b.variables.interactiveColorBackgroundDisabled)
+                prisma: {
+                    light: (0, G.overlayColors)("#eeeeee", "rgba(0, 0, 0, 0.1)"),
+                    dark: (0, G.overlayColors)("#272a2f", "rgba(255, 255, 255, 0.15)")
+                }
             }));
         }));
-        var X = B().div.withConfig({
+        var W = H().div.withConfig({
             displayName: "ItemStyles__StyledErrorText",
             componentId: "sc-1fsk3kr-1"
-        })([ "font-size:", ";color:", ";line-height:16px;margin-top:4px;text-align:left;" ], b.variables.fontSizeSmall, b.variables.accentColorNegative);
-        var J = B()(Z()).withConfig({
+        })([ "font-size:", ";color:", ";line-height:16px;margin-top:4px;text-align:left;" ], f.variables.fontSizeSmall, f.variables.contentColorNegative);
+        var U = H()(B()).withConfig({
             displayName: "ItemStyles__StyledIconClickable",
             componentId: "sc-1fsk3kr-2"
         })([ "color:", ";border-radius:", ";padding:", ";text-align:center;", " ", " &:focus{color:", ";", "}&:hover{background-color:", ";color:", ";}" ], (0, 
-        b.pick)({
+        f.pick)({
             enterprise: "inherit",
-            prisma: b.variables.contentColorDefault
-        }), (0, b.pick)({
+            prisma: f.variables.contentColorDefault
+        }), (0, f.pick)({
             enterprise: "0 2px 2px 0",
             prisma: "50%"
-        }), (0, b.pick)({
+        }), (0, f.pick)({
             enterprise: "3px 0",
             prisma: {
                 comfortable: "0 8px",
                 compact: "0 6px"
             }
-        }), (0, b.pick)({
-            enterprise: (0, A.css)([ "flex-basis:", ";" ], b.variables.inputHeight)
+        }), (0, f.pick)({
+            enterprise: (0, M.css)([ "flex-basis:", ";" ], f.variables.inputHeight)
         }), (function(e) {
             var r = e.$error;
-            return r && (0, A.css)([ "", "" ], (0, b.pick)({
-                enterprise: (0, A.css)([ "border-top:1px solid ", ";border-bottom:1px solid ", ";&:last-child{border-right:1px solid ", ";}svg{vertical-align:baseline;}" ], b.variables.errorColor, b.variables.errorColor, b.variables.errorColor)
+            return r && (0, M.css)([ "", "" ], (0, f.pick)({
+                enterprise: (0, M.css)([ "border-top:1px solid ", ";border-bottom:1px solid ", ";&:last-child{border-right:1px solid ", ";}svg{vertical-align:baseline;}" ], f.variables.errorColor, f.variables.errorColor, f.variables.errorColor)
             }));
-        }), (0, b.pick)({
-            enterprise: b.variables.linkColor,
-            prisma: b.variables.contentColorActive
-        }), (0, b.pick)({
-            enterprise: (0, A.css)([ "box-shadow:", ";" ], b.variables.focusShadow),
-            prisma: (0, A.css)([ "background-color:", ";box-shadow:0 0 0 3px ", ";" ], b.variables.interactiveColorOverlayHover, b.variables.focusColor)
-        }), (0, b.pick)({
+        }), (0, f.pick)({
+            enterprise: f.variables.contentColorLink,
+            prisma: f.variables.contentColorActive
+        }), (0, f.pick)({
+            enterprise: (0, M.css)([ "box-shadow:", ";" ], f.variables.focusShadow),
+            prisma: (0, M.css)([ "background-color:", ";box-shadow:0 0 0 3px ", ";" ], f.variables.interactiveColorOverlayHover, f.variables.focusColor)
+        }), (0, f.pick)({
             enterprise: {
-                light: b.variables.gray96,
-                dark: b.variables.gray30
+                light: f.variables.gray96,
+                dark: f.variables.gray30
             },
-            prisma: b.variables.interactiveColorOverlayHover
-        }), (0, b.pick)({
-            enterprise: b.variables.linkColor,
-            prisma: b.variables.contentColorActive
+            prisma: f.variables.interactiveColorOverlayHover
+        }), (0, f.pick)({
+            enterprise: f.variables.contentColorLink,
+            prisma: f.variables.contentColorActive
         }));
         // for Prisma theme only
-                var K = B()(Z()).withConfig({
+                var X = H()(B()).withConfig({
             displayName: "ItemStyles__StyledTrashIcon",
             componentId: "sc-1fsk3kr-3"
-        })([ "color:", ";border-radius:50%;padding:", ";margin-right:", ";text-align:center;&:focus{color:", ";background-color:", ";box-shadow:0 0 0 3px ", ";}&:hover{background-color:", ";color:", ";}" ], b.variables.contentColorDefault, (0, 
-        b.pick)({
+        })([ "color:", ";border-radius:50%;padding:", ";margin-right:", ";text-align:center;&:focus{color:", ";background-color:", ";box-shadow:0 0 0 3px ", ";}&:hover{background-color:", ";color:", ";}" ], f.variables.contentColorDefault, (0, 
+        f.pick)({
             comfortable: "0 8px",
             compact: "0 6px"
-        }), (0, b.pick)({
+        }), (0, f.pick)({
             comfortable: "0 4px",
             compact: "0 6px"
-        }), b.variables.contentColorActive, b.variables.interactiveColorOverlayHover, b.variables.focusColor, b.variables.interactiveColorOverlayHover, b.variables.contentColorActive);
-        var Q = B().div.withConfig({
+        }), f.variables.contentColorActive, f.variables.interactiveColorOverlayHover, f.variables.focusColor, f.variables.interactiveColorOverlayHover, f.variables.contentColorActive);
+        var J = H().div.withConfig({
             displayName: "ItemStyles__StyledLabel",
             componentId: "sc-1fsk3kr-4"
-        })([ "color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 0 0px;padding:", ";border-radius:", ";", "" ], b.variables.contentColorActive, (0, 
-        b.pick)({
+        })([ "color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 0 0px;padding:", ";border-radius:", ";", "" ], f.variables.contentColorActive, (0, 
+        f.pick)({
             enterprise: "3px 0 3px 10px",
             prisma: {
                 comfortable: "10px 0 10px 0",
                 compact: "6px 0 6px 0"
             }
-        }), (0, b.pick)({
+        }), (0, f.pick)({
             enterprise: "2px",
-            prisma: b.variables.borderRadius
+            prisma: f.variables.borderRadius
         }), (function(e) {
             var r = e.$disabled;
-            return r && (0, b.pick)({
+            return r && (0, f.pick)({
                 enterprise: {
-                    light: (0, A.css)([ "color:", ";" ], b.variables.textGray),
-                    dark: (0, A.css)([ "color:", ";" ], b.variables.textGray)
+                    light: (0, M.css)([ "color:", ";" ], f.variables.textGray),
+                    dark: (0, M.css)([ "color:", ";" ], f.variables.textGray)
                 },
-                prisma: (0, A.css)([ "color:", ";" ], b.variables.contentColorDisabled)
+                prisma: (0, M.css)([ "color:", ";" ], f.variables.contentColorDisabled)
             });
         }));
         // for Prisma theme only
-                var Y = B().div.withConfig({
+                var K = H().div.withConfig({
             displayName: "ItemStyles__StyledPaperClipIcon",
             componentId: "sc-1fsk3kr-5"
-        })([ "color:", ";padding:", ";", "" ], b.variables.neutral400, (0, b.pick)({
+        })([ "color:", ";padding:", ";", "" ], f.variables.neutral400, (0, f.pick)({
             comfortable: "8px 4px 8px 0",
             compact: "4px 4px 4px 0"
         }), (function(e) {
             var r = e.$disabled;
-            return r && (0, A.css)([ "color:", ";cursor:not-allowed;" ], b.variables.contentColorDisabled);
+            return r && (0, M.css)([ "color:", ";cursor:not-allowed;" ], f.variables.contentColorDisabled);
         }));
         // for Prisma theme only
-                var ee = B().span.withConfig({
+                var Q = H().span.withConfig({
             displayName: "ItemStyles__StyledPercentage",
             componentId: "sc-1fsk3kr-6"
-        })([ "color:", ";" ], b.variables.contentColorMuted);
+        })([ "color:", ";" ], f.variables.contentColorMuted);
         // for Prisma theme only
-                var re = B().div.withConfig({
+                var Y = H().div.withConfig({
             displayName: "ItemStyles__StyledProgress",
             componentId: "sc-1fsk3kr-7"
         })([ "position:absolute;left:0;top:0;width:", "%;height:100%;background:", ";transition:width 300ms;border-radius:", ";" ], (function(e) {
             var r = e.$uploadPercentage;
             return r;
-        }), b.variables.interactiveColorOverlaySelected, b.variables.borderRadius);
+        }), f.variables.interactiveColorOverlaySelected, f.variables.borderRadius);
         // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
-                var te = t(6165);
+                var ee = t(6165);
         // CONCATENATED MODULE: ./src/File/Item.tsx
-        function ae() {
-            return ae = Object.assign ? Object.assign.bind() : function(e) {
+        function re() {
+            return re = Object.assign ? Object.assign.bind() : function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var t = arguments[r];
                     for (var a in t) {
@@ -476,11 +484,11 @@
                     }
                 }
                 return e;
-            }, ae.apply(null, arguments);
+            }, re.apply(null, arguments);
         }
-        function ne(e, r) {
+        function te(e, r) {
             if (null == e) return {};
-            var t, a, n = ie(e, r);
+            var t, a, n = ae(e, r);
             if (Object.getOwnPropertySymbols) {
                 var i = Object.getOwnPropertySymbols(e);
                 for (a = 0; a < i.length; a++) {
@@ -489,7 +497,7 @@
             }
             return n;
         }
-        function ie(e, r) {
+        function ae(e, r) {
             if (null == e) return {};
             var t = {};
             for (var a in e) {
@@ -500,7 +508,7 @@
             }
             return t;
         }
-        var oe = {
+        var ne = {
             disabled: i().bool,
             elementRef: i().oneOfType([ i().func, i().object ]),
             error: i().bool,
@@ -512,21 +520,21 @@
    * not applicable, uploadPercentage must be undefined. */
             uploadPercentage: i().number
         };
-        function le(t) {
-            var a = t.disabled, n = t.error, i = n === void 0 ? false : n, o = t.itemId, l = t.name, s = t.index, c = s === void 0 ? 0 : s, p = t.uploadPercentage, d = ne(t, [ "disabled", "error", "itemId", "name", "index", "uploadPercentage" ]);
+        function ie(t) {
+            var a = t.disabled, n = t.error, i = n === void 0 ? false : n, o = t.itemId, l = t.name, s = t.index, c = s === void 0 ? 0 : s, d = t.uploadPercentage, p = te(t, [ "disabled", "error", "itemId", "name", "index", "uploadPercentage" ]);
             // @docs-props-type ItemPropsBase
-                        var u = (0, b.useSplunkTheme)(), v = u.isPrisma, f = u.isEnterprise, m = u.isCompact;
-            var y = m ? "20px" : "24px";
-            var g = (0, e.useContext)(E), C = g.onRequestRemove;
-            var k = (0, e.useCallback)((function(e) {
+                        var u = (0, f.useSplunkTheme)(), v = u.isPrisma, b = u.isEnterprise, h = u.isCompact;
+            var y = h ? "20px" : "24px";
+            var C = (0, e.useContext)(E), w = C.onRequestRemove;
+            var O = (0, e.useCallback)((function(e) {
                 e.preventDefault();
-                C === null || C === void 0 ? void 0 : C({
+                w === null || w === void 0 ? void 0 : w({
                     itemId: o,
                     name: l,
                     index: c
                 });
-            }), [ C, o, l, c ]);
-            var O = (0, e.useContext)(E), R = O.onRequestRetry;
+            }), [ w, o, l, c ]);
+            var I = (0, e.useContext)(E), R = I.onRequestRetry;
             var L = (0, e.useCallback)((function(e) {
                 e.preventDefault();
                 R === null || R === void 0 ? void 0 : R({
@@ -535,73 +543,73 @@
                     index: c
                 });
             }), [ R, o, l, c ]);
-            var P = (0, e.useContext)(E), j = P.disabled;
-            var D = (0, _.sprintf)((0, h._)('Remove "%(filename)s"'), {
+            var P = (0, e.useContext)(E), $ = P.disabled;
+            var j = (0, _.sprintf)((0, m._)('Remove "%(filename)s"'), {
                 filename: l
             });
-            var T = (0, _.sprintf)((0, h._)('Retry "%(filename)s"'), {
+            var T = (0, _.sprintf)((0, m._)('Retry "%(filename)s"'), {
                 filename: l
             });
-            var $ = (0, _.sprintf)((0, h._)('Uploading "%(filename)s"'), {
+            var A = (0, _.sprintf)((0, m._)('Uploading "%(filename)s"'), {
                 filename: l
             });
-            var N = (0, h._)("Remove");
-            var F =  r().createElement("span", null,  r().createElement("span", {
+            var M = (0, m._)("Remove");
+            var H =  r().createElement("span", null,  r().createElement("span", {
                 style: {
                     paddingRight: "4px"
                 }
-            }, (0, h._)("Uploading ")),  r().createElement(ee, null, p, "%"));
-            var A = v && !x()(p) && p > 0 ? F : l;
-            var B = a !== undefined ? a : j;
+            }, (0, m._)("Uploading ")),  r().createElement(Q, null, d, "%"));
+            var F = v && !g()(d) && d > 0 ? H : l;
+            var z = a !== undefined ? a : $;
             
-            return r().createElement(r().Fragment, null,  r().createElement(U, ae({
+            return r().createElement(r().Fragment, null,  r().createElement(Z, re({
                 "data-test": "item",
-                "data-test-disabled": B,
+                "data-test-disabled": z,
                 "data-test-error": i
-            }, d, {
+            }, p, {
                 flex: true,
                 $error: i,
-                $disabled: B
-            }), v && x()(p) &&  r().createElement(Y, {
+                $disabled: z
+            }), v && g()(d) &&  r().createElement(K, {
                 "data-test": "paper-clip",
-                $disabled: B
+                $disabled: z
             },  r().createElement(q, {
                 "aria-hidden": "true"
-            })),  r().createElement(Q, {
+            })),  r().createElement(J, {
                 "data-test": "label",
                 $error: i,
-                $disabled: B
-            }, A), R && i &&  r().createElement(J, {
+                $disabled: z
+            }, F), R && i &&  r().createElement(U, {
                 "data-test": "retry",
                 $error: i,
                 onClick: L,
                 "aria-label": T
-            },  r().createElement(M, null),  r().createElement(te["default"], null, (0, h._)("Retry"))), !B && (v && x()(p) && !i ?  r().createElement(K, {
+            },  r().createElement(D, null),  r().createElement(ee["default"], null, (0, m._)("Retry"))), !z && (v && g()(d) && !i ?  r().createElement(X, {
                 "data-test": "remove",
-                onClick: k,
-                "aria-label": D
-            },  r().createElement(H, {
-                screenReaderText: (0, h._)("Remove")
-            })) :  r().createElement(J, {
+                onClick: O,
+                "aria-label": j
+            },  r().createElement(N, {
+                screenReaderText: (0, m._)("Remove")
+            })) :  r().createElement(U, {
                 "data-test": "remove",
                 $error: i,
-                onClick: k,
-                "aria-label": D
-            }, f ?  r().createElement(S(), {
+                onClick: O,
+                "aria-label": j
+            }, b ?  r().createElement(k(), {
                 hideDefaultTooltip: true,
-                screenReaderText: N
-            }) :  r().createElement(w(), {
-                "aria-label": N,
+                screenReaderText: M
+            }) :  r().createElement(x(), {
+                "aria-label": M,
                 height: y,
                 width: y
-            }))), !x()(p) && p > 0 && (v ?  r().createElement(re, {
-                $uploadPercentage: p,
-                "aria-label": $,
+            }))), !g()(d) && d > 0 && (v ?  r().createElement(Y, {
+                $uploadPercentage: d,
+                "aria-label": A,
                 role: "progressbar",
-                "aria-valuenow": p,
+                "aria-valuenow": d,
                 "aria-valuemin": 0,
                 "aria-valuemax": 100
-            }) :  r().createElement(I(), {
+            }) :  r().createElement(S(), {
                 style: {
                     position: "absolute",
                     left: 0,
@@ -609,15 +617,15 @@
                     right: 0,
                     zIndex: 1
                 },
-                percentage: p,
-                "aria-label": $
-            }))), v && i &&  r().createElement(X, null, (0, h._)("Something went wrong.")));
+                percentage: d,
+                "aria-label": A
+            }))), v && i &&  r().createElement(W, null, (0, m._)("Something went wrong.")));
         }
-        le.propTypes = oe;
-        /* harmony default export */        const se = le;
+        ie.propTypes = ne;
+        /* harmony default export */        const oe = ie;
         // CONCATENATED MODULE: ./src/File/Icon.tsx
-        function ce() {
-            return ce = Object.assign ? Object.assign.bind() : function(e) {
+        function le() {
+            return le = Object.assign ? Object.assign.bind() : function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var t = arguments[r];
                     for (var a in t) {
@@ -625,13 +633,13 @@
                     }
                 }
                 return e;
-            }, ce.apply(null, arguments);
+            }, le.apply(null, arguments);
         }
-        function pe(e) {
+        function se(e) {
             
-            return r().createElement(P(), ce({
+            return r().createElement(R(), le({
                 hideDefaultTooltip: true,
-                screenReaderText: (0, h._)("File upload"),
+                screenReaderText: (0, m._)("File upload"),
                 viewBox: "0 0 72 88"
             }, e),  r().createElement("path", {
                 d: "M50,27 L68.0005854,27 C70.2022516,27 72,28.7919267 72,31.0023804 L72,83.9976196 C72,86.2074215 70.2094011,88 68.0005854,88 L3.99941455,88 C1.79774843,88 0,86.2080733 0,83.9976196 L0,31.0023804 C0,28.7925785 1.79059889,27 3.99941455,27 L21,27 L21,32 L5.99898406,32 C5.4472604,32 5,32.4408979 5,32.9958767 L5,82.0041233 C5,82.5541308 5.44605521,83 5.99898406,83 L66.0010159,83 C66.5527396,83 67,82.5591021 67,82.0041233 L67,32.9958767 C67,32.4458692 66.5539448,32 66.0010159,32 L50,32 L50,27 Z"
@@ -646,147 +654,137 @@
             }));
         }
         // CONCATENATED MODULE: ./src/File/FileStyles.ts
-        var de = B().input.withConfig({
+        var ce = H().input.withConfig({
             displayName: "FileStyles__StyledInput",
             componentId: "sc-1wyh4cf-0"
         })([ "&[type='file']{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1;}" ]);
-        var ue = (0, A.css)([ "fill:", ";" ], (0, b.pick)({
+        var de = (0, M.css)([ "fill:", ";" ], (0, f.pick)({
             enterprise: {
-                light: b.variables.gray60,
-                dark: b.variables.gray80
+                light: f.variables.gray60,
+                dark: f.variables.gray80
             }
         }));
-        var ve = B()(pe).withConfig({
+        var pe = H()(se).withConfig({
             displayName: "FileStyles__StyledNormalIcon",
             componentId: "sc-1wyh4cf-1"
-        })([ "", ";height:1.4em;width:1.4em;display:inline-block;vertical-align:middle;padding-bottom:3px;" ], ue);
-        var fe = B()(pe).withConfig({
+        })([ "", ";height:1.4em;width:1.4em;display:inline-block;vertical-align:middle;padding-bottom:3px;" ], de);
+        var ue = H()(se).withConfig({
             displayName: "FileStyles__StyledWindowIcon",
             componentId: "sc-1wyh4cf-2"
-        })([ "", ";height:48px;width:48px;position:absolute;top:30px;left:50%;transform:translateX(-50%);" ], ue);
-        var me = B().label.withConfig({
+        })([ "", ";height:48px;width:48px;position:absolute;top:30px;left:50%;transform:translateX(-50%);" ], de);
+        var ve = H().label.withConfig({
             displayName: "FileStyles__StyledLink",
             componentId: "sc-1wyh4cf-3"
-        })([ "", ";color:", ";cursor:pointer;font-size:inherit;font-weight:inherit;&:hover,&[data-focused]{text-decoration:underline;}&[data-focused]{box-shadow:", ";}" ], b.mixins.reset("inline"), b.variables.linkColor, (0, 
-        b.pick)({
-            enterprise: b.variables.focusShadowInset,
-            prisma: b.variables.focusShadow
+        })([ "", ";color:", ";cursor:pointer;font-size:inherit;font-weight:inherit;&:hover,&[data-focused]{text-decoration:underline;}&[data-focused]{box-shadow:", ";}" ], f.mixins.reset("inline"), f.variables.contentColorLink, (0, 
+        f.pick)({
+            enterprise: f.variables.focusShadowInset,
+            prisma: f.variables.focusShadow
         }));
-        var be = B().div.withConfig({
+        var fe = H().div.withConfig({
             displayName: "FileStyles__StyledNormalText",
             componentId: "sc-1wyh4cf-4"
-        })([ "", " ", " ", " ", "" ], (0, b.pick)({
-            enterprise: (0, A.css)([ "display:inline-block;" ]),
-            prisma: (0, A.css)([ "display:inline-flex;flex-direction:column;justify-content:center;text-align:center;color:", ";border:1px dashed ", ";padding:8px;border-radius:", ";min-height:128px;&:not(:last-child){margin-bottom:4px;}" ], b.variables.contentColorActive, b.variables.contentColorMuted, b.variables.borderRadius)
+        })([ "color:", ";", " ", " ", " ", "" ], f.variables.contentColorActive, (0, f.pick)({
+            enterprise: (0, M.css)([ "display:inline-block;" ]),
+            prisma: (0, M.css)([ "display:inline-flex;flex-direction:column;justify-content:center;text-align:center;border:1px dashed ", ";padding:8px;border-radius:", ";min-height:128px;&:not(:last-child){margin-bottom:4px;}" ], f.variables.contentColorMuted, f.variables.borderRadius)
         }), (function(e) {
             var r = e.$dragOver;
-            return r && (0, A.css)([ "", "" ], (0, b.pick)({
-                prisma: (0, A.css)([ "border:1px dashed ", ";background-color:", ";" ], b.variables.interactiveColorPrimary, b.mixins.colorWithAlpha(b.variables.interactiveColorPrimary, .1))
+            return r && (0, M.css)([ "", "" ], (0, f.pick)({
+                prisma: (0, M.css)([ "border:1px dashed ", ";background-color:", ";" ], f.variables.interactiveColorPrimary, f.mixins.colorWithAlpha(f.variables.interactiveColorPrimary, .1))
             }));
         }), (function(e) {
             var r = e.$error, t = e.$dragOver;
-            return r && !t && (0, b.pick)({
-                prisma: (0, A.css)([ "border:1px dashed ", ";color:", ";background-color:", ";" ], b.variables.accentColorNegative, b.variables.accentColorNegative, b.mixins.colorWithAlpha(b.variables.accentColorNegative, .1))
+            return r && !t && (0, f.pick)({
+                prisma: (0, M.css)([ "background-color:", ";border:1px dashed ", ";color:", ";" ], f.mixins.colorWithAlpha(f.variables.interactiveColorAccentError, .1), f.variables.interactiveColorAccentError, f.variables.contentColorNegative)
             });
         }), (function(e) {
             var r = e.$disabled;
-            return r && (0, A.css)([ "border:none;min-height:0;color:", ";cursor:not-allowed;" ], (0, 
-            b.pick)({
-                prisma: b.variables.contentColorDisabled
+            return r && (0, M.css)([ "border:none;min-height:0;color:", ";cursor:not-allowed;" ], (0, 
+            f.pick)({
+                prisma: f.variables.contentColorDisabled
             }));
         }));
-        var he = B().div.withConfig({
+        var me = H().div.withConfig({
             displayName: "FileStyles__StyledWindowText",
             componentId: "sc-1wyh4cf-5"
-        })([ "margin-top:calc(", " * 4);margin-bottom:", ";font-size:", ";", "" ], b.variables.spacingLarge, (0, 
-        b.pick)({
-            enterprise: b.variables.spacingSmall,
-            prisma: b.variables.spacingMedium
-        }), b.variables.fontSizeXLarge, (0, b.pick)({
-            prisma: (0, A.css)([ "color:", ";" ], b.variables.contentColorActive)
-        }));
-        var ye = B().div.withConfig({
+        })([ "color:", ";margin-top:calc(", " * 4);margin-bottom:", ";font-size:", ";" ], f.variables.contentColorActive, f.variables.spacingLarge, (0, 
+        f.pick)({
+            enterprise: f.variables.spacingSmall,
+            prisma: f.variables.spacingMedium
+        }), f.variables.fontSizeXLarge);
+        var be = H().div.withConfig({
             displayName: "FileStyles__StyledSubtitle",
             componentId: "sc-1wyh4cf-6"
-        })([ "color:", ";padding:4px 8px;font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" ], b.variables.contentColorMuted);
-        var ge = B().div.withConfig({
+        })([ "color:", ";padding:4px 8px;font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" ], f.variables.contentColorMuted);
+        var he = H().div.withConfig({
             displayName: "FileStyles__StyledHelp",
             componentId: "sc-1wyh4cf-7"
-        })([ "margin-bottom:", ";" ], b.variables.spacingXLarge);
-        var xe = B().div.withConfig({
+        })([ "margin-bottom:", ";" ], f.variables.spacingXLarge);
+        var ge = H().div.withConfig({
             displayName: "FileStyles__StyledWindowDrop",
             componentId: "sc-1wyh4cf-8"
         })([ "position:fixed;top:0;left:0;right:0;bottom:0;border:", ";z-index:", " + 10;" ], (0, 
-        b.pick)({
-            enterprise: "5px solid ".concat(b.variables.accentColorL10),
-            prisma: "5px solid ".concat(b.variables.interactiveColorPrimary)
-        }), b.variables.zindexModal);
-        var Ce = B()(V()).withConfig({
+        f.pick)({
+            enterprise: "5px solid ".concat(f.variables.accentColorL10),
+            prisma: "5px solid ".concat(f.variables.interactiveColorPrimary)
+        }), f.variables.zindexModal);
+        var ye = H()(z()).withConfig({
             displayName: "FileStyles__StyledDropNormalTargetBox",
             componentId: "sc-1wyh4cf-9"
-        })([ "", ";flex-direction:column;justify-content:center;text-align:center;border-radius:", ";", " ", " ", " ", " ", " ", "" ], b.mixins.reset("flex"), b.variables.borderRadius, (0, 
-        b.pick)({
-            enterprise: (0, A.css)([ "line-height:calc(", " - 2px);" ], b.variables.inputHeight)
-        }), (0, b.pick)({
+        })([ "", ";flex-direction:column;justify-content:center;text-align:center;border-radius:", ";", " ", " ", " ", " ", " ", "" ], f.mixins.reset("flex"), f.variables.borderRadius, (0, 
+        f.pick)({
+            enterprise: (0, M.css)([ "line-height:calc(", " - 2px);" ], f.variables.inputHeight)
+        }), (0, f.pick)({
             enterprise: {
-                comfortable: (0, A.css)([ "min-height:73px;padding:", ";" ], b.variables.spacingXSmall),
-                compact: (0, A.css)([ "min-height:63px;padding:3px;" ])
+                comfortable: (0, M.css)([ "min-height:73px;padding:", ";" ], f.variables.spacingXSmall),
+                compact: (0, M.css)([ "min-height:63px;padding:3px;" ])
             }
-        }), (0, b.pick)({
+        }), (0, f.pick)({
             enterprise: {
-                light: (0, A.css)([ "border:1px dashed ", ";" ], b.variables.borderColor),
-                dark: (0, A.css)([ "border:1px dashed ", ";" ], b.variables.textGray)
+                light: (0, M.css)([ "border:1px dashed ", ";" ], f.variables.borderColor),
+                dark: (0, M.css)([ "border:1px dashed ", ";" ], f.variables.textGray)
             }
         }), (function(e) {
             var r = e.$dragOver;
-            return r && (0, b.pick)({
-                enterprise: (0, A.css)([ "border:1px solid ", ";" ], b.variables.accentColorL10)
+            return r && (0, f.pick)({
+                enterprise: (0, M.css)([ "border:1px solid ", ";" ], f.variables.accentColorL10)
             });
         }), (function(e) {
             var r = e.$error, t = e.$dragOver;
-            return r && !t && (0, b.pick)({
-                enterprise: (0, A.css)([ "border:1px solid ", ";" ], b.variables.errorColor)
+            return r && !t && (0, f.pick)({
+                enterprise: (0, M.css)([ "border:1px solid ", ";" ], f.variables.errorColor)
             });
         }), (function(e) {
             var r = e.$disabled, t = e.$fileCount;
-            return r && (0, A.css)([ "border:", ";color:", ";cursor:not-allowed;", " ", "" ], (0, 
-            b.pick)({
+            return r && (0, M.css)([ "border:", ";color:", ";cursor:not-allowed;", " ", "" ], (0, 
+            f.pick)({
                 enterprise: "none",
-                prisma: "1px solid ".concat(b.variables.contentColorDisabled)
-            }), (0, b.pick)({
-                enterprise: b.variables.textGray,
-                prisma: b.variables.contentColorDisabled
-            }), t === 0 && (0, b.pick)({
+                prisma: "1px solid ".concat(f.variables.contentColorDisabled)
+            }), (0, f.pick)({
+                enterprise: f.variables.textGray,
+                prisma: f.variables.contentColorDisabled
+            }), t === 0 && (0, f.pick)({
                 enterprise: {
-                    light: (0, A.css)([ "background-color:", ";" ], b.variables.gray96),
-                    dark: (0, A.css)([ "background-color:", ";" ], b.variables.gray60)
+                    light: (0, M.css)([ "background-color:", ";" ], f.variables.gray96),
+                    dark: (0, M.css)([ "background-color:", ";" ], f.variables.gray60)
                 },
-                prisma: (0, A.css)([ "border:1px dashed ", ";min-height:128px;" ], b.variables.contentColorDisabled)
-            }), t !== 0 && (0, b.pick)({
-                prisma: (0, A.css)([ "", "{padding:0;}" ], /* sc-sel */ be)
+                prisma: (0, M.css)([ "border:1px dashed ", ";min-height:128px;" ], f.variables.contentColorDisabled)
+            }), t !== 0 && (0, f.pick)({
+                prisma: (0, M.css)([ "", "{padding:0;}" ], /* sc-sel */ fe)
             }));
         }));
-        var we = B()(V()).withConfig({
+        var xe = H()(z()).withConfig({
             displayName: "FileStyles__StyledWindowDropTargetBox",
             componentId: "sc-1wyh4cf-10"
-        })([ "position:relative;text-align:center;min-height:250px;padding:", ";", "" ], b.variables.spacingLarge, (function(e) {
+        })([ "position:relative;text-align:center;min-height:250px;padding:", ";", "" ], f.variables.spacingLarge, (function(e) {
             var r = e.$disabled;
-            return r && (0, A.css)([ "color:", ";" ], (0, b.pick)({
-                enterprise: b.variables.textGray,
-                prisma: b.variables.contentColorMuted
+            return r && (0, M.css)([ "color:", ";" ], (0, f.pick)({
+                enterprise: f.variables.textGray,
+                prisma: f.variables.contentColorMuted
             }));
         }));
         // CONCATENATED MODULE: ./src/File/File.tsx
-        function ke(e) {
-            "@babel/helpers - typeof";
-            return ke = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
-                return typeof e;
-            } : function(e) {
-                return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, ke(e);
-        }
-        function Se() {
-            return Se = Object.assign ? Object.assign.bind() : function(e) {
+        function Ce() {
+            return Ce = Object.assign ? Object.assign.bind() : function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var t = arguments[r];
                     for (var a in t) {
@@ -794,11 +792,56 @@
                     }
                 }
                 return e;
-            }, Se.apply(null, arguments);
+            }, Ce.apply(null, arguments);
         }
-        function Oe(e, r) {
+        function ke(e, r) {
+            return Oe(e) || Ee(e, r) || Se(e, r) || we();
+        }
+        function we() {
+            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+        }
+        function Se(e, r) {
+            if (e) {
+                if ("string" == typeof e) return _e(e, r);
+                var t = {}.toString.call(e).slice(8, -1);
+                return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _e(e, r) : void 0;
+            }
+        }
+        function _e(e, r) {
+            (null == r || r > e.length) && (r = e.length);
+            for (var t = 0, a = Array(r); t < r; t++) {
+                a[t] = e[t];
+            }
+            return a;
+        }
+        function Ee(e, r) {
+            var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+            if (null != t) {
+                var a, n, i, o, l = [], s = !0, c = !1;
+                try {
+                    if (i = (t = t.call(e)).next, 0 === r) {
+                        if (Object(t) !== t) return;
+                        s = !1;
+                    } else for (;!(s = (a = i.call(t)).done) && (l.push(a.value), l.length !== r); s = !0) {
+                    }
+                } catch (e) {
+                    c = !0, n = e;
+                } finally {
+                    try {
+                        if (!s && null != t["return"] && (o = t["return"](), Object(o) !== o)) return;
+                    } finally {
+                        if (c) throw n;
+                    }
+                }
+                return l;
+            }
+        }
+        function Oe(e) {
+            if (Array.isArray(e)) return e;
+        }
+        function Ie(e, r) {
             if (null == e) return {};
-            var t, a, n = Ie(e, r);
+            var t, a, n = Re(e, r);
             if (Object.getOwnPropertySymbols) {
                 var i = Object.getOwnPropertySymbols(e);
                 for (a = 0; a < i.length; a++) {
@@ -807,7 +850,7 @@
             }
             return n;
         }
-        function Ie(e, r) {
+        function Re(e, r) {
             if (null == e) return {};
             var t = {};
             for (var a in e) {
@@ -818,95 +861,8 @@
             }
             return t;
         }
-        function _e(e, r) {
-            if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
-        }
-        function Ee(e, r) {
-            for (var t = 0; t < r.length; t++) {
-                var a = r[t];
-                a.enumerable = a.enumerable || !1, a.configurable = !0, "value" in a && (a.writable = !0), 
-                Object.defineProperty(e, Me(a.key), a);
-            }
-        }
-        function Re(e, r, t) {
-            return r && Ee(e.prototype, r), t && Ee(e, t), Object.defineProperty(e, "prototype", {
-                writable: !1
-            }), e;
-        }
-        function Le(e, r) {
-            if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function");
-            e.prototype = Object.create(r && r.prototype, {
-                constructor: {
-                    value: e,
-                    writable: !0,
-                    configurable: !0
-                }
-            }), Object.defineProperty(e, "prototype", {
-                writable: !1
-            }), r && Pe(e, r);
-        }
-        function Pe(e, r) {
-            return Pe = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
-                return e.__proto__ = r, e;
-            }, Pe(e, r);
-        }
-        function je(e) {
-            var r = Te();
-            return function() {
-                var t, a = $e(e);
-                if (r) {
-                    var n = $e(this).constructor;
-                    t = Reflect.construct(a, arguments, n);
-                } else t = a.apply(this, arguments);
-                return qe(this, t);
-            };
-        }
-        function qe(e, r) {
-            if (r && ("object" == ke(r) || "function" == typeof r)) return r;
-            if (void 0 !== r) throw new TypeError("Derived constructors may only return object or undefined");
-            return De(e);
-        }
-        function De(e) {
-            if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-            return e;
-        }
-        function Te() {
-            try {
-                var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-            } catch (e) {}
-            return (Te = function r() {
-                return !!e;
-            })();
-        }
-        function $e(e) {
-            return $e = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-                return e.__proto__ || Object.getPrototypeOf(e);
-            }, $e(e);
-        }
-        function Ne(e, r, t) {
-            return (r = Me(r)) in e ? Object.defineProperty(e, r, {
-                value: t,
-                enumerable: !0,
-                configurable: !0,
-                writable: !0
-            }) : e[r] = t, e;
-        }
-        function Me(e) {
-            var r = Fe(e, "string");
-            return "symbol" == ke(r) ? r : r + "";
-        }
-        function Fe(e, r) {
-            if ("object" != ke(e) || !e) return e;
-            var t = e[Symbol.toPrimitive];
-            if (void 0 !== t) {
-                var a = t.call(e, r || "default");
-                if ("object" != ke(a)) return a;
-                throw new TypeError("@@toPrimitive must return a primitive value.");
-            }
-            return ("string" === r ? String : Number)(e);
-        }
         /** @public */
-        /** @public */        var He = {
+        /** @public */        var Le = {
             accept: i().string,
             allowMultiple: i().bool,
             children: i().node,
@@ -922,214 +878,179 @@
             onRequestRetry: i().func,
             /** @private. */
             required: i().bool,
-            supportsMessage: i().node,
-            /** @private */
-            splunkTheme: i().object
-        };
-        var Ae = {
-            allowMultiple: false,
-            disabled: false,
-            dropAnywhere: false,
-            error: false
+            supportsMessage: i().node
         };
         /**
  * File provides the ability to accept files and present uploaded files. It does not provide
  * file readers, only a reference to the file. This can be used to post binary content, or
  * upload using an array buffer.
- */        var Be =  function(t) {
-            Le(n, t);
-            var a = je(n);
+ */        function qe(t) {
+            var a = t.accept, n = t.allowMultiple, i = t.children, o = t.disabled, s = t.dropAnywhere, d = t.error, u = t.fullscreen, h = t.help, g = t.name, y = t.onRequestAdd, x = t.onRequestRemove, C = t.onRequestRetry, k = t.required, w = t.supportsMessage, S = Ie(t, [ "accept", "allowMultiple", "children", "disabled", "dropAnywhere", "error", "fullscreen", "help", "name", "onRequestAdd", "onRequestRemove", "onRequestRetry", "required", "supportsMessage" ]);
             // @docs-props-type FilePropsBase
-                        function n(e) {
-                var r;
-                _e(this, n);
-                r = a.call(this, e);
-                Ne(De(r), "inputId", void 0);
-                Ne(De(r), "inputCount", void 0);
-                Ne(De(r), "handleInputChange", (function(e) {
-                    var t;
-                    r.addFiles((t = e.currentTarget.files) !== null && t !== void 0 ? t : undefined);
-                }));
-                Ne(De(r), "handleInputFocus", (function() {
-                    r.setState({
-                        focusedInput: true
+                        var _ = (0, f.useSplunkTheme)(), E = _.isPrisma;
+            var I = (0, e.useState)(false), R = ke(I, 2), L = R[0], q = R[1];
+            var P = (0, e.useState)(false), $ = ke(P, 2), j = $[0], T = $[1];
+            /* Each time a file is uploaded this is incremented and used to generate the
+   * file input's key. In this way we get a new input without a value. */            var D = (0, 
+            e.useState)(0), A = ke(D, 2), N = A[0], M = A[1];
+            var H = (0, b.createDOMID)();
+            var F = (0, e.useCallback)((function(e) {
+                if (e !== undefined && e.length > 0) {
+                    var r = Array.from(e);
+                    y === null || y === void 0 ? void 0 : y(n ? r : [ r[0] ], {
+                        name: g
                     });
-                }));
-                Ne(De(r), "handleInputBlur", (function() {
-                    r.setState({
-                        focusedInput: false
-                    });
-                }));
-                Ne(De(r), "handleDragOver", (function(e) {
-                    if (!r.state.dragOver) {
-                        r.setState({
-                            dragOver: true
-                        });
-                    }
-                    e.preventDefault();
-                }));
-                Ne(De(r), "handleDragLeave", (function() {
-                    r.setState({
-                        dragOver: false
+                } else {
+                    y === null || y === void 0 ? void 0 : y([], {
+                        name: g
                     });
-                }));
-                Ne(De(r), "handleDrop", (function(e) {
-                    var t;
-                    e.preventDefault();
-                    r.handleDragLeave();
-                    r.addFiles((t = e.dataTransfer) === null || t === void 0 ? void 0 : t.files);
-                }));
-                r.state = {
-                    dragOver: false,
-                    focusedInput: false
-                };
-                r.inputId = (0, y.createDOMID)();
-                /* Each time a file is uploaded this is incremented and used to generate the
-     * file input's key. In this way we get a new input without a value. */                r.inputCount = 0;
-                r.handleDragLeave = l()(r.handleDragLeave, 300);
-                return r;
-            }
-            Re(n, [ {
-                key: "addFiles",
-                value: function e(r) {
-                    var t = this.props.name;
-                    if (r !== undefined && r.length > 0) {
-                        var a, n;
-                        var i = Array.from(r);
-                        (a = (n = this.props).onRequestAdd) === null || a === void 0 ? void 0 : a.call(n, this.props.allowMultiple ? i : [ i[0] ], {
-                            name: t
-                        });
-                    } else {
-                        var o, l;
-                        (o = (l = this.props).onRequestAdd) === null || o === void 0 ? void 0 : o.call(l, [], {
-                            name: t
-                        });
-                    }
-                    this.inputCount += 1;
                 }
-            }, {
-                key: "render",
-                value: function t() {
-                    var a = this.props, n = a.accept, i = a.allowMultiple, o = a.children, l = a.disabled, s = a.dropAnywhere, p = a.error, u = a.fullscreen, f = a.help, b = a.name, y = a.onRequestRemove, g = a.onRequestRetry, x = a.required, C = a.splunkTheme, w = Oe(a, [ "accept", "allowMultiple", "children", "disabled", "dropAnywhere", "error", "fullscreen", "help", "name", "onRequestRemove", "onRequestRetry", "required", "splunkTheme" ]);
-                    var k = C.isPrisma;
-                    var S = 0;
-                    var O = e.Children.toArray(o).filter(e.isValidElement).map((function(r, t) {
-                        S += 1;
-                        
-                        return (0, e.cloneElement)(r, {
-                            index: t,
-                            key: r.key || r.props.itemId || "item-".concat(t)
-                        });
-                    }));
-                    var I = u || s;
-                    var _ = I || l;
-                    var E = I && !l;
-                    var L = u ? we : Ce;
-                    var P = u ? he : be;
-                    var j = u ? fe : ve;
-                    var q = _ ? false : this.state.dragOver || false;
-                    var D = v()(n) && d()(n.split(",").join(", "));
-                    var T = function e(r) {
-                        g === null || g === void 0 ? void 0 : g({
-                            event: r,
-                            filename: r.name,
-                            index: r.index,
-                            itemId: r.itemId,
-                            name: b
-                        });
-                    };
-                    var $ = function e(r) {
-                        y === null || y === void 0 ? void 0 : y({
-                            event: r,
-                            index: r.index,
-                            filename: r.name,
-                            itemId: r.itemId,
-                            name: b
-                        });
-                    };
-                    var N = null;
-                    if (this.props.supportsMessage) {
-                        N =  r().createElement(ye, {
-                            "data-test": "file-supports"
-                        }, this.props.supportsMessage);
-                    } else if (k && !l) {
-                        N = n ?  r().createElement(ye, {
-                            "data-test": "file-supports"
-                        }, (0, h._)("Supports ".concat(D))) :  r().createElement(ye, {
-                            "data-test": "file-supports"
-                        }, (0, h._)("Supports all file types"));
-                    }
-                    
-                    return r().createElement(L, Se({
-                        onDragOver: _ ? undefined : this.handleDragOver,
-                        onDragLeave: _ ? undefined : this.handleDragLeave,
-                        onDrop: _ ? undefined : this.handleDrop,
-                        $disabled: l,
-                        $dragOver: q,
-                        $error: p,
-                        $fileCount: S,
-                        "data-test": "file",
-                        "data-test-disabled": l,
-                        "data-test-error": p
-                    }, c()(w, "onRequestAdd", "onRequestRemove")),  r().createElement(P, {
-                        $disabled: l,
-                        $dragOver: q,
-                        $error: p
-                    }, !l && !k &&  r().createElement(j, {
-                        $dragOver: q,
-                        $error: p
-                    }), " ",  r().createElement("span", {
-                        "data-test": "file-label"
-                    }, !I && !l && (0, h._)("Drop your file here or"), E && (0, h._)("Drop your file anywhere or"), " ", S === 0 && l && (0, 
-                    h._)("No files selected"),  r().createElement(me, {
-                        htmlFor: this.inputId,
-                        "data-test": "file-link",
-                        "data-focused": this.state.focusedInput || null
-                    },  r().createElement(de, {
-                        accept: n,
-                        "data-test": "file-input",
-                        disabled: l,
-                        id: this.inputId,
-                        key: "file-input-".concat(this.inputCount),
-                        multiple: i || undefined,
-                        onBlur: this.handleInputBlur,
-                        onChange: this.handleInputChange,
-                        onFocus: this.handleInputFocus,
-                        required: x,
-                        type: "file"
-                    }), !l && (0, h._)("upload file…"))), N), !l && f &&  r().createElement(ge, {
-                        "data-test": "help"
-                    }, f), E && this.state.dragOver &&  r().createElement(xe, {
-                        "data-test": "file-window-drop",
-                        onDragLeave: this.handleDragLeave
-                    }), E &&  r().createElement(r().Fragment, null,  r().createElement(m(), {
-                        target: window,
-                        eventType: "dragover",
-                        listener: this.handleDragOver
-                    }),  r().createElement(m(), {
-                        target: window,
-                        eventType: "drop",
-                        listener: this.handleDrop
-                    })),  r().createElement(R.Provider, {
-                        // eslint-disable-next-line react/jsx-no-constructed-context-values
-                        value: {
-                            disabled: l,
-                            onRequestRemove: y ? $ : undefined,
-                            onRequestRetry: g ? T : undefined
-                        }
-                    }, O));
+                M((function(e) {
+                    return e + 1;
+                }));
+            }), [ n, g, y ]);
+            var z = (0, e.useCallback)((function(e) {
+                var r;
+                F((r = e.currentTarget.files) !== null && r !== void 0 ? r : undefined);
+            }), [ F ]);
+            var V = (0, e.useCallback)((function() {
+                T(true);
+            }), []);
+            var B = (0, e.useCallback)((function() {
+                T(false);
+            }), []);
+            var G = (0, e.useCallback)((function(e) {
+                if (!L) {
+                    q(true);
                 }
-            } ]);
-            return n;
-        }(e.Component);
-        Ne(Be, "propTypes", He);
-        Ne(Be, "defaultProps", Ae);
-        Ne(Be, "Item", se);
-        var ze = (0, b.withSplunkTheme)(Be);
-        var Ve = ze;
-        Ve.propTypes = Be.propTypes;
-        Ve.Item = se;
-        /* harmony default export */        const Ge = Ve;
+                e.preventDefault();
+            }), [ L ]);
+            var Z = (0, e.useMemo)((function() {
+                return l()((function() {
+                    return q(false);
+                }), 300);
+            }), [ q ]);
+            var W = (0, e.useCallback)((function(e) {
+                var r;
+                e.preventDefault();
+                Z();
+                F((r = e.dataTransfer) === null || r === void 0 ? void 0 : r.files);
+            }), [ F, Z ]);
+            var U = (0, e.useCallback)((function(e) {
+                var r = e.name, t = e.index, a = e.itemId;
+                C === null || C === void 0 ? void 0 : C({
+                    event: e,
+                    filename: r,
+                    index: t,
+                    itemId: a,
+                    name: g
+                });
+            }), [ g, C ]);
+            var X = (0, e.useCallback)((function(e) {
+                var r = e.name, t = e.index, a = e.itemId;
+                x === null || x === void 0 ? void 0 : x({
+                    event: e,
+                    filename: r,
+                    index: t,
+                    itemId: a,
+                    name: g
+                });
+            }), [ g, x ]);
+            var J = 0;
+            var K = e.Children.toArray(i).filter(e.isValidElement).map((function(r, t) {
+                J += 1;
+                
+                return (0, e.cloneElement)(r, {
+                    index: t,
+                    key: r.key || r.props.itemId || "item-".concat(t)
+                });
+            }));
+            var Q = u || s;
+            var Y = Q || o;
+            var ee = Q && !o;
+            var re = u ? xe : ye;
+            var te = u ? me : fe;
+            var ae = u ? ue : pe;
+            var ne = Y ? false : L || false;
+            var ie = c()(a) && p()(a.split(",").join(", "));
+            var oe = null;
+            if (w) {
+                oe =  r().createElement(be, {
+                    "data-test": "file-supports"
+                }, w);
+            } else if (E && !o) {
+                oe = a ?  r().createElement(be, {
+                    "data-test": "file-supports"
+                }, (0, m._)("Supports ".concat(ie))) :  r().createElement(be, {
+                    "data-test": "file-supports"
+                }, (0, m._)("Supports all file types"));
+            }
+            var le = (0, e.useMemo)((function() {
+                return {
+                    disabled: !!o,
+                    onRequestRemove: x ? X : undefined,
+                    onRequestRetry: C ? U : undefined
+                };
+            }), [ o, X, U, x, C ]);
+            
+            return r().createElement(re, Ce({
+                onDragOver: Y ? undefined : G,
+                onDragLeave: Y ? undefined : Z,
+                onDrop: Y ? undefined : W,
+                $disabled: !!o,
+                $dragOver: ne,
+                $error: !!d,
+                $fileCount: J,
+                "data-test": "file",
+                "data-test-disabled": o,
+                "data-test-error": !!d
+            }, S),  r().createElement(te, {
+                $disabled: !!o,
+                $dragOver: ne,
+                $error: !!d
+            }, !o && !E &&  r().createElement(ae, {
+                $dragOver: ne,
+                $error: !!d
+            }), " ",  r().createElement("span", {
+                "data-test": "file-label"
+            }, !Q && !o && (0, m._)("Drop your file here or"), ee && (0, m._)("Drop your file anywhere or"), " ", J === 0 && o && (0, 
+            m._)("No files selected"),  r().createElement(ve, {
+                htmlFor: H,
+                "data-test": "file-link",
+                "data-focused": j || null
+            },  r().createElement(ce, {
+                accept: a,
+                "data-test": "file-input",
+                disabled: o,
+                id: H,
+                key: "file-input-".concat(N),
+                multiple: n || undefined,
+                onBlur: B,
+                onChange: z,
+                onFocus: V,
+                required: k,
+                type: "file"
+            }), !o && (0, m._)("upload file…"))), oe), !o && h &&  r().createElement(he, {
+                "data-test": "help"
+            }, h), ee && L &&  r().createElement(ge, {
+                "data-test": "file-window-drop",
+                onDragLeave: Z
+            }), ee &&  r().createElement(r().Fragment, null,  r().createElement(v(), {
+                target: window,
+                eventType: "dragover",
+                listener: G
+            }),  r().createElement(v(), {
+                target: window,
+                eventType: "drop",
+                listener: W
+            })),  r().createElement(O.Provider, {
+                value: le
+            }, K));
+        }
+        qe.propTypes = Le;
+        qe.componentType = "File";
+        qe.Item = oe;
+        /* harmony default export */        const Pe = qe;
     }) // CONCATENATED MODULE: ./src/File/index.ts
     ();
     module.exports = a;