@splunk/react-ui 4.36.0 → 4.38.0

package/Color.js

@@ -1,34 +1,159 @@
 /******/ (() => {
     // webpackBootstrap
     /******/ "use strict";
-    /******/ // The require scope
-    /******/    var e = {};
+    /******/    var e = {
+        /***/ 6165: 
+        /***/ (e, t, r) => {
+            // EXPORTS
+            r.d(t, {
+                default: () => /* reexport */ y
+            });
+            // EXTERNAL MODULE: external "react"
+                        var n = r(9497);
+            var a =  r.n(n);
+            // EXTERNAL MODULE: external "prop-types"
+                        var o = r(23);
+            var l =  r.n(o);
+            // EXTERNAL MODULE: external "styled-components"
+                        var i = r(232);
+            var s =  r.n(i);
+            // EXTERNAL MODULE: external "@splunk/themes"
+                        var c = r(3563);
+            // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
+            var u = s().span.withConfig({
+                displayName: "ScreenReaderContentStyles__Styled",
+                componentId: "sc-1lnohwp-0"
+            })([ "", ";" ], c.mixins.screenReaderContent());
+            // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContent.tsx
+            function p() {
+                p = Object.assign || 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];
+                            }
+                        }
+                    }
+                    return e;
+                };
+                return p.apply(this, arguments);
+            }
+            function d(e, t) {
+                if (e == null) return {};
+                var r = f(e, t);
+                var n, a;
+                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];
+                    }
+                }
+                return r;
+            }
+            function f(e, t) {
+                if (e == null) 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];
+                }
+                return r;
+            }
+            var v = {
+                children: l().node.isRequired,
+                elementRef: l().oneOfType([ l().func, l().object ])
+            };
+            /**
+ * The screen reader text is used to wrap content that
+ * is only accessible through screen readers.
+ */            function h(e) {
+                var t = e.children, r = e.elementRef, n = d(e, [ "children", "elementRef" ]);
+                // @docs-props-type ScreenReaderContentPropsBase
+                                
+                return a().createElement(u, p({
+                    "data-test": "screen-reader-content",
+                    ref: r
+                }, n), t);
+            }
+            h.propTypes = v;
+            /* harmony default export */            const y = h;
+        } // CONCATENATED MODULE: ./src/ScreenReaderContent/index.ts
+        /***/ ,
+        /***/ 3563: 
+        /***/ e => {
+            e.exports = require("@splunk/themes");
+            /***/        },
+        /***/ 23: 
+        /***/ e => {
+            e.exports = require("prop-types");
+            /***/        },
+        /***/ 9497: 
+        /***/ e => {
+            e.exports = require("react");
+            /***/        },
+        /***/ 232: 
+        /***/ e => {
+            e.exports = require("styled-components");
+            /***/
+            /******/        }
+    };
+    /************************************************************************/
+    /******/ // The module cache
+    /******/    var t = {};
+    /******/
+    /******/ // The require function
+    /******/    function r(n) {
+        /******/ // Check if module is in cache
+        /******/ var a = t[n];
+        /******/        if (a !== undefined) {
+            /******/ return a.exports;
+            /******/        }
+        /******/ // Create a new module (and put it into the cache)
+        /******/        var o = t[n] = {
+            /******/ // no module.id needed
+            /******/ // no module.loaded needed
+            /******/ exports: {}
+            /******/        };
+        /******/
+        /******/ // Execute the module function
+        /******/        e[n](o, o.exports, r);
+        /******/
+        /******/ // Return the exports of the module
+        /******/        return o.exports;
+        /******/    }
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ r.n = e => {
+            /******/ var t = e && e.__esModule ? 
+            /******/ () => e["default"]
+            /******/ : () => e
             /******/;
-            e.d(r, {
-                a: r
+            r.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ r.d = (e, t) => {
+            /******/ for (var n in t) {
+                /******/ if (r.o(t, n) && !r.o(e, n)) {
+                    /******/ Object.defineProperty(e, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,14 +162,14 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ r.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ e.r = e => {
+        /******/ r.r = e => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                 /******/ Object.defineProperty(e, Symbol.toStringTag, {
                     value: "Module"
@@ -56,1044 +181,1087 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
-    // ESM COMPAT FLAG
-        e.r(t);
-    // EXPORTS
-        e.d(t, {
-        default: () => /* reexport */ Ue,
-        defaultPalette: () => /* reexport */ Ae,
-        isValidHEX: () => /* reexport */ ze
-    });
-    // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
-    // CONCATENATED MODULE: external "prop-types"
-    const a = require("prop-types");
-    var o =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/has"
-    const l = require("lodash/has");
-    var i =  e.n(l);
-    // CONCATENATED MODULE: external "lodash/includes"
-    const s = require("lodash/includes");
-    var u =  e.n(s);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const c = require("lodash/keys");
-    var p =  e.n(c);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const d = require("lodash/omit");
-    var f =  e.n(d);
-    // CONCATENATED MODULE: external "lodash/slice"
-    const v = require("lodash/slice");
-    var h =  e.n(v);
-    // CONCATENATED MODULE: external "lodash/startsWith"
-    const m = require("lodash/startsWith");
-    var y =  e.n(m);
-    // CONCATENATED MODULE: external "lodash/toLower"
-    const b = require("lodash/toLower");
-    var g =  e.n(b);
-    // CONCATENATED MODULE: external "lodash/memoize"
-    const x = require("lodash/memoize");
-    var S =  e.n(x);
-    // CONCATENATED MODULE: external "tinycolor2"
-    const w = require("tinycolor2");
-    var k =  e.n(w);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const C = require("@splunk/react-ui/Dropdown");
-    var E =  e.n(C);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const P = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-    const O = require("@splunk/ui-utils/color");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const _ = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const q = require("@splunk/ui-utils/keyboard");
-    // CONCATENATED MODULE: external "styled-components"
-    const j = require("styled-components");
-    var I =  e.n(j);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-    const T = require("@splunk/react-ui/Text");
-    var R =  e.n(T);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const B = require("@splunk/react-ui/ScreenReaderContent");
-    var V =  e.n(B);
-    // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-    const A = require("@splunk/react-icons/Checkmark");
-    var D =  e.n(A);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const N = require("@splunk/react-ui/Clickable");
-    var $ =  e.n(N);
-    // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
-    var H = (0, P.pick)({
-        enterprise: P.variables.gray80,
-        prisma: "rgba(0, 0, 0, 0.2)"
-    });
-    var z = (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:", ";" ], H, H, H, H, H, H, (0, 
-    P.pick)({
-        enterprise: "transparent",
-        prisma: P.variables.white
-    }));
-    var K = I()(D()).withConfig({
-        displayName: "SwatchStyles__StyledCheck",
-        componentId: "sc-1wxunhq-0"
-    })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
-    var F = I()($()).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, 
-    P.pick)({
-        enterprise: {
-            light: P.variables.gray60,
-            dark: P.variables.borderColor
-        },
-        prisma: P.variables.interactiveColorBorder
-    }), (0, P.pick)({
-        prisma: (0, j.css)([ "border-radius:2px;" ])
-    }), (function(e) {
-        var t = e.$value;
-        return t === null && (0, j.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
-        P.pick)({
-            enterprise: "#ed1e24",
-            prisma: P.variables.accentColorNegative
-        }), (0, P.pick)({
-            prisma: (0, j.css)([ "background-color:", ";" ], P.variables.white)
+    /************************************************************************/    var n = {};
+    // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+        (() => {
+        // ESM COMPAT FLAG
+        r.r(n);
+        // EXPORTS
+                r.d(n, {
+            default: () => /* reexport */ Je,
+            defaultPalette: () => /* reexport */ He,
+            isValidHEX: () => /* reexport */ Le
+        });
+        // EXTERNAL MODULE: external "react"
+                var e = r(9497);
+        var t =  r.n(e);
+        // EXTERNAL MODULE: external "prop-types"
+                var a = r(23);
+        var o =  r.n(a);
+        // CONCATENATED MODULE: external "lodash/has"
+        const l = require("lodash/has");
+        var i =  r.n(l);
+        // CONCATENATED MODULE: external "lodash/includes"
+        const s = require("lodash/includes");
+        var c =  r.n(s);
+        // CONCATENATED MODULE: external "lodash/keys"
+        const u = require("lodash/keys");
+        var p =  r.n(u);
+        // CONCATENATED MODULE: external "lodash/omit"
+        const d = require("lodash/omit");
+        var f =  r.n(d);
+        // CONCATENATED MODULE: external "lodash/slice"
+        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);
+        // CONCATENATED MODULE: external "lodash/toLower"
+        const b = require("lodash/toLower");
+        var g =  r.n(b);
+        // 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);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
+        const C = require("@splunk/react-ui/Dropdown");
+        var O =  r.n(C);
+        // EXTERNAL MODULE: external "@splunk/themes"
+                var E = r(3563);
+        // CONCATENATED MODULE: external "@splunk/ui-utils/color"
+        const P = 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");
+        // EXTERNAL MODULE: external "styled-components"
+                var q = r(232);
+        var R =  r.n(q);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Text"
+        const T = require("@splunk/react-ui/Text");
+        var B =  r.n(T);
+        // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+        const V = require("@splunk/react-ui/ScreenReaderContent");
+        var D =  r.n(V);
+        // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
+        const A = require("@splunk/react-icons/Checkmark");
+        var N =  r.n(A);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+        const $ = require("@splunk/react-ui/Clickable");
+        var H =  r.n($);
+        // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
+        var z = (0, E.pick)({
+            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, 
+        E.pick)({
+            enterprise: "transparent",
+            prisma: E.variables.white
         }));
-    }), (function(e) {
-        var t = e.$value;
-        return t && (t === "transparent" ? z : "background-color: ".concat(t));
-    }), (function(e) {
-        var t = e.$noBorder;
-        return t && (0, j.css)([ "border:none;" ]);
-    }), P.variables.focusColor, P.variables.focusShadow, (0, P.pick)({
-        // Fixes focus shadow being cut off by input (SUI-6401)
-        enterprise: (0, j.css)([ "z-index:1;" ])
-    }), (0, P.pick)({
-        enterprise: {
-            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
-            compact: (0, j.css)([ "width:24px;height:24px;" ])
-        },
-        prisma: (0, j.css)([ "width:24px;height:24px;" ])
-    }), (function(e) {
-        var t = e.$prepend;
-        return t && (0, j.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
-    }), (function(e) {
-        var t = e.$append;
-        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, j.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
-        P.pick)({
-            enterprise: P.variables.errorColor,
-            prisma: P.variables.accentColorNegative
+        var F = R()(N()).withConfig({
+            displayName: "SwatchStyles__StyledCheck",
+            componentId: "sc-1wxunhq-0"
+        })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
+        var M = R()(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, 
+        E.pick)({
+            enterprise: {
+                light: E.variables.gray60,
+                dark: E.variables.borderColor
+            },
+            prisma: E.variables.interactiveColorBorder
+        }), (0, E.pick)({
+            prisma: (0, q.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, 
+            E.pick)({
+                enterprise: "#ed1e24",
+                prisma: E.variables.accentColorNegative
+            }), (0, E.pick)({
+                prisma: (0, q.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;" ]);
+        }), 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;" ])
+        }), (0, E.pick)({
+            enterprise: {
+                comfortable: (0, q.css)([ "width:32px;height:32px;" ]),
+                compact: (0, q.css)([ "width:24px;height:24px;" ])
+            },
+            prisma: (0, q.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;" ]);
+        }), (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;" ]);
+        }), (function(e) {
+            var t = e.$hasError;
+            return t && (0, q.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;" ]);
         }));
-    }), (function(e) {
-        var t = e.$showSelected;
-        return t && (0, j.css)([ "display:flex;align-items:center;justify-content:center;" ]);
-    }));
-    // CONCATENATED MODULE: ./src/Color/Swatch.tsx
-    function M() {
-        M = Object.assign || 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];
+        // CONCATENATED MODULE: ./src/Color/Swatch.tsx
+        function L() {
+            L = Object.assign || 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];
+                        }
                     }
                 }
+                return e;
+            };
+            return L.apply(this, arguments);
+        }
+        function U(e, t) {
+            if (e == null) return {};
+            var r = W(e, t);
+            var n, a;
+            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];
+                }
             }
-            return e;
-        };
-        return M.apply(this, arguments);
-    }
-    function L(e, t) {
-        if (e == null) return {};
-        var r = U(e, t);
-        var n, a;
-        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];
-            }
+            return r;
         }
-        return r;
-    }
-    function U(e, t) {
-        if (e == null) 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];
+        function W(e, t) {
+            if (e == null) 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];
+            }
+            return r;
         }
-        return r;
-    }
-    var W = {
-        append: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        /** @private */
-        error: o().bool,
-        /** @private */
-        noBorder: o().bool,
-        /** @private. Call back function when activated. */
-        onClick: o().func,
-        prepend: o().bool,
-        value: o().string,
-        /** @private */
-        showSelected: o().bool
-    };
-    var X =  n().forwardRef((function(e, t) {
-        var r = e.append, a = e.error, o = a === void 0 ? false : a, l = e.onClick, i = e.prepend, s = e.value, u = e.noBorder, c = e.showSelected, p = L(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
-        var d = s === null || s === undefined ? (0, _._)("No color") : s;
+        var X = {
+            append: o().bool,
+            elementRef: o().oneOfType([ o().func, o().object ]),
+            /** @private */
+            error: o().bool,
+            /** @private */
+            noBorder: o().bool,
+            /** @private. Call back function when activated. */
+            onClick: o().func,
+            prepend: o().bool,
+            value: o().string,
+            /** @private */
+            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 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;
-        if (!(typeof f === "string" && ((0, O.isValidHexColor)(f) || f === "transparent")) && f !== null && f !== undefined) {
-            f = undefined;
-        }
-        
-        return n().createElement(F, M({
-            onClick: function e(t) {
-                return l === null || l === void 0 ? void 0 : l(t, {
-                    value: s
-                });
+            // Invalid values are converted to `undefined`
+                        var f = s;
+            if (!(typeof f === "string" && ((0, P.isValidHexColor)(f) || f === "transparent")) && f !== null && f !== undefined) {
+                f = undefined;
+            }
+            
+            return t().createElement(M, L({
+                onClick: function e(t) {
+                    return l === null || l === void 0 ? void 0 : l(t, {
+                        value: s
+                    });
+                },
+                ref: r,
+                $value: f,
+                $append: n,
+                $prepend: i,
+                $hasError: o,
+                $noBorder: c,
+                $showSelected: u,
+                "data-test": "swatch",
+                "data-test-value": s
+            }, p), u &&  t().createElement(F, {
+                "aria-label": (0, I._)("Selected"),
+                role: "presentation"
+            }),  t().createElement(D(), null, d));
+        }));
+        G.propTypes = X;
+        /* harmony default export */        const J = G;
+        // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
+        var Q = R().div.withConfig({
+            displayName: "ColorStyles__StyledColor",
+            componentId: "jxrost-0"
+        })([ "", ";flex-direction:row;" ], E.mixins.reset("flex"));
+        var Y = R()(J).withConfig({
+            displayName: "ColorStyles__StyledInputSwatch",
+            componentId: "jxrost-1"
+        })([ "", ";" ], (0, E.pick)({
+            compact: (0, q.css)([ "width:28px;height:28px;" ])
+        }));
+        var Z = R().div.withConfig({
+            displayName: "ColorStyles__StyledInput",
+            componentId: "jxrost-2"
+        })([ "", ";", "" ], (0, E.pick)({
+            enterprise: (0, q.css)([ "display:flex;" ]),
+            prisma: (0, q.css)([ "position:relative;" ])
+        }), (function(e) {
+            var t = e.$inDropdown;
+            return t ? (0, q.css)([ "width:", ";" ], (0, E.pick)({
+                enterprise: "100%",
+                prisma: "80px"
+            })) : (0, q.css)([ "flex:0 1 auto;min-width:0;" ]);
+        }));
+        var ee = R()(B()).withConfig({
+            displayName: "ColorStyles__StyledInputText",
+            componentId: "jxrost-3"
+        })([ "", "" ], (function(e) {
+            var t = e.$inDropdown;
+            return t && (0, q.css)([ "font-size:12px;" ]);
+        }));
+        var te = R()(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;" ])
+            },
+            enterprise: {
+                comfortable: (0, q.css)([ "width:32px;height:32px;" ]),
+                compact: (0, q.css)([ "width:28px;height:28px;" ])
+            }
+        }));
+        // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
+        const re = require("@splunk/react-icons/ChevronDown");
+        var ne =  r.n(re);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+        const ae = require("@splunk/react-ui/Divider");
+        var oe =  r.n(ae);
+        // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
+        var le = R().div.withConfig({
+            displayName: "PaletteStyles__StyledPalette",
+            componentId: "qgv9v9-0"
+        })([ "width:220px;padding:", ";" ], E.variables.spacingSmall);
+        var ie = R().ul.withConfig({
+            displayName: "PaletteStyles__StyledSwatches",
+            componentId: "qgv9v9-1"
+        })([ "", ";", "" ], E.mixins.reset("block"), (0, E.pick)({
+            enterprise: (0, q.css)([ "margin-bottom:", ";" ], E.variables.spacingXSmall)
+        }));
+        var se = R().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;}" ])
             },
-            ref: t,
-            $value: f,
-            $append: r,
-            $prepend: i,
-            $hasError: o,
-            $noBorder: u,
-            $showSelected: c,
-            "data-test": "swatch",
-            "data-test-value": s
-        }, p), c &&  n().createElement(K, {
-            "aria-label": (0, _._)("Selected"),
-            role: "presentation"
-        }),  n().createElement(V(), null, d));
-    }));
-    X.propTypes = W;
-    /* harmony default export */    const G = X;
-    // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-    var J = I().div.withConfig({
-        displayName: "ColorStyles__StyledColor",
-        componentId: "jxrost-0"
-    })([ "", ";flex-direction:row;" ], P.mixins.reset("flex"));
-    var Q = I()(G).withConfig({
-        displayName: "ColorStyles__StyledInputSwatch",
-        componentId: "jxrost-1"
-    })([ "", ";" ], (0, P.pick)({
-        compact: (0, j.css)([ "width:28px;height:28px;" ])
-    }));
-    var Y = I().div.withConfig({
-        displayName: "ColorStyles__StyledInput",
-        componentId: "jxrost-2"
-    })([ "", ";", "" ], (0, P.pick)({
-        enterprise: (0, j.css)([ "display:flex;" ]),
-        prisma: (0, j.css)([ "position:relative;" ])
-    }), (function(e) {
-        var t = e.$inDropdown;
-        return t ? (0, j.css)([ "width:", ";" ], (0, P.pick)({
-            enterprise: "100%",
-            prisma: "80px"
-        })) : (0, j.css)([ "flex:0 1 auto;min-width:0;" ]);
-    }));
-    var Z = I()(R()).withConfig({
-        displayName: "ColorStyles__StyledInputText",
-        componentId: "jxrost-3"
-    })([ "", "" ], (function(e) {
-        var t = e.$inDropdown;
-        return t && (0, j.css)([ "font-size:12px;" ]);
-    }));
-    var ee = I()(G).withConfig({
-        displayName: "ColorStyles__StyledToggleSwatch",
-        componentId: "jxrost-4"
-    })([ "", "" ], (0, P.pick)({
-        prisma: {
-            comfortable: (0, j.css)([ "width:40px;height:40px;" ]),
-            compact: (0, j.css)([ "width:32px;height:32px;" ])
-        },
-        enterprise: {
-            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
-            compact: (0, j.css)([ "width:28px;height:28px;" ])
+            prisma: (0, q.css)([ "&:nth-child(8n){margin-right:0;}" ])
+        }));
+        var ce = R().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)
+        }));
+        var ue = R()(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);" ]);
+        }));
+        var pe = R().div.withConfig({
+            displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
+            componentId: "qgv9v9-5"
+        })([ "position:relative;" ]);
+        var de = R().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;" ])
+            },
+            prisma: (0, q.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)
+            },
+            prisma: (0, q.css)([ "border:none;" ])
+        }), (0, E.pick)({
+            prisma: (0, q.css)([ "border-radius:2px;" ])
+        }), (0, E.pick)({
+            enterprise: {
+                comfortable: (0, q.css)([ "padding:1px 14px;" ])
+            }
+        }), E.variables.focusShadow);
+        var fe = R()(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 (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];
+                }
+            }
+            return r;
         }
-    }));
-    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
-    const te = require("@splunk/react-icons/ChevronDown");
-    var re =  e.n(te);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-    const ne = require("@splunk/react-ui/Divider");
-    var ae =  e.n(ne);
-    // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-    var oe = I().div.withConfig({
-        displayName: "PaletteStyles__StyledPalette",
-        componentId: "qgv9v9-0"
-    })([ "width:220px;padding:", ";" ], P.variables.spacingSmall);
-    var le = I().ul.withConfig({
-        displayName: "PaletteStyles__StyledSwatches",
-        componentId: "qgv9v9-1"
-    })([ "", ";", "" ], P.mixins.reset("block"), (0, P.pick)({
-        enterprise: (0, j.css)([ "margin-bottom:", ";" ], P.variables.spacingXSmall)
-    }));
-    var ie = I().li.withConfig({
-        displayName: "PaletteStyles__StyledSwatch",
-        componentId: "qgv9v9-2"
-    })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], P.mixins.reset("inline-block"), (0, 
-    P.pick)({
-        enterprise: {
-            compact: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
-        },
-        prisma: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
-    }));
-    var se = I().div.withConfig({
-        displayName: "PaletteStyles__StyledToolBar",
-        componentId: "qgv9v9-3"
-    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";", " gap:4px;" ], P.variables.spacingSmall, (0, 
-    P.pick)({
-        enterprise: (0, j.css)([ "margin-bottom:", ";" ], P.variables.spacingSmall)
-    }));
-    var ue = I()($()).withConfig({
-        displayName: "PaletteStyles__StyledExpandButton",
-        componentId: "qgv9v9-4"
-    })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], P.variables.focusShadow, (function(e) {
-        var t = e.$expanded;
-        return t && (0, j.css)([ "transform:rotate(180deg);" ]);
-    }));
-    var ce = I().div.withConfig({
-        displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
-        componentId: "qgv9v9-5"
-    })([ "position:relative;" ]);
-    var pe = I().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, 
-    P.pick)({
-        enterprise: {
-            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
-            compact: (0, j.css)([ "width:24px;height:24px;" ])
-        },
-        prisma: (0, j.css)([ "width:24px;height:24px;" ])
-    }), (0, P.pick)({
-        enterprise: {
-            light: (0, j.css)([ "border:1px solid ", ";" ], P.variables.gray60),
-            dark: (0, j.css)([ "border:1px solid ", ";" ], P.variables.borderColor)
-        },
-        prisma: (0, j.css)([ "border:none;" ])
-    }), (0, P.pick)({
-        prisma: (0, j.css)([ "border-radius:2px;" ])
-    }), (0, P.pick)({
-        enterprise: {
-            comfortable: (0, j.css)([ "padding:1px 14px;" ])
+        function he(e, t) {
+            if (e == null) 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];
+            }
+            return r;
         }
-    }), P.variables.focusShadow);
-    var de = I()(D()).withConfig({
-        displayName: "PaletteStyles__StyledCheck",
-        componentId: "qgv9v9-7"
-    })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;" ]);
-    // CONCATENATED MODULE: ./src/Color/Palette.tsx
-    function fe(e) {
-        var t = e.expanded, r = e.palette, a = e.value, o = e.swatchToFocusRef, l = e.onSwatchClick, i = e.expandButtonRef, s = e.onPaletteExpand, c = e.onSystemColorPickerChange, p = e.renderInput;
-        var d = (0, P.useSplunkTheme)(), f = d.isPrisma, v = d.isLight;
-        var m = u()(r.map((function(e) {
-            return e && g()(e);
-        })), a);
-        var y = r.map((function(e, t) {
-            var r = e === null ? null : g()(e);
-            var i = r === a;
-            var s = !m && t === 0 || m && i;
-            
-            return n().createElement(ie, {
-                key: r || "null"
-            },  n().createElement(G, {
-                value: r,
-                ref: s ? o : null,
-                onClick: l,
-                noBorder: f,
-                showSelected: i
+        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) {
+                return e && g()(e);
+            })), a);
+            var b = n.map((function(e, r) {
+                var n = e === null ? null : g()(e);
+                var i = n === a;
+                var s = !m && r === 0 || m && i;
+                
+                return t().createElement(se, {
+                    key: n || "null"
+                },  t().createElement(J, {
+                    value: n,
+                    ref: s ? o : null,
+                    onClick: l,
+                    noBorder: v,
+                    showSelected: i
+                }));
             }));
-        }));
-        var b = function e() {
-            var t = !m && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
-            
-            return n().createElement(se, {
-                "data-test": "tool-bar"
-            }, f &&  n().createElement(P.SplunkThemeProvider, {
-                density: "compact"
-            }, p && p()),  n().createElement(G, {
-                value: null,
-                ref: a === null ? o : null,
-                onClick: l,
-                noBorder: f && !v,
-                showSelected: a === null
-            }),  n().createElement(G, {
-                value: "#ffffff",
-                ref: a === "#ffffff" ? o : null,
-                onClick: l,
-                noBorder: f && !v,
-                showSelected: a === "#ffffff"
-            }),  n().createElement(G, {
-                value: "#000000",
-                ref: a === "#000000" ? o : null,
-                onClick: l,
-                noBorder: f,
-                showSelected: a === "#000000"
-            }),  n().createElement(ce, null,  n().createElement(pe, {
-                type: "color",
-                value: a === null ? "" : a,
-                onChange: c,
-                ref: t ? o : null
-            }), t &&  n().createElement(de, {
-                "aria-label": (0, _._)("Selected"),
-                role: "presentation"
-            })));
-        };
-        var x = y.length === 8 ? 7 : 15;
-        var S = h()(y, 0, x);
-        var w = h()(y, x);
-        if (f) {
+            var x = function e() {
+                var r = !m && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
+                
+                return t().createElement(ce, {
+                    "data-test": "tool-bar"
+                }, v &&  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
+                }),  t().createElement(J, {
+                    value: "#ffffff",
+                    ref: a === "#ffffff" ? o : null,
+                    onClick: l,
+                    noBorder: v && !y,
+                    showSelected: a === "#ffffff"
+                }),  t().createElement(J, {
+                    value: "#000000",
+                    ref: a === "#000000" ? o : null,
+                    onClick: l,
+                    noBorder: v,
+                    showSelected: a === "#000000"
+                }),  t().createElement(pe, null,  t().createElement(de, {
+                    type: "color",
+                    value: a === null ? "" : a,
+                    onChange: u,
+                    ref: r ? o : null
+                }), 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) {
+                
+                return t().createElement(le, d,  t().createElement("div", {
+                    style: {
+                        position: "relative"
+                    }
+                },  t().createElement(ie, null, S, r && k), r && x(),  t().createElement(ue, {
+                    ref: i,
+                    $expanded: r,
+                    onClick: s,
+                    "data-test": "expand-button"
+                },  t().createElement(ne(), null))));
+            }
             
-            return n().createElement(oe, null,  n().createElement("div", {
-                style: {
-                    position: "relative"
-                }
-            },  n().createElement(le, null, S, t && w), t && b(),  n().createElement(ue, {
-                ref: i,
-                $expanded: t,
-                onClick: s,
-                "data-test": "expand-button"
-            },  n().createElement(re(), null))));
+            return t().createElement(le, d,  t().createElement(ie, null, b),  t().createElement(oe(), null), x(), p && p());
         }
-        
-        return n().createElement(oe, null,  n().createElement(le, null, y),  n().createElement(ae(), null), b(), p && p());
-    }
-    /* harmony default export */    const ve = fe;
-    // CONCATENATED MODULE: ./src/Color/Color.tsx
-    function he(e) {
-        "@babel/helpers - typeof";
-        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            he = function e(t) {
-                return typeof t;
-            };
-        } else {
-            he = function e(t) {
-                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
-            };
+        /* harmony default export */        const me = ye;
+        // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
+                var be = 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 he(e);
-    }
-    function me() {
-        me = Object.assign || function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    if (Object.prototype.hasOwnProperty.call(r, n)) {
-                        e[n] = r[n];
+        function xe() {
+            xe = Object.assign || 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];
+                        }
                     }
                 }
+                return e;
+            };
+            return xe.apply(this, arguments);
+        }
+        function we(e) {
+            return Oe(e) || Ce(e) || ke(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) {
+            if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
+        }
+        function Oe(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++) {
+                n[r] = e[r];
             }
-            return e;
-        };
-        return me.apply(this, arguments);
-    }
-    function ye(e) {
-        return Se(e) || xe(e) || ge(e) || be();
-    }
-    function be() {
-        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-    }
-    function ge(e, t) {
-        if (!e) return;
-        if (typeof e === "string") return we(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);
-    }
-    function xe(e) {
-        if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
-    }
-    function Se(e) {
-        if (Array.isArray(e)) return we(e);
-    }
-    function we(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;
         }
-        return n;
-    }
-    function ke(e, t) {
-        if (e == null) return {};
-        var r = Ce(e, t);
-        var n, a;
-        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];
+        function Pe(e, t) {
+            if (e == null) return {};
+            var r = Ie(e, t);
+            var n, a;
+            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];
+                }
             }
+            return r;
         }
-        return r;
-    }
-    function Ce(e, t) {
-        if (e == null) 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];
+        function Ie(e, t) {
+            if (e == null) 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];
+            }
+            return r;
         }
-        return r;
-    }
-    function Ee(e, t) {
-        if (!(e instanceof t)) {
-            throw new TypeError("Cannot call a class as a function");
+        function _e(e, t) {
+            if (!(e instanceof t)) {
+                throw new TypeError("Cannot call a class as a function");
+            }
         }
-    }
-    function Pe(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);
+        function je(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);
+            }
         }
-    }
-    function Oe(e, t, r) {
-        if (t) Pe(e.prototype, t);
-        if (r) Pe(e, r);
-        return e;
-    }
-    function _e(e, t) {
-        if (typeof t !== "function" && t !== null) {
-            throw new TypeError("Super expression must either be null or a function");
+        function qe(e, t, r) {
+            if (t) je(e.prototype, t);
+            if (r) je(e, r);
+            return e;
         }
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: true,
-                configurable: true
+        function Re(e, t) {
+            if (typeof t !== "function" && t !== null) {
+                throw new TypeError("Super expression must either be null or a function");
             }
-        });
-        if (t) qe(e, t);
-    }
-    function qe(e, t) {
-        qe = Object.setPrototypeOf || function e(t, r) {
-            t.__proto__ = r;
-            return t;
-        };
-        return qe(e, t);
-    }
-    function je(e) {
-        var t = Re();
-        return function r() {
-            var n = Be(e), a;
-            if (t) {
-                var o = Be(this).constructor;
-                a = Reflect.construct(n, arguments, o);
-            } else {
-                a = n.apply(this, arguments);
+            e.prototype = Object.create(t && t.prototype, {
+                constructor: {
+                    value: e,
+                    writable: true,
+                    configurable: true
+                }
+            });
+            if (t) Te(e, t);
+        }
+        function Te(e, t) {
+            Te = Object.setPrototypeOf || function e(t, r) {
+                t.__proto__ = r;
+                return t;
+            };
+            return Te(e, t);
+        }
+        function Be(e) {
+            var t = Ae();
+            return function r() {
+                var n = Ne(e), a;
+                if (t) {
+                    var o = Ne(this).constructor;
+                    a = Reflect.construct(n, arguments, o);
+                } else {
+                    a = n.apply(this, arguments);
+                }
+                return Ve(this, a);
+            };
+        }
+        function Ve(e, t) {
+            if (t && (ge(t) === "object" || typeof t === "function")) {
+                return t;
             }
-            return Ie(this, a);
-        };
-    }
-    function Ie(e, t) {
-        if (t && (he(t) === "object" || typeof t === "function")) {
-            return t;
+            return De(e);
         }
-        return Te(e);
-    }
-    function Te(e) {
-        if (e === void 0) {
-            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        function De(e) {
+            if (e === void 0) {
+                throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+            }
+            return e;
         }
-        return e;
-    }
-    function Re() {
-        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-        if (Reflect.construct.sham) return false;
-        if (typeof Proxy === "function") return true;
-        try {
-            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
-            return true;
-        } catch (e) {
-            return false;
+        function 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;
+            }
         }
-    }
-    function Be(e) {
-        Be = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
-            return t.__proto__ || Object.getPrototypeOf(t);
-        };
-        return Be(e);
-    }
-    function Ve(e, t, r) {
-        if (t in e) {
-            Object.defineProperty(e, t, {
-                value: r,
-                enumerable: true,
-                configurable: true,
-                writable: true
-            });
-        } else {
-            e[t] = r;
+        function Ne(e) {
+            Ne = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+                return t.__proto__ || Object.getPrototypeOf(t);
+            };
+            return Ne(e);
         }
-        return e;
-    }
-    // The default palette in Prisma theme.
-        var Ae = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
-    var De = S()((function(e) {
-        var t = [];
-        for (var r = 1; r <= e.length * 4; r += 1) {
-            var n = e[(r - 1) % e.length];
-            if (r > e.length * 3) {
-                t.push(n);
+        function $e(e, t, r) {
+            if (t in e) {
+                Object.defineProperty(e, t, {
+                    value: r,
+                    enumerable: true,
+                    configurable: true,
+                    writable: true
+                });
             } else {
-                var a = 40 - 10 * (r / e.length);
-                t.push(k()(n).lighten(a).toString());
+                e[t] = r;
             }
+            return e;
         }
-        return t;
-    }));
+        /** @public */
+        // The default palette in Prisma theme.
+                var He = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
+        var ze = w()((function(e) {
+            var t = [];
+            for (var r = 1; r <= e.length * 4; r += 1) {
+                var n = e[(r - 1) % e.length];
+                if (r > e.length * 3) {
+                    t.push(n);
+                } else {
+                    var a = 40 - 10 * (r / e.length);
+                    t.push(k()(n).lighten(a).toString());
+                }
+            }
+            return t;
+        }));
  // The tool palette in Prisma theme.
-        var Ne = [ "#ffffff", "#000000", null ];
-    var $e = {
-        append: o().bool,
-        defaultValue: o().string,
-        describedBy: o().string,
-        disabled: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().bool,
-        hideInput: o().bool,
-        labelledBy: o().string,
-        name: o().string,
-        onChange: o().func,
-        palette: o().array,
-        prepend: o().bool,
-        /** @private */
-        required: o().bool,
-        /** @private */
-        splunkTheme: o().object,
-        value: o().string
-    };
-    var He = {
-        append: false,
-        disabled: false,
-        error: false,
-        palette: De(Ae),
-        prepend: false
-    };
-    // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-        var ze = function e(t) {
-        return (0, O.isValidHexColor)(t);
-    };
-    var Ke = "N/A";
-    var Fe = "n/a";
-    /*
+                var Ke = [ "#ffffff", "#000000", null ];
+        var Fe = {
+            append: o().bool,
+            defaultValue: o().string,
+            describedBy: o().string,
+            disabled: o().bool,
+            elementRef: o().oneOfType([ o().func, o().object ]),
+            error: o().bool,
+            hideInput: o().bool,
+            labelledBy: o().string,
+            name: o().string,
+            onChange: o().func,
+            palette: o().array,
+            prepend: o().bool,
+            /** @private */
+            required: o().bool,
+            /** @private */
+            splunkTheme: o().object,
+            value: o().string
+        };
+        var Me = {
+            append: false,
+            disabled: false,
+            error: false,
+            palette: ze(He),
+            prepend: false
+        };
+        // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
+                var Le = function e(t) {
+            return (0, P.isValidHexColor)(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 Me =  function(e) {
-        _e(r, e);
-        var t = je(r);
-        Oe(r, null, [ {
-            key: "hasNull",
-            // @docs-props-type ColorPropsBase
-            value: function e(t) {
-                return t.some((function(e) {
-                    return e === null;
-                }));
-            }
-        }, {
-            key: "hasTransparent",
-            value: function e(t) {
-                return t.some((function(e) {
-                    return e !== null && g()(e) === "transparent";
-                }));
-            }
-        } ]);
-        function r(e) {
-            var a;
-            Ee(this, r);
-            a = t.call(this, e);
-            Ve(Te(a), "focusSwatch", void 0);
-            Ve(Te(a), "focusExpandButton", void 0);
-            Ve(Te(a), "controlledExternally", void 0);
-            Ve(Te(a), "dropdown", null);
-            Ve(Te(a), "handleSwatchClick", (function(e, t) {
-                var r = t.value;
-                e.preventDefault();
-                var n = a.props, o = n.name, l = n.onChange;
-                var i = a.getValue();
-                var s = r !== i;
-                var u = r === null ? Ke : r;
-                if (!a.isControlled()) {
-                    a.setState({
-                        value: r
-                    });
+ */        var Xe =  function(e) {
+            Re(n, e);
+            var r = Be(n);
+            qe(n, null, [ {
+                key: "hasNull",
+                // @docs-props-type ColorPropsBase
+                value: function e(t) {
+                    return t.some((function(e) {
+                        return e === null;
+                    }));
                 }
-                a.setState({
-                    displayValue: u,
-                    open: false
-                });
-                if (s) {
-                    l === null || l === void 0 ? void 0 : l({
-                        value: r,
-                        name: o
-                    });
+            }, {
+                key: "hasTransparent",
+                value: function e(t) {
+                    return t.some((function(e) {
+                        return e !== null && g()(e) === "transparent";
+                    }));
                 }
-                a.focus();
-            }));
-            Ve(Te(a), "handlePaletteExpand", (function() {
-                a.setState((function(e) {
-                    return {
-                        expanded: !e.expanded
-                    };
-                }));
-            }));
-            Ve(Te(a), "handleTextChange", (function(e, t) {
-                var r = t.value;
-                a.setState({
-                    displayValue: r
-                });
-            }));
-            Ve(Te(a), "handleTextKeyDown", (function(e) {
-                if ((0, q.keycode)(e.nativeEvent) === "enter") {
+            } ]);
+            function n(e) {
+                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) {
+                    var r = t.value;
                     e.preventDefault();
-                    a.handleRequestClose({
-                        reason: "enterKey"
+                    var n = a.props, o = n.name, l = n.onChange;
+                    var i = a.getValue();
+                    var s = r !== i;
+                    var c = r === null ? Ue : r;
+                    if (!a.isControlled()) {
+                        a.setState({
+                            value: r
+                        });
+                    }
+                    a.setState({
+                        displayValue: c,
+                        open: false
                     });
+                    if (s) {
+                        l === null || l === void 0 ? void 0 : l({
+                            value: r,
+                            name: o
+                        });
+                    }
                     a.focus();
-                }
-            }));
-            Ve(Te(a), "handleButtonClick", (function(e) {
-                e.preventDefault();
-                a.handleRequestClose({
-                    reason: "buttonClick"
-                });
-                a.focus();
-            }));
-            Ve(Te(a), "handleRequestClose", (function(e) {
-                var t = e.reason;
-                var r = a.state.displayValue;
-                var n = a.state.value;
-                if (g()(r) === Fe) {
-                    r = Ke;
+                }));
+                $e(De(a), "handlePaletteExpand", (function() {
+                    a.setState((function(e) {
+                        return {
+                            expanded: !e.expanded
+                        };
+                    }));
+                }));
+                $e(De(a), "handleTextChange", (function(e, t) {
+                    var r = t.value;
                     a.setState({
                         displayValue: r
                     });
-                } else if (g()(r) === "transparent") {
-                    r = "transparent";
-                    a.setState({
-                        displayValue: r
+                }));
+                $e(De(a), "handleTextKeyDown", (function(e) {
+                    if ((0, _.keycode)(e.nativeEvent) === "enter") {
+                        e.preventDefault();
+                        a.handleRequestClose({
+                            reason: "enterKey"
+                        });
+                        a.focus();
+                    }
+                }));
+                $e(De(a), "handleButtonClick", (function(e) {
+                    e.preventDefault();
+                    a.handleRequestClose({
+                        reason: "buttonClick"
                     });
-                }
+                    a.focus();
+                }));
+                $e(De(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 !== Ke && g()(r) !== "transparent" && !y()(r, "#")) {
-                    r = "#".concat(r);
-                    if (t === "escapeKey") {
-                        if (n == null) {
-                            a.setState({
-                                displayValue: Ke
-                            });
+                    // 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
+                                });
+                            }
                         } else {
                             a.setState({
-                                displayValue: n
+                                displayValue: r
                             });
                         }
-                    } else {
+                    }
+                    if (t !== "contentClick") {
                         a.setState({
-                            displayValue: r
+                            open: false
                         });
                     }
-                }
-                if (t !== "contentClick") {
-                    a.setState({
-                        open: false
-                    });
-                }
-                if (t !== "escapeKey") {
-                    a.submitValue(r);
-                }
-            }));
-            Ve(Te(a), "handleRequestOpen", (function() {
-                var e = a.props, t = e.splunkTheme, r = e.palette;
-                var n = t.isPrisma;
-                var o = a.getValue();
-                var l = o === null ? Ke : o;
-                a.setState({
-                    displayValue: l,
-                    open: true
-                }, (function() {
-                    if (a.focusSwatch.current && a.focusSwatch.current.focus) {
-                        a.focusSwatch.current.focus();
+                    if (t !== "escapeKey") {
+                        a.submitValue(r);
                     }
                 }));
-                var i = n ? h()(r, 15) : r;
-                var s = !u()(r.map((function(e) {
-                    return e && g()(e);
-                })), o);
-                var c = s || u()(i.map((function(e) {
-                    return e && g()(e);
-                })), o) || u()(Ne, o);
-                if (c && !a.state.expanded) {
+                $e(De(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;
                     a.setState({
-                        expanded: true
-                    });
-                }
-            }));
-            Ve(Te(a), "handleSystemColorPickerChange", (function(e) {
-                var t = a.getValue();
-                var r = e !== t;
-                var n = a.props.name;
-                var o = e === null ? Ke : e;
-                if (!a.isControlled()) {
+                        displayValue: l,
+                        open: true
+                    }, (function() {
+                        if (a.focusSwatch.current && a.focusSwatch.current.focus) {
+                            a.focusSwatch.current.focus();
+                        }
+                    }));
+                    var i = n ? h()(r, 15) : r;
+                    var s = !c()(r.map((function(e) {
+                        return e && g()(e);
+                    })), o);
+                    var u = s || c()(i.map((function(e) {
+                        return e && g()(e);
+                    })), o) || c()(Ke, o);
+                    if (u && !a.state.expanded) {
+                        a.setState({
+                            expanded: true
+                        });
+                    }
+                }));
+                $e(De(a), "handleSystemColorPickerChange", (function(e) {
+                    var t = a.getValue();
+                    var r = e !== t;
+                    var n = a.props.name;
+                    var o = e === null ? Ue : e;
+                    if (!a.isControlled()) {
+                        a.setState({
+                            value: e
+                        });
+                    }
                     a.setState({
-                        value: e
+                        displayValue: o
                     });
-                }
-                a.setState({
-                    displayValue: o
-                });
-                if (r) {
-                    var l, i;
-                    (l = (i = a.props).onChange) === null || l === void 0 ? void 0 : l.call(i, {
-                        value: e,
-                        name: n
-                    });
-                }
-            }));
-            a.focusSwatch =  n().createRef();
-            a.focusExpandButton =  n().createRef();
-            a.controlledExternally = i()(e, "value");
+                    if (r) {
+                        var l, i;
+                        (l = (i = a.props).onChange) === null || l === void 0 ? void 0 : l.call(i, {
+                            value: e,
+                            name: n
+                        });
+                    }
+                }));
+                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, O.expandShortHandHex)(e.value) : (0, 
-            O.expandShortHandHex)(e.defaultValue);
-            if (o !== null) {
-                o = g()(o);
-            }
+                                var o = a.controlledExternally ? (0, P.expandShortHandHex)(e.value) : (0, 
+                P.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 ? Ke : o;
-            a.state = {
-                displayValue: l,
-                open: false,
-                value: o,
-                expanded: false
-            };
-            if (false) {}
-            if (false) {
-                var s;
-            }
-            return a;
-        }
-        Oe(r, [ {
-            key: "componentDidUpdate",
-            value: function e(t) {
-                if (false) {}
+                                var l = o === null ? Ue : o;
+                a.state = {
+                    displayValue: l,
+                    open: false,
+                    value: o,
+                    expanded: false
+                };
                 if (false) {}
+                if (false) {
+                    var s;
+                }
+                return a;
             }
-            /**
+            qe(n, [ {
+                key: "componentDidUpdate",
+                value: function e(t) {
+                    if (false) {}
+                    if (false) {}
+                }
+                /**
      * Standardizes the current value of the Color:
      * returns based on the input being controlled or uncontrolled
      * returns controlled component's value as formatted.
-     */        }, {
-            key: "getValue",
-            value: function e() {
-                var t = function e(t) {
-                    return t === null ? null : g()(t);
-                };
-                var r = (0, O.expandShortHandHex)(this.props.value);
-                if (this.isControlled()) {
-                    return t(r);
-                }
-                return this.state.value;
-            }
-        }, {
-            key: "submitValue",
-            value: function e(t) {
-                if (t) {
-                    var n = ze(t);
-                    if (!n && t !== "transparent" && t !== Ke) {
-                        // eslint-disable-next-line no-console
-                        console.warn('"'.concat(t, '" is not a valid hex color.'));
+     */            }, {
+                key: "getValue",
+                value: function e() {
+                    var t = function e(t) {
+                        return t === null ? null : g()(t);
+                    };
+                    var r = (0, P.expandShortHandHex)(this.props.value);
+                    if (this.isControlled()) {
+                        return t(r);
                     }
-                    if (n || r.hasTransparent(this.props.palette) && t === "transparent" || t === Ke) {
-                        var a = (0, O.expandShortHandHex)(t);
-                        this.setState({
-                            displayValue: a
-                        });
-                        var o = t !== (this.props.value && g()(this.props.value));
-                        var l = this.props.name;
-                        var i = t === Ke ? null : t;
-                        var s = (0, O.expandShortHandHex)(i);
-                        if (t && !this.isControlled()) {
-                            this.setState({
-                                value: s
-                            });
+                    return this.state.value;
+                }
+            }, {
+                key: "submitValue",
+                value: function e(t) {
+                    if (t) {
+                        var r = Le(t);
+                        if (!r && t !== "transparent" && t !== Ue) {
+                            // eslint-disable-next-line no-console
+                            console.warn('"'.concat(t, '" is not a valid hex color.'));
                         }
-                        if (o) {
-                            var u, c;
-                            (u = (c = this.props).onChange) === null || u === void 0 ? void 0 : u.call(c, {
-                                value: s,
-                                name: l
+                        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 (t && !this.isControlled()) {
+                                this.setState({
+                                    value: s
+                                });
+                            }
+                            if (o) {
+                                var c, u;
+                                (c = (u = this.props).onChange) === null || c === void 0 ? void 0 : c.call(u, {
+                                    value: s,
+                                    name: l
+                                });
+                            }
                         }
                     }
                 }
-            }
-            /**
+                /**
      * Place focus on the input.
-     */        }, {
-            key: "focus",
-            value: function e() {
-                var t;
-                (t = this.dropdown) === null || t === void 0 ? void 0 : t.focus();
-            }
-        }, {
-            key: "isControlled",
-            value: function e() {
-                return this.controlledExternally;
-            }
-        }, {
-            key: "renderInput",
-            value: function e(t) {
-                var a = t.textAppend, o = t.textPrepend, l = t.textInline, i = t.inDropdown;
-                var s = this.props, u = s.splunkTheme, c = s.required;
-                var p = this.state.displayValue;
-                var d = u.isPrisma;
-                var f = r.hasTransparent(this.props.palette) && g()(p) === "transparent";
-                var v = g()(p) === Fe;
-                var h = p;
-                if (!y()(p, "#")) {
-                    h = "#".concat(p);
+     */            }, {
+                key: "focus",
+                value: function e() {
+                    var t;
+                    (t = this.dropdown) === null || t === void 0 ? void 0 : t.focus();
                 }
-                h = f ? "transparent" : h;
-                h = v ? null : h;
-                
-                return n().createElement(Y, {
-                    $inDropdown: i
-                },  n().createElement(Z, {
-                    $inDropdown: i,
-                    append: a,
-                    autoCapitalize: "off",
-                    autoComplete: "off",
-                    autoCorrect: "off",
-                    "aria-label": (0, _._)("Hexadecimal color value"),
-                    inline: l,
-                    prepend: o,
-                    onKeyDown: this.handleTextKeyDown,
-                    onChange: this.handleTextChange,
-                    required: c,
-                    spellCheck: false,
-                    value: p
-                }), !d && i &&  n().createElement(Q, {
-                    "data-test": "textbox-swatch",
-                    onClick: this.handleButtonClick,
-                    value: h,
-                    style: {
-                        marginLeft: "1px"
-                    }
-                }));
-            }
-        }, {
-            key: "renderPalette",
-            value: function e() {
-                var t = this;
-                var r = this.props, a = r.splunkTheme, o = r.palette;
-                var l = this.state.expanded;
-                var i = a.isPrisma;
-                
-                return n().createElement(ve, {
-                    palette: o,
-                    value: this.getValue(),
-                    swatchToFocusRef: this.focusSwatch,
-                    renderInput: function e() {
-                        return i ? t.renderInput({
-                            textAppend: false,
-                            textPrepend: false,
-                            textInline: true,
-                            inDropdown: true
-                        }) : t.renderInput({
-                            textAppend: true,
-                            textPrepend: true,
-                            textInline: true,
-                            inDropdown: true
-                        });
-                    },
-                    expandButtonRef: this.focusExpandButton,
-                    onSwatchClick: this.handleSwatchClick,
-                    expanded: l,
-                    onPaletteExpand: this.handlePaletteExpand,
-                    onSystemColorPickerChange: function e(r) {
-                        return t.handleSystemColorPickerChange(r.target.value);
+            }, {
+                key: "isControlled",
+                value: function e() {
+                    return this.controlledExternally;
+                }
+            }, {
+                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);
                     }
-                });
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this;
-                var a = this.props, o = a.append, l = a.disabled, i = a.describedBy, s = a.elementRef, u = a.error, c = a.hideInput, d = a.labelledBy, v = a.name, h = a.prepend, m = a.splunkTheme, y = ke(a, [ "append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme" ]);
-                var b = m.isPrisma;
-                var g = this.getValue();
-                var x = this.state.displayValue;
+                    y = v ? "transparent" : y;
+                    y = h ? null : y;
+                    
+                    return t().createElement(Z, {
+                        $inDropdown: i
+                    },  t().createElement(be["default"], {
+                        id: this.hexInputReaderContentId
+                    }, (0, I._)("Hexadecimal color value")),  t().createElement(ee, {
+                        $inDropdown: i,
+                        append: a,
+                        autoCapitalize: "off",
+                        autoComplete: "off",
+                        autoCorrect: "off",
+                        inline: l,
+                        prepend: o,
+                        onKeyDown: this.handleTextKeyDown,
+                        onChange: this.handleTextChange,
+                        required: u,
+                        spellCheck: false,
+                        value: d,
+                        labelledBy: p ? "".concat(p, " ").concat(this.hexInputReaderContentId) : this.hexInputReaderContentId
+                    }), !f && i &&  t().createElement(Y, {
+                        "data-test": "textbox-swatch",
+                        onClick: this.handleButtonClick,
+                        value: y,
+                        style: {
+                            marginLeft: "1px"
+                        }
+                    }));
+                }
+            }, {
+                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;
+                    
+                    return t().createElement(me, {
+                        role: "dialog",
+                        "aria-label": (0, I._)("Choose color"),
+                        palette: o,
+                        value: this.getValue(),
+                        swatchToFocusRef: this.focusSwatch,
+                        renderInput: function e() {
+                            return i ? r.renderInput({
+                                textAppend: false,
+                                textPrepend: false,
+                                textInline: true,
+                                inDropdown: true
+                            }) : r.renderInput({
+                                textAppend: true,
+                                textPrepend: true,
+                                textInline: true,
+                                inDropdown: true
+                            });
+                        },
+                        expandButtonRef: this.focusExpandButton,
+                        onSwatchClick: this.handleSwatchClick,
+                        expanded: l,
+                        onPaletteExpand: this.handlePaletteExpand,
+                        onSystemColorPickerChange: function e(t) {
+                            return r.handleSystemColorPickerChange(t.target.value);
+                        }
+                    });
+                }
+            }, {
+                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 g = this.getValue();
+                    var x = this.state.displayValue;
  // hideInput defaults to true in Enterprise if prop is not provided
-                                var S = c !== null && c !== void 0 ? c : true;
-                var w = b ? c : S;
-                var k =  n().createElement(ee, me({
-                    append: !w ? true : o,
-                    "data-test": "color",
-                    "data-test-value": x,
-                    "aria-describedby": i,
-                    "aria-labelledby": d,
-                    "aria-invalid": u || undefined,
-                    disabled: l,
-                    error: u,
-                    elementRef: s,
-                    name: v,
-                    prepend: h,
-                    value: g
-                }, f()(y, [].concat(ye(p()(r.propTypes)), [ // TS: trick omit
-                "onChange" ]))));
-                
-                return n().createElement(J, null,  n().createElement(E(), {
-                    closeReasons: [ "clickAway", "escapeKey", "offScreen", "toggleClick" ],
-                    onRequestClose: this.handleRequestClose,
-                    onRequestOpen: this.handleRequestOpen,
-                    open: this.state.open,
-                    ref: function e(r) {
-                        t.dropdown = r;
-                    },
-                    retainFocus: true,
-                    takeFocus: false,
-                    toggle: k
-                }, this.renderPalette()), !w && this.renderInput({
-                    textAppend: false,
-                    textPrepend: true,
-                    textInline: true,
-                    inDropdown: false
-                }));
-            }
-        } ]);
-        return r;
-    }(r.Component);
-    Ve(Me, "propTypes", $e);
-    Ve(Me, "defaultProps", He);
-    var Le = (0, P.withSplunkTheme)(Me);
-    Le.propTypes = Me.propTypes;
-    // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-    /* harmony default export */    const Ue = Le;
-    // CONCATENATED MODULE: ./src/Color/index.ts
-    module.exports = t;
+                                        var w = u !== null && u !== void 0 ? u : true;
+                    var S = b ? u : w;
+                    var k =  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,
+                        disabled: l,
+                        error: c,
+                        elementRef: s,
+                        name: v,
+                        prepend: h,
+                        value: g
+                    }, f()(m, [].concat(we(p()(n.propTypes)), [ // TS: trick omit
+                    "onChange" ]))));
+                    
+                    return t().createElement(Q, null,  t().createElement(be["default"], {
+                        id: this.swatchToggleReaderContentId
+                    }, (0, I._)("Color picker")),  t().createElement(O(), {
+                        closeReasons: [ "clickAway", "escapeKey", "offScreen", "toggleClick" ],
+                        onRequestClose: this.handleRequestClose,
+                        onRequestOpen: this.handleRequestOpen,
+                        open: this.state.open,
+                        ref: function e(t) {
+                            r.dropdown = t;
+                        },
+                        retainFocus: true,
+                        takeFocus: false,
+                        toggle: k
+                    }, this.renderPalette()), !S && this.renderInput({
+                        textAppend: false,
+                        textPrepend: true,
+                        textInline: true,
+                        inDropdown: false
+                    }));
+                }
+            } ]);
+            return n;
+        }(e.Component);
+        $e(Xe, "propTypes", Fe);
+        $e(Xe, "defaultProps", Me);
+        var Ge = (0, E.withSplunkTheme)(Xe);
+        Ge.propTypes = Xe.propTypes;
+        // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
+        /* harmony default export */        const Je = Ge;
+    }) // CONCATENATED MODULE: ./src/Color/index.ts
+    ();
+    module.exports = n;
     /******/})();