@splunk/react-ui 4.21.1 → 4.22.0

package/Color.js

@@ -61,9 +61,9 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ Le,
-        defaultPalette: () => /* reexport */ Ve,
-        isValidHEX: () => /* reexport */ He
+        default: () => /* reexport */ Qe,
+        defaultPalette: () => /* reexport */ Ne,
+        isValidHEX: () => /* reexport */ Fe
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -78,8 +78,8 @@
     const s = require("lodash/has");
     var u =  e.n(s);
     // CONCATENATED MODULE: external "lodash/includes"
-    const p = require("lodash/includes");
-    var c =  e.n(p);
+    const c = require("lodash/includes");
+    var p =  e.n(c);
     // CONCATENATED MODULE: external "lodash/keys"
     const d = require("lodash/keys");
     var f =  e.n(d);
@@ -87,8 +87,8 @@
     const v = require("lodash/omit");
     var h =  e.n(v);
     // CONCATENATED MODULE: external "lodash/slice"
-    const y = require("lodash/slice");
-    var m =  e.n(y);
+    const m = require("lodash/slice");
+    var y =  e.n(m);
     // CONCATENATED MODULE: external "lodash/startsWith"
     const b = require("lodash/startsWith");
     var g =  e.n(b);
@@ -100,18 +100,18 @@
     var k =  e.n(S);
     // CONCATENATED MODULE: external "tinycolor2"
     const C = require("tinycolor2");
-    var P =  e.n(C);
+    var E =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const E = require("@splunk/react-ui/Dropdown");
-    var O =  e.n(E);
+    const P = require("@splunk/react-ui/Dropdown");
+    var O =  e.n(P);
     // CONCATENATED MODULE: external "@splunk/themes"
     const _ = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/ui-utils/color"
     const q = require("@splunk/ui-utils/color");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const j = require("@splunk/ui-utils/i18n");
+    const I = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const I = require("@splunk/ui-utils/keyboard");
+    const j = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
     const T = require("styled-components");
     var R =  e.n(T);
@@ -119,11 +119,11 @@
     const B = require("@splunk/react-ui/Text");
     var V =  e.n(B);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const N = require("@splunk/react-ui/ScreenReaderContent");
-    var A =  e.n(N);
+    const A = require("@splunk/react-ui/ScreenReaderContent");
+    var D =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-    const D = require("@splunk/react-icons/Checkmark");
-    var $ =  e.n(D);
+    const N = require("@splunk/react-icons/Checkmark");
+    var $ =  e.n(N);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const H = require("@splunk/react-ui/Clickable");
     var z =  e.n(H);
@@ -171,7 +171,7 @@
     }), _.variables.focusColor, _.variables.focusShadow, (0, _.pick)({
         enterprise: {
             comfortable: (0, T.css)([ "width:32px;height:32px;" ]),
-            compact: (0, T.css)([ "width:28px;height:28px;" ])
+            compact: (0, T.css)([ "width:24px;height:24px;" ])
         },
         prisma: (0, T.css)([ "width:24px;height:24px;" ])
     }), (function(e) {
@@ -192,8 +192,8 @@
         return t && (0, T.css)([ "display:flex;align-items:center;justify-content:center;" ]);
     }));
     // CONCATENATED MODULE: ./src/Color/Swatch.tsx
-    function Q() {
-        Q = Object.assign || function(e) {
+    function U() {
+        U = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -204,11 +204,11 @@
             }
             return e;
         };
-        return Q.apply(this, arguments);
+        return U.apply(this, arguments);
     }
-    function U(e, t) {
+    function W(e, t) {
         if (e == null) return {};
-        var r = W(e, t);
+        var r = Q(e, t);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -221,7 +221,7 @@
         }
         return r;
     }
-    function W(e, t) {
+    function Q(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -248,8 +248,8 @@
         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, p = e.showSelected, c = U(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
-        var d = s === null || s === undefined ? (0, j._)("No color") : s;
+        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;
  // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
         // Invalid values are converted to `undefined`
                 var f = s;
@@ -257,7 +257,7 @@
             f = undefined;
         }
         
-        return n().createElement(L, Q({
+        return n().createElement(L, U({
             onClick: function e(t) {
                 return l === null || l === void 0 ? void 0 : l(t, {
                     value: s
@@ -269,13 +269,13 @@
             $prepend: i,
             $hasError: o,
             $noBorder: u,
-            $showSelected: p,
+            $showSelected: c,
             "data-test": "swatch",
             "data-test-value": s
-        }, c), p &&  n().createElement(M, {
-            "aria-label": (0, j._)("Selected"),
+        }, p), c &&  n().createElement(M, {
+            "aria-label": (0, I._)("Selected"),
             role: "presentation"
-        }),  n().createElement(A(), null, d));
+        }),  n().createElement(D(), null, d));
     }));
     G.propTypes = X;
     /* harmony default export */    const J = G;
@@ -284,9 +284,15 @@
         displayName: "ColorStyles__StyledColor",
         componentId: "jxrost-0"
     })([ "", ";flex-direction:row;" ], _.mixins.reset("flex"));
-    var Z = R().div.withConfig({
-        displayName: "ColorStyles__StyledInput",
+    var Z = R()(J).withConfig({
+        displayName: "ColorStyles__StyledInputSwatch",
         componentId: "jxrost-1"
+    })([ "", "" ], (0, _.pick)({
+        compact: (0, T.css)([ "width:28px;height:28px;" ])
+    }));
+    var ee = R().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) {
@@ -294,16 +300,16 @@
             return t ? (0, T.css)([ "width:80px;" ]) : (0, T.css)([ "flex:0 1 auto;min-width:0;" ]);
         }))
     }));
-    var ee = R()(V()).withConfig({
+    var te = R()(V()).withConfig({
         displayName: "ColorStyles__StyledInputText",
-        componentId: "jxrost-2"
+        componentId: "jxrost-3"
     })([ "", "" ], (function(e) {
         var t = e.$inDropdown;
         return t && (0, T.css)([ "font-size:12px;" ]);
     }));
-    var te = R()(J).withConfig({
+    var re = R()(J).withConfig({
         displayName: "ColorStyles__StyledToggleSwatch",
-        componentId: "jxrost-3"
+        componentId: "jxrost-4"
     })([ "", "" ], (0, _.pick)({
         prisma: {
             comfortable: (0, T.css)([ "width:40px;height:40px;" ]),
@@ -315,157 +321,165 @@
         }
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
-    const re = require("@splunk/react-icons/ChevronDown");
-    var ne =  e.n(re);
+    const ne = require("@splunk/react-icons/ChevronDown");
+    var ae =  e.n(ne);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+    const oe = require("@splunk/react-ui/Divider");
+    var le =  e.n(oe);
     // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-    var ae = R().div.withConfig({
+    var ie = R().div.withConfig({
         displayName: "PaletteStyles__StyledPalette",
         componentId: "qgv9v9-0"
-    })([ "width:", ";padding:", ";", "" ], (0, _.pick)({
-        enterprise: "180px",
-        prisma: "224px"
-    }), (0, _.pick)({
-        enterprise: _.variables.spacingHalf,
-        prisma: "8px"
-    }), (0, _.pick)({
-        prisma: (0, T.css)([ "display:flex;flex-direction:column;border-radius:2px;" ])
-    }));
-    var oe = R().ul.withConfig({
+    })([ "width:220px;padding:", ";" ], _.variables.spacingSmall);
+    var se = R().ul.withConfig({
         displayName: "PaletteStyles__StyledSwatches",
         componentId: "qgv9v9-1"
-    })([ "", ";margin-bottom:", ";margin-right:", ";", "" ], _.mixins.reset("block"), (0, 
-    _.pick)({
-        enterprise: "6px"
-    }), (0, _.pick)({
-        enterprise: "-6px"
-    }), (0, _.pick)({
-        prisma: (0, T.css)([ "position:relative;" ])
-    }));
-    var le = R().li.withConfig({
+    })([ "", ";margin-bottom:", ";" ], _.mixins.reset("block"), _.variables.spacingQuarter);
+    var ue = R().li.withConfig({
         displayName: "PaletteStyles__StyledSwatch",
         componentId: "qgv9v9-2"
-    })([ "", ";margin-right:", ";margin-bottom:", ";", "" ], _.mixins.reset("inline-block"), (0, 
+    })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], _.mixins.reset("inline-block"), (0, 
     _.pick)({
-        enterprise: _.variables.spacingQuarter,
-        prisma: "4px"
-    }), (0, _.pick)({
-        enterprise: _.variables.spacingQuarter,
-        prisma: "4px"
-    }), (0, _.pick)({
-        prisma: (0, T.css)([ "vertical-align:top;&:nth-child(8n){margin-right:0;}" ])
+        enterprise: {
+            compact: (0, T.css)([ "&:nth-child(8n){margin-right:0;}" ])
+        },
+        prisma: (0, T.css)([ "&:nth-child(8n){margin-right:0;}" ])
     }));
-    var ie = R().div.withConfig({
-        displayName: "PaletteStyles__StyledToolBarPrisma",
+    var ce = R().div.withConfig({
+        displayName: "PaletteStyles__StyledToolBar",
         componentId: "qgv9v9-3"
-    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:12px;gap:4px;" ]);
-    var se = R()(z()).withConfig({
+    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";margin-bottom:", ";gap:4px;" ], _.variables.spacingSmall, _.variables.spacingHalf);
+    var pe = R()(z()).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) {
         var t = e.$expanded;
         return t && (0, T.css)([ "transform:rotate(180deg);" ]);
     }));
-    var ue = R().div.withConfig({
+    var de = R().div.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
         componentId: "qgv9v9-5"
     })([ "position:relative;" ]);
-    var pe = R().input.withConfig({
+    var fe = R().input.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPicker",
         componentId: "qgv9v9-6"
-    })([ "box-sizing:border-box;height:24px;width:24px;border:none;border-radius:2px;outline:none;appearance:none;padding:12px;margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;background-position:-6px -6px;background-size:36px 36px;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], _.variables.focusShadow);
-    var ce = R()($()).withConfig({
+    })([ "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)({
+        enterprise: {
+            comfortable: (0, T.css)([ "width:32px;height:32px;" ]),
+            compact: (0, T.css)([ "width:24px;height:24px;" ])
+        },
+        prisma: (0, T.css)([ "width:24px;height:24px;" ])
+    }), (0, _.pick)({
+        enterprise: {
+            light: (0, T.css)([ "1px solid ", "" ], _.variables.gray60),
+            dark: _.variables.border
+        },
+        prisma: "none"
+    }), (0, _.pick)({
+        prisma: (0, T.css)([ "border-radius:2px;" ])
+    }), (0, _.pick)({
+        enterprise: {
+            comfortable: (0, T.css)([ "padding:1px 14px;" ])
+        }
+    }), _.variables.focusShadow);
+    var ve = R()($()).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 de(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, p = e.renderInput;
+    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 = c()(r.map((function(e) {
+        var h = p()(r.map((function(e) {
             return e && w()(e);
         })), a);
-        var y = r.map((function(e, t) {
+        var m = r.map((function(e, t) {
             var r = e === null ? null : w()(e);
             var i = r === a;
             var s = !h && t === 0 || h && i;
             
-            return n().createElement(le, {
+            return n().createElement(ue, {
                 key: r || "null"
             },  n().createElement(J, {
                 value: r,
                 ref: s ? o : null,
                 onClick: l,
                 noBorder: f,
-                showSelected: f && i
+                showSelected: i
             }));
         }));
-        if (f) {
-            var b = !h && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
-            var g = y.length === 8 ? 7 : 15;
-            var x = m()(y, 0, g);
-            var S = m()(y, g);
+        var b = function e() {
+            var t = !h && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
             
-            return n().createElement(ae, null,  n().createElement("div", {
-                style: {
-                    position: "relative"
-                }
-            },  n().createElement(oe, null, x, t && S), t &&  n().createElement(ie, {
+            return n().createElement(ce, {
                 "data-test": "tool-bar"
-            },  n().createElement(_.SplunkThemeProvider, {
+            }, f &&  n().createElement(_.SplunkThemeProvider, {
                 density: "compact"
-            }, p && p()),  n().createElement(J, {
+            }, c && c()),  n().createElement(J, {
                 value: null,
                 ref: a === null ? o : null,
                 onClick: l,
-                noBorder: !v,
+                noBorder: f && !v,
                 showSelected: a === null
             }),  n().createElement(J, {
                 value: "#ffffff",
                 ref: a === "#ffffff" ? o : null,
                 onClick: l,
-                noBorder: !v,
+                noBorder: f && !v,
                 showSelected: a === "#ffffff"
             }),  n().createElement(J, {
                 value: "#000000",
                 ref: a === "#000000" ? o : null,
                 onClick: l,
-                noBorder: true,
+                noBorder: f,
                 showSelected: a === "#000000"
-            }),  n().createElement(ue, null,  n().createElement(pe, {
+            }),  n().createElement(de, null,  n().createElement(fe, {
                 type: "color",
                 value: a === null ? "" : a,
                 onChange: u,
-                ref: b ? o : null
-            }), b &&  n().createElement(ce, {
-                "aria-label": (0, j._)("Selected"),
+                ref: t ? o : null
+            }), t &&  n().createElement(ve, {
+                "aria-label": (0, I._)("Selected"),
                 role: "presentation"
-            }))),  n().createElement(se, {
+            })));
+        };
+        var g = m.length === 8 ? 7 : 15;
+        var x = y()(m, 0, g);
+        var S = y()(m, g);
+        if (f) {
+            
+            return n().createElement(ie, null,  n().createElement("div", {
+                style: {
+                    position: "relative"
+                }
+            },  n().createElement(se, null, x, t && S), t && b(),  n().createElement(pe, {
                 ref: i,
                 $expanded: t,
                 onClick: s,
                 "data-test": "expand-button"
-            },  n().createElement(ne(), null))));
+            },  n().createElement(ae(), null))));
         }
         
-        return n().createElement(ae, null,  n().createElement(oe, null, y), p && p());
+        return n().createElement(ie, null,  n().createElement(se, null, m),  n().createElement(le(), null), b(), c && c());
     }
-    /* harmony default export */    const fe = de;
+    /* harmony default export */    const me = he;
     // CONCATENATED MODULE: ./src/Color/Color.tsx
-    function ve(e) {
+    function ye(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            ve = function e(t) {
+            ye = function e(t) {
                 return typeof t;
             };
         } else {
-            ve = function e(t) {
+            ye = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return ve(e);
+        return ye(e);
     }
-    function he() {
-        he = Object.assign || function(e) {
+    function be() {
+        be = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -476,38 +490,38 @@
             }
             return e;
         };
-        return he.apply(this, arguments);
+        return be.apply(this, arguments);
     }
-    function ye(e) {
-        return xe(e) || ge(e) || be(e) || me();
+    function ge(e) {
+        return ke(e) || Se(e) || we(e) || xe();
     }
-    function me() {
+    function xe() {
         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 be(e, t) {
+    function we(e, t) {
         if (!e) return;
-        if (typeof e === "string") return we(e, t);
+        if (typeof e === "string") return Ce(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 we(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return Ce(e, t);
     }
-    function ge(e) {
+    function Se(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function xe(e) {
-        if (Array.isArray(e)) return we(e);
+    function ke(e) {
+        if (Array.isArray(e)) return Ce(e);
     }
-    function we(e, t) {
+    function Ce(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 Se(e, t) {
+    function Ee(e, t) {
         if (e == null) return {};
-        var r = ke(e, t);
+        var r = Pe(e, t);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -520,7 +534,7 @@
         }
         return r;
     }
-    function ke(e, t) {
+    function Pe(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -532,12 +546,12 @@
         }
         return r;
     }
-    function Ce(e, t) {
+    function Oe(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function Pe(e, t) {
+    function _e(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -546,12 +560,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function Ee(e, t, r) {
-        if (t) Pe(e.prototype, t);
-        if (r) Pe(e, r);
+    function qe(e, t, r) {
+        if (t) _e(e.prototype, t);
+        if (r) _e(e, r);
         return e;
     }
-    function Oe(e, t) {
+    function Ie(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -562,41 +576,41 @@
                 configurable: true
             }
         });
-        if (t) _e(e, t);
+        if (t) je(e, t);
     }
-    function _e(e, t) {
-        _e = Object.setPrototypeOf || function e(t, r) {
+    function je(e, t) {
+        je = Object.setPrototypeOf || function e(t, r) {
             t.__proto__ = r;
             return t;
         };
-        return _e(e, t);
+        return je(e, t);
     }
-    function qe(e) {
-        var t = Te();
+    function Te(e) {
+        var t = Ve();
         return function r() {
-            var n = Re(e), a;
+            var n = Ae(e), a;
             if (t) {
-                var o = Re(this).constructor;
+                var o = Ae(this).constructor;
                 a = Reflect.construct(n, arguments, o);
             } else {
                 a = n.apply(this, arguments);
             }
-            return je(this, a);
+            return Re(this, a);
         };
     }
-    function je(e, t) {
-        if (t && (ve(t) === "object" || typeof t === "function")) {
+    function Re(e, t) {
+        if (t && (ye(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return Ie(e);
+        return Be(e);
     }
-    function Ie(e) {
+    function Be(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function Te() {
+    function Ve() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -607,13 +621,13 @@
             return false;
         }
     }
-    function Re(e) {
-        Re = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function Ae(e) {
+        Ae = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return Re(e);
+        return Ae(e);
     }
-    function Be(e, t, r) {
+    function De(e, t, r) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: r,
@@ -627,8 +641,8 @@
         return e;
     }
     // The default palette in Prisma theme.
-        var Ve = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
-    var Ne = k()((function(e) {
+        var Ne = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
+    var $e = k()((function(e) {
         var t = [];
         for (var r = 1; r <= e.length * 4; r += 1) {
             var n = e[(r - 1) % e.length];
@@ -636,14 +650,14 @@
                 t.push(n);
             } else {
                 var a = 40 - 10 * (r / e.length);
-                t.push(P()(n).lighten(a).toString());
+                t.push(E()(n).lighten(a).toString());
             }
         }
         return t;
     }));
  // The tool palette in Prisma theme.
-        var Ae = [ "#ffffff", "#000000", null ];
-    var De = {
+        var He = [ "#ffffff", "#000000", null ];
+    var ze = {
         append: o().bool,
         defaultValue: o().string,
         describedBy: o().string,
@@ -660,30 +674,30 @@
         splunkTheme: o().object,
         value: o().string
     };
-    var $e = {
+    var Ke = {
         append: false,
         disabled: false,
         error: false,
         hideInput: false,
-        palette: Ne(Ve),
+        palette: $e(Ne),
         prepend: false
     };
     // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-        var He = function e(t) {
+        var Fe = function e(t) {
         return (0, q.isValidHexColor)(t);
     };
-    var ze = "N/A";
-    var Ke = "n/a";
+    var Me = "N/A";
+    var Le = "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 Fe =  function(e) {
-        Oe(r, e);
-        var t = qe(r);
-        Ee(r, null, [ {
+ */    var Ue =  function(e) {
+        Ie(r, e);
+        var t = Te(r);
+        qe(r, null, [ {
             key: "hasNull",
             // @docs-props-type ColorPropsBase
             value: function e(t) {
@@ -701,19 +715,19 @@
         } ]);
         function r(e) {
             var a;
-            Ce(this, r);
+            Oe(this, r);
             a = t.call(this, e);
-            Be(Ie(a), "focusSwatch", void 0);
-            Be(Ie(a), "focusExpandButton", void 0);
-            Be(Ie(a), "controlledExternally", void 0);
-            Be(Ie(a), "dropdown", null);
-            Be(Ie(a), "handleSwatchClick", (function(e, t) {
+            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) {
                 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 ? ze : r;
+                var u = r === null ? Me : r;
                 if (!a.isControlled()) {
                     a.setState({
                         value: r
@@ -731,21 +745,21 @@
                 }
                 a.focus();
             }));
-            Be(Ie(a), "handlePaletteExpand", (function() {
+            De(Be(a), "handlePaletteExpand", (function() {
                 a.setState((function(e) {
                     return {
                         expanded: !e.expanded
                     };
                 }));
             }));
-            Be(Ie(a), "handleTextChange", (function(e, t) {
+            De(Be(a), "handleTextChange", (function(e, t) {
                 var r = t.value;
                 a.setState({
                     displayValue: r
                 });
             }));
-            Be(Ie(a), "handleTextKeyDown", (function(e) {
-                if ((0, I.keycode)(e.nativeEvent) === "enter") {
+            De(Be(a), "handleTextKeyDown", (function(e) {
+                if ((0, j.keycode)(e.nativeEvent) === "enter") {
                     e.preventDefault();
                     a.handleRequestClose({
                         reason: "enterKey"
@@ -753,19 +767,19 @@
                     a.focus();
                 }
             }));
-            Be(Ie(a), "handleButtonClick", (function(e) {
+            De(Be(a), "handleButtonClick", (function(e) {
                 e.preventDefault();
                 a.handleRequestClose({
                     reason: "buttonClick"
                 });
                 a.focus();
             }));
-            Be(Ie(a), "handleRequestClose", (function(e) {
+            De(Be(a), "handleRequestClose", (function(e) {
                 var t = e.reason;
                 var r = a.state.displayValue;
                 var n = a.state.value;
-                if (w()(r) === Ke) {
-                    r = ze;
+                if (w()(r) === Le) {
+                    r = Me;
                     a.setState({
                         displayValue: r
                     });
@@ -777,12 +791,12 @@
                 }
  // If the user types in the hexadecimal number without # in front,
                 // we add # automatically.
-                                if (r !== ze && w()(r) !== "transparent" && !g()(r, "#")) {
+                                if (r !== Me && w()(r) !== "transparent" && !g()(r, "#")) {
                     r = "#".concat(r);
                     if (t === "escapeKey") {
                         if (n == null) {
                             a.setState({
-                                displayValue: ze
+                                displayValue: Me
                             });
                         } else {
                             a.setState({
@@ -804,11 +818,11 @@
                     a.submitValue(r);
                 }
             }));
-            Be(Ie(a), "handleRequestOpen", (function() {
+            De(Be(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 ? ze : o;
+                var l = o === null ? Me : o;
                 a.setState({
                     displayValue: l,
                     open: true
@@ -817,24 +831,24 @@
                         a.focusSwatch.current.focus();
                     }
                 }));
-                var i = n ? m()(r, 15) : r;
-                var s = n && !c()(r.map((function(e) {
+                var i = n ? y()(r, 15) : r;
+                var s = !p()(r.map((function(e) {
                     return e && w()(e);
                 })), o);
-                var u = s || c()(i.map((function(e) {
+                var u = s || p()(i.map((function(e) {
                     return e && w()(e);
-                })), o) || c()(Ae, o);
+                })), o) || p()(He, o);
                 if (u && !a.state.expanded) {
                     a.setState({
                         expanded: true
                     });
                 }
             }));
-            Be(Ie(a), "handleSystemColorPickerChange", i()((function(e) {
+            De(Be(a), "handleSystemColorPickerChange", i()((function(e) {
                 var t = a.getValue();
                 var r = e !== t;
                 var n = a.props.name;
-                var o = e === null ? ze : e;
+                var o = e === null ? Me : e;
                 if (!a.isControlled()) {
                     a.setState({
                         value: e
@@ -862,7 +876,7 @@
                 o = w()(o);
             }
  // displayValue can be hexadecimal color or 'transparent' to represent 'transparent' or 'N/A' to represent null
-                        var l = o === null ? ze : o;
+                        var l = o === null ? Me : o;
             a.state = {
                 displayValue: l,
                 open: false,
@@ -875,18 +889,12 @@
             }
             return a;
         }
-        Ee(r, [ {
+        qe(r, [ {
             key: "componentDidUpdate",
             value: function e(t) {
                 if (false) {}
                 if (false) {}
             }
-        }, {
-            key: "showNull",
-            value: function e() {
-                var t = this.props.splunkTheme.isPrisma;
-                return r.hasNull(this.props.palette) || t;
-            }
             /**
      * Standardizes the current value of the Color:
      * returns based on the input being controlled or uncontrolled
@@ -898,9 +906,6 @@
                     return t === null ? null : w()(t);
                 };
                 var r = (0, q.expandShortHandHex)(this.props.value);
-                if (this.props.value === null && !this.showNull()) {
-                    return undefined;
-                }
                 if (this.isControlled()) {
                     return t(r);
                 }
@@ -909,33 +914,31 @@
         }, {
             key: "submitValue",
             value: function e(t) {
-                var n = this.props.splunkTheme;
-                var a = n.isPrisma;
                 if (t) {
-                    var o = He(t);
-                    if (!o && t !== "transparent" && t !== ze) {
+                    var n = Fe(t);
+                    if (!n && t !== "transparent" && t !== Me) {
                         // eslint-disable-next-line no-console
                         console.warn('"'.concat(t, '" is not a valid hex color.'));
                     }
-                    if (o || r.hasTransparent(this.props.palette) && t === "transparent" || (r.hasNull(this.props.palette) || a) && t === ze) {
-                        var l = (0, q.expandShortHandHex)(t);
+                    if (n || r.hasTransparent(this.props.palette) && t === "transparent" || t === Me) {
+                        var a = (0, q.expandShortHandHex)(t);
                         this.setState({
-                            displayValue: l
+                            displayValue: a
                         });
-                        var i = t !== (this.props.value && w()(this.props.value));
-                        var s = this.props.name;
-                        var u = t === ze ? null : t;
-                        var p = (0, q.expandShortHandHex)(u);
+                        var o = t !== (this.props.value && w()(this.props.value));
+                        var l = this.props.name;
+                        var i = t === Me ? null : t;
+                        var s = (0, q.expandShortHandHex)(i);
                         if (t && !this.isControlled()) {
                             this.setState({
-                                value: p
+                                value: s
                             });
                         }
-                        if (i) {
-                            var c, d;
-                            (c = (d = this.props).onChange) === null || c === void 0 ? void 0 : c.call(d, {
-                                value: p,
-                                name: s
+                        if (o) {
+                            var u, c;
+                            (u = (c = this.props).onChange) === null || u === void 0 ? void 0 : u.call(c, {
+                                value: s,
+                                name: l
                             });
                         }
                     }
@@ -960,32 +963,32 @@
                 var a = t.textAppend, o = t.textPrepend, l = t.textInline, i = t.inDropdown;
                 var s = this.props.splunkTheme;
                 var u = this.state.displayValue;
-                var p = s.isPrisma;
-                var c = r.hasTransparent(this.props.palette) && w()(u) === "transparent";
-                var d = this.showNull() && w()(u) === Ke;
+                var c = s.isPrisma;
+                var p = r.hasTransparent(this.props.palette) && w()(u) === "transparent";
+                var d = w()(u) === Le;
                 var f = u;
                 if (!g()(u, "#")) {
                     f = "#".concat(u);
                 }
-                f = c ? "transparent" : f;
+                f = p ? "transparent" : f;
                 f = d ? null : f;
                 
-                return n().createElement(Z, {
+                return n().createElement(ee, {
                     $inDropdown: i
-                },  n().createElement(ee, {
+                },  n().createElement(te, {
                     $inDropdown: i,
                     append: a,
                     autoCapitalize: "off",
                     autoComplete: "off",
                     autoCorrect: "off",
                     spellCheck: false,
-                    "aria-label": (0, j._)("Hexadecimal color value"),
+                    "aria-label": (0, I._)("Hexadecimal color value"),
                     prepend: o,
                     inline: l,
                     onKeyDown: this.handleTextKeyDown,
                     onChange: this.handleTextChange,
                     value: u
-                }), !p &&  n().createElement(J, {
+                }), !c &&  n().createElement(Z, {
                     "data-test": "textbox-swatch",
                     onClick: this.handleButtonClick,
                     value: f,
@@ -1003,7 +1006,7 @@
                 var l = this.state.expanded;
                 var i = a.isPrisma;
                 
-                return n().createElement(fe, {
+                return n().createElement(me, {
                     palette: o,
                     value: this.getValue(),
                     swatchToFocusRef: this.focusSwatch,
@@ -1033,16 +1036,16 @@
             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, p = a.hideInput, c = a.labelledBy, d = a.name, v = a.prepend, y = a.splunkTheme, m = Se(a, [ "append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme" ]);
-                var b = y.isPrisma;
+                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 b = m.isPrisma;
                 var g = this.getValue();
                 var x = this.state.displayValue;
-                var w =  n().createElement(te, he({
-                    append: b && !p ? true : o,
+                var w =  n().createElement(re, be({
+                    append: b && !c ? true : o,
                     "data-test": "color",
                     "data-test-value": x,
                     "aria-describedby": i,
-                    "aria-labelledby": c,
+                    "aria-labelledby": p,
                     "aria-invalid": u || undefined,
                     disabled: l,
                     error: u,
@@ -1050,7 +1053,7 @@
                     name: d,
                     prepend: v,
                     value: g
-                }, h()(m, [].concat(ye(f()(r.propTypes)), [ // TS: trick omit
+                }, h()(y, [].concat(ge(f()(r.propTypes)), [ // TS: trick omit
                 "onChange" ]))));
                 
                 return n().createElement(Y, null,  n().createElement(O(), {
@@ -1064,7 +1067,7 @@
                     retainFocus: true,
                     takeFocus: false,
                     toggle: w
-                }, this.renderPalette()), b && !p && this.renderInput({
+                }, this.renderPalette()), b && !c && this.renderInput({
                     textAppend: false,
                     textPrepend: true,
                     textInline: true,
@@ -1074,12 +1077,12 @@
         } ]);
         return r;
     }(r.Component);
-    Be(Fe, "propTypes", De);
-    Be(Fe, "defaultProps", $e);
-    var Me = (0, _.withSplunkTheme)(Fe);
-    Me.propTypes = Fe.propTypes;
+    De(Ue, "propTypes", ze);
+    De(Ue, "defaultProps", Ke);
+    var We = (0, _.withSplunkTheme)(Ue);
+    We.propTypes = Ue.propTypes;
     // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-    /* harmony default export */    const Le = Me;
+    /* harmony default export */    const Qe = We;
     // CONCATENATED MODULE: ./src/Color/index.ts
     module.exports = t;
     /******/})();