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

package/Color.js

@@ -3,79 +3,79 @@
     /******/ "use strict";
     /******/    var e = {
         /***/ 6165: 
-        /***/ (e, t, r) => {
+        /***/ (e, r, n) => {
             // EXPORTS
-            r.d(t, {
-                default: () => /* reexport */ b
+            n.d(r, {
+                default: () => /* reexport */ h
             });
             // EXTERNAL MODULE: external "react"
-                        var n = r(9497);
-            var a =  r.n(n);
+                        var t = n(9497);
+            var a =  n.n(t);
             // EXTERNAL MODULE: external "prop-types"
-                        var o = r(23);
-            var l =  r.n(o);
+                        var l = n(23);
+            var o =  n.n(l);
             // EXTERNAL MODULE: external "styled-components"
-                        var i = r(232);
-            var s =  r.n(i);
+                        var i = n(232);
+            var u =  n.n(i);
             // EXTERNAL MODULE: external "@splunk/themes"
-                        var u = r(3563);
+                        var s = n(3563);
             // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
-            var c = s().span.withConfig({
+            var c = u().span.withConfig({
                 displayName: "ScreenReaderContentStyles__Styled",
                 componentId: "sc-1lnohwp-0"
-            })([ "", ";" ], u.mixins.screenReaderContent());
+            })([ "", ";" ], s.mixins.screenReaderContent());
             // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContent.tsx
-            function p() {
-                return p = Object.assign ? Object.assign.bind() : function(e) {
-                    for (var t = 1; t < arguments.length; t++) {
-                        var r = arguments[t];
-                        for (var n in r) {
-                            ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+            function d() {
+                return d = Object.assign ? Object.assign.bind() : function(e) {
+                    for (var r = 1; r < arguments.length; r++) {
+                        var n = arguments[r];
+                        for (var t in n) {
+                            ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
                         }
                     }
                     return e;
-                }, p.apply(null, arguments);
+                }, d.apply(null, arguments);
             }
-            function d(e, t) {
+            function f(e, r) {
                 if (null == e) return {};
-                var r, n, a = f(e, t);
+                var n, t, a = v(e, r);
                 if (Object.getOwnPropertySymbols) {
-                    var o = Object.getOwnPropertySymbols(e);
-                    for (n = 0; n < o.length; n++) {
-                        r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                    var l = Object.getOwnPropertySymbols(e);
+                    for (t = 0; t < l.length; t++) {
+                        n = l[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
                     }
                 }
                 return a;
             }
-            function f(e, t) {
+            function v(e, r) {
                 if (null == e) return {};
-                var r = {};
-                for (var n in e) {
-                    if ({}.hasOwnProperty.call(e, n)) {
-                        if (t.includes(n)) continue;
-                        r[n] = e[n];
+                var n = {};
+                for (var t in e) {
+                    if ({}.hasOwnProperty.call(e, t)) {
+                        if (r.includes(t)) continue;
+                        n[t] = e[t];
                     }
                 }
-                return r;
+                return n;
             }
-            var v = {
-                children: l().node.isRequired,
-                elementRef: l().oneOfType([ l().func, l().object ])
+            var p = {
+                children: o().node.isRequired,
+                elementRef: o().oneOfType([ o().func, o().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" ]);
+ */            function b(e) {
+                var r = e.children, n = e.elementRef, t = f(e, [ "children", "elementRef" ]);
                 // @docs-props-type ScreenReaderContentPropsBase
                                 
-                return a().createElement(c, p({
+                return a().createElement(c, d({
                     "data-test": "screen-reader-content",
-                    ref: r
-                }, n), t);
+                    ref: n
+                }, t), r);
             }
-            h.propTypes = v;
-            /* harmony default export */            const b = h;
+            b.propTypes = p;
+            /* harmony default export */            const h = b;
         } // CONCATENATED MODULE: ./src/ScreenReaderContent/index.ts
         /***/ ,
         /***/ 3563: 
@@ -98,54 +98,54 @@
     };
     /************************************************************************/
     /******/ // The module cache
-    /******/    var t = {};
+    /******/    var r = {};
     /******/
     /******/ // The require function
-    /******/    function r(n) {
+    /******/    function n(t) {
         /******/ // Check if module is in cache
-        /******/ var a = t[n];
+        /******/ var a = r[t];
         /******/        if (a !== undefined) {
             /******/ return a.exports;
             /******/        }
         /******/ // Create a new module (and put it into the cache)
-        /******/        var o = t[n] = {
+        /******/        var l = r[t] = {
             /******/ // no module.id needed
             /******/ // no module.loaded needed
             /******/ exports: {}
             /******/        };
         /******/
         /******/ // Execute the module function
-        /******/        e[n](o, o.exports, r);
+        /******/        e[t](l, l.exports, n);
         /******/
         /******/ // Return the exports of the module
-        /******/        return o.exports;
+        /******/        return l.exports;
         /******/    }
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ r.n = e => {
-            /******/ var t = e && e.__esModule ? 
+        /******/ n.n = e => {
+            /******/ var r = e && e.__esModule ? 
             /******/ () => e["default"]
             /******/ : () => e
             /******/;
-            r.d(t, {
-                a: t
+            n.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ r.d = (e, t) => {
-            /******/ for (var n in t) {
-                /******/ if (r.o(t, n) && !r.o(e, n)) {
-                    /******/ Object.defineProperty(e, n, {
+        /******/ n.d = (e, r) => {
+            /******/ for (var t in r) {
+                /******/ if (n.o(r, t) && !n.o(e, t)) {
+                    /******/ Object.defineProperty(e, t, {
                         enumerable: true,
-                        get: t[n]
+                        get: r[t]
                     });
                     /******/                }
                 /******/            }
@@ -154,14 +154,14 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ r.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ n.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ r.r = e => {
+        /******/ n.r = e => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                 /******/ Object.defineProperty(e, Symbol.toStringTag, {
                     value: "Module"
@@ -173,1054 +173,814 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var n = {};
+    /************************************************************************/    var t = {};
     // 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);
+        n.r(t);
         // EXPORTS
-                r.d(n, {
-            default: () => /* reexport */ Ze,
-            defaultPalette: () => /* reexport */ Ke,
-            isValidHEX: () => /* reexport */ We
+                n.d(t, {
+            default: () => /* reexport */ De,
+            defaultPalette: () => /* reexport */ _e
         });
         // EXTERNAL MODULE: external "react"
-                var e = r(9497);
-        var t =  r.n(e);
+                var e = n(9497);
+        var r =  n.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 u =  r.n(s);
-        // CONCATENATED MODULE: external "lodash/keys"
-        const c = require("lodash/keys");
-        var p =  r.n(c);
-        // CONCATENATED MODULE: external "lodash/omit"
-        const d = require("lodash/omit");
-        var f =  r.n(d);
-        // CONCATENATED MODULE: external "lodash/slice"
-        const v = require("lodash/slice");
-        var h =  r.n(v);
+                var a = n(23);
+        var l =  n.n(a);
         // CONCATENATED MODULE: external "lodash/startsWith"
-        const b = require("lodash/startsWith");
-        var m =  r.n(b);
+        const o = require("lodash/startsWith");
+        var i =  n.n(o);
         // CONCATENATED MODULE: external "lodash/toLower"
-        const y = require("lodash/toLower");
-        var g =  r.n(y);
-        // CONCATENATED MODULE: external "lodash/memoize"
-        const x = require("lodash/memoize");
-        var w =  r.n(x);
-        // CONCATENATED MODULE: external "tinycolor2"
-        const S = require("tinycolor2");
-        var C =  r.n(S);
+        const u = require("lodash/toLower");
+        var s =  n.n(u);
         // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-        const k = require("@splunk/react-ui/Dropdown");
-        var P =  r.n(k);
-        // EXTERNAL MODULE: external "@splunk/themes"
-                var E = r(3563);
+        const c = require("@splunk/react-ui/Dropdown");
+        var d =  n.n(c);
+        // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
+        const f = require("@splunk/react-ui/useControlled");
+        var v =  n.n(f);
         // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-        const O = require("@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");
+        const b = require("@splunk/ui-utils/i18n");
         // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-        const _ = require("@splunk/ui-utils/keyboard");
+        const h = require("@splunk/ui-utils/keyboard");
         // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-        const q = require("@splunk/ui-utils/id");
+        const y = require("@splunk/ui-utils/id");
         // EXTERNAL MODULE: external "styled-components"
-                var j = r(232);
-        var T =  r.n(j);
+                var g = n(232);
+        var m =  n.n(g);
+        // EXTERNAL MODULE: external "@splunk/themes"
+                var w = n(3563);
         // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-        const R = require("@splunk/react-ui/Text");
-        var B =  r.n(R);
-        // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-        const D = require("@splunk/react-ui/ScreenReaderContent");
-        var V =  r.n(D);
+        const S = require("@splunk/react-ui/Text");
+        var C =  n.n(S);
+        // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
+        // The text input displayed initially (not in the dropdown) is set to 104px to accommodate the
+        // largest accepted value for Color, which is 'transparent,' while maintaining the base 8px grid.
+        var x = "104px";
+        var k = m().div.withConfig({
+            displayName: "ColorStyles__StyledColor",
+            componentId: "jxrost-0"
+        })([ "", ";flex-direction:row;" ], w.mixins.reset("flex"));
+        var O = m().div.withConfig({
+            displayName: "ColorStyles__StyledInput",
+            componentId: "jxrost-1"
+        })([ "display:flex;min-width:0;" ]);
+        var E = m()(C()).withConfig({
+            displayName: "ColorStyles__StyledInputText",
+            componentId: "jxrost-2"
+        })([ "width:", ";", " &:focus-within{z-index:1;}" ], x, (function(e) {
+            var r = e.$inDropdown;
+            return r && (0, g.css)([ "margin-right:", ";" ], w.variables.spacingSmall);
+        }));
+        // CONCATENATED MODULE: external "lodash/includes"
+        const I = require("lodash/includes");
+        var _ =  n.n(I);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+        const q = require("@splunk/react-ui/Divider");
+        var P =  n.n(q);
         // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-        const A = require("@splunk/react-icons/Checkmark");
-        var N =  r.n(A);
+        const j = require("@splunk/react-icons/Checkmark");
+        var R =  n.n(j);
         // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const $ = require("@splunk/react-ui/Clickable");
-        var H =  r.n($);
+        const H = require("@splunk/react-ui/Clickable");
+        var T =  n.n(H);
+        // CONCATENATED MODULE: ./src/utils/determineTextBrightness.ts
+        function D(e, r) {
+            return F(e) || N(e, r) || A(e, r) || $();
+        }
+        function $() {
+            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+        }
+        function A(e, r) {
+            if (e) {
+                if ("string" == typeof e) return B(e, r);
+                var n = {}.toString.call(e).slice(8, -1);
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? B(e, r) : void 0;
+            }
+        }
+        function B(e, r) {
+            (null == r || r > e.length) && (r = e.length);
+            for (var n = 0, t = Array(r); n < r; n++) {
+                t[n] = e[n];
+            }
+            return t;
+        }
+        function N(e, r) {
+            var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+            if (null != n) {
+                var t, a, l, o, i = [], u = !0, s = !1;
+                try {
+                    if (l = (n = n.call(e)).next, 0 === r) {
+                        if (Object(n) !== n) return;
+                        u = !1;
+                    } else for (;!(u = (t = l.call(n)).done) && (i.push(t.value), i.length !== r); u = !0) {
+                    }
+                } catch (e) {
+                    s = !0, a = e;
+                } finally {
+                    try {
+                        if (!u && null != n["return"] && (o = n["return"](), Object(o) !== o)) return;
+                    } finally {
+                        if (s) throw a;
+                    }
+                }
+                return i;
+            }
+        }
+        function F(e) {
+            if (Array.isArray(e)) return e;
+        }
+        var M = "lightText";
+        var z = "darkText";
+        function V(e) {
+            var r = D(e, 3), n = r[0], t = r[1], a = r[2];
+            var l = (n * 299 + t * 587 + a * 114) / 1e3;
+ // formula from https://www.w3.org/TR/AERT/#color-contrast
+                        return l > 125 ? z : M;
+        }
+        /**
+ * Determines if light or dark text should be used over a specific background color by determining the color brightness of a
+ * supplied background color.
+ * @param isLight - True if colorScheme is light. False if colorScheme is dark.
+ * @param backgroundColor - accepts hex color, rgb, rgba, common color keywords
+ * @returns DARK_TEXT or LIGHT_TEXT
+ *
+ * Some things to watch out for:
+ * 1. determineTextBrightness helps you come close to accessible contrast, but it is not guaranteed to always work.
+ * It might fail say for a color that is in the middle in terms of brightness/ near the borderline of the cutoff.
+ * For example if a background color has a text brightness of 124 when the cutoff is determined by: brightness > 125 ? DARK_TEXT : LIGHT_TEXT
+ * 2. If you use a color that is not black for dark text or white for light text that would decrease the likelihood that it would pass contrast with the background color
+ * if you use determineTextBrightness to decide whether to use dark or light text.
+ */        function K(e, r) {
+            if (typeof r === "string") {
+                if ((0, p.isValidHexColor)(r)) {
+                    // hex
+                    var n = r;
+                    if (n.length === 3 || n.length === 4) {
+                        // shorthand hex
+                        n = (0, p.expandShortHandHex)(n);
+                    }
+                    var t = (0, p.hexToRgb)(n);
+                    if (t != null) {
+                        return V(t);
+                    }
+                } else if (r.includes(",")) {
+                    if ((0, p.isValidRgb)(r)) {
+                        // rgb
+                        var a = r.replace(/[^\d,]/g, "").split(",").slice(0, 3);
+                        var l = a.map((function(e) {
+                            return parseInt(e, 10);
+                        })), o = D(l, 3), i = o[0], u = o[1], s = o[2];
+                        return V([ i, u, s ]);
+                    }
+                } else if (p.extendedColorKeywords.includes(r.toLowerCase())) {
+                    // named color
+                    var c = (0, p.namedColorToHex)(r.toLowerCase());
+                    if (c != null) {
+                        var d = (0, p.hexToRgb)(c);
+                        if (d != null) {
+                            return V(d);
+                        }
+                    }
+                }
+            }
+            // TODO: Need to add support for auto text color to work with theme variable background color (SUI-5706).
+            /**
+   * We know the backgroundColor defaults to variables.neutral200 so to save on computing we hard code the text brightness.
+   * TODO: Convert theme variable color variables.neutral200 to rgb dynamically and memoize it (SUI-5731).
+   */
+            // backgroundColor is either not provided or an accepted representation of color
+                        return e ? z : M;
+        }
         // 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, j.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], z, z, z, z, z, z, (0, 
-        E.pick)({
-            enterprise: "transparent",
-            prisma: E.variables.white
-        }));
-        var F = T()(N()).withConfig({
+        var L = "rgba(0, 0, 0, 0.2)";
+        var U = (0, g.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:", ";" ], L, L, L, L, L, L, w.variables.white);
+        var W = function e(r, n) {
+            return K(r, n || undefined) === z ? w.variables.black : w.variables.white;
+        };
+        var G = m()(R()).withConfig({
             displayName: "SwatchStyles__StyledCheck",
             componentId: "sc-1wxunhq-0"
-        })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
-        var M = T()(H()).withConfig({
-            displayName: "SwatchStyles__StyledClickable",
+        })([ "box-sizing:border-box;", "" ], (function(e) {
+            var r = e.$value;
+            return r === "transparent" ? (0, g.css)([ "color:", ";" ], w.variables.black) : (0, 
+            w.pick)({
+                light: (0, g.css)([ "color:", ";" ], W(true, r)),
+                dark: (0, g.css)([ "color:", ";" ], W(false, r))
+            });
+        }));
+        var J = m().div.withConfig({
+            displayName: "SwatchStyles__StyledOuter",
             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, j.css)([ "border-radius:2px;" ])
+        })([ "border:1px solid ", ";border-radius:", ";box-sizing:border-box;height:", ";min-width:", ";&:focus-within{box-shadow:", ";z-index:1;}", " ", " ", "" ], w.variables.interactiveColorBorder, w.variables.borderRadius, w.variables.inputHeight, w.variables.inputHeight, w.variables.focusShadow, (function(e) {
+            var r = e.$disabled;
+            return !r && (0, g.css)([ "&:hover{border-color:", ";}" ], w.variables.interactiveColorBorderHover);
         }), (function(e) {
-            var t = e.$value;
-            return t === null && (0, j.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
-            E.pick)({
-                enterprise: "#ed1e24",
-                prisma: E.variables.accentColorNegative
-            }), (0, E.pick)({
-                prisma: (0, j.css)([ "background-color:", ";" ], E.variables.white)
-            }));
+            var r = e.$prepend;
+            return r && (0, g.css)([ "margin-left:1px;border-start-start-radius:0;border-end-start-radius:0;" ]);
         }), (function(e) {
-            var t = e.$value;
-            return t && (t === "transparent" ? K : "background-color: ".concat(t));
+            var r = e.$append;
+            return r && (0, g.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-right:none;" ]);
+        }));
+        var Q = m()(T()).withConfig({
+            displayName: "SwatchStyles__StyledClickable",
+            componentId: "sc-1wxunhq-2"
+        })([ "display:block;position:relative;flex:0 0 auto;width:100%;height:100%;border:1px solid ", ";border-radius:3px;", ";", ";", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], w.variables.neutral100, (function(e) {
+            var r = e.$value;
+            return r === null && (0, g.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );" ], w.variables.contentColorNegative);
         }), (function(e) {
-            var t = e.$noBorder;
-            return t && (0, j.css)([ "border:none;" ]);
-        }), E.variables.focusColor, E.variables.focusShadow, (0, E.pick)({
-            // Fixes focus shadow being cut off by input (SUI-6401)
-            enterprise: (0, j.css)([ "z-index:1;" ])
-        }), (0, E.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;" ])
+            var r = e.$value;
+            return r && (r === "transparent" ? U : "background-color: ".concat(r));
         }), (function(e) {
-            var t = e.$prepend;
-            return t && (0, j.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+            var r = e.$prepend;
+            return r && (0, g.css)([ "border-start-start-radius:0;border-end-start-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;" ]);
+            var r = e.$append;
+            return r && (0, g.css)([ "border-start-end-radius:0;border-end-end-radius:0;" ]);
         }), (function(e) {
-            var t = e.$hasError;
-            return t && (0, j.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
-            E.pick)({
-                enterprise: E.variables.errorColor,
-                prisma: E.variables.accentColorNegative
-            }));
+            var r = e.$hasError;
+            return r && (0, g.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], w.variables.interactiveColorAccentError);
         }), (function(e) {
-            var t = e.$showSelected;
-            return t && (0, j.css)([ "display:flex;align-items:center;justify-content:center;" ]);
+            var r = e.$showSelected;
+            return r && (0, g.css)([ "display:flex;align-items:center;justify-content:center;" ]);
         }));
+        // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
+        var X = 5;
+        var Y = m().div.withConfig({
+            displayName: "PaletteStyles__StyledPalette",
+            componentId: "qgv9v9-0"
+        })([ "padding:", " ", ";" ], w.variables.spacingMedium, w.variables.spacingLarge);
+        var Z = m().ul.withConfig({
+            displayName: "PaletteStyles__StyledSwatches",
+            componentId: "qgv9v9-1"
+        })([ "", ";grid-template-columns:repeat(", ",", ");gap:", ";" ], w.mixins.reset("grid"), X, w.variables.inputHeight, w.variables.spacingSmall);
+        var ee = m().li.withConfig({
+            displayName: "PaletteStyles__StyledSwatch",
+            componentId: "qgv9v9-2"
+        })([ "", ";" ], w.mixins.reset("inline-block"));
+        var re = m().div.withConfig({
+            displayName: "PaletteStyles__StyledToolBar",
+            componentId: "qgv9v9-3"
+        })([ "position:relative;display:flex;align-items:center;gap:", ";" ], w.variables.spacingSmall);
+        var ne = m().div.withConfig({
+            displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
+            componentId: "qgv9v9-4"
+        })([ "position:relative;height:", ";width:", ";border:1px solid ", ";border-radius:", ";box-sizing:border-box;" ], w.variables.inputHeight, w.variables.inputHeight, w.variables.interactiveColorBorder, w.variables.borderRadius);
+        var te = m().input.withConfig({
+            displayName: "PaletteStyles__StyledSystemColorPicker",
+            componentId: "qgv9v9-5"
+        })([ "width:100%;height:100%;border:1px solid ", ";border-radius:3px;outline:none;appearance:none;padding:1px 12px;margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;cursor:pointer;line-height:20px;&::-webkit-color-swatch{border:none;border-radius:3px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], w.variables.neutral100, w.variables.focusShadow);
+        var ae = m()(G).withConfig({
+            displayName: "PaletteStyles__StyledColorPickerCheck",
+            componentId: "qgv9v9-6"
+        })([ "color:", ";height:100%;margin:auto;position:absolute;right:0;left:0;pointer-events:none;" ], w.variables.black);
+        var le = m()(P()).withConfig({
+            displayName: "PaletteStyles__StyledDivider",
+            componentId: "qgv9v9-7"
+        })([ "margin-block:", ";" ], w.variables.spacingSmall);
+        // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+        const oe = require("@splunk/react-ui/ScreenReaderContent");
+        var ie =  n.n(oe);
         // CONCATENATED MODULE: ./src/Color/Swatch.tsx
-        function L() {
-            return L = Object.assign ? Object.assign.bind() : function(e) {
-                for (var t = 1; t < arguments.length; t++) {
-                    var r = arguments[t];
-                    for (var n in r) {
-                        ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+        function ue() {
+            return ue = Object.assign ? Object.assign.bind() : function(e) {
+                for (var r = 1; r < arguments.length; r++) {
+                    var n = arguments[r];
+                    for (var t in n) {
+                        ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
                     }
                 }
                 return e;
-            }, L.apply(null, arguments);
+            }, ue.apply(null, arguments);
         }
-        function U(e, t) {
+        function se(e, r) {
             if (null == e) return {};
-            var r, n, a = W(e, t);
+            var n, t, a = ce(e, r);
             if (Object.getOwnPropertySymbols) {
-                var o = Object.getOwnPropertySymbols(e);
-                for (n = 0; n < o.length; n++) {
-                    r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                var l = Object.getOwnPropertySymbols(e);
+                for (t = 0; t < l.length; t++) {
+                    n = l[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
                 }
             }
             return a;
         }
-        function W(e, t) {
+        function ce(e, r) {
             if (null == e) return {};
-            var r = {};
-            for (var n in e) {
-                if ({}.hasOwnProperty.call(e, n)) {
-                    if (t.includes(n)) continue;
-                    r[n] = e[n];
+            var n = {};
+            for (var t in e) {
+                if ({}.hasOwnProperty.call(e, t)) {
+                    if (r.includes(t)) continue;
+                    n[t] = e[t];
                 }
             }
-            return r;
+            return n;
         }
-        var X = {
-            append: o().bool,
-            elementRef: o().oneOfType([ o().func, o().object ]),
+        var de = {
+            append: l().bool,
+            elementRef: l().oneOfType([ l().func, l().object ]),
             /** @private */
-            error: o().bool,
-            /** @private */
-            noBorder: o().bool,
+            error: l().bool,
             /** @private. Call back function when activated. */
-            onClick: o().func,
-            prepend: o().bool,
-            value: o().string,
+            onClick: l().func,
+            prepend: l().bool,
+            value: l().string,
             /** @private */
-            showSelected: o().bool
+            showSelected: l().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, u = e.noBorder, c = e.showSelected, p = U(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
-            var d = s === null || s === undefined ? (0, I._)("No color") : s;
+        var fe =  r().forwardRef((function(n, t) {
+            var a = n.append, l = n.disabled, o = n.error, i = o === void 0 ? false : o, u = n.onClick, s = n.prepend, c = n.value, d = n.showSelected, f = se(n, [ "append", "disabled", "error", "onClick", "prepend", "value", "showSelected" ]);
+            var v = c === null || c === undefined ? (0, b._)("No color") : c;
             // 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;
+                        var h = c;
+            if (!(typeof h === "string" && ((0, p.isValidHexColor)(h) || h === "transparent")) && h !== null && h !== undefined) {
+                h = undefined;
             }
+            var y = (0, e.useCallback)((function(e) {
+                return u === null || u === void 0 ? void 0 : u(e, {
+                    value: c
+                });
+            }), [ u, c ]);
             
-            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: u,
-                $showSelected: c,
+            return r().createElement(J, {
+                $disabled: l !== null && l !== void 0 ? l : false,
+                $append: a,
+                $prepend: s
+            },  r().createElement(Q, ue({
+                onClick: y,
+                disabled: l ? "disabled" : undefined,
+                ref: t,
+                $value: h,
+                $append: a,
+                $prepend: s,
+                $hasError: i,
+                $showSelected: d,
                 "data-test": "swatch",
-                "data-test-value": s
-            }, p), c &&  t().createElement(F, {
-                "aria-label": (0, I._)("Selected"),
-                role: "presentation"
-            }),  t().createElement(V(), null, d));
-        }));
-        G.propTypes = X;
-        /* harmony default export */        const J = G;
-        // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-        var Q = T().div.withConfig({
-            displayName: "ColorStyles__StyledColor",
-            componentId: "jxrost-0"
-        })([ "", ";flex-direction:row;" ], E.mixins.reset("flex"));
-        var Y = T()(J).withConfig({
-            displayName: "ColorStyles__StyledInputSwatch",
-            componentId: "jxrost-1"
-        })([ "", ";" ], (0, E.pick)({
-            compact: (0, j.css)([ "width:28px;height:28px;" ])
-        }));
-        var Z = T().div.withConfig({
-            displayName: "ColorStyles__StyledInput",
-            componentId: "jxrost-2"
-        })([ "", ";", "" ], (0, E.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, E.pick)({
-                enterprise: "100%",
-                prisma: "80px"
-            })) : (0, j.css)([ "flex:0 1 auto;min-width:0;" ]);
-        }));
-        var ee = T()(B()).withConfig({
-            displayName: "ColorStyles__StyledInputText",
-            componentId: "jxrost-3"
-        })([ "", "" ], (function(e) {
-            var t = e.$inDropdown;
-            return t && (0, j.css)([ "font-size:12px;" ]);
-        }));
-        var te = T()(J).withConfig({
-            displayName: "ColorStyles__StyledToggleSwatch",
-            componentId: "jxrost-4"
-        })([ "", "" ], (0, E.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;" ])
-            }
-        }));
-        // 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 = T().div.withConfig({
-            displayName: "PaletteStyles__StyledPalette",
-            componentId: "qgv9v9-0"
-        })([ "width:220px;padding:", ";" ], E.variables.spacingSmall);
-        var ie = T().ul.withConfig({
-            displayName: "PaletteStyles__StyledSwatches",
-            componentId: "qgv9v9-1"
-        })([ "", ";", "" ], E.mixins.reset("block"), (0, E.pick)({
-            enterprise: (0, j.css)([ "margin-bottom:", ";" ], E.variables.spacingXSmall)
-        }));
-        var se = T().li.withConfig({
-            displayName: "PaletteStyles__StyledSwatch",
-            componentId: "qgv9v9-2"
-        })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], E.mixins.reset("inline-block"), (0, 
-        E.pick)({
-            enterprise: {
-                compact: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
-            },
-            prisma: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
+                "data-test-value": c
+            }, f), d &&  r().createElement(G, {
+                "aria-label": (0, b._)("Selected"),
+                role: "presentation",
+                $value: h
+            }),  r().createElement(ie(), null, v)));
         }));
-        var ue = T().div.withConfig({
-            displayName: "PaletteStyles__StyledToolBar",
-            componentId: "qgv9v9-3"
-        })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";", " gap:4px;" ], E.variables.spacingSmall, (0, 
-        E.pick)({
-            enterprise: (0, j.css)([ "margin-bottom:", ";" ], E.variables.spacingSmall)
-        }));
-        var ce = T()(H()).withConfig({
-            displayName: "PaletteStyles__StyledExpandButton",
-            componentId: "qgv9v9-4"
-        })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], E.variables.focusShadow, (function(e) {
-            var t = e.$expanded;
-            return t && (0, j.css)([ "transform:rotate(180deg);" ]);
-        }));
-        var pe = T().div.withConfig({
-            displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
-            componentId: "qgv9v9-5"
-        })([ "position:relative;" ]);
-        var de = T().input.withConfig({
-            displayName: "PaletteStyles__StyledSystemColorPicker",
-            componentId: "qgv9v9-6"
-        })([ "box-sizing:border-box;", " ", ";", ";outline:none;appearance:none;padding:1px 10px;", " margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], (0, 
-        E.pick)({
-            enterprise: {
-                comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
-                compact: (0, j.css)([ "width:24px;height:24px;" ])
-            },
-            prisma: (0, j.css)([ "width:24px;height:24px;" ])
-        }), (0, E.pick)({
-            enterprise: {
-                light: (0, j.css)([ "border:1px solid ", ";" ], E.variables.gray60),
-                dark: (0, j.css)([ "border:1px solid ", ";" ], E.variables.borderColor)
-            },
-            prisma: (0, j.css)([ "border:none;" ])
-        }), (0, E.pick)({
-            prisma: (0, j.css)([ "border-radius:2px;" ])
-        }), (0, E.pick)({
-            enterprise: {
-                comfortable: (0, j.css)([ "padding:1px 14px;" ])
-            }
-        }), E.variables.focusShadow);
-        var fe = T()(N()).withConfig({
-            displayName: "PaletteStyles__StyledCheck",
-            componentId: "qgv9v9-7"
-        })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;" ]);
+        fe.propTypes = de;
+        /* harmony default export */        const ve = fe;
         // CONCATENATED MODULE: ./src/Color/Palette.tsx
-        function ve(e, t) {
+        function pe(e, r) {
             if (null == e) return {};
-            var r, n, a = he(e, t);
+            var n, t, a = be(e, r);
             if (Object.getOwnPropertySymbols) {
-                var o = Object.getOwnPropertySymbols(e);
-                for (n = 0; n < o.length; n++) {
-                    r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                var l = Object.getOwnPropertySymbols(e);
+                for (t = 0; t < l.length; t++) {
+                    n = l[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
                 }
             }
             return a;
         }
-        function he(e, t) {
+        function be(e, r) {
             if (null == e) return {};
-            var r = {};
-            for (var n in e) {
-                if ({}.hasOwnProperty.call(e, n)) {
-                    if (t.includes(n)) continue;
-                    r[n] = e[n];
+            var n = {};
+            for (var t in e) {
+                if ({}.hasOwnProperty.call(e, t)) {
+                    if (r.includes(t)) continue;
+                    n[t] = e[t];
                 }
             }
-            return r;
+            return n;
         }
-        function be(e) {
-            var r = e.expanded, n = e.palette, a = e.value, o = e.swatchToFocusRef, l = e.onSwatchClick, i = e.expandButtonRef, s = e.onPaletteExpand, c = e.onSystemColorPickerChange, p = e.renderInput, d = e.disabled, f = ve(e, [ "expanded", "palette", "value", "swatchToFocusRef", "onSwatchClick", "expandButtonRef", "onPaletteExpand", "onSystemColorPickerChange", "renderInput", "disabled" ]);
-            var v = (0, E.useSplunkTheme)(), b = v.isPrisma, m = v.isLight;
-            var y = u()(n.map((function(e) {
-                return e && g()(e);
-            })), a);
-            var x = n.map((function(e, r) {
-                var n = e === null ? null : g()(e);
-                var i = n === a;
-                var s = !y && r === 0 || y && i;
+        function he(e) {
+            var n = e.palette, t = e.value, a = e.swatchToFocusRef, l = e.onSwatchClick, o = e.onSystemColorPickerChange, i = e.renderInput, u = e.disabled, c = pe(e, [ "palette", "value", "swatchToFocusRef", "onSwatchClick", "onSystemColorPickerChange", "renderInput", "disabled" ]);
+            var d = _()(n.map((function(e) {
+                return e && s()(e);
+            })), t);
+            var f = n.map((function(e, n) {
+                var o = e === null ? null : s()(e);
+                var i = o === t;
+                var c = !d && n === 0 || d && i;
                 
-                return t().createElement(se, {
-                    key: n || "null"
-                },  t().createElement(J, {
-                    value: n,
-                    ref: s ? o : null,
+                return r().createElement(ee, {
+                    key: o || "null"
+                },  r().createElement(ve, {
+                    value: o,
+                    ref: c ? a : null,
                     onClick: l,
-                    noBorder: b,
                     showSelected: i,
-                    disabled: d
+                    disabled: u
                 }));
             }));
-            var w = function e() {
-                var r = !y && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
+            var v = function e() {
+                var n = !d && t !== "#ffffff" && t !== "#000000" && t !== null && t !== "";
                 
-                return t().createElement(ue, {
+                return r().createElement(re, {
                     "data-test": "tool-bar"
-                }, b &&  t().createElement(E.SplunkThemeProvider, {
-                    density: "compact"
-                }, p && p()),  t().createElement(J, {
+                },  r().createElement(ve, {
                     value: null,
-                    ref: a === null ? o : null,
+                    ref: t === null ? a : null,
                     onClick: l,
-                    noBorder: b && !m,
-                    showSelected: a === null,
-                    disabled: d
-                }),  t().createElement(J, {
+                    showSelected: t === null,
+                    disabled: u
+                }),  r().createElement(ve, {
                     value: "#ffffff",
-                    ref: a === "#ffffff" ? o : null,
+                    ref: t === "#ffffff" ? a : null,
                     onClick: l,
-                    noBorder: b && !m,
-                    showSelected: a === "#ffffff",
-                    disabled: d
-                }),  t().createElement(J, {
+                    showSelected: t === "#ffffff",
+                    disabled: u
+                }),  r().createElement(ve, {
                     value: "#000000",
-                    ref: a === "#000000" ? o : null,
+                    ref: t === "#000000" ? a : null,
                     onClick: l,
-                    noBorder: b,
-                    showSelected: a === "#000000",
-                    disabled: d
-                }),  t().createElement(pe, null,  t().createElement(de, {
+                    showSelected: t === "#000000",
+                    disabled: u
+                }),  r().createElement(ne, null,  r().createElement(te, {
                     type: "color",
-                    value: a === null ? "" : a,
-                    onChange: c,
-                    ref: r ? o : null,
-                    disabled: d
-                }), r &&  t().createElement(fe, {
-                    "aria-label": (0, I._)("Selected"),
+                    value: t === null ? "" : t,
+                    onChange: o,
+                    ref: n ? a : null,
+                    disabled: u
+                }), n &&  r().createElement(ae, {
+                    "aria-label": (0, b._)("Selected"),
                     role: "presentation"
                 })));
             };
-            var S = x.length === 8 ? 7 : 15;
-            var C = h()(x, 0, S);
-            var k = h()(x, S);
-            if (b) {
-                
-                return t().createElement(le, f,  t().createElement("div", {
-                    style: {
-                        position: "relative"
-                    }
-                },  t().createElement(ie, null, C, r && k), r && w(),  t().createElement(ce, {
-                    ref: i,
-                    $expanded: r,
-                    onClick: s,
-                    "data-test": "expand-button"
-                },  t().createElement(ne(), null))));
-            }
             
-            return t().createElement(le, f,  t().createElement(ie, null, x),  t().createElement(oe(), null), w(), p && p());
+            return r().createElement(Y, c,  r().createElement(Z, null, f),  r().createElement(le, null), v(),  r().createElement(le, null), i && i());
         }
-        /* harmony default export */        const me = be;
+        /* harmony default export */        const ye = he;
         // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
-                var ye = r(6165);
+                var ge = n(6165);
         // CONCATENATED MODULE: ./src/Color/Color.tsx
-        function ge(e) {
-            "@babel/helpers - typeof";
-            return ge = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
-                return typeof e;
-            } : function(e) {
-                return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, ge(e);
-        }
-        function xe() {
-            return xe = Object.assign ? Object.assign.bind() : function(e) {
-                for (var t = 1; t < arguments.length; t++) {
-                    var r = arguments[t];
-                    for (var n in r) {
-                        ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+        function me() {
+            return me = Object.assign ? Object.assign.bind() : function(e) {
+                for (var r = 1; r < arguments.length; r++) {
+                    var n = arguments[r];
+                    for (var t in n) {
+                        ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
                     }
                 }
                 return e;
-            }, xe.apply(null, arguments);
+            }, me.apply(null, arguments);
         }
-        function we(e) {
-            return Pe(e) || ke(e) || Ce(e) || Se();
+        function we(e, r) {
+            return Oe(e) || ke(e, r) || Ce(e, r) || 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.");
+            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function Ce(e, t) {
+        function Ce(e, r) {
             if (e) {
-                if ("string" == typeof e) return Ee(e, t);
-                var r = {}.toString.call(e).slice(8, -1);
-                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? Ee(e, t) : void 0;
+                if ("string" == typeof e) return xe(e, r);
+                var n = {}.toString.call(e).slice(8, -1);
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? xe(e, r) : void 0;
             }
         }
-        function ke(e) {
-            if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
-        }
-        function Pe(e) {
-            if (Array.isArray(e)) return Ee(e);
+        function xe(e, r) {
+            (null == r || r > e.length) && (r = e.length);
+            for (var n = 0, t = Array(r); n < r; n++) {
+                t[n] = e[n];
+            }
+            return t;
         }
-        function Ee(e, t) {
-            (null == t || t > e.length) && (t = e.length);
-            for (var r = 0, n = Array(t); r < t; r++) {
-                n[r] = e[r];
+        function ke(e, r) {
+            var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+            if (null != n) {
+                var t, a, l, o, i = [], u = !0, s = !1;
+                try {
+                    if (l = (n = n.call(e)).next, 0 === r) {
+                        if (Object(n) !== n) return;
+                        u = !1;
+                    } else for (;!(u = (t = l.call(n)).done) && (i.push(t.value), i.length !== r); u = !0) {
+                    }
+                } catch (e) {
+                    s = !0, a = e;
+                } finally {
+                    try {
+                        if (!u && null != n["return"] && (o = n["return"](), Object(o) !== o)) return;
+                    } finally {
+                        if (s) throw a;
+                    }
+                }
+                return i;
             }
-            return n;
         }
-        function Oe(e, t) {
+        function Oe(e) {
+            if (Array.isArray(e)) return e;
+        }
+        function Ee(e, r) {
             if (null == e) return {};
-            var r, n, a = Ie(e, t);
+            var n, t, a = Ie(e, r);
             if (Object.getOwnPropertySymbols) {
-                var o = Object.getOwnPropertySymbols(e);
-                for (n = 0; n < o.length; n++) {
-                    r = o[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                var l = Object.getOwnPropertySymbols(e);
+                for (t = 0; t < l.length; t++) {
+                    n = l[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
                 }
             }
             return a;
         }
-        function Ie(e, t) {
+        function Ie(e, r) {
             if (null == e) return {};
-            var r = {};
-            for (var n in e) {
-                if ({}.hasOwnProperty.call(e, n)) {
-                    if (t.includes(n)) continue;
-                    r[n] = e[n];
-                }
-            }
-            return r;
-        }
-        function _e(e, t) {
-            if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-        }
-        function qe(e, t) {
-            for (var r = 0; r < t.length; r++) {
-                var n = t[r];
-                n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-                Object.defineProperty(e, He(n.key), n);
-            }
-        }
-        function je(e, t, r) {
-            return t && qe(e.prototype, t), r && qe(e, r), Object.defineProperty(e, "prototype", {
-                writable: !1
-            }), e;
-        }
-        function Te(e, t) {
-            if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-            e.prototype = Object.create(t && t.prototype, {
-                constructor: {
-                    value: e,
-                    writable: !0,
-                    configurable: !0
+            var n = {};
+            for (var t in e) {
+                if ({}.hasOwnProperty.call(e, t)) {
+                    if (r.includes(t)) continue;
+                    n[t] = e[t];
                 }
-            }), Object.defineProperty(e, "prototype", {
-                writable: !1
-            }), t && Re(e, t);
-        }
-        function Re(e, t) {
-            return Re = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-                return e.__proto__ = t, e;
-            }, Re(e, t);
-        }
-        function Be(e) {
-            var t = Ae();
-            return function() {
-                var r, n = Ne(e);
-                if (t) {
-                    var a = Ne(this).constructor;
-                    r = Reflect.construct(n, arguments, a);
-                } else r = n.apply(this, arguments);
-                return De(this, r);
-            };
-        }
-        function De(e, t) {
-            if (t && ("object" == ge(t) || "function" == typeof t)) return t;
-            if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-            return Ve(e);
-        }
-        function Ve(e) {
-            if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-            return e;
-        }
-        function Ae() {
-            try {
-                var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-            } catch (e) {}
-            return (Ae = function t() {
-                return !!e;
-            })();
-        }
-        function Ne(e) {
-            return Ne = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-                return e.__proto__ || Object.getPrototypeOf(e);
-            }, Ne(e);
-        }
-        function $e(e, t, r) {
-            return (t = He(t)) in e ? Object.defineProperty(e, t, {
-                value: r,
-                enumerable: !0,
-                configurable: !0,
-                writable: !0
-            }) : e[t] = r, e;
-        }
-        function He(e) {
-            var t = ze(e, "string");
-            return "symbol" == ge(t) ? t : t + "";
-        }
-        function ze(e, t) {
-            if ("object" != ge(e) || !e) return e;
-            var r = e[Symbol.toPrimitive];
-            if (void 0 !== r) {
-                var n = r.call(e, t || "default");
-                if ("object" != ge(n)) return n;
-                throw new TypeError("@@toPrimitive must return a primitive value.");
             }
-            return ("string" === t ? String : Number)(e);
+            return n;
         }
         /** @public */
-        // The default palette in Prisma theme.
-                var Ke = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
-        var Fe = w()((function(e) {
-            var t = [];
-            for (var r = 1; r <= e.length * 4; r += 1) {
-                var n = e[(r - 1) % e.length];
-                if (r > e.length * 3) {
-                    t.push(n);
-                } else {
-                    var a = 40 - 10 * (r / e.length);
-                    t.push(C()(n).lighten(a).toString());
-                }
-            }
-            return t;
-        }));
-        // The tool palette in Prisma theme.
-                var Me = [ "#ffffff", "#000000", null ];
-        var Le = {
-            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,
+        // These values are equal to the static colors in the data viz theme
+        // variables and in the prescribed order of static1, static2, ..., static20.
+                var _e = [ "#7B56DB", "#009CEB", "#00CDAF", "#DD9900", "#FF677B", "#CB2196", "#813193", "#0051B5", "#008C80", "#99B100", "#FFA476", "#FF6ACE", "#AE8CFF", "#00689D", "#00490A", "#465D00", "#9D6300", "#F6540B", "#FF969E", "#E47BFE" ];
+        var qe = {
+            append: l().bool,
+            defaultValue: l().string,
+            describedBy: l().string,
+            disabled: l().bool,
+            elementRef: l().oneOfType([ l().func, l().object ]),
+            error: l().bool,
+            hideInput: l().bool,
+            labelledBy: l().string,
+            name: l().string,
+            onChange: l().func,
+            palette: l().array,
+            prepend: l().bool,
             /** @private */
-            splunkTheme: o().object,
-            value: o().string
+            required: l().bool,
+            value: l().string
         };
-        var Ue = {
-            append: false,
-            disabled: false,
-            error: false,
-            palette: Fe(Ke),
-            prepend: false
-        };
-        // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-                var We = function e(t) {
-            return (0, O.isValidHexColor)(t);
-        };
-        var Xe = "N/A";
-        var Ge = "n/a";
-        var Je = function e(t) {
-            if (g()(t) === Ge) {
-                return Xe;
+        var Pe = [ "clickAway", "escapeKey", "offScreen", "toggleClick" ];
+        var je = "N/A";
+        var Re = "n/a";
+        var He = function e(r) {
+            if (s()(r) === Re) {
+                return je;
             }
-            if (g()(t) === "transparent") {
+            if (s()(r) === "transparent") {
                 return "transparent";
             }
             // If the user types in the hexadecimal number without # in front,
             // we add # automatically.
-                        if (!m()(t, "#")) {
-                return (0, O.expandShortHandHex)("#".concat(t));
+                        if (!i()(r, "#")) {
+                return (0, p.expandShortHandHex)("#".concat(r));
             }
-            return (0, O.expandShortHandHex)(t);
+            return (0, p.expandShortHandHex)(r);
         };
         /*
  * 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 Qe =  function(e) {
-            Te(n, e);
-            var r = Be(n);
-            je(n, null, [ {
-                key: "hasNull",
-                // @docs-props-type ColorPropsBase
-                value: function e(t) {
-                    return t.some((function(e) {
-                        return e === null;
-                    }));
+ * 2. If palette doesn't contain the color, the custom color picker swatch is focused.
+ */        function Te(n) {
+            var t = n.append, a = n.defaultValue, l = n.disabled, o = n.describedBy, u = n.elementRef, c = n.error, f = n.hideInput, g = n.labelledBy, m = n.name, w = n.onChange, S = n.palette, C = S === void 0 ? _e : S, x = n.prepend, I = n.required, _ = n.value, q = Ee(n, [ "append", "defaultValue", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "onChange", "palette", "prepend", "required", "value" ]);
+            // @docs-props-type ColorPropsBase
+                        var P = (0, e.useMemo)((function() {
+                return C.some((function(e) {
+                    return e !== null && s()(e) === "transparent";
+                }));
+            }), [ C ]);
+            var j = v()({
+                componentName: "Color",
+                /* eslint-disable-next-line prefer-rest-params */
+                componentProps: arguments[0]
+            });
+            var R = !f;
+            var H = j ? (0, p.expandShortHandHex)(_) : (0, p.expandShortHandHex)(a);
+            if (H !== null) {
+                H = s()(H);
+            }
+            var T = H === null ? je : H;
+            var D = (0, e.useState)(H), $ = we(D, 2), A = $[0], B = $[1];
+            var N = (0, e.useState)(T), F = we(N, 2), M = F[0], z = F[1];
+            var V = (0, e.useState)(false), K = we(V, 2), L = K[0], U = K[1];
+            var W = (0, e.useState)((function() {
+                return {
+                    swatchToggleReaderContentId: (0, y.createDOMID)("swatch-reader-content"),
+                    hexInputReaderContentId: (0, y.createDOMID)("hex-input-reader-content")
+                };
+            })), G = we(W, 1), J = G[0], Q = J.swatchToggleReaderContentId, X = J.hexInputReaderContentId;
+            var Y = (0, e.useRef)(null);
+            var Z = (0, e.useRef)(null);
+            (0, e.useEffect)((function() {
+                if (L) {
+                    var e, r;
+                    (e = Z.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
                 }
-            }, {
-                key: "hasTransparent",
-                value: function e(t) {
-                    return t.some((function(e) {
-                        return e !== null && g()(e) === "transparent";
-                    }));
+            }), [ L ]);
+            (0, e.useEffect)((function() {
+                if (false) {
+                    var e;
                 }
-            } ]);
-            function n(e) {
-                var a;
-                _e(this, n);
-                a = r.call(this, e);
-                $e(Ve(a), "focusSwatch", void 0);
-                $e(Ve(a), "focusExpandButton", void 0);
-                $e(Ve(a), "controlledExternally", void 0);
-                $e(Ve(a), "dropdown", null);
-                $e(Ve(a), "swatchToggleReaderContentId", (0, q.createDOMID)("swatch-reader-content"));
-                $e(Ve(a), "hexInputReaderContentId", (0, q.createDOMID)("hex-input-reader-content"));
-                $e(Ve(a), "handleSwatchClick", (function(e, t) {
-                    var r = t.value;
-                    e.preventDefault();
-                    var n = a.props, o = n.name, l = n.onChange;
-                    var i = a.getValue();
-                    var s = r !== i;
-                    var u = r === null ? Xe : r;
-                    if (!a.isControlled()) {
-                        a.setState({
-                            value: r
-                        });
-                    }
-                    a.setState({
-                        displayValue: u,
-                        open: false
-                    });
-                    if (s) {
-                        l === null || l === void 0 ? void 0 : l({
-                            value: r,
-                            name: o
-                        });
-                    }
-                    a.focus();
-                }));
-                $e(Ve(a), "handlePaletteExpand", (function() {
-                    a.setState((function(e) {
-                        return {
-                            expanded: !e.expanded
-                        };
-                    }));
-                }));
-                $e(Ve(a), "handleTextChange", (function(e, t) {
-                    var r = t.value;
-                    a.setState({
-                        displayValue: r
+            }), [ a, M, T ]);
+            /**
+   * Standardizes the current value of the Color:
+   * returns based on the input being controlled or uncontrolled
+   * returns controlled component's value as formatted.
+   */            var ee = (0, e.useCallback)((function() {
+                var e = function e(r) {
+                    return r === null ? null : s()(r);
+                };
+                var r = (0, p.expandShortHandHex)(_);
+                if (j) {
+                    return e(r);
+                }
+                return A;
+            }), [ j, _, A ]);
+            var re = function e(r, n) {
+                var t;
+                var a = n.value;
+                r.preventDefault();
+                var l = ee();
+                var o = a !== l;
+                var i = a === null ? je : a;
+                if (!j) {
+                    B(a);
+                }
+                z(i);
+                U(false);
+                if (o) {
+                    w === null || w === void 0 ? void 0 : w({
+                        value: a,
+                        name: m
                     });
-                }));
-                $e(Ve(a), "handleTextKeyDown", (function(e) {
-                    if ((0, _.keycode)(e.nativeEvent) === "enter") {
-                        e.preventDefault();
-                        a.handleRequestClose({
-                            reason: "enterKey"
-                        });
-                        a.focus();
+                }
+                Y === null || Y === void 0 ? void 0 : (t = Y.current) === null || t === void 0 ? void 0 : t.focus();
+            };
+            var ne = (0, e.useCallback)((function(e) {
+                if (e) {
+                    var r = (0, p.isValidHexColor)(e);
+                    if (!r && e !== "transparent" && e !== je) {
+                        // eslint-disable-next-line no-console
+                        console.warn('"'.concat(e, '" is not a valid hex color.'));
                     }
-                }));
-                $e(Ve(a), "handleButtonClick", (function(e) {
-                    e.preventDefault();
-                    a.handleRequestClose({
-                        reason: "buttonClick"
-                    });
-                    a.focus();
-                }));
-                $e(Ve(a), "handleRequestClose", (function(e) {
-                    var t = e.reason;
-                    var r = a.state, n = r.displayValue, o = r.value;
-                    var l = Je(n);
-                    if (t === "escapeKey") {
-                        if (o == null) {
-                            a.setState({
-                                displayValue: Xe
-                            });
-                        } else {
-                            a.setState({
-                                displayValue: o
-                            });
+                    if (r || P && e === "transparent" || e === je) {
+                        var n = e !== (_ && s()(_));
+                        var t = e === je ? null : e;
+                        var a = (0, p.expandShortHandHex)(t);
+                        if (e && !j) {
+                            B(a);
                         }
-                    }
-                    if (t !== "contentClick") {
-                        a.setState({
-                            open: false
-                        });
-                    }
-                    if (t !== "escapeKey") {
-                        a.setState({
-                            displayValue: l
-                        });
-                        a.submitValue(l);
-                    }
-                }));
-                $e(Ve(a), "handleRequestOpen", (function() {
-                    var e = a.props, t = e.splunkTheme, r = e.palette;
-                    var n = t.isPrisma;
-                    var o = a.getValue();
-                    var l = o === null ? Xe : o;
-                    a.setState({
-                        displayValue: l,
-                        open: true
-                    }, (function() {
-                        if (a.focusSwatch.current && a.focusSwatch.current.focus) {
-                            a.focusSwatch.current.focus();
+                        if (n) {
+                            w === null || w === void 0 ? void 0 : w({
+                                value: a,
+                                name: m
+                            });
                         }
-                    }));
-                    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()(Me, o);
-                    if (c && !a.state.expanded) {
-                        a.setState({
-                            expanded: true
-                        });
                     }
-                }));
-                $e(Ve(a), "handleSystemColorPickerChange", (function(e) {
-                    var t = a.getValue();
-                    var r = e !== t;
-                    var n = a.props.name;
-                    var o = e === null ? Xe : e;
-                    if (!a.isControlled()) {
-                        a.setState({
-                            value: e
-                        });
-                    }
-                    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 =  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);
                 }
-                // displayValue can be hexadecimal color or 'transparent' to represent 'transparent' or 'N/A' to represent null
-                                var l = o === null ? Xe : o;
-                a.state = {
-                    displayValue: l,
-                    open: false,
-                    value: o,
-                    expanded: false
-                };
-                if (false) {}
-                if (false) {
-                    var s;
-                }
-                return a;
-            }
-            je(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);
+            }), [ P, j, m, w, _ ]);
+            var te = (0, e.useCallback)((function(e) {
+                var r = e.reason;
+                var n = He(M);
+                if (r === "escapeKey") {
+                    if (A == null) {
+                        z(je);
+                    } else {
+                        z(A);
                     }
-                    return this.state.value;
                 }
-            }, {
-                key: "submitValue",
-                value: function e(t) {
-                    if (t) {
-                        var r = We(t);
-                        if (!r && t !== "transparent" && t !== Xe) {
-                            // eslint-disable-next-line no-console
-                            console.warn('"'.concat(t, '" is not a valid hex color.'));
-                        }
-                        if (r || n.hasTransparent(this.props.palette) && t === "transparent" || t === Xe) {
-                            var a = t !== (this.props.value && g()(this.props.value));
-                            var o = this.props.name;
-                            var l = t === Xe ? null : t;
-                            var i = (0, O.expandShortHandHex)(l);
-                            if (t && !this.isControlled()) {
-                                this.setState({
-                                    value: i
-                                });
-                            }
-                            if (a) {
-                                var s, u;
-                                (s = (u = this.props).onChange) === null || s === void 0 ? void 0 : s.call(u, {
-                                    value: i,
-                                    name: o
-                                });
-                            }
-                        }
-                    }
+                if (r !== "contentClick") {
+                    U(false);
                 }
-                /**
-     * Place focus on the input.
-     */            }, {
-                key: "focus",
-                value: function e() {
-                    var t;
-                    (t = this.dropdown) === null || t === void 0 ? void 0 : t.focus();
+                if (r !== "escapeKey") {
+                    z(n);
+                    ne(n);
                 }
-            }, {
-                key: "isControlled",
-                value: function e() {
-                    return this.controlledExternally;
+            }), [ M, ne, A ]);
+            var ae = (0, e.useCallback)((function() {
+                var e = ee();
+                var r = e === null ? je : e;
+                z(r);
+                U(true);
+            }), [ ee ]);
+            var le = function e(r, n) {
+                var t = n.value;
+                z(t);
+            };
+            var oe = function e(r) {
+                if ((0, h.keycode)(r.nativeEvent) === "enter") {
+                    var n;
+                    r.preventDefault();
+                    te({
+                        reason: "enterKey"
+                    });
+                    Y === null || Y === void 0 ? void 0 : (n = Y.current) === null || n === void 0 ? void 0 : n.focus();
                 }
-            }, {
-                key: "renderInput",
-                value: function e(r) {
-                    var a = r.textAppend, o = r.textPrepend, l = r.textInline, i = r.inDropdown;
-                    var s = this.props, u = s.splunkTheme, c = s.required, p = s.labelledBy, d = s.disabled;
-                    var f = this.state.displayValue;
-                    var v = u.isPrisma;
-                    var h = n.hasTransparent(this.props.palette) && g()(f) === "transparent";
-                    var b = g()(f) === Ge;
-                    var y = f;
-                    if (!m()(f, "#")) {
-                        y = "#".concat(f);
-                    }
-                    y = h ? "transparent" : y;
-                    y = b ? null : y;
-                    
-                    return t().createElement(Z, {
-                        $inDropdown: i
-                    },  t().createElement(ye["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: c,
-                        spellCheck: false,
-                        value: f,
-                        labelledBy: p ? "".concat(p, " ").concat(this.hexInputReaderContentId) : this.hexInputReaderContentId,
-                        disabled: d
-                    }), !v && i &&  t().createElement(Y, {
-                        "data-test": "textbox-swatch",
-                        onClick: this.handleButtonClick,
-                        value: y,
-                        style: {
-                            marginLeft: "1px"
-                        }
-                    }));
+            };
+            var ie = function e(r) {
+                var n;
+                r.preventDefault();
+                te({
+                    reason: "buttonClick"
+                });
+                Y === null || Y === void 0 ? void 0 : (n = Y.current) === null || n === void 0 ? void 0 : n.focus();
+            };
+            var ue = (0, e.useCallback)((function(e) {
+                var r = e.target.value;
+                var n = ee();
+                var t = r !== n;
+                var a = r === null ? je : r;
+                if (!j) {
+                    B(r);
                 }
-            }, {
-                key: "renderPalette",
-                value: function e() {
-                    var r = this;
-                    var n = this.props, a = n.splunkTheme, o = n.palette, l = n.disabled;
-                    var i = this.state.expanded;
-                    var s = a.isPrisma;
-                    
-                    return t().createElement(me, {
-                        role: "dialog",
-                        "aria-label": (0, I._)("Choose color"),
-                        palette: o,
-                        value: this.getValue(),
-                        swatchToFocusRef: this.focusSwatch,
-                        renderInput: function e() {
-                            return s ? 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: i,
-                        onPaletteExpand: this.handlePaletteExpand,
-                        onSystemColorPickerChange: function e(t) {
-                            return r.handleSystemColorPickerChange(t.target.value);
-                        },
-                        disabled: l
+                z(a);
+                if (t) {
+                    w === null || w === void 0 ? void 0 : w({
+                        value: r,
+                        name: m
                     });
                 }
-            }, {
-                key: "render",
-                value: function e() {
-                    var r = 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, b = a.splunkTheme, m = Oe(a, [ "append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme" ]);
-                    var y = b.isPrisma;
-                    var g = this.getValue();
-                    var x = this.state.displayValue;
- // hideInput defaults to true in Enterprise if prop is not provided
-                                        var w = c !== null && c !== void 0 ? c : true;
-                    var S = y ? c : w;
-                    var C =  t().createElement(te, xe({
-                        append: !S ? true : o,
-                        "data-test": "color",
-                        "data-test-value": x,
-                        "aria-describedby": i,
-                        "aria-labelledby": d ? "".concat(d, " ").concat(this.swatchToggleReaderContentId) : this.swatchToggleReaderContentId,
-                        "aria-invalid": u || undefined,
-                        disabled: l,
-                        error: u,
-                        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(ye["default"], {
-                        id: this.swatchToggleReaderContentId
-                    }, (0, I._)("Color picker")),  t().createElement(P(), {
-                        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: C
-                    }, this.renderPalette()), !S && this.renderInput({
-                        textAppend: false,
-                        textPrepend: true,
-                        textInline: true,
-                        inDropdown: false
-                    }));
+            }), [ ee, j, m, w ]);
+            var se = function e(n) {
+                var t = n.inDropdown;
+                var a = P && s()(M) === "transparent";
+                var o = s()(M) === Re;
+                var u = M;
+                if (!i()(M, "#")) {
+                    u = "#".concat(M);
                 }
-            } ]);
-            return n;
-        }(e.Component);
-        $e(Qe, "propTypes", Le);
-        $e(Qe, "defaultProps", Ue);
-        var Ye = (0, E.withSplunkTheme)(Qe);
-        Ye.propTypes = Qe.propTypes;
-        // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-        /* harmony default export */        const Ze = Ye;
+                u = a ? "transparent" : u;
+                u = o ? null : u;
+                
+                return r().createElement(O, null,  r().createElement(ge["default"], {
+                    id: X
+                }, (0, b._)("Hexadecimal color value")),  r().createElement(E, {
+                    $inDropdown: t,
+                    autoCapitalize: "off",
+                    autoComplete: "off",
+                    autoCorrect: "off",
+                    prepend: !t,
+                    onKeyDown: oe,
+                    onChange: le,
+                    required: I,
+                    spellCheck: false,
+                    value: M,
+                    labelledBy: g ? "".concat(g, " ").concat(X) : X,
+                    disabled: l
+                }), t &&  r().createElement(ve, {
+                    "data-test": "textbox-swatch",
+                    onClick: ie,
+                    value: u
+                }));
+            };
+            var ce = function e() {
+                return se({
+                    inDropdown: true
+                });
+            };
+            var de = function e() {
+                
+                return r().createElement(ye, {
+                    role: "dialog",
+                    "aria-label": (0, b._)("Choose color"),
+                    palette: C,
+                    value: ee(),
+                    swatchToFocusRef: Z,
+                    renderInput: ce,
+                    onSwatchClick: re,
+                    onSystemColorPickerChange: ue,
+                    disabled: l
+                });
+            };
+            var fe = function e() {
+                
+                return r().createElement(ve, me({
+                    append: R ? true : t,
+                    "data-test": "color",
+                    "data-test-value": M,
+                    "aria-describedby": o,
+                    "aria-labelledby": g ? "".concat(g, " ").concat(Q) : Q,
+                    "aria-invalid": c || undefined,
+                    disabled: l,
+                    error: c,
+                    elementRef: u,
+                    name: m,
+                    prepend: x,
+                    ref: Y,
+                    value: ee()
+                }, q));
+            };
+            
+            return r().createElement(k, null,  r().createElement(ge["default"], {
+                id: Q
+            }, (0, b._)("Color picker")),  r().createElement(d(), {
+                closeReasons: Pe,
+                onRequestClose: te,
+                onRequestOpen: ae,
+                open: L,
+                retainFocus: true,
+                takeFocus: false,
+                toggle: fe()
+            }, de()), R && se({
+                inDropdown: false
+            }));
+        }
+        Te.propTypes = qe;
+        Te.componentType = "Color";
+        /* harmony default export */        const De = Te;
     }) // CONCATENATED MODULE: ./src/Color/index.ts
     ();
-    module.exports = n;
+    module.exports = t;
     /******/})();