@splunk/react-ui 4.38.0 → 4.39.0

package/Color.js

@@ -6,7 +6,7 @@
         /***/ (e, t, r) => {
             // EXPORTS
             r.d(t, {
-                default: () => /* reexport */ y
+                default: () => /* reexport */ b
             });
             // EXTERNAL MODULE: external "react"
                         var n = r(9497);
@@ -18,51 +18,43 @@
                         var i = r(232);
             var s =  r.n(i);
             // EXTERNAL MODULE: external "@splunk/themes"
-                        var c = r(3563);
+                        var u = r(3563);
             // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
-            var u = s().span.withConfig({
+            var c = s().span.withConfig({
                 displayName: "ScreenReaderContentStyles__Styled",
                 componentId: "sc-1lnohwp-0"
-            })([ "", ";" ], c.mixins.screenReaderContent());
+            })([ "", ";" ], u.mixins.screenReaderContent());
             // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContent.tsx
             function p() {
-                p = Object.assign || function(e) {
+                return p = Object.assign ? Object.assign.bind() : function(e) {
                     for (var t = 1; t < arguments.length; t++) {
                         var r = arguments[t];
                         for (var n in r) {
-                            if (Object.prototype.hasOwnProperty.call(r, n)) {
-                                e[n] = r[n];
-                            }
+                            ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                         }
                     }
                     return e;
-                };
-                return p.apply(this, arguments);
+                }, p.apply(null, arguments);
             }
             function d(e, t) {
-                if (e == null) return {};
-                var r = f(e, t);
-                var n, a;
+                if (null == e) return {};
+                var r, n, a = f(e, t);
                 if (Object.getOwnPropertySymbols) {
                     var o = Object.getOwnPropertySymbols(e);
-                    for (a = 0; a < o.length; a++) {
-                        n = o[a];
-                        if (t.indexOf(n) >= 0) continue;
-                        if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                        r[n] = e[n];
+                    for (n = 0; n < o.length; n++) {
+                        r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
                     }
                 }
-                return r;
+                return a;
             }
             function f(e, t) {
-                if (e == null) return {};
+                if (null == e) return {};
                 var r = {};
-                var n = Object.keys(e);
-                var a, o;
-                for (o = 0; o < n.length; o++) {
-                    a = n[o];
-                    if (t.indexOf(a) >= 0) continue;
-                    r[a] = e[a];
+                for (var n in e) {
+                    if ({}.hasOwnProperty.call(e, n)) {
+                        if (t.includes(n)) continue;
+                        r[n] = e[n];
+                    }
                 }
                 return r;
             }
@@ -77,13 +69,13 @@
                 var t = e.children, r = e.elementRef, n = d(e, [ "children", "elementRef" ]);
                 // @docs-props-type ScreenReaderContentPropsBase
                                 
-                return a().createElement(u, p({
+                return a().createElement(c, p({
                     "data-test": "screen-reader-content",
                     ref: r
                 }, n), t);
             }
             h.propTypes = v;
-            /* harmony default export */            const y = h;
+            /* harmony default export */            const b = h;
         } // CONCATENATED MODULE: ./src/ScreenReaderContent/index.ts
         /***/ ,
         /***/ 3563: 
@@ -188,9 +180,9 @@
         r.r(n);
         // EXPORTS
                 r.d(n, {
-            default: () => /* reexport */ Je,
-            defaultPalette: () => /* reexport */ He,
-            isValidHEX: () => /* reexport */ Le
+            default: () => /* reexport */ Ze,
+            defaultPalette: () => /* reexport */ Ke,
+            isValidHEX: () => /* reexport */ We
         });
         // EXTERNAL MODULE: external "react"
                 var e = r(9497);
@@ -203,10 +195,10 @@
         var i =  r.n(l);
         // CONCATENATED MODULE: external "lodash/includes"
         const s = require("lodash/includes");
-        var c =  r.n(s);
+        var u =  r.n(s);
         // CONCATENATED MODULE: external "lodash/keys"
-        const u = require("lodash/keys");
-        var p =  r.n(u);
+        const c = require("lodash/keys");
+        var p =  r.n(c);
         // CONCATENATED MODULE: external "lodash/omit"
         const d = require("lodash/omit");
         var f =  r.n(d);
@@ -214,39 +206,39 @@
         const v = require("lodash/slice");
         var h =  r.n(v);
         // CONCATENATED MODULE: external "lodash/startsWith"
-        const y = require("lodash/startsWith");
-        var m =  r.n(y);
+        const b = require("lodash/startsWith");
+        var m =  r.n(b);
         // CONCATENATED MODULE: external "lodash/toLower"
-        const b = require("lodash/toLower");
-        var g =  r.n(b);
+        const y = require("lodash/toLower");
+        var g =  r.n(y);
         // CONCATENATED MODULE: external "lodash/memoize"
         const x = require("lodash/memoize");
         var w =  r.n(x);
         // CONCATENATED MODULE: external "tinycolor2"
         const S = require("tinycolor2");
-        var k =  r.n(S);
+        var C =  r.n(S);
         // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-        const C = require("@splunk/react-ui/Dropdown");
-        var O =  r.n(C);
+        const k = require("@splunk/react-ui/Dropdown");
+        var P =  r.n(k);
         // EXTERNAL MODULE: external "@splunk/themes"
                 var E = r(3563);
         // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-        const P = 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");
         // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
         const _ = require("@splunk/ui-utils/keyboard");
         // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-        const j = require("@splunk/ui-utils/id");
+        const q = require("@splunk/ui-utils/id");
         // EXTERNAL MODULE: external "styled-components"
-                var q = r(232);
-        var R =  r.n(q);
+                var j = r(232);
+        var T =  r.n(j);
         // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-        const T = require("@splunk/react-ui/Text");
-        var B =  r.n(T);
+        const R = require("@splunk/react-ui/Text");
+        var B =  r.n(R);
         // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-        const V = require("@splunk/react-ui/ScreenReaderContent");
-        var D =  r.n(V);
+        const D = require("@splunk/react-ui/ScreenReaderContent");
+        var V =  r.n(D);
         // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
         const A = require("@splunk/react-icons/Checkmark");
         var N =  r.n(A);
@@ -258,16 +250,16 @@
             enterprise: E.variables.gray80,
             prisma: "rgba(0, 0, 0, 0.2)"
         });
-        var K = (0, q.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:", ";" ], z, z, z, z, z, z, (0, 
+        var K = (0, j.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:", ";" ], z, z, z, z, z, z, (0, 
         E.pick)({
             enterprise: "transparent",
             prisma: E.variables.white
         }));
-        var F = R()(N()).withConfig({
+        var F = T()(N()).withConfig({
             displayName: "SwatchStyles__StyledCheck",
             componentId: "sc-1wxunhq-0"
         })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
-        var M = R()(H()).withConfig({
+        var M = T()(H()).withConfig({
             displayName: "SwatchStyles__StyledClickable",
             componentId: "sc-1wxunhq-1"
         })([ "display:block;flex:0 0 auto;border:1px solid;border-color:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";", "}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], (0, 
@@ -278,87 +270,79 @@
             },
             prisma: E.variables.interactiveColorBorder
         }), (0, E.pick)({
-            prisma: (0, q.css)([ "border-radius:2px;" ])
+            prisma: (0, j.css)([ "border-radius:2px;" ])
         }), (function(e) {
             var t = e.$value;
-            return t === null && (0, q.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
+            return t === null && (0, j.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
             E.pick)({
                 enterprise: "#ed1e24",
                 prisma: E.variables.accentColorNegative
             }), (0, E.pick)({
-                prisma: (0, q.css)([ "background-color:", ";" ], E.variables.white)
+                prisma: (0, j.css)([ "background-color:", ";" ], E.variables.white)
             }));
         }), (function(e) {
             var t = e.$value;
             return t && (t === "transparent" ? K : "background-color: ".concat(t));
         }), (function(e) {
             var t = e.$noBorder;
-            return t && (0, q.css)([ "border:none;" ]);
+            return t && (0, j.css)([ "border:none;" ]);
         }), E.variables.focusColor, E.variables.focusShadow, (0, E.pick)({
             // Fixes focus shadow being cut off by input (SUI-6401)
-            enterprise: (0, q.css)([ "z-index:1;" ])
+            enterprise: (0, j.css)([ "z-index:1;" ])
         }), (0, E.pick)({
             enterprise: {
-                comfortable: (0, q.css)([ "width:32px;height:32px;" ]),
-                compact: (0, q.css)([ "width:24px;height:24px;" ])
+                comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+                compact: (0, j.css)([ "width:24px;height:24px;" ])
             },
-            prisma: (0, q.css)([ "width:24px;height:24px;" ])
+            prisma: (0, j.css)([ "width:24px;height:24px;" ])
         }), (function(e) {
             var t = e.$prepend;
-            return t && (0, q.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+            return t && (0, j.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
         }), (function(e) {
             var t = e.$append;
-            return t && (0, q.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+            return t && (0, j.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, q.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
+            return t && (0, j.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
             E.pick)({
                 enterprise: E.variables.errorColor,
                 prisma: E.variables.accentColorNegative
             }));
         }), (function(e) {
             var t = e.$showSelected;
-            return t && (0, q.css)([ "display:flex;align-items:center;justify-content:center;" ]);
+            return t && (0, j.css)([ "display:flex;align-items:center;justify-content:center;" ]);
         }));
         // CONCATENATED MODULE: ./src/Color/Swatch.tsx
         function L() {
-            L = Object.assign || function(e) {
+            return L = Object.assign ? Object.assign.bind() : function(e) {
                 for (var t = 1; t < arguments.length; t++) {
                     var r = arguments[t];
                     for (var n in r) {
-                        if (Object.prototype.hasOwnProperty.call(r, n)) {
-                            e[n] = r[n];
-                        }
+                        ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                     }
                 }
                 return e;
-            };
-            return L.apply(this, arguments);
+            }, L.apply(null, arguments);
         }
         function U(e, t) {
-            if (e == null) return {};
-            var r = W(e, t);
-            var n, a;
+            if (null == e) return {};
+            var r, n, a = W(e, t);
             if (Object.getOwnPropertySymbols) {
                 var o = Object.getOwnPropertySymbols(e);
-                for (a = 0; a < o.length; a++) {
-                    n = o[a];
-                    if (t.indexOf(n) >= 0) continue;
-                    if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                    r[n] = e[n];
+                for (n = 0; n < o.length; n++) {
+                    r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
                 }
             }
-            return r;
+            return a;
         }
         function W(e, t) {
-            if (e == null) return {};
+            if (null == e) return {};
             var r = {};
-            var n = Object.keys(e);
-            var a, o;
-            for (o = 0; o < n.length; o++) {
-                a = n[o];
-                if (t.indexOf(a) >= 0) continue;
-                r[a] = e[a];
+            for (var n in e) {
+                if ({}.hasOwnProperty.call(e, n)) {
+                    if (t.includes(n)) continue;
+                    r[n] = e[n];
+                }
             }
             return r;
         }
@@ -377,12 +361,12 @@
             showSelected: o().bool
         };
         var G =  t().forwardRef((function(e, r) {
-            var n = e.append, a = e.error, o = a === void 0 ? false : a, l = e.onClick, i = e.prepend, s = e.value, c = e.noBorder, u = e.showSelected, p = U(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
+            var n = 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 = U(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
+            // 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, P.isValidHexColor)(f) || f === "transparent")) && f !== null && f !== undefined) {
+            if (!(typeof f === "string" && ((0, O.isValidHexColor)(f) || f === "transparent")) && f !== null && f !== undefined) {
                 f = undefined;
             }
             
@@ -397,59 +381,59 @@
                 $append: n,
                 $prepend: i,
                 $hasError: o,
-                $noBorder: c,
-                $showSelected: u,
+                $noBorder: u,
+                $showSelected: c,
                 "data-test": "swatch",
                 "data-test-value": s
-            }, p), u &&  t().createElement(F, {
+            }, p), c &&  t().createElement(F, {
                 "aria-label": (0, I._)("Selected"),
                 role: "presentation"
-            }),  t().createElement(D(), null, d));
+            }),  t().createElement(V(), null, d));
         }));
         G.propTypes = X;
         /* harmony default export */        const J = G;
         // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-        var Q = R().div.withConfig({
+        var Q = T().div.withConfig({
             displayName: "ColorStyles__StyledColor",
             componentId: "jxrost-0"
         })([ "", ";flex-direction:row;" ], E.mixins.reset("flex"));
-        var Y = R()(J).withConfig({
+        var Y = T()(J).withConfig({
             displayName: "ColorStyles__StyledInputSwatch",
             componentId: "jxrost-1"
         })([ "", ";" ], (0, E.pick)({
-            compact: (0, q.css)([ "width:28px;height:28px;" ])
+            compact: (0, j.css)([ "width:28px;height:28px;" ])
         }));
-        var Z = R().div.withConfig({
+        var Z = T().div.withConfig({
             displayName: "ColorStyles__StyledInput",
             componentId: "jxrost-2"
         })([ "", ";", "" ], (0, E.pick)({
-            enterprise: (0, q.css)([ "display:flex;" ]),
-            prisma: (0, q.css)([ "position:relative;" ])
+            enterprise: (0, j.css)([ "display:flex;" ]),
+            prisma: (0, j.css)([ "position:relative;" ])
         }), (function(e) {
             var t = e.$inDropdown;
-            return t ? (0, q.css)([ "width:", ";" ], (0, E.pick)({
+            return t ? (0, j.css)([ "width:", ";" ], (0, E.pick)({
                 enterprise: "100%",
                 prisma: "80px"
-            })) : (0, q.css)([ "flex:0 1 auto;min-width:0;" ]);
+            })) : (0, j.css)([ "flex:0 1 auto;min-width:0;" ]);
         }));
-        var ee = R()(B()).withConfig({
+        var ee = T()(B()).withConfig({
             displayName: "ColorStyles__StyledInputText",
             componentId: "jxrost-3"
         })([ "", "" ], (function(e) {
             var t = e.$inDropdown;
-            return t && (0, q.css)([ "font-size:12px;" ]);
+            return t && (0, j.css)([ "font-size:12px;" ]);
         }));
-        var te = R()(J).withConfig({
+        var te = T()(J).withConfig({
             displayName: "ColorStyles__StyledToggleSwatch",
             componentId: "jxrost-4"
         })([ "", "" ], (0, E.pick)({
             prisma: {
-                comfortable: (0, q.css)([ "width:40px;height:40px;" ]),
-                compact: (0, q.css)([ "width:32px;height:32px;" ])
+                comfortable: (0, j.css)([ "width:40px;height:40px;" ]),
+                compact: (0, j.css)([ "width:32px;height:32px;" ])
             },
             enterprise: {
-                comfortable: (0, q.css)([ "width:32px;height:32px;" ]),
-                compact: (0, q.css)([ "width:28px;height:28px;" ])
+                comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+                compact: (0, j.css)([ "width:28px;height:28px;" ])
             }
         }));
         // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
@@ -459,109 +443,104 @@
         const ae = require("@splunk/react-ui/Divider");
         var oe =  r.n(ae);
         // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-        var le = R().div.withConfig({
+        var le = T().div.withConfig({
             displayName: "PaletteStyles__StyledPalette",
             componentId: "qgv9v9-0"
         })([ "width:220px;padding:", ";" ], E.variables.spacingSmall);
-        var ie = R().ul.withConfig({
+        var ie = T().ul.withConfig({
             displayName: "PaletteStyles__StyledSwatches",
             componentId: "qgv9v9-1"
         })([ "", ";", "" ], E.mixins.reset("block"), (0, E.pick)({
-            enterprise: (0, q.css)([ "margin-bottom:", ";" ], E.variables.spacingXSmall)
+            enterprise: (0, j.css)([ "margin-bottom:", ";" ], E.variables.spacingXSmall)
         }));
-        var se = R().li.withConfig({
+        var se = T().li.withConfig({
             displayName: "PaletteStyles__StyledSwatch",
             componentId: "qgv9v9-2"
         })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], E.mixins.reset("inline-block"), (0, 
         E.pick)({
             enterprise: {
-                compact: (0, q.css)([ "&:nth-child(8n){margin-right:0;}" ])
+                compact: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
             },
-            prisma: (0, q.css)([ "&:nth-child(8n){margin-right:0;}" ])
+            prisma: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
         }));
-        var ce = R().div.withConfig({
+        var ue = T().div.withConfig({
             displayName: "PaletteStyles__StyledToolBar",
             componentId: "qgv9v9-3"
         })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";", " gap:4px;" ], E.variables.spacingSmall, (0, 
         E.pick)({
-            enterprise: (0, q.css)([ "margin-bottom:", ";" ], E.variables.spacingSmall)
+            enterprise: (0, j.css)([ "margin-bottom:", ";" ], E.variables.spacingSmall)
         }));
-        var ue = R()(H()).withConfig({
+        var ce = T()(H()).withConfig({
             displayName: "PaletteStyles__StyledExpandButton",
             componentId: "qgv9v9-4"
         })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], E.variables.focusShadow, (function(e) {
             var t = e.$expanded;
-            return t && (0, q.css)([ "transform:rotate(180deg);" ]);
+            return t && (0, j.css)([ "transform:rotate(180deg);" ]);
         }));
-        var pe = R().div.withConfig({
+        var pe = T().div.withConfig({
             displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
             componentId: "qgv9v9-5"
         })([ "position:relative;" ]);
-        var de = R().input.withConfig({
+        var de = T().input.withConfig({
             displayName: "PaletteStyles__StyledSystemColorPicker",
             componentId: "qgv9v9-6"
         })([ "box-sizing:border-box;", " ", ";", ";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, 
         E.pick)({
             enterprise: {
-                comfortable: (0, q.css)([ "width:32px;height:32px;" ]),
-                compact: (0, q.css)([ "width:24px;height:24px;" ])
+                comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+                compact: (0, j.css)([ "width:24px;height:24px;" ])
             },
-            prisma: (0, q.css)([ "width:24px;height:24px;" ])
+            prisma: (0, j.css)([ "width:24px;height:24px;" ])
         }), (0, E.pick)({
             enterprise: {
-                light: (0, q.css)([ "border:1px solid ", ";" ], E.variables.gray60),
-                dark: (0, q.css)([ "border:1px solid ", ";" ], E.variables.borderColor)
+                light: (0, j.css)([ "border:1px solid ", ";" ], E.variables.gray60),
+                dark: (0, j.css)([ "border:1px solid ", ";" ], E.variables.borderColor)
             },
-            prisma: (0, q.css)([ "border:none;" ])
+            prisma: (0, j.css)([ "border:none;" ])
         }), (0, E.pick)({
-            prisma: (0, q.css)([ "border-radius:2px;" ])
+            prisma: (0, j.css)([ "border-radius:2px;" ])
         }), (0, E.pick)({
             enterprise: {
-                comfortable: (0, q.css)([ "padding:1px 14px;" ])
+                comfortable: (0, j.css)([ "padding:1px 14px;" ])
             }
         }), E.variables.focusShadow);
-        var fe = R()(N()).withConfig({
+        var fe = T()(N()).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 ve(e, t) {
-            if (e == null) return {};
-            var r = he(e, t);
-            var n, a;
+            if (null == e) return {};
+            var r, n, a = he(e, t);
             if (Object.getOwnPropertySymbols) {
                 var o = Object.getOwnPropertySymbols(e);
-                for (a = 0; a < o.length; a++) {
-                    n = o[a];
-                    if (t.indexOf(n) >= 0) continue;
-                    if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                    r[n] = e[n];
+                for (n = 0; n < o.length; n++) {
+                    r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
                 }
             }
-            return r;
+            return a;
         }
         function he(e, t) {
-            if (e == null) return {};
+            if (null == e) return {};
             var r = {};
-            var n = Object.keys(e);
-            var a, o;
-            for (o = 0; o < n.length; o++) {
-                a = n[o];
-                if (t.indexOf(a) >= 0) continue;
-                r[a] = e[a];
+            for (var n in e) {
+                if ({}.hasOwnProperty.call(e, n)) {
+                    if (t.includes(n)) continue;
+                    r[n] = e[n];
+                }
             }
             return r;
         }
-        function ye(e) {
-            var r = e.expanded, n = e.palette, a = e.value, o = e.swatchToFocusRef, l = e.onSwatchClick, i = e.expandButtonRef, s = e.onPaletteExpand, u = e.onSystemColorPickerChange, p = e.renderInput, d = ve(e, [ "expanded", "palette", "value", "swatchToFocusRef", "onSwatchClick", "expandButtonRef", "onPaletteExpand", "onSystemColorPickerChange", "renderInput" ]);
-            var f = (0, E.useSplunkTheme)(), v = f.isPrisma, y = f.isLight;
-            var m = c()(n.map((function(e) {
+        function be(e) {
+            var r = e.expanded, n = e.palette, a = e.value, o = e.swatchToFocusRef, l = e.onSwatchClick, i = e.expandButtonRef, s = e.onPaletteExpand, c = e.onSystemColorPickerChange, p = e.renderInput, d = e.disabled, f = ve(e, [ "expanded", "palette", "value", "swatchToFocusRef", "onSwatchClick", "expandButtonRef", "onPaletteExpand", "onSystemColorPickerChange", "renderInput", "disabled" ]);
+            var v = (0, E.useSplunkTheme)(), b = v.isPrisma, m = v.isLight;
+            var y = u()(n.map((function(e) {
                 return e && g()(e);
             })), a);
-            var b = n.map((function(e, r) {
+            var x = n.map((function(e, r) {
                 var n = e === null ? null : g()(e);
                 var i = n === a;
-                var s = !m && r === 0 || m && i;
+                var s = !y && r === 0 || y && i;
                 
                 return t().createElement(se, {
                     key: n || "null"
@@ -569,55 +548,60 @@
                     value: n,
                     ref: s ? o : null,
                     onClick: l,
-                    noBorder: v,
-                    showSelected: i
+                    noBorder: b,
+                    showSelected: i,
+                    disabled: d
                 }));
             }));
-            var x = function e() {
-                var r = !m && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
+            var w = function e() {
+                var r = !y && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
                 
-                return t().createElement(ce, {
+                return t().createElement(ue, {
                     "data-test": "tool-bar"
-                }, v &&  t().createElement(E.SplunkThemeProvider, {
+                }, b &&  t().createElement(E.SplunkThemeProvider, {
                     density: "compact"
                 }, p && p()),  t().createElement(J, {
                     value: null,
                     ref: a === null ? o : null,
                     onClick: l,
-                    noBorder: v && !y,
-                    showSelected: a === null
+                    noBorder: b && !m,
+                    showSelected: a === null,
+                    disabled: d
                 }),  t().createElement(J, {
                     value: "#ffffff",
                     ref: a === "#ffffff" ? o : null,
                     onClick: l,
-                    noBorder: v && !y,
-                    showSelected: a === "#ffffff"
+                    noBorder: b && !m,
+                    showSelected: a === "#ffffff",
+                    disabled: d
                 }),  t().createElement(J, {
                     value: "#000000",
                     ref: a === "#000000" ? o : null,
                     onClick: l,
-                    noBorder: v,
-                    showSelected: a === "#000000"
+                    noBorder: b,
+                    showSelected: a === "#000000",
+                    disabled: d
                 }),  t().createElement(pe, null,  t().createElement(de, {
                     type: "color",
                     value: a === null ? "" : a,
-                    onChange: u,
-                    ref: r ? o : null
+                    onChange: c,
+                    ref: r ? o : null,
+                    disabled: d
                 }), r &&  t().createElement(fe, {
                     "aria-label": (0, I._)("Selected"),
                     role: "presentation"
                 })));
             };
-            var w = b.length === 8 ? 7 : 15;
-            var S = h()(b, 0, w);
-            var k = h()(b, w);
-            if (v) {
+            var S = x.length === 8 ? 7 : 15;
+            var C = h()(x, 0, S);
+            var k = h()(x, S);
+            if (b) {
                 
-                return t().createElement(le, d,  t().createElement("div", {
+                return t().createElement(le, f,  t().createElement("div", {
                     style: {
                         position: "relative"
                     }
-                },  t().createElement(ie, null, S, r && k), r && x(),  t().createElement(ue, {
+                },  t().createElement(ie, null, C, r && k), r && w(),  t().createElement(ce, {
                     ref: i,
                     $expanded: r,
                     onClick: s,
@@ -625,191 +609,170 @@
                 },  t().createElement(ne(), null))));
             }
             
-            return t().createElement(le, d,  t().createElement(ie, null, b),  t().createElement(oe(), null), x(), p && p());
+            return t().createElement(le, f,  t().createElement(ie, null, x),  t().createElement(oe(), null), w(), p && p());
         }
-        /* harmony default export */        const me = ye;
+        /* harmony default export */        const me = be;
         // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
-                var be = r(6165);
+                var ye = r(6165);
         // CONCATENATED MODULE: ./src/Color/Color.tsx
         function ge(e) {
             "@babel/helpers - typeof";
-            if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-                ge = function e(t) {
-                    return typeof t;
-                };
-            } else {
-                ge = function e(t) {
-                    return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
-                };
-            }
-            return ge(e);
+            return ge = "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;
+            }, ge(e);
         }
         function xe() {
-            xe = Object.assign || function(e) {
+            return xe = Object.assign ? Object.assign.bind() : function(e) {
                 for (var t = 1; t < arguments.length; t++) {
                     var r = arguments[t];
                     for (var n in r) {
-                        if (Object.prototype.hasOwnProperty.call(r, n)) {
-                            e[n] = r[n];
-                        }
+                        ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                     }
                 }
                 return e;
-            };
-            return xe.apply(this, arguments);
+            }, xe.apply(null, arguments);
         }
         function we(e) {
-            return Oe(e) || Ce(e) || ke(e) || Se();
+            return Pe(e) || ke(e) || Ce(e) || Se();
         }
         function Se() {
             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 ke(e, t) {
-            if (!e) return;
-            if (typeof e === "string") return Ee(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 Ee(e, t);
+        function Ce(e, t) {
+            if (e) {
+                if ("string" == typeof e) return Ee(e, t);
+                var r = {}.toString.call(e).slice(8, -1);
+                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? Ee(e, t) : void 0;
+            }
         }
-        function Ce(e) {
-            if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
+        function ke(e) {
+            if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
         }
-        function Oe(e) {
+        function Pe(e) {
             if (Array.isArray(e)) return Ee(e);
         }
         function Ee(e, t) {
-            if (t == null || t > e.length) t = e.length;
-            for (var r = 0, n = new Array(t); r < t; r++) {
+            (null == t || t > e.length) && (t = e.length);
+            for (var r = 0, n = Array(t); r < t; r++) {
                 n[r] = e[r];
             }
             return n;
         }
-        function Pe(e, t) {
-            if (e == null) return {};
-            var r = Ie(e, t);
-            var n, a;
+        function Oe(e, t) {
+            if (null == e) return {};
+            var r, n, a = Ie(e, t);
             if (Object.getOwnPropertySymbols) {
                 var o = Object.getOwnPropertySymbols(e);
-                for (a = 0; a < o.length; a++) {
-                    n = o[a];
-                    if (t.indexOf(n) >= 0) continue;
-                    if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
-                    r[n] = e[n];
+                for (n = 0; n < o.length; n++) {
+                    r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
                 }
             }
-            return r;
+            return a;
         }
         function Ie(e, t) {
-            if (e == null) return {};
+            if (null == e) return {};
             var r = {};
-            var n = Object.keys(e);
-            var a, o;
-            for (o = 0; o < n.length; o++) {
-                a = n[o];
-                if (t.indexOf(a) >= 0) continue;
-                r[a] = e[a];
+            for (var n in e) {
+                if ({}.hasOwnProperty.call(e, n)) {
+                    if (t.includes(n)) continue;
+                    r[n] = e[n];
+                }
             }
             return r;
         }
         function _e(e, t) {
-            if (!(e instanceof t)) {
-                throw new TypeError("Cannot call a class as a function");
-            }
+            if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
         }
-        function je(e, t) {
+        function qe(e, t) {
             for (var r = 0; r < t.length; r++) {
                 var n = t[r];
-                n.enumerable = n.enumerable || false;
-                n.configurable = true;
-                if ("value" in n) n.writable = true;
-                Object.defineProperty(e, n.key, n);
+                n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
+                Object.defineProperty(e, He(n.key), n);
             }
         }
-        function qe(e, t, r) {
-            if (t) je(e.prototype, t);
-            if (r) je(e, r);
-            return e;
+        function je(e, t, r) {
+            return t && qe(e.prototype, t), r && qe(e, r), Object.defineProperty(e, "prototype", {
+                writable: !1
+            }), e;
         }
-        function Re(e, t) {
-            if (typeof t !== "function" && t !== null) {
-                throw new TypeError("Super expression must either be null or a function");
-            }
+        function Te(e, t) {
+            if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
             e.prototype = Object.create(t && t.prototype, {
                 constructor: {
                     value: e,
-                    writable: true,
-                    configurable: true
+                    writable: !0,
+                    configurable: !0
                 }
-            });
-            if (t) Te(e, t);
+            }), Object.defineProperty(e, "prototype", {
+                writable: !1
+            }), t && Re(e, t);
         }
-        function Te(e, t) {
-            Te = Object.setPrototypeOf || function e(t, r) {
-                t.__proto__ = r;
-                return t;
-            };
-            return Te(e, t);
+        function Re(e, t) {
+            return Re = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
+                return e.__proto__ = t, e;
+            }, Re(e, t);
         }
         function Be(e) {
             var t = Ae();
-            return function r() {
-                var n = Ne(e), a;
+            return function() {
+                var r, n = Ne(e);
                 if (t) {
-                    var o = Ne(this).constructor;
-                    a = Reflect.construct(n, arguments, o);
-                } else {
-                    a = n.apply(this, arguments);
-                }
-                return Ve(this, a);
+                    var a = Ne(this).constructor;
+                    r = Reflect.construct(n, arguments, a);
+                } else r = n.apply(this, arguments);
+                return De(this, r);
             };
         }
-        function Ve(e, t) {
-            if (t && (ge(t) === "object" || typeof t === "function")) {
-                return t;
-            }
-            return De(e);
+        function De(e, t) {
+            if (t && ("object" == ge(t) || "function" == typeof t)) return t;
+            if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
+            return Ve(e);
         }
-        function De(e) {
-            if (e === void 0) {
-                throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-            }
+        function Ve(e) {
+            if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
             return e;
         }
         function Ae() {
-            if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-            if (Reflect.construct.sham) return false;
-            if (typeof Proxy === "function") return true;
             try {
-                Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
-                return true;
-            } catch (e) {
-                return false;
-            }
+                var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
+            } catch (e) {}
+            return (Ae = function t() {
+                return !!e;
+            })();
         }
         function Ne(e) {
-            Ne = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
-                return t.__proto__ || Object.getPrototypeOf(t);
-            };
-            return Ne(e);
+            return Ne = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+                return e.__proto__ || Object.getPrototypeOf(e);
+            }, Ne(e);
         }
         function $e(e, t, r) {
-            if (t in e) {
-                Object.defineProperty(e, t, {
-                    value: r,
-                    enumerable: true,
-                    configurable: true,
-                    writable: true
-                });
-            } else {
-                e[t] = r;
+            return (t = He(t)) in e ? Object.defineProperty(e, t, {
+                value: r,
+                enumerable: !0,
+                configurable: !0,
+                writable: !0
+            }) : e[t] = r, e;
+        }
+        function He(e) {
+            var t = ze(e, "string");
+            return "symbol" == ge(t) ? t : t + "";
+        }
+        function ze(e, t) {
+            if ("object" != ge(e) || !e) return e;
+            var r = e[Symbol.toPrimitive];
+            if (void 0 !== r) {
+                var n = r.call(e, t || "default");
+                if ("object" != ge(n)) return n;
+                throw new TypeError("@@toPrimitive must return a primitive value.");
             }
-            return e;
+            return ("string" === t ? String : Number)(e);
         }
         /** @public */
         // The default palette in Prisma theme.
-                var He = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
-        var ze = w()((function(e) {
+                var Ke = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
+        var Fe = w()((function(e) {
             var t = [];
             for (var r = 1; r <= e.length * 4; r += 1) {
                 var n = e[(r - 1) % e.length];
@@ -817,14 +780,14 @@
                     t.push(n);
                 } else {
                     var a = 40 - 10 * (r / e.length);
-                    t.push(k()(n).lighten(a).toString());
+                    t.push(C()(n).lighten(a).toString());
                 }
             }
             return t;
         }));
- // The tool palette in Prisma theme.
-                var Ke = [ "#ffffff", "#000000", null ];
-        var Fe = {
+        // The tool palette in Prisma theme.
+                var Me = [ "#ffffff", "#000000", null ];
+        var Le = {
             append: o().bool,
             defaultValue: o().string,
             describedBy: o().string,
@@ -843,29 +806,43 @@
             splunkTheme: o().object,
             value: o().string
         };
-        var Me = {
+        var Ue = {
             append: false,
             disabled: false,
             error: false,
-            palette: ze(He),
+            palette: Fe(Ke),
             prepend: false
         };
         // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-                var Le = function e(t) {
-            return (0, P.isValidHexColor)(t);
+                var We = function e(t) {
+            return (0, O.isValidHexColor)(t);
+        };
+        var Xe = "N/A";
+        var Ge = "n/a";
+        var Je = function e(t) {
+            if (g()(t) === Ge) {
+                return Xe;
+            }
+            if (g()(t) === "transparent") {
+                return "transparent";
+            }
+            // If the user types in the hexadecimal number without # in front,
+            // we add # automatically.
+                        if (!m()(t, "#")) {
+                return (0, O.expandShortHandHex)("#".concat(t));
+            }
+            return (0, O.expandShortHandHex)(t);
         };
-        var Ue = "N/A";
-        var We = "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 Xe =  function(e) {
-            Re(n, e);
+ */        var Qe =  function(e) {
+            Te(n, e);
             var r = Be(n);
-            qe(n, null, [ {
+            je(n, null, [ {
                 key: "hasNull",
                 // @docs-props-type ColorPropsBase
                 value: function e(t) {
@@ -885,26 +862,26 @@
                 var a;
                 _e(this, n);
                 a = r.call(this, e);
-                $e(De(a), "focusSwatch", void 0);
-                $e(De(a), "focusExpandButton", void 0);
-                $e(De(a), "controlledExternally", void 0);
-                $e(De(a), "dropdown", null);
-                $e(De(a), "swatchToggleReaderContentId", (0, j.createDOMID)("swatch-reader-content"));
-                $e(De(a), "hexInputReaderContentId", (0, j.createDOMID)("hex-input-reader-content"));
-                $e(De(a), "handleSwatchClick", (function(e, t) {
+                $e(Ve(a), "focusSwatch", void 0);
+                $e(Ve(a), "focusExpandButton", void 0);
+                $e(Ve(a), "controlledExternally", void 0);
+                $e(Ve(a), "dropdown", null);
+                $e(Ve(a), "swatchToggleReaderContentId", (0, q.createDOMID)("swatch-reader-content"));
+                $e(Ve(a), "hexInputReaderContentId", (0, q.createDOMID)("hex-input-reader-content"));
+                $e(Ve(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 c = r === null ? Ue : r;
+                    var u = r === null ? Xe : r;
                     if (!a.isControlled()) {
                         a.setState({
                             value: r
                         });
                     }
                     a.setState({
-                        displayValue: c,
+                        displayValue: u,
                         open: false
                     });
                     if (s) {
@@ -915,20 +892,20 @@
                     }
                     a.focus();
                 }));
-                $e(De(a), "handlePaletteExpand", (function() {
+                $e(Ve(a), "handlePaletteExpand", (function() {
                     a.setState((function(e) {
                         return {
                             expanded: !e.expanded
                         };
                     }));
                 }));
-                $e(De(a), "handleTextChange", (function(e, t) {
+                $e(Ve(a), "handleTextChange", (function(e, t) {
                     var r = t.value;
                     a.setState({
                         displayValue: r
                     });
                 }));
-                $e(De(a), "handleTextKeyDown", (function(e) {
+                $e(Ve(a), "handleTextKeyDown", (function(e) {
                     if ((0, _.keycode)(e.nativeEvent) === "enter") {
                         e.preventDefault();
                         a.handleRequestClose({
@@ -937,45 +914,25 @@
                         a.focus();
                     }
                 }));
-                $e(De(a), "handleButtonClick", (function(e) {
+                $e(Ve(a), "handleButtonClick", (function(e) {
                     e.preventDefault();
                     a.handleRequestClose({
                         reason: "buttonClick"
                     });
                     a.focus();
                 }));
-                $e(De(a), "handleRequestClose", (function(e) {
+                $e(Ve(a), "handleRequestClose", (function(e) {
                     var t = e.reason;
-                    var r = a.state.displayValue;
-                    var n = a.state.value;
-                    if (g()(r) === We) {
-                        r = Ue;
-                        a.setState({
-                            displayValue: r
-                        });
-                    } else if (g()(r) === "transparent") {
-                        r = "transparent";
-                        a.setState({
-                            displayValue: r
-                        });
-                    }
- // If the user types in the hexadecimal number without # in front,
-                    // we add # automatically.
-                                        if (r !== Ue && g()(r) !== "transparent" && !m()(r, "#")) {
-                        r = "#".concat(r);
-                        if (t === "escapeKey") {
-                            if (n == null) {
-                                a.setState({
-                                    displayValue: Ue
-                                });
-                            } else {
-                                a.setState({
-                                    displayValue: n
-                                });
-                            }
+                    var r = a.state, n = r.displayValue, o = r.value;
+                    var l = Je(n);
+                    if (t === "escapeKey") {
+                        if (o == null) {
+                            a.setState({
+                                displayValue: Xe
+                            });
                         } else {
                             a.setState({
-                                displayValue: r
+                                displayValue: o
                             });
                         }
                     }
@@ -985,14 +942,17 @@
                         });
                     }
                     if (t !== "escapeKey") {
-                        a.submitValue(r);
+                        a.setState({
+                            displayValue: l
+                        });
+                        a.submitValue(l);
                     }
                 }));
-                $e(De(a), "handleRequestOpen", (function() {
+                $e(Ve(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 ? Ue : o;
+                    var l = o === null ? Xe : o;
                     a.setState({
                         displayValue: l,
                         open: true
@@ -1002,23 +962,23 @@
                         }
                     }));
                     var i = n ? h()(r, 15) : r;
-                    var s = !c()(r.map((function(e) {
+                    var s = !u()(r.map((function(e) {
                         return e && g()(e);
                     })), o);
-                    var u = s || c()(i.map((function(e) {
+                    var c = s || u()(i.map((function(e) {
                         return e && g()(e);
-                    })), o) || c()(Ke, o);
-                    if (u && !a.state.expanded) {
+                    })), o) || u()(Me, o);
+                    if (c && !a.state.expanded) {
                         a.setState({
                             expanded: true
                         });
                     }
                 }));
-                $e(De(a), "handleSystemColorPickerChange", (function(e) {
+                $e(Ve(a), "handleSystemColorPickerChange", (function(e) {
                     var t = a.getValue();
                     var r = e !== t;
                     var n = a.props.name;
-                    var o = e === null ? Ue : e;
+                    var o = e === null ? Xe : e;
                     if (!a.isControlled()) {
                         a.setState({
                             value: e
@@ -1038,14 +998,14 @@
                 a.focusSwatch =  t().createRef();
                 a.focusExpandButton =  t().createRef();
                 a.controlledExternally = i()(e, "value");
- // value can be hexadecimal color, 'transparent' or null
-                                var o = a.controlledExternally ? (0, P.expandShortHandHex)(e.value) : (0, 
-                P.expandShortHandHex)(e.defaultValue);
+                // value can be hexadecimal color, 'transparent' or null
+                                var o = a.controlledExternally ? (0, O.expandShortHandHex)(e.value) : (0, 
+                O.expandShortHandHex)(e.defaultValue);
                 if (o !== null) {
                     o = g()(o);
                 }
- // displayValue can be hexadecimal color or 'transparent' to represent 'transparent' or 'N/A' to represent null
-                                var l = o === null ? Ue : o;
+                // displayValue can be hexadecimal color or 'transparent' to represent 'transparent' or 'N/A' to represent null
+                                var l = o === null ? Xe : o;
                 a.state = {
                     displayValue: l,
                     open: false,
@@ -1058,7 +1018,7 @@
                 }
                 return a;
             }
-            qe(n, [ {
+            je(n, [ {
                 key: "componentDidUpdate",
                 value: function e(t) {
                     if (false) {}
@@ -1074,7 +1034,7 @@
                     var t = function e(t) {
                         return t === null ? null : g()(t);
                     };
-                    var r = (0, P.expandShortHandHex)(this.props.value);
+                    var r = (0, O.expandShortHandHex)(this.props.value);
                     if (this.isControlled()) {
                         return t(r);
                     }
@@ -1084,30 +1044,26 @@
                 key: "submitValue",
                 value: function e(t) {
                     if (t) {
-                        var r = Le(t);
-                        if (!r && t !== "transparent" && t !== Ue) {
+                        var r = We(t);
+                        if (!r && t !== "transparent" && t !== Xe) {
                             // eslint-disable-next-line no-console
                             console.warn('"'.concat(t, '" is not a valid hex color.'));
                         }
-                        if (r || n.hasTransparent(this.props.palette) && t === "transparent" || t === Ue) {
-                            var a = (0, P.expandShortHandHex)(t);
-                            this.setState({
-                                displayValue: a
-                            });
-                            var o = t !== (this.props.value && g()(this.props.value));
-                            var l = this.props.name;
-                            var i = t === Ue ? null : t;
-                            var s = (0, P.expandShortHandHex)(i);
+                        if (r || n.hasTransparent(this.props.palette) && t === "transparent" || t === Xe) {
+                            var a = t !== (this.props.value && g()(this.props.value));
+                            var o = this.props.name;
+                            var l = t === Xe ? null : t;
+                            var i = (0, O.expandShortHandHex)(l);
                             if (t && !this.isControlled()) {
                                 this.setState({
-                                    value: s
+                                    value: i
                                 });
                             }
-                            if (o) {
-                                var c, u;
-                                (c = (u = this.props).onChange) === null || c === void 0 ? void 0 : c.call(u, {
-                                    value: s,
-                                    name: l
+                            if (a) {
+                                var s, u;
+                                (s = (u = this.props).onChange) === null || s === void 0 ? void 0 : s.call(u, {
+                                    value: i,
+                                    name: o
                                 });
                             }
                         }
@@ -1130,21 +1086,21 @@
                 key: "renderInput",
                 value: function e(r) {
                     var a = r.textAppend, o = r.textPrepend, l = r.textInline, i = r.inDropdown;
-                    var s = this.props, c = s.splunkTheme, u = s.required, p = s.labelledBy;
-                    var d = this.state.displayValue;
-                    var f = c.isPrisma;
-                    var v = n.hasTransparent(this.props.palette) && g()(d) === "transparent";
-                    var h = g()(d) === We;
-                    var y = d;
-                    if (!m()(d, "#")) {
-                        y = "#".concat(d);
+                    var s = this.props, u = s.splunkTheme, c = s.required, p = s.labelledBy, d = s.disabled;
+                    var f = this.state.displayValue;
+                    var v = u.isPrisma;
+                    var h = n.hasTransparent(this.props.palette) && g()(f) === "transparent";
+                    var b = g()(f) === Ge;
+                    var y = f;
+                    if (!m()(f, "#")) {
+                        y = "#".concat(f);
                     }
-                    y = v ? "transparent" : y;
-                    y = h ? null : y;
+                    y = h ? "transparent" : y;
+                    y = b ? null : y;
                     
                     return t().createElement(Z, {
                         $inDropdown: i
-                    },  t().createElement(be["default"], {
+                    },  t().createElement(ye["default"], {
                         id: this.hexInputReaderContentId
                     }, (0, I._)("Hexadecimal color value")),  t().createElement(ee, {
                         $inDropdown: i,
@@ -1156,11 +1112,12 @@
                         prepend: o,
                         onKeyDown: this.handleTextKeyDown,
                         onChange: this.handleTextChange,
-                        required: u,
+                        required: c,
                         spellCheck: false,
-                        value: d,
-                        labelledBy: p ? "".concat(p, " ").concat(this.hexInputReaderContentId) : this.hexInputReaderContentId
-                    }), !f && i &&  t().createElement(Y, {
+                        value: f,
+                        labelledBy: p ? "".concat(p, " ").concat(this.hexInputReaderContentId) : this.hexInputReaderContentId,
+                        disabled: d
+                    }), !v && i &&  t().createElement(Y, {
                         "data-test": "textbox-swatch",
                         onClick: this.handleButtonClick,
                         value: y,
@@ -1173,9 +1130,9 @@
                 key: "renderPalette",
                 value: function e() {
                     var r = this;
-                    var n = this.props, a = n.splunkTheme, o = n.palette;
-                    var l = this.state.expanded;
-                    var i = a.isPrisma;
+                    var n = this.props, a = n.splunkTheme, o = n.palette, l = n.disabled;
+                    var i = this.state.expanded;
+                    var s = a.isPrisma;
                     
                     return t().createElement(me, {
                         role: "dialog",
@@ -1184,7 +1141,7 @@
                         value: this.getValue(),
                         swatchToFocusRef: this.focusSwatch,
                         renderInput: function e() {
-                            return i ? r.renderInput({
+                            return s ? r.renderInput({
                                 textAppend: false,
                                 textPrepend: false,
                                 textInline: true,
@@ -1198,43 +1155,45 @@
                         },
                         expandButtonRef: this.focusExpandButton,
                         onSwatchClick: this.handleSwatchClick,
-                        expanded: l,
+                        expanded: i,
                         onPaletteExpand: this.handlePaletteExpand,
                         onSystemColorPickerChange: function e(t) {
                             return r.handleSystemColorPickerChange(t.target.value);
-                        }
+                        },
+                        disabled: l
                     });
                 }
             }, {
                 key: "render",
                 value: function e() {
                     var r = this;
-                    var a = this.props, o = a.append, l = a.disabled, i = a.describedBy, s = a.elementRef, c = a.error, u = a.hideInput, d = a.labelledBy, v = a.name, h = a.prepend, y = a.splunkTheme, m = Pe(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, d = a.labelledBy, v = a.name, h = a.prepend, b = a.splunkTheme, m = Oe(a, [ "append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme" ]);
+                    var y = b.isPrisma;
                     var g = this.getValue();
                     var x = this.state.displayValue;
  // hideInput defaults to true in Enterprise if prop is not provided
-                                        var w = u !== null && u !== void 0 ? u : true;
-                    var S = b ? u : w;
-                    var k =  t().createElement(te, xe({
+                                        var w = c !== null && c !== void 0 ? c : true;
+                    var S = y ? c : w;
+                    var C =  t().createElement(te, xe({
                         append: !S ? true : o,
                         "data-test": "color",
                         "data-test-value": x,
                         "aria-describedby": i,
                         "aria-labelledby": d ? "".concat(d, " ").concat(this.swatchToggleReaderContentId) : this.swatchToggleReaderContentId,
-                        "aria-invalid": c || undefined,
+                        "aria-invalid": u || undefined,
                         disabled: l,
-                        error: c,
+                        error: u,
                         elementRef: s,
                         name: v,
                         prepend: h,
                         value: g
-                    }, f()(m, [].concat(we(p()(n.propTypes)), [ // TS: trick omit
+                    }, f()(m, [].concat(we(p()(n.propTypes)), [ 
+                    // TS: trick omit
                     "onChange" ]))));
                     
-                    return t().createElement(Q, null,  t().createElement(be["default"], {
+                    return t().createElement(Q, null,  t().createElement(ye["default"], {
                         id: this.swatchToggleReaderContentId
-                    }, (0, I._)("Color picker")),  t().createElement(O(), {
+                    }, (0, I._)("Color picker")),  t().createElement(P(), {
                         closeReasons: [ "clickAway", "escapeKey", "offScreen", "toggleClick" ],
                         onRequestClose: this.handleRequestClose,
                         onRequestOpen: this.handleRequestOpen,
@@ -1244,7 +1203,7 @@
                         },
                         retainFocus: true,
                         takeFocus: false,
-                        toggle: k
+                        toggle: C
                     }, this.renderPalette()), !S && this.renderInput({
                         textAppend: false,
                         textPrepend: true,
@@ -1255,12 +1214,12 @@
             } ]);
             return n;
         }(e.Component);
-        $e(Xe, "propTypes", Fe);
-        $e(Xe, "defaultProps", Me);
-        var Ge = (0, E.withSplunkTheme)(Xe);
-        Ge.propTypes = Xe.propTypes;
+        $e(Qe, "propTypes", Le);
+        $e(Qe, "defaultProps", Ue);
+        var Ye = (0, E.withSplunkTheme)(Qe);
+        Ye.propTypes = Qe.propTypes;
         // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-        /* harmony default export */        const Je = Ge;
+        /* harmony default export */        const Ze = Ye;
     }) // CONCATENATED MODULE: ./src/Color/index.ts
     ();
     module.exports = n;