@splunk/react-ui 4.22.1 → 4.24.0

package/Color.js

@@ -61,9 +61,9 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ Qe,
-        defaultPalette: () => /* reexport */ Ne,
-        isValidHEX: () => /* reexport */ Fe
+        default: () => /* reexport */ Ue,
+        defaultPalette: () => /* reexport */ Ae,
+        isValidHEX: () => /* reexport */ ze
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -71,129 +71,126 @@
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
     var o =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/debounce"
-    const l = require("lodash/debounce");
-    var i =  e.n(l);
     // CONCATENATED MODULE: external "lodash/has"
-    const s = require("lodash/has");
-    var u =  e.n(s);
+    const l = require("lodash/has");
+    var i =  e.n(l);
     // CONCATENATED MODULE: external "lodash/includes"
-    const c = require("lodash/includes");
-    var p =  e.n(c);
+    const s = require("lodash/includes");
+    var u =  e.n(s);
     // CONCATENATED MODULE: external "lodash/keys"
-    const d = require("lodash/keys");
-    var f =  e.n(d);
+    const c = require("lodash/keys");
+    var p =  e.n(c);
     // CONCATENATED MODULE: external "lodash/omit"
-    const v = require("lodash/omit");
-    var h =  e.n(v);
+    const d = require("lodash/omit");
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "lodash/slice"
-    const m = require("lodash/slice");
-    var y =  e.n(m);
+    const v = require("lodash/slice");
+    var h =  e.n(v);
     // CONCATENATED MODULE: external "lodash/startsWith"
-    const b = require("lodash/startsWith");
-    var g =  e.n(b);
+    const m = require("lodash/startsWith");
+    var y =  e.n(m);
     // CONCATENATED MODULE: external "lodash/toLower"
-    const x = require("lodash/toLower");
-    var w =  e.n(x);
+    const b = require("lodash/toLower");
+    var g =  e.n(b);
     // CONCATENATED MODULE: external "lodash/memoize"
-    const S = require("lodash/memoize");
-    var k =  e.n(S);
+    const x = require("lodash/memoize");
+    var w =  e.n(x);
     // CONCATENATED MODULE: external "tinycolor2"
-    const C = require("tinycolor2");
-    var E =  e.n(C);
+    const S = require("tinycolor2");
+    var k =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const P = require("@splunk/react-ui/Dropdown");
-    var O =  e.n(P);
+    const C = require("@splunk/react-ui/Dropdown");
+    var E =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const _ = require("@splunk/themes");
+    const P = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-    const q = require("@splunk/ui-utils/color");
+    const O = require("@splunk/ui-utils/color");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const I = require("@splunk/ui-utils/i18n");
+    const _ = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const j = require("@splunk/ui-utils/keyboard");
+    const q = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
-    const T = require("styled-components");
-    var R =  e.n(T);
+    const I = require("styled-components");
+    var j =  e.n(I);
     // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-    const B = require("@splunk/react-ui/Text");
-    var V =  e.n(B);
+    const T = require("@splunk/react-ui/Text");
+    var R =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const A = require("@splunk/react-ui/ScreenReaderContent");
-    var D =  e.n(A);
+    const B = require("@splunk/react-ui/ScreenReaderContent");
+    var V =  e.n(B);
     // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-    const N = require("@splunk/react-icons/Checkmark");
-    var $ =  e.n(N);
+    const A = require("@splunk/react-icons/Checkmark");
+    var D =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const H = require("@splunk/react-ui/Clickable");
-    var z =  e.n(H);
+    const N = require("@splunk/react-ui/Clickable");
+    var $ =  e.n(N);
     // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
-    var K = (0, _.pick)({
-        enterprise: _.variables.gray80,
+    var H = (0, P.pick)({
+        enterprise: P.variables.gray80,
         prisma: "rgba(0, 0, 0, 0.2)"
     });
-    var F = (0, T.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], K, K, K, K, K, K, (0, 
-    _.pick)({
+    var z = (0, I.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], H, H, H, H, H, H, (0, 
+    P.pick)({
         enterprise: "transparent",
-        prisma: _.variables.white
+        prisma: P.variables.white
     }));
-    var M = R()($()).withConfig({
+    var K = j()(D()).withConfig({
         displayName: "SwatchStyles__StyledCheck",
         componentId: "sc-1wxunhq-0"
     })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
-    var L = R()(z()).withConfig({
+    var F = j()($()).withConfig({
         displayName: "SwatchStyles__StyledClickable",
         componentId: "sc-1wxunhq-1"
     })([ "display:block;flex:0 0 auto;border:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], (0, 
-    _.pick)({
+    P.pick)({
         enterprise: {
-            light: (0, T.css)([ "1px solid ", "" ], _.variables.gray60),
-            dark: _.variables.border
+            light: (0, I.css)([ "1px solid ", "" ], P.variables.gray60),
+            dark: P.variables.border
         },
-        prisma: (0, T.css)([ "1px solid ", "" ], _.variables.interactiveColorBorder)
-    }), (0, _.pick)({
-        prisma: (0, T.css)([ "border-radius:2px;" ])
+        prisma: (0, I.css)([ "1px solid ", "" ], P.variables.interactiveColorBorder)
+    }), (0, P.pick)({
+        prisma: (0, I.css)([ "border-radius:2px;" ])
     }), (function(e) {
         var t = e.$value;
-        return t === null && (0, T.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
-        _.pick)({
+        return t === null && (0, I.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
+        P.pick)({
             enterprise: "#ed1e24",
-            prisma: _.variables.accentColorNegative
-        }), (0, _.pick)({
-            prisma: (0, T.css)([ "background-color:", ";" ], _.variables.white)
+            prisma: P.variables.accentColorNegative
+        }), (0, P.pick)({
+            prisma: (0, I.css)([ "background-color:", ";" ], P.variables.white)
         }));
     }), (function(e) {
         var t = e.$value;
-        return t && (t === "transparent" ? F : "background-color: ".concat(t));
+        return t && (t === "transparent" ? z : "background-color: ".concat(t));
     }), (function(e) {
         var t = e.$noBorder;
-        return t && (0, T.css)([ "border:none;" ]);
-    }), _.variables.focusColor, _.variables.focusShadow, (0, _.pick)({
+        return t && (0, I.css)([ "border:none;" ]);
+    }), P.variables.focusColor, P.variables.focusShadow, (0, P.pick)({
         enterprise: {
-            comfortable: (0, T.css)([ "width:32px;height:32px;" ]),
-            compact: (0, T.css)([ "width:24px;height:24px;" ])
+            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
+            compact: (0, I.css)([ "width:24px;height:24px;" ])
         },
-        prisma: (0, T.css)([ "width:24px;height:24px;" ])
+        prisma: (0, I.css)([ "width:24px;height:24px;" ])
     }), (function(e) {
         var t = e.$prepend;
-        return t && (0, T.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+        return t && (0, I.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }), (function(e) {
         var t = e.$append;
-        return t && (0, T.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+        return t && (0, I.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
     }), (function(e) {
         var t = e.$hasError;
-        return t && (0, T.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
-        _.pick)({
-            enterprise: _.variables.errorColor,
-            prisma: _.variables.accentColorNegative
+        return t && (0, I.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
+        P.pick)({
+            enterprise: P.variables.errorColor,
+            prisma: P.variables.accentColorNegative
         }));
     }), (function(e) {
         var t = e.$showSelected;
-        return t && (0, T.css)([ "display:flex;align-items:center;justify-content:center;" ]);
+        return t && (0, I.css)([ "display:flex;align-items:center;justify-content:center;" ]);
     }));
     // CONCATENATED MODULE: ./src/Color/Swatch.tsx
-    function U() {
-        U = Object.assign || function(e) {
+    function M() {
+        M = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -204,11 +201,11 @@
             }
             return e;
         };
-        return U.apply(this, arguments);
+        return M.apply(this, arguments);
     }
-    function W(e, t) {
+    function L(e, t) {
         if (e == null) return {};
-        var r = Q(e, t);
+        var r = U(e, t);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -221,7 +218,7 @@
         }
         return r;
     }
-    function Q(e, t) {
+    function U(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -233,7 +230,7 @@
         }
         return r;
     }
-    var X = {
+    var W = {
         append: o().bool,
         elementRef: o().oneOfType([ o().func, o().object ]),
         /** @private */
@@ -247,17 +244,17 @@
         /** @private */
         showSelected: o().bool
     };
-    var G =  n().forwardRef((function(e, t) {
-        var r = e.append, a = e.error, o = a === void 0 ? false : a, l = e.onClick, i = e.prepend, s = e.value, u = e.noBorder, c = e.showSelected, p = W(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
-        var d = s === null || s === undefined ? (0, I._)("No color") : s;
+    var Q =  n().forwardRef((function(e, t) {
+        var r = e.append, a = e.error, o = a === void 0 ? false : a, l = e.onClick, i = e.prepend, s = e.value, u = e.noBorder, c = e.showSelected, p = L(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
+        var d = s === null || s === undefined ? (0, _._)("No color") : s;
  // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
         // Invalid values are converted to `undefined`
                 var f = s;
-        if (!(typeof f === "string" && ((0, q.isValidHexColor)(f) || f === "transparent")) && f !== null && f !== undefined) {
+        if (!(typeof f === "string" && ((0, O.isValidHexColor)(f) || f === "transparent")) && f !== null && f !== undefined) {
             f = undefined;
         }
         
-        return n().createElement(L, U({
+        return n().createElement(F, M({
             onClick: function e(t) {
                 return l === null || l === void 0 ? void 0 : l(t, {
                     value: s
@@ -272,136 +269,136 @@
             $showSelected: c,
             "data-test": "swatch",
             "data-test-value": s
-        }, p), c &&  n().createElement(M, {
-            "aria-label": (0, I._)("Selected"),
+        }, p), c &&  n().createElement(K, {
+            "aria-label": (0, _._)("Selected"),
             role: "presentation"
-        }),  n().createElement(D(), null, d));
+        }),  n().createElement(V(), null, d));
     }));
-    G.propTypes = X;
-    /* harmony default export */    const J = G;
+    Q.propTypes = W;
+    /* harmony default export */    const X = Q;
     // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-    var Y = R().div.withConfig({
+    var G = j().div.withConfig({
         displayName: "ColorStyles__StyledColor",
         componentId: "jxrost-0"
-    })([ "", ";flex-direction:row;" ], _.mixins.reset("flex"));
-    var Z = R()(J).withConfig({
+    })([ "", ";flex-direction:row;" ], P.mixins.reset("flex"));
+    var J = j()(X).withConfig({
         displayName: "ColorStyles__StyledInputSwatch",
         componentId: "jxrost-1"
-    })([ "", "" ], (0, _.pick)({
-        compact: (0, T.css)([ "width:28px;height:28px;" ])
+    })([ "", "" ], (0, P.pick)({
+        compact: (0, I.css)([ "width:28px;height:28px;" ])
     }));
-    var ee = R().div.withConfig({
+    var Y = j().div.withConfig({
         displayName: "ColorStyles__StyledInput",
         componentId: "jxrost-2"
-    })([ "", ";" ], (0, _.pick)({
-        enterprise: (0, T.css)([ "display:flex;width:100%;" ]),
-        prisma: (0, T.css)([ "position:relative;", "" ], (function(e) {
+    })([ "", ";" ], (0, P.pick)({
+        enterprise: (0, I.css)([ "display:flex;width:100%;" ]),
+        prisma: (0, I.css)([ "position:relative;", "" ], (function(e) {
             var t = e.$inDropdown;
-            return t ? (0, T.css)([ "width:80px;" ]) : (0, T.css)([ "flex:0 1 auto;min-width:0;" ]);
+            return t ? (0, I.css)([ "width:80px;" ]) : (0, I.css)([ "flex:0 1 auto;min-width:0;" ]);
         }))
     }));
-    var te = R()(V()).withConfig({
+    var Z = j()(R()).withConfig({
         displayName: "ColorStyles__StyledInputText",
         componentId: "jxrost-3"
     })([ "", "" ], (function(e) {
         var t = e.$inDropdown;
-        return t && (0, T.css)([ "font-size:12px;" ]);
+        return t && (0, I.css)([ "font-size:12px;" ]);
     }));
-    var re = R()(J).withConfig({
+    var ee = j()(X).withConfig({
         displayName: "ColorStyles__StyledToggleSwatch",
         componentId: "jxrost-4"
-    })([ "", "" ], (0, _.pick)({
+    })([ "", "" ], (0, P.pick)({
         prisma: {
-            comfortable: (0, T.css)([ "width:40px;height:40px;" ]),
-            compact: (0, T.css)([ "width:32px;height:32px;" ])
+            comfortable: (0, I.css)([ "width:40px;height:40px;" ]),
+            compact: (0, I.css)([ "width:32px;height:32px;" ])
         },
         enterprise: {
-            comfortable: (0, T.css)([ "width:32px;height:32px;" ]),
-            compact: (0, T.css)([ "width:28px;height:28px;" ])
+            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
+            compact: (0, I.css)([ "width:28px;height:28px;" ])
         }
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
-    const ne = require("@splunk/react-icons/ChevronDown");
-    var ae =  e.n(ne);
+    const te = require("@splunk/react-icons/ChevronDown");
+    var re =  e.n(te);
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-    const oe = require("@splunk/react-ui/Divider");
-    var le =  e.n(oe);
+    const ne = require("@splunk/react-ui/Divider");
+    var ae =  e.n(ne);
     // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-    var ie = R().div.withConfig({
+    var oe = j().div.withConfig({
         displayName: "PaletteStyles__StyledPalette",
         componentId: "qgv9v9-0"
-    })([ "width:220px;padding:", ";" ], _.variables.spacingSmall);
-    var se = R().ul.withConfig({
+    })([ "width:220px;padding:", ";" ], P.variables.spacingSmall);
+    var le = j().ul.withConfig({
         displayName: "PaletteStyles__StyledSwatches",
         componentId: "qgv9v9-1"
-    })([ "", ";margin-bottom:", ";" ], _.mixins.reset("block"), _.variables.spacingQuarter);
-    var ue = R().li.withConfig({
+    })([ "", ";margin-bottom:", ";" ], P.mixins.reset("block"), P.variables.spacingQuarter);
+    var ie = j().li.withConfig({
         displayName: "PaletteStyles__StyledSwatch",
         componentId: "qgv9v9-2"
-    })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], _.mixins.reset("inline-block"), (0, 
-    _.pick)({
+    })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], P.mixins.reset("inline-block"), (0, 
+    P.pick)({
         enterprise: {
-            compact: (0, T.css)([ "&:nth-child(8n){margin-right:0;}" ])
+            compact: (0, I.css)([ "&:nth-child(8n){margin-right:0;}" ])
         },
-        prisma: (0, T.css)([ "&:nth-child(8n){margin-right:0;}" ])
+        prisma: (0, I.css)([ "&:nth-child(8n){margin-right:0;}" ])
     }));
-    var ce = R().div.withConfig({
+    var se = j().div.withConfig({
         displayName: "PaletteStyles__StyledToolBar",
         componentId: "qgv9v9-3"
-    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";margin-bottom:", ";gap:4px;" ], _.variables.spacingSmall, _.variables.spacingHalf);
-    var pe = R()(z()).withConfig({
+    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";margin-bottom:", ";gap:4px;" ], P.variables.spacingSmall, P.variables.spacingHalf);
+    var ue = j()($()).withConfig({
         displayName: "PaletteStyles__StyledExpandButton",
         componentId: "qgv9v9-4"
-    })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], _.variables.focusShadow, (function(e) {
+    })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], P.variables.focusShadow, (function(e) {
         var t = e.$expanded;
-        return t && (0, T.css)([ "transform:rotate(180deg);" ]);
+        return t && (0, I.css)([ "transform:rotate(180deg);" ]);
     }));
-    var de = R().div.withConfig({
+    var ce = j().div.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
         componentId: "qgv9v9-5"
     })([ "position:relative;" ]);
-    var fe = R().input.withConfig({
+    var pe = j().input.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPicker",
         componentId: "qgv9v9-6"
     })([ "box-sizing:border-box;", "     border:", ";", ";outline:none;appearance:none;padding:1px 10px;", "     margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], (0, 
-    _.pick)({
+    P.pick)({
         enterprise: {
-            comfortable: (0, T.css)([ "width:32px;height:32px;" ]),
-            compact: (0, T.css)([ "width:24px;height:24px;" ])
+            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
+            compact: (0, I.css)([ "width:24px;height:24px;" ])
         },
-        prisma: (0, T.css)([ "width:24px;height:24px;" ])
-    }), (0, _.pick)({
+        prisma: (0, I.css)([ "width:24px;height:24px;" ])
+    }), (0, P.pick)({
         enterprise: {
-            light: (0, T.css)([ "1px solid ", "" ], _.variables.gray60),
-            dark: _.variables.border
+            light: (0, I.css)([ "1px solid ", "" ], P.variables.gray60),
+            dark: P.variables.border
         },
         prisma: "none"
-    }), (0, _.pick)({
-        prisma: (0, T.css)([ "border-radius:2px;" ])
-    }), (0, _.pick)({
+    }), (0, P.pick)({
+        prisma: (0, I.css)([ "border-radius:2px;" ])
+    }), (0, P.pick)({
         enterprise: {
-            comfortable: (0, T.css)([ "padding:1px 14px;" ])
+            comfortable: (0, I.css)([ "padding:1px 14px;" ])
         }
-    }), _.variables.focusShadow);
-    var ve = R()($()).withConfig({
+    }), P.variables.focusShadow);
+    var de = j()(D()).withConfig({
         displayName: "PaletteStyles__StyledCheck",
         componentId: "qgv9v9-7"
     })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;" ]);
     // CONCATENATED MODULE: ./src/Color/Palette.tsx
-    function he(e) {
-        var t = e.expanded, r = e.palette, a = e.value, o = e.swatchToFocusRef, l = e.onSwatchClick, i = e.expandButtonRef, s = e.onPaletteExpand, u = e.onSystemColorPickerChange, c = e.renderInput;
-        var d = (0, _.useSplunkTheme)(), f = d.isPrisma, v = d.isLight;
-        var h = p()(r.map((function(e) {
-            return e && w()(e);
+    function fe(e) {
+        var t = e.expanded, r = e.palette, a = e.value, o = e.swatchToFocusRef, l = e.onSwatchClick, i = e.expandButtonRef, s = e.onPaletteExpand, c = e.onSystemColorPickerChange, p = e.renderInput;
+        var d = (0, P.useSplunkTheme)(), f = d.isPrisma, v = d.isLight;
+        var m = u()(r.map((function(e) {
+            return e && g()(e);
         })), a);
-        var m = r.map((function(e, t) {
-            var r = e === null ? null : w()(e);
+        var y = r.map((function(e, t) {
+            var r = e === null ? null : g()(e);
             var i = r === a;
-            var s = !h && t === 0 || h && i;
+            var s = !m && t === 0 || m && i;
             
-            return n().createElement(ue, {
+            return n().createElement(ie, {
                 key: r || "null"
-            },  n().createElement(J, {
+            },  n().createElement(X, {
                 value: r,
                 ref: s ? o : null,
                 onClick: l,
@@ -410,76 +407,76 @@
             }));
         }));
         var b = function e() {
-            var t = !h && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
+            var t = !m && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
             
-            return n().createElement(ce, {
+            return n().createElement(se, {
                 "data-test": "tool-bar"
-            }, f &&  n().createElement(_.SplunkThemeProvider, {
+            }, f &&  n().createElement(P.SplunkThemeProvider, {
                 density: "compact"
-            }, c && c()),  n().createElement(J, {
+            }, p && p()),  n().createElement(X, {
                 value: null,
                 ref: a === null ? o : null,
                 onClick: l,
                 noBorder: f && !v,
                 showSelected: a === null
-            }),  n().createElement(J, {
+            }),  n().createElement(X, {
                 value: "#ffffff",
                 ref: a === "#ffffff" ? o : null,
                 onClick: l,
                 noBorder: f && !v,
                 showSelected: a === "#ffffff"
-            }),  n().createElement(J, {
+            }),  n().createElement(X, {
                 value: "#000000",
                 ref: a === "#000000" ? o : null,
                 onClick: l,
                 noBorder: f,
                 showSelected: a === "#000000"
-            }),  n().createElement(de, null,  n().createElement(fe, {
+            }),  n().createElement(ce, null,  n().createElement(pe, {
                 type: "color",
                 value: a === null ? "" : a,
-                onChange: u,
+                onChange: c,
                 ref: t ? o : null
-            }), t &&  n().createElement(ve, {
-                "aria-label": (0, I._)("Selected"),
+            }), t &&  n().createElement(de, {
+                "aria-label": (0, _._)("Selected"),
                 role: "presentation"
             })));
         };
-        var g = m.length === 8 ? 7 : 15;
-        var x = y()(m, 0, g);
-        var S = y()(m, g);
+        var x = y.length === 8 ? 7 : 15;
+        var w = h()(y, 0, x);
+        var S = h()(y, x);
         if (f) {
             
-            return n().createElement(ie, null,  n().createElement("div", {
+            return n().createElement(oe, null,  n().createElement("div", {
                 style: {
                     position: "relative"
                 }
-            },  n().createElement(se, null, x, t && S), t && b(),  n().createElement(pe, {
+            },  n().createElement(le, null, w, t && S), t && b(),  n().createElement(ue, {
                 ref: i,
                 $expanded: t,
                 onClick: s,
                 "data-test": "expand-button"
-            },  n().createElement(ae(), null))));
+            },  n().createElement(re(), null))));
         }
         
-        return n().createElement(ie, null,  n().createElement(se, null, m),  n().createElement(le(), null), b(), c && c());
+        return n().createElement(oe, null,  n().createElement(le, null, y),  n().createElement(ae(), null), b(), p && p());
     }
-    /* harmony default export */    const me = he;
+    /* harmony default export */    const ve = fe;
     // CONCATENATED MODULE: ./src/Color/Color.tsx
-    function ye(e) {
+    function he(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            ye = function e(t) {
+            he = function e(t) {
                 return typeof t;
             };
         } else {
-            ye = function e(t) {
+            he = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return ye(e);
+        return he(e);
     }
-    function be() {
-        be = Object.assign || function(e) {
+    function me() {
+        me = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -490,38 +487,38 @@
             }
             return e;
         };
-        return be.apply(this, arguments);
+        return me.apply(this, arguments);
     }
-    function ge(e) {
-        return ke(e) || Se(e) || we(e) || xe();
+    function ye(e) {
+        return we(e) || xe(e) || ge(e) || be();
     }
-    function xe() {
+    function be() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function we(e, t) {
+    function ge(e, t) {
         if (!e) return;
-        if (typeof e === "string") return Ce(e, t);
+        if (typeof e === "string") return Se(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
         if (r === "Object" && e.constructor) r = e.constructor.name;
         if (r === "Map" || r === "Set") return Array.from(e);
-        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return Ce(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return Se(e, t);
     }
-    function Se(e) {
+    function xe(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function ke(e) {
-        if (Array.isArray(e)) return Ce(e);
+    function we(e) {
+        if (Array.isArray(e)) return Se(e);
     }
-    function Ce(e, t) {
+    function Se(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var r = 0, n = new Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function Ee(e, t) {
+    function ke(e, t) {
         if (e == null) return {};
-        var r = Pe(e, t);
+        var r = Ce(e, t);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -534,7 +531,7 @@
         }
         return r;
     }
-    function Pe(e, t) {
+    function Ce(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -546,12 +543,12 @@
         }
         return r;
     }
-    function Oe(e, t) {
+    function Ee(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function _e(e, t) {
+    function Pe(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -560,12 +557,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function qe(e, t, r) {
-        if (t) _e(e.prototype, t);
-        if (r) _e(e, r);
+    function Oe(e, t, r) {
+        if (t) Pe(e.prototype, t);
+        if (r) Pe(e, r);
         return e;
     }
-    function Ie(e, t) {
+    function _e(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -576,41 +573,41 @@
                 configurable: true
             }
         });
-        if (t) je(e, t);
+        if (t) qe(e, t);
     }
-    function je(e, t) {
-        je = Object.setPrototypeOf || function e(t, r) {
+    function qe(e, t) {
+        qe = Object.setPrototypeOf || function e(t, r) {
             t.__proto__ = r;
             return t;
         };
-        return je(e, t);
+        return qe(e, t);
     }
-    function Te(e) {
-        var t = Ve();
+    function Ie(e) {
+        var t = Re();
         return function r() {
-            var n = Ae(e), a;
+            var n = Be(e), a;
             if (t) {
-                var o = Ae(this).constructor;
+                var o = Be(this).constructor;
                 a = Reflect.construct(n, arguments, o);
             } else {
                 a = n.apply(this, arguments);
             }
-            return Re(this, a);
+            return je(this, a);
         };
     }
-    function Re(e, t) {
-        if (t && (ye(t) === "object" || typeof t === "function")) {
+    function je(e, t) {
+        if (t && (he(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return Be(e);
+        return Te(e);
     }
-    function Be(e) {
+    function Te(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function Ve() {
+    function Re() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -621,13 +618,13 @@
             return false;
         }
     }
-    function Ae(e) {
-        Ae = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function Be(e) {
+        Be = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return Ae(e);
+        return Be(e);
     }
-    function De(e, t, r) {
+    function Ve(e, t, r) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: r,
@@ -641,8 +638,8 @@
         return e;
     }
     // The default palette in Prisma theme.
-        var Ne = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
-    var $e = k()((function(e) {
+        var Ae = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
+    var De = w()((function(e) {
         var t = [];
         for (var r = 1; r <= e.length * 4; r += 1) {
             var n = e[(r - 1) % e.length];
@@ -650,14 +647,14 @@
                 t.push(n);
             } else {
                 var a = 40 - 10 * (r / e.length);
-                t.push(E()(n).lighten(a).toString());
+                t.push(k()(n).lighten(a).toString());
             }
         }
         return t;
     }));
  // The tool palette in Prisma theme.
-        var He = [ "#ffffff", "#000000", null ];
-    var ze = {
+        var Ne = [ "#ffffff", "#000000", null ];
+    var $e = {
         append: o().bool,
         defaultValue: o().string,
         describedBy: o().string,
@@ -674,30 +671,30 @@
         splunkTheme: o().object,
         value: o().string
     };
-    var Ke = {
+    var He = {
         append: false,
         disabled: false,
         error: false,
         hideInput: false,
-        palette: $e(Ne),
+        palette: De(Ae),
         prepend: false
     };
     // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-        var Fe = function e(t) {
-        return (0, q.isValidHexColor)(t);
+        var ze = function e(t) {
+        return (0, O.isValidHexColor)(t);
     };
-    var Me = "N/A";
-    var Le = "n/a";
+    var Ke = "N/A";
+    var Fe = "n/a";
     /*
  * When the dropdown opens:
  * 1. If palette contains the color and the color is selected, the dropdown focus the color.
  * 2. If palette doesn't contain the color:
  *     1. If the current theme `family` is `prisma` the input receives focus.
  *     2. Otherwise the first color swatch receives focus.
- */    var Ue =  function(e) {
-        Ie(r, e);
-        var t = Te(r);
-        qe(r, null, [ {
+ */    var Me =  function(e) {
+        _e(r, e);
+        var t = Ie(r);
+        Oe(r, null, [ {
             key: "hasNull",
             // @docs-props-type ColorPropsBase
             value: function e(t) {
@@ -709,25 +706,25 @@
             key: "hasTransparent",
             value: function e(t) {
                 return t.some((function(e) {
-                    return e !== null && w()(e) === "transparent";
+                    return e !== null && g()(e) === "transparent";
                 }));
             }
         } ]);
         function r(e) {
             var a;
-            Oe(this, r);
+            Ee(this, r);
             a = t.call(this, e);
-            De(Be(a), "focusSwatch", void 0);
-            De(Be(a), "focusExpandButton", void 0);
-            De(Be(a), "controlledExternally", void 0);
-            De(Be(a), "dropdown", null);
-            De(Be(a), "handleSwatchClick", (function(e, t) {
+            Ve(Te(a), "focusSwatch", void 0);
+            Ve(Te(a), "focusExpandButton", void 0);
+            Ve(Te(a), "controlledExternally", void 0);
+            Ve(Te(a), "dropdown", null);
+            Ve(Te(a), "handleSwatchClick", (function(e, t) {
                 var r = t.value;
                 e.preventDefault();
                 var n = a.props, o = n.name, l = n.onChange;
                 var i = a.getValue();
                 var s = r !== i;
-                var u = r === null ? Me : r;
+                var u = r === null ? Ke : r;
                 if (!a.isControlled()) {
                     a.setState({
                         value: r
@@ -745,21 +742,21 @@
                 }
                 a.focus();
             }));
-            De(Be(a), "handlePaletteExpand", (function() {
+            Ve(Te(a), "handlePaletteExpand", (function() {
                 a.setState((function(e) {
                     return {
                         expanded: !e.expanded
                     };
                 }));
             }));
-            De(Be(a), "handleTextChange", (function(e, t) {
+            Ve(Te(a), "handleTextChange", (function(e, t) {
                 var r = t.value;
                 a.setState({
                     displayValue: r
                 });
             }));
-            De(Be(a), "handleTextKeyDown", (function(e) {
-                if ((0, j.keycode)(e.nativeEvent) === "enter") {
+            Ve(Te(a), "handleTextKeyDown", (function(e) {
+                if ((0, q.keycode)(e.nativeEvent) === "enter") {
                     e.preventDefault();
                     a.handleRequestClose({
                         reason: "enterKey"
@@ -767,23 +764,23 @@
                     a.focus();
                 }
             }));
-            De(Be(a), "handleButtonClick", (function(e) {
+            Ve(Te(a), "handleButtonClick", (function(e) {
                 e.preventDefault();
                 a.handleRequestClose({
                     reason: "buttonClick"
                 });
                 a.focus();
             }));
-            De(Be(a), "handleRequestClose", (function(e) {
+            Ve(Te(a), "handleRequestClose", (function(e) {
                 var t = e.reason;
                 var r = a.state.displayValue;
                 var n = a.state.value;
-                if (w()(r) === Le) {
-                    r = Me;
+                if (g()(r) === Fe) {
+                    r = Ke;
                     a.setState({
                         displayValue: r
                     });
-                } else if (w()(r) === "transparent") {
+                } else if (g()(r) === "transparent") {
                     r = "transparent";
                     a.setState({
                         displayValue: r
@@ -791,12 +788,12 @@
                 }
  // If the user types in the hexadecimal number without # in front,
                 // we add # automatically.
-                                if (r !== Me && w()(r) !== "transparent" && !g()(r, "#")) {
+                                if (r !== Ke && g()(r) !== "transparent" && !y()(r, "#")) {
                     r = "#".concat(r);
                     if (t === "escapeKey") {
                         if (n == null) {
                             a.setState({
-                                displayValue: Me
+                                displayValue: Ke
                             });
                         } else {
                             a.setState({
@@ -818,11 +815,11 @@
                     a.submitValue(r);
                 }
             }));
-            De(Be(a), "handleRequestOpen", (function() {
+            Ve(Te(a), "handleRequestOpen", (function() {
                 var e = a.props, t = e.splunkTheme, r = e.palette;
                 var n = t.isPrisma;
                 var o = a.getValue();
-                var l = o === null ? Me : o;
+                var l = o === null ? Ke : o;
                 a.setState({
                     displayValue: l,
                     open: true
@@ -831,24 +828,24 @@
                         a.focusSwatch.current.focus();
                     }
                 }));
-                var i = n ? y()(r, 15) : r;
-                var s = !p()(r.map((function(e) {
-                    return e && w()(e);
+                var i = n ? h()(r, 15) : r;
+                var s = !u()(r.map((function(e) {
+                    return e && g()(e);
                 })), o);
-                var u = s || p()(i.map((function(e) {
-                    return e && w()(e);
-                })), o) || p()(He, o);
-                if (u && !a.state.expanded) {
+                var c = s || u()(i.map((function(e) {
+                    return e && g()(e);
+                })), o) || u()(Ne, o);
+                if (c && !a.state.expanded) {
                     a.setState({
                         expanded: true
                     });
                 }
             }));
-            De(Be(a), "handleSystemColorPickerChange", i()((function(e) {
+            Ve(Te(a), "handleSystemColorPickerChange", (function(e) {
                 var t = a.getValue();
                 var r = e !== t;
                 var n = a.props.name;
-                var o = e === null ? Me : e;
+                var o = e === null ? Ke : e;
                 if (!a.isControlled()) {
                     a.setState({
                         value: e
@@ -864,19 +861,18 @@
                         name: n
                     });
                 }
-                a.focus();
-            }), 200));
+            }));
             a.focusSwatch =  n().createRef();
             a.focusExpandButton =  n().createRef();
-            a.controlledExternally = u()(e, "value");
+            a.controlledExternally = i()(e, "value");
  // value can be hexadecimal color, 'transparent' or null
-                        var o = a.controlledExternally ? (0, q.expandShortHandHex)(e.value) : (0, 
-            q.expandShortHandHex)(e.defaultValue);
+                        var o = a.controlledExternally ? (0, O.expandShortHandHex)(e.value) : (0, 
+            O.expandShortHandHex)(e.defaultValue);
             if (o !== null) {
-                o = w()(o);
+                o = g()(o);
             }
  // displayValue can be hexadecimal color or 'transparent' to represent 'transparent' or 'N/A' to represent null
-                        var l = o === null ? Me : o;
+                        var l = o === null ? Ke : o;
             a.state = {
                 displayValue: l,
                 open: false,
@@ -889,7 +885,7 @@
             }
             return a;
         }
-        qe(r, [ {
+        Oe(r, [ {
             key: "componentDidUpdate",
             value: function e(t) {
                 if (false) {}
@@ -903,9 +899,9 @@
             key: "getValue",
             value: function e() {
                 var t = function e(t) {
-                    return t === null ? null : w()(t);
+                    return t === null ? null : g()(t);
                 };
-                var r = (0, q.expandShortHandHex)(this.props.value);
+                var r = (0, O.expandShortHandHex)(this.props.value);
                 if (this.isControlled()) {
                     return t(r);
                 }
@@ -915,20 +911,20 @@
             key: "submitValue",
             value: function e(t) {
                 if (t) {
-                    var n = Fe(t);
-                    if (!n && t !== "transparent" && t !== Me) {
+                    var n = ze(t);
+                    if (!n && t !== "transparent" && t !== Ke) {
                         // eslint-disable-next-line no-console
                         console.warn('"'.concat(t, '" is not a valid hex color.'));
                     }
-                    if (n || r.hasTransparent(this.props.palette) && t === "transparent" || t === Me) {
-                        var a = (0, q.expandShortHandHex)(t);
+                    if (n || r.hasTransparent(this.props.palette) && t === "transparent" || t === Ke) {
+                        var a = (0, O.expandShortHandHex)(t);
                         this.setState({
                             displayValue: a
                         });
-                        var o = t !== (this.props.value && w()(this.props.value));
+                        var o = t !== (this.props.value && g()(this.props.value));
                         var l = this.props.name;
-                        var i = t === Me ? null : t;
-                        var s = (0, q.expandShortHandHex)(i);
+                        var i = t === Ke ? null : t;
+                        var s = (0, O.expandShortHandHex)(i);
                         if (t && !this.isControlled()) {
                             this.setState({
                                 value: s
@@ -964,31 +960,31 @@
                 var s = this.props.splunkTheme;
                 var u = this.state.displayValue;
                 var c = s.isPrisma;
-                var p = r.hasTransparent(this.props.palette) && w()(u) === "transparent";
-                var d = w()(u) === Le;
+                var p = r.hasTransparent(this.props.palette) && g()(u) === "transparent";
+                var d = g()(u) === Fe;
                 var f = u;
-                if (!g()(u, "#")) {
+                if (!y()(u, "#")) {
                     f = "#".concat(u);
                 }
                 f = p ? "transparent" : f;
                 f = d ? null : f;
                 
-                return n().createElement(ee, {
+                return n().createElement(Y, {
                     $inDropdown: i
-                },  n().createElement(te, {
+                },  n().createElement(Z, {
                     $inDropdown: i,
                     append: a,
                     autoCapitalize: "off",
                     autoComplete: "off",
                     autoCorrect: "off",
                     spellCheck: false,
-                    "aria-label": (0, I._)("Hexadecimal color value"),
+                    "aria-label": (0, _._)("Hexadecimal color value"),
                     prepend: o,
                     inline: l,
                     onKeyDown: this.handleTextKeyDown,
                     onChange: this.handleTextChange,
                     value: u
-                }), !c &&  n().createElement(Z, {
+                }), !c &&  n().createElement(J, {
                     "data-test": "textbox-swatch",
                     onClick: this.handleButtonClick,
                     value: f,
@@ -1006,7 +1002,7 @@
                 var l = this.state.expanded;
                 var i = a.isPrisma;
                 
-                return n().createElement(me, {
+                return n().createElement(ve, {
                     palette: o,
                     value: this.getValue(),
                     swatchToFocusRef: this.focusSwatch,
@@ -1036,27 +1032,27 @@
             key: "render",
             value: function e() {
                 var t = this;
-                var a = this.props, o = a.append, l = a.disabled, i = a.describedBy, s = a.elementRef, u = a.error, c = a.hideInput, p = a.labelledBy, d = a.name, v = a.prepend, m = a.splunkTheme, y = Ee(a, [ "append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme" ]);
+                var a = this.props, o = a.append, l = a.disabled, i = a.describedBy, s = a.elementRef, u = a.error, c = a.hideInput, d = a.labelledBy, v = a.name, h = a.prepend, m = a.splunkTheme, y = ke(a, [ "append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme" ]);
                 var b = m.isPrisma;
                 var g = this.getValue();
                 var x = this.state.displayValue;
-                var w =  n().createElement(re, be({
+                var w =  n().createElement(ee, me({
                     append: b && !c ? true : o,
                     "data-test": "color",
                     "data-test-value": x,
                     "aria-describedby": i,
-                    "aria-labelledby": p,
+                    "aria-labelledby": d,
                     "aria-invalid": u || undefined,
                     disabled: l,
                     error: u,
                     elementRef: s,
-                    name: d,
-                    prepend: v,
+                    name: v,
+                    prepend: h,
                     value: g
-                }, h()(y, [].concat(ge(f()(r.propTypes)), [ // TS: trick omit
+                }, f()(y, [].concat(ye(p()(r.propTypes)), [ // TS: trick omit
                 "onChange" ]))));
                 
-                return n().createElement(Y, null,  n().createElement(O(), {
+                return n().createElement(G, null,  n().createElement(E(), {
                     closeReasons: [ "clickAway", "escapeKey", "offScreen", "toggleClick" ],
                     onRequestClose: this.handleRequestClose,
                     onRequestOpen: this.handleRequestOpen,
@@ -1077,12 +1073,12 @@
         } ]);
         return r;
     }(r.Component);
-    De(Ue, "propTypes", ze);
-    De(Ue, "defaultProps", Ke);
-    var We = (0, _.withSplunkTheme)(Ue);
-    We.propTypes = Ue.propTypes;
+    Ve(Me, "propTypes", $e);
+    Ve(Me, "defaultProps", He);
+    var Le = (0, P.withSplunkTheme)(Me);
+    Le.propTypes = Me.propTypes;
     // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-    /* harmony default export */    const Qe = We;
+    /* harmony default export */    const Ue = Le;
     // CONCATENATED MODULE: ./src/Color/index.ts
     module.exports = t;
     /******/})();