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

package/Color.js

@@ -6,7 +6,7 @@
         /***/ (e, r, n) => {
             // EXPORTS
             n.d(r, {
-                default: () => /* reexport */ h
+                default: () => /* reexport */ y
             });
             // EXTERNAL MODULE: external "react"
                         var t = n(9497);
@@ -75,7 +75,7 @@
                 }, t), r);
             }
             b.propTypes = p;
-            /* harmony default export */            const h = b;
+            /* harmony default export */            const y = b;
         } // CONCATENATED MODULE: ./src/ScreenReaderContent/index.ts
         /***/ ,
         /***/ 3563: 
@@ -180,8 +180,8 @@
         n.r(t);
         // EXPORTS
                 n.d(t, {
-            default: () => /* reexport */ De,
-            defaultPalette: () => /* reexport */ _e
+            default: () => /* reexport */ Qe,
+            defaultPalette: () => /* reexport */ Be
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -189,87 +189,96 @@
         // EXTERNAL MODULE: external "prop-types"
                 var a = n(23);
         var l =  n.n(a);
-        // CONCATENATED MODULE: external "lodash/startsWith"
-        const o = require("lodash/startsWith");
+        // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
+        const o = require("@splunk/react-ui/Dropdown");
         var i =  n.n(o);
-        // CONCATENATED MODULE: external "lodash/toLower"
-        const u = require("lodash/toLower");
+        // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+        const u = require("@splunk/react-ui/usePrevious");
         var s =  n.n(u);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-        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);
+        const c = require("@splunk/react-ui/useControlled");
+        var d =  n.n(c);
         // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-        const p = require("@splunk/ui-utils/color");
+        const f = require("@splunk/ui-utils/color");
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-        const b = require("@splunk/ui-utils/i18n");
-        // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-        const h = require("@splunk/ui-utils/keyboard");
+        const v = require("@splunk/ui-utils/i18n");
         // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-        const y = require("@splunk/ui-utils/id");
+        const p = require("@splunk/ui-utils/id");
         // EXTERNAL MODULE: external "styled-components"
-                var g = n(232);
-        var m =  n.n(g);
+                var b = n(232);
+        var y =  n.n(b);
         // EXTERNAL MODULE: external "@splunk/themes"
-                var w = n(3563);
+                var m = n(3563);
+        // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+        const h = require("@splunk/react-ui/ScreenReaderContent");
+        var g =  n.n(h);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
+        const w = require("@splunk/react-ui/Tooltip");
+        var C =  n.n(w);
+        // CONCATENATED MODULE: external "@splunk/react-icons/Palette"
+        const S = require("@splunk/react-icons/Palette");
+        var x =  n.n(S);
         // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-        const S = require("@splunk/react-ui/Text");
-        var C =  n.n(S);
-        // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
+        const k = require("@splunk/react-ui/Text");
+        var O =  n.n(k);
+        // CONCATENATED MODULE: ./src/Color/ColorInputStyles.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);
+        var E = "104px";
+        var I = y().div.withConfig({
+            displayName: "ColorInputStyles__StyledTextWrapper",
+            componentId: "sc-80hen8-0"
+        })([ "display:flex;width:", ";flex:1 0 auto;" ], E);
+        var _ = y()(O()).withConfig({
+            displayName: "ColorInputStyles__StyledText",
+            componentId: "sc-80hen8-1"
+        })([ "width:", ";" ], E);
+        var j = y().div.withConfig({
+            displayName: "ColorInputStyles__StyledSystemColorPickerWrapper",
+            componentId: "sc-80hen8-2"
+        })([ "position:relative;height:", ";width:", ";border:", " solid ", ";box-sizing:border-box;border-radius:", ";", " ", " &:focus-within{box-shadow:", ";}" ], m.variables.inputHeight, m.variables.inputHeight, m.variables.inputBorderWidth, m.variables.interactiveColorBorder, m.variables.borderRadius, (function(e) {
+            var r = e.$append;
+            return r && (0, b.css)([ "margin-inline-end:-1px;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none;" ]);
+        }), (function(e) {
+            var r = e.$prepend;
+            return r && (0, b.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
+        }), m.variables.focusShadow);
+        var P = y().input.withConfig({
+            displayName: "ColorInputStyles__StyledSystemColorPicker",
+            componentId: "sc-80hen8-3"
+        })([ "opacity:0;width:100%;height:100%;border:", " solid transparent;cursor:pointer;pointer-events:auto;" ], m.variables.inputBorderWidth);
+        var q = y()(x()).withConfig({
+            displayName: "ColorInputStyles__StyledColorPickerIcon",
+            componentId: "sc-80hen8-4"
+        })([ "box-sizing:border-box;height:100%;margin:auto;position:absolute;right:0;left:0;pointer-events:none;" ]);
         // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
-        const j = require("@splunk/react-icons/Checkmark");
-        var R =  n.n(j);
+        const B = require("@splunk/react-icons/Checkmark");
+        var R =  n.n(B);
         // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const H = require("@splunk/react-ui/Clickable");
-        var T =  n.n(H);
+        const $ = require("@splunk/react-ui/Clickable");
+        var T =  n.n($);
         // CONCATENATED MODULE: ./src/utils/determineTextBrightness.ts
-        function D(e, r) {
-            return F(e) || N(e, r) || A(e, r) || $();
+        function A(e, r) {
+            return M(e) || F(e, r) || H(e, r) || N();
         }
-        function $() {
+        function N() {
             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) {
+        function H(e, r) {
             if (e) {
-                if ("string" == typeof e) return B(e, r);
+                if ("string" == typeof e) return D(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;
+                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) ? D(e, r) : void 0;
             }
         }
-        function B(e, r) {
+        function D(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) {
+        function F(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;
@@ -291,16 +300,16 @@
                 return i;
             }
         }
-        function F(e) {
+        function M(e) {
             if (Array.isArray(e)) return e;
         }
-        var M = "lightText";
+        var L = "lightText";
         var z = "darkText";
         function V(e) {
-            var r = D(e, 3), n = r[0], t = r[1], a = r[2];
+            var r = A(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;
+                        return l > 125 ? z : L;
         }
         /**
  * Determines if light or dark text should be used over a specific background color by determining the color brightness of a
@@ -315,33 +324,33 @@
  * 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) {
+ */        function W(e, r) {
             if (typeof r === "string") {
-                if ((0, p.isValidHexColor)(r)) {
+                if ((0, f.isValidHexColor)(r)) {
                     // hex
                     var n = r;
                     if (n.length === 3 || n.length === 4) {
                         // shorthand hex
-                        n = (0, p.expandShortHandHex)(n);
+                        n = (0, f.expandShortHandHex)(n);
                     }
-                    var t = (0, p.hexToRgb)(n);
+                    var t = (0, f.hexToRgb)(n);
                     if (t != null) {
                         return V(t);
                     }
                 } else if (r.includes(",")) {
-                    if ((0, p.isValidRgb)(r)) {
+                    if ((0, f.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];
+                        })), o = A(l, 3), i = o[0], u = o[1], s = o[2];
                         return V([ i, u, s ]);
                     }
-                } else if (p.extendedColorKeywords.includes(r.toLowerCase())) {
+                } else if (f.extendedColorKeywords.includes(r.toLowerCase())) {
                     // named color
-                    var c = (0, p.namedColorToHex)(r.toLowerCase());
+                    var c = (0, f.namedColorToHex)(r.toLowerCase());
                     if (c != null) {
-                        var d = (0, p.hexToRgb)(c);
+                        var d = (0, f.hexToRgb)(c);
                         if (d != null) {
                             return V(d);
                         }
@@ -354,100 +363,73 @@
    * 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;
+                        return e ? z : L;
         }
         // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
-        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 K = "rgba(0, 0, 0, 0.2)";
+        var U = "n/a";
+        var G = "transparent";
+        var J = function e(r, n) {
+            return W(r, n || undefined) === z ? m.variables.black : m.variables.white;
         };
-        var G = m()(R()).withConfig({
+        var Q = y()(R()).withConfig({
             displayName: "SwatchStyles__StyledCheck",
             componentId: "sc-1wxunhq-0"
         })([ "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))
+            return r === G ? (0, b.css)([ "color:", ";" ], m.variables.black) : (0, m.pick)({
+                light: (0, b.css)([ "color:", ";" ], J(true, r)),
+                dark: (0, b.css)([ "color:", ";" ], J(false, r))
             });
         }));
-        var J = m().div.withConfig({
+        var X = y().div.withConfig({
             displayName: "SwatchStyles__StyledOuter",
             componentId: "sc-1wxunhq-1"
-        })([ "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) {
+        })([ "border:", " solid ", ";border-radius:", ";box-sizing:border-box;height:", ";min-width:", ";&:focus-within{box-shadow:", ";z-index:1;}", " ", " ", "" ], m.variables.inputBorderWidth, m.variables.interactiveColorBorder, m.variables.borderRadius, m.variables.inputHeight, m.variables.inputHeight, m.variables.focusShadow, (function(e) {
             var r = e.$disabled;
-            return !r && (0, g.css)([ "&:hover{border-color:", ";}" ], w.variables.interactiveColorBorderHover);
+            return !r && (0, b.css)([ "&:hover{border-color:", ";}" ], m.variables.interactiveColorBorderHover);
         }), (function(e) {
             var r = e.$prepend;
-            return r && (0, g.css)([ "margin-left:1px;border-start-start-radius:0;border-end-start-radius:0;" ]);
+            return r && (0, b.css)([ "margin-left:1px;border-start-start-radius:0;border-end-start-radius:0;" ]);
         }), (function(e) {
             var r = e.$append;
-            return r && (0, g.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-right:none;" ]);
+            return r && (0, b.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-right:none;" ]);
         }));
-        var Q = m()(T()).withConfig({
+        var Y = y()(T()).attrs((function(e) {
+            var r = e.$value;
+            // this avoids styled-components generating a separate class for each swatch color
+            // which avoids the "Over 200 classes were generated for component Component" warning
+            // when rapidly changing colors (ie. with the system color picker)
+                        return r != null && r !== G ? {
+                style: {
+                    "background-color": r
+                }
+            } : {};
+        })).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) {
+        })([ "display:block;position:relative;flex:0 0 auto;width:100%;height:100%;border:", " solid ", ";border-radius:3px;", ";", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], m.variables.inputBorderWidth, m.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);
+            return r === null && (0, b.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );" ], m.variables.contentColorNegative);
         }), (function(e) {
             var r = e.$value;
-            return r && (r === "transparent" ? U : "background-color: ".concat(r));
+            return r === G && (0, b.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], K, K, K, K, K, K, m.variables.white);
         }), (function(e) {
             var r = e.$prepend;
-            return r && (0, g.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
+            return r && (0, b.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
         }), (function(e) {
             var r = e.$append;
-            return r && (0, g.css)([ "border-start-end-radius:0;border-end-end-radius:0;" ]);
+            return r && (0, b.css)([ "border-start-end-radius:0;border-end-end-radius:0;" ]);
         }), (function(e) {
             var r = e.$hasError;
-            return r && (0, g.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], w.variables.interactiveColorAccentError);
+            return r && (0, b.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], m.variables.interactiveColorAccentError);
         }), (function(e) {
             var r = e.$showSelected;
-            return r && (0, g.css)([ "display:flex;align-items:center;justify-content:center;" ]);
+            return r && (0, b.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 ue() {
-            return ue = Object.assign ? Object.assign.bind() : function(e) {
+        function Z() {
+            return Z = Object.assign ? Object.assign.bind() : function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var n = arguments[r];
                     for (var t in n) {
@@ -455,11 +437,11 @@
                     }
                 }
                 return e;
-            }, ue.apply(null, arguments);
+            }, Z.apply(null, arguments);
         }
-        function se(e, r) {
+        function ee(e, r) {
             if (null == e) return {};
-            var n, t, a = ce(e, r);
+            var n, t, a = re(e, r);
             if (Object.getOwnPropertySymbols) {
                 var l = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < l.length; t++) {
@@ -468,7 +450,7 @@
             }
             return a;
         }
-        function ce(e, r) {
+        function re(e, r) {
             if (null == e) return {};
             var n = {};
             for (var t in e) {
@@ -479,7 +461,7 @@
             }
             return n;
         }
-        var de = {
+        var ne = {
             append: l().bool,
             elementRef: l().oneOfType([ l().func, l().object ]),
             /** @private */
@@ -491,48 +473,278 @@
             /** @private */
             showSelected: l().bool
         };
-        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;
+        var te =  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, p = ee(n, [ "append", "disabled", "error", "onClick", "prepend", "value", "showSelected" ]);
+            var b = c === null || c === undefined ? (0, v._)("No color") : c;
             // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
             // Invalid values are converted to `undefined`
-                        var h = c;
-            if (!(typeof h === "string" && ((0, p.isValidHexColor)(h) || h === "transparent")) && h !== null && h !== undefined) {
-                h = undefined;
+                        var y = c;
+            if (!(typeof y === "string" && ((0, f.isValidHexColor)(y) || y === "transparent")) && y !== null && y !== undefined) {
+                y = undefined;
             }
-            var y = (0, e.useCallback)((function(e) {
+            var m = (0, e.useCallback)((function(e) {
                 return u === null || u === void 0 ? void 0 : u(e, {
                     value: c
                 });
             }), [ u, c ]);
             
-            return r().createElement(J, {
+            return r().createElement(X, {
                 $disabled: l !== null && l !== void 0 ? l : false,
                 $append: a,
                 $prepend: s
-            },  r().createElement(Q, ue({
-                onClick: y,
+            },  r().createElement(Y, Z({
+                onClick: m,
                 disabled: l ? "disabled" : undefined,
                 ref: t,
-                $value: h,
+                $value: y,
                 $append: a,
                 $prepend: s,
                 $hasError: i,
                 $showSelected: d,
                 "data-test": "swatch",
                 "data-test-value": c
-            }, f), d &&  r().createElement(G, {
-                "aria-label": (0, b._)("Selected"),
+            }, p), d &&  r().createElement(Q, {
+                "aria-label": (0, v._)("Selected"),
                 role: "presentation",
-                $value: h
-            }),  r().createElement(ie(), null, v)));
+                $value: y
+            }),  r().createElement(g(), null, b)));
         }));
-        fe.propTypes = de;
-        /* harmony default export */        const ve = fe;
+        te.propTypes = ne;
+        /* harmony default export */        const ae = te;
+        // CONCATENATED MODULE: ./src/Color/ColorInput.tsx
+        function le() {
+            return le = 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;
+            }, le.apply(null, arguments);
+        }
+        function oe(e, r) {
+            return de(e) || ce(e, r) || ue(e, r) || ie();
+        }
+        function ie() {
+            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 ue(e, r) {
+            if (e) {
+                if ("string" == typeof e) return se(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) ? se(e, r) : void 0;
+            }
+        }
+        function se(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 ce(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 de(e) {
+            if (Array.isArray(e)) return e;
+        }
+        function fe(e, r) {
+            if (null == e) return {};
+            var n, t, a = ve(e, r);
+            if (Object.getOwnPropertySymbols) {
+                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 ve(e, r) {
+            if (null == e) return {};
+            var n = {};
+            for (var t in e) {
+                if ({}.hasOwnProperty.call(e, t)) {
+                    if (r.includes(t)) continue;
+                    n[t] = e[t];
+                }
+            }
+            return n;
+        }
+        /**
+ * Formats the value for display in the input.
+ */        var pe = function e(r) {
+            if (r === undefined) {
+                return "";
+            }
+            if (r === null) {
+                return U;
+            }
+            var n = r.toLowerCase();
+            if (n === U) {
+                return U;
+            }
+            if (n === G) {
+                return G;
+            }
+            // If the user types in the hexadecimal number without # in front, we add # automatically.
+                        if (!n.startsWith("#")) {
+                var t = "#".concat(n);
+                if ((0, f.isValidHexColor)(t)) {
+                    return (0, f.expandShortHandHex)(t);
+                }
+            }
+            return (0, f.expandShortHandHex)(n);
+        };
+        /**
+ * Returns the value that's valid for Color's onChange
+ */        var be = function e(r) {
+            if (r === U) {
+                return null;
+            }
+            if (r === "") {
+                return undefined;
+            }
+            return r;
+        };
+        var ye = (0, v._)("Open system color picker");
+        var me = function n(t) {
+            var a = t.allowTransparent, l = t.append, o = t.disabled, i = t.inputRef, u = t.labelledBy, s = t.onChange, c = t.showPicker, d = t.showSubmitButton, b = t.value, y = t.valueIsCustom, m = fe(t, [ "allowTransparent", "append", "disabled", "inputRef", "labelledBy", "onChange", "showPicker", "showSubmitButton", "value", "valueIsCustom" ]);
+            var h = (0, e.useState)((0, p.createDOMID)("hex-input-reader-content")), w = oe(h, 1), S = w[0];
+            var x = (0, e.useState)(""), k = oe(x, 2), O = k[0], E = k[1];
+            var B = (0, e.useState)(""), R = oe(B, 2), $ = R[0], T = R[1];
+            var A = (0, e.useCallback)((function(e) {
+                E(be(e));
+                T(e !== null && e !== void 0 ? e : "");
+            }), []);
+            (0, e.useEffect)((function() {
+                E(be(b));
+                T(pe(b));
+            }), [ b ]);
+            var N = (0, e.useCallback)((function(e) {
+                var r = be(pe($));
+                var n = r !== undefined && (r == null || r === G && a || (0, f.isValidHexColor)(r));
+                if (n) {
+                    s === null || s === void 0 ? void 0 : s(e, {
+                        value: r
+                    });
+                } else {
+                    // eslint-disable-next-line no-console
+                    console.warn('"'.concat(r, '" is not a valid hex color.'));
+                }
+            }), [ a, $, s ]);
+            var H = (0, e.useCallback)((function(e, r) {
+                var n = r.value;
+                A(n);
+            }), [ A ]);
+            var D = (0, e.useCallback)((function(e) {
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    N(e);
+                }
+            }), [ N ]);
+            var F = (0, e.useCallback)((function(e) {
+                var r = e.target.value;
+                A(r);
+            }), [ A ]);
+            var M = c &&  r().createElement(C(), {
+                content: ye,
+                defaultPlacement: "below"
+            },  r().createElement(j, {
+                $append: l,
+                $prepend: true
+            },  r().createElement(q, null),  r().createElement(P, {
+                "aria-label": ye,
+                disabled: !!o,
+                onChange: F,
+                type: "color",
+                value: b === null ? "" : b
+            })));
+            
+            return r().createElement(r().Fragment, null,  r().createElement(I, null,  r().createElement(g(), {
+                id: S
+            }, (0, v._)("Hexadecimal color value")),  r().createElement(_, le({
+                append: l || c,
+                autoCapitalize: "off",
+                autoComplete: "off",
+                autoCorrect: "off",
+                disabled: o,
+                inputRef: i,
+                labelledBy: u ? "".concat(u, " ").concat(S) : S,
+                onChange: H,
+                onKeyDown: D,
+                spellCheck: false,
+                value: $
+            }, m)), M), d &&  r().createElement(ae, {
+                "data-test": "textbox-swatch",
+                disabled: !!o,
+                onClick: N,
+                showSelected: y && O === b,
+                value: O
+            }));
+        };
+        /* harmony default export */        const he = me;
+        // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
+        var ge = y().div.withConfig({
+            displayName: "ColorStyles__StyledColor",
+            componentId: "jxrost-0"
+        })([ "", ";flex-direction:row;" ], m.mixins.reset("flex"));
+        var we = y().div.withConfig({
+            displayName: "ColorStyles__StyledPaletteInputWrapper",
+            componentId: "jxrost-1"
+        })([ "display:flex;min-width:0;gap:", ";" ], m.variables.spacingSmall);
+        var Ce = y()(he).withConfig({
+            displayName: "ColorStyles__StyledColorInput",
+            componentId: "jxrost-2"
+        })([ "flex-grow:0;&:focus-within{z-index:1;}" ]);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+        const Se = require("@splunk/react-ui/Divider");
+        var xe =  n.n(Se);
+        // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
+        var ke = 5;
+        var Oe = y().div.withConfig({
+            displayName: "PaletteStyles__StyledPalette",
+            componentId: "qgv9v9-0"
+        })([ "padding:", " ", ";" ], m.variables.spacingMedium, m.variables.spacingLarge);
+        var Ee = y().ul.withConfig({
+            displayName: "PaletteStyles__StyledSwatches",
+            componentId: "qgv9v9-1"
+        })([ "", ";grid-template-columns:repeat(", ",", ");gap:", ";" ], m.mixins.reset("grid"), ke, m.variables.inputHeight, m.variables.spacingSmall);
+        var Ie = y().li.withConfig({
+            displayName: "PaletteStyles__StyledSwatch",
+            componentId: "qgv9v9-2"
+        })([ "", ";" ], m.mixins.reset("inline-block"));
+        var _e = y().div.withConfig({
+            displayName: "PaletteStyles__StyledToolBar",
+            componentId: "qgv9v9-3"
+        })([ "position:relative;display:flex;align-items:center;gap:", ";" ], m.variables.spacingSmall);
+        var je = y()(xe()).withConfig({
+            displayName: "PaletteStyles__StyledDivider",
+            componentId: "qgv9v9-4"
+        })([ "margin-block:", ";" ], m.variables.spacingSmall);
         // CONCATENATED MODULE: ./src/Color/Palette.tsx
-        function pe(e, r) {
+        function Pe(e, r) {
             if (null == e) return {};
-            var n, t, a = be(e, r);
+            var n, t, a = qe(e, r);
             if (Object.getOwnPropertySymbols) {
                 var l = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < l.length; t++) {
@@ -541,7 +753,7 @@
             }
             return a;
         }
-        function be(e, r) {
+        function qe(e, r) {
             if (null == e) return {};
             var n = {};
             for (var t in e) {
@@ -552,69 +764,86 @@
             }
             return n;
         }
-        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;
+        var Be = [ "#7B56DB", "#009CEB", "#00CDAF", "#DD9900", "#FF677B", "#CB2196", "#813193", "#0051B5", "#008C80", "#99B100", "#FFA476", "#FF6ACE", "#AE8CFF", "#00689D", "#00490A", "#465D00", "#9D6300", "#F6540B", "#FF969E", "#E47BFE" ];
+        var Re = function e(r, n) {
+            return n != null && (r === null || r === void 0 ? void 0 : r.includes(n));
+        };
+        var $e = [ null, "#ffffff", "#000000" ];
+        function Te(n) {
+            var t = n.activeInputRef, a = n.disabled, l = n.onChange, o = n.palette, i = o === void 0 ? Be : o, u = n.value, s = Pe(n, [ "activeInputRef", "disabled", "onChange", "palette", "value" ]);
+            var c = (0, e.useMemo)((function() {
+                return i === null || i === void 0 ? void 0 : i.map((function(e) {
+                    return e === null ? e : e.toLowerCase();
+                }));
+            }), [ i ]);
+            var d = u != null ? u.toLowerCase() : u;
+            var f = (0, e.useMemo)((function() {
+                return Re(c, d);
+            }), [ c, d ]);
+            var v = (0, e.useMemo)((function() {
+                return Re($e, d);
+            }), [ d ]);
+            var p = !f && !v && d !== "";
+            var b = (0, e.useMemo)((function() {
+                return c.some((function(e) {
+                    return e !== null && e.toLowerCase() === G;
+                }));
+            }), [ c ]);
+            var y = (0, e.useCallback)((function(e, r) {
+                var n = r.value;
+                l(e, {
+                    value: n
+                });
+            }), [ l ]);
+            var m = c.map((function(e) {
+                var n = e === null ? null : e.toLowerCase();
+                var l = n === d;
                 
-                return r().createElement(ee, {
-                    key: o || "null"
-                },  r().createElement(ve, {
-                    value: o,
-                    ref: c ? a : null,
-                    onClick: l,
-                    showSelected: i,
-                    disabled: u
+                return r().createElement(Ie, {
+                    key: n || "null"
+                },  r().createElement(ae, {
+                    value: n,
+                    ref: l ? t : null,
+                    onClick: y,
+                    showSelected: l,
+                    disabled: a
                 }));
             }));
-            var v = function e() {
-                var n = !d && t !== "#ffffff" && t !== "#000000" && t !== null && t !== "";
+            var h =  r().createElement(_e, {
+                "data-test": "tool-bar"
+            }, $e.map((function(e) {
                 
-                return r().createElement(re, {
-                    "data-test": "tool-bar"
-                },  r().createElement(ve, {
-                    value: null,
-                    ref: t === null ? a : null,
-                    onClick: l,
-                    showSelected: t === null,
-                    disabled: u
-                }),  r().createElement(ve, {
-                    value: "#ffffff",
-                    ref: t === "#ffffff" ? a : null,
-                    onClick: l,
-                    showSelected: t === "#ffffff",
-                    disabled: u
-                }),  r().createElement(ve, {
-                    value: "#000000",
-                    ref: t === "#000000" ? a : null,
-                    onClick: l,
-                    showSelected: t === "#000000",
-                    disabled: u
-                }),  r().createElement(ne, null,  r().createElement(te, {
-                    type: "color",
-                    value: t === null ? "" : t,
-                    onChange: o,
-                    ref: n ? a : null,
-                    disabled: u
-                }), n &&  r().createElement(ae, {
-                    "aria-label": (0, b._)("Selected"),
-                    role: "presentation"
-                })));
-            };
+                return r().createElement(ae, {
+                    key: e,
+                    disabled: a,
+                    onClick: y,
+                    ref: d === e ? t : null,
+                    showSelected: d === e,
+                    value: e
+                });
+            })));
             
-            return r().createElement(Y, c,  r().createElement(Z, null, f),  r().createElement(le, null), v(),  r().createElement(le, null), i && i());
+            return r().createElement(Oe, s, m.length > 0 &&  r().createElement(r().Fragment, null,  r().createElement(Ee, null, m),  r().createElement(je, {
+                appearance: "weak"
+            })), h,  r().createElement(je, {
+                appearance: "weak"
+            }),  r().createElement(we, null,  r().createElement(he, {
+                allowTransparent: b,
+                disabled: a,
+                inputRef: p ? t : null,
+                onChange: y,
+                showPicker: true,
+                showSubmitButton: true,
+                value: d,
+                valueIsCustom: p
+            })));
         }
-        /* harmony default export */        const ye = he;
+        /* harmony default export */        const Ae = Te;
         // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
-                var ge = n(6165);
+                var Ne = n(6165);
         // CONCATENATED MODULE: ./src/Color/Color.tsx
-        function me() {
-            return me = Object.assign ? Object.assign.bind() : function(e) {
+        function He() {
+            return He = Object.assign ? Object.assign.bind() : function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var n = arguments[r];
                     for (var t in n) {
@@ -622,29 +851,29 @@
                     }
                 }
                 return e;
-            }, me.apply(null, arguments);
+            }, He.apply(null, arguments);
         }
-        function we(e, r) {
-            return Oe(e) || ke(e, r) || Ce(e, r) || Se();
+        function De(e, r) {
+            return Ve(e) || ze(e, r) || Me(e, r) || Fe();
         }
-        function Se() {
+        function Fe() {
             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, r) {
+        function Me(e, r) {
             if (e) {
-                if ("string" == typeof e) return xe(e, r);
+                if ("string" == typeof e) return Le(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;
+                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) ? Le(e, r) : void 0;
             }
         }
-        function xe(e, r) {
+        function Le(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 ke(e, r) {
+        function ze(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;
@@ -666,12 +895,12 @@
                 return i;
             }
         }
-        function Oe(e) {
+        function Ve(e) {
             if (Array.isArray(e)) return e;
         }
-        function Ee(e, r) {
+        function We(e, r) {
             if (null == e) return {};
-            var n, t, a = Ie(e, r);
+            var n, t, a = Ke(e, r);
             if (Object.getOwnPropertySymbols) {
                 var l = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < l.length; t++) {
@@ -680,7 +909,7 @@
             }
             return a;
         }
-        function Ie(e, r) {
+        function Ke(e, r) {
             if (null == e) return {};
             var n = {};
             for (var t in e) {
@@ -691,11 +920,7 @@
             }
             return n;
         }
-        /** @public */
-        // 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 = {
+        /** @public */        var Ue = {
             append: l().bool,
             defaultValue: l().string,
             describedBy: l().string,
@@ -712,274 +937,133 @@
             required: l().bool,
             value: l().string
         };
-        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 (s()(r) === "transparent") {
-                return "transparent";
-            }
-            // If the user types in the hexadecimal number without # in front,
-            // we add # automatically.
-                        if (!i()(r, "#")) {
-                return (0, p.expandShortHandHex)("#".concat(r));
-            }
-            return (0, p.expandShortHandHex)(r);
-        };
+        var Ge = [ "clickAway", "escapeKey", "offScreen", "toggleClick" ];
         /*
  * 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, 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" ]);
+ */        function Je(n) {
+            var t = n.append, a = n.defaultValue, l = n.disabled, o = n.describedBy, u = n.elementRef, c = n.error, f = n.hideInput, b = n.labelledBy, y = n.name, m = n.onChange, h = n.palette, g = h === void 0 ? Be : h, w = n.prepend, C = n.required, S = n.value, x = We(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";
+                        var k = (0, e.useMemo)((function() {
+                return g.some((function(e) {
+                    return e !== null && e.toLowerCase() === G;
                 }));
-            }), [ C ]);
-            var j = v()({
+            }), [ g ]);
+            var O = d()({
                 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);
+            var E = (0, e.useState)(a), I = De(E, 2), _ = I[0], j = I[1];
+            var P = (0, e.useState)(false), q = De(P, 2), B = q[0], R = q[1];
+            var $ = s()(B);
+            var T = (0, e.useState)((function() {
+                return (0, p.createDOMID)("swatch-reader-content");
+            })), A = De(T, 1), N = A[0];
+            var H = (0, e.useRef)(null);
+            var D = (0, e.useRef)(null);
             (0, e.useEffect)((function() {
-                if (L) {
+                if (B) {
                     var e, r;
-                    (e = Z.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
+                    (e = D.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
+                } else if ($) {
+                    var n;
+                    H === null || H === void 0 ? void 0 : (n = H.current) === null || n === void 0 ? void 0 : n.focus();
                 }
-            }), [ L ]);
+            }), [ B, $ ]);
+            var F = (0, e.useMemo)((function() {
+                return O ? S : _;
+            }), [ O, S, _ ]);
             (0, e.useEffect)((function() {
                 if (false) {
                     var e;
                 }
-            }), [ 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
-                    });
-                }
-                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.'));
-                    }
-                    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 (n) {
-                            w === null || w === void 0 ? void 0 : w({
-                                value: a,
-                                name: m
-                            });
-                        }
-                    }
-                }
-            }), [ 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);
-                    }
-                }
-                if (r !== "contentClick") {
-                    U(false);
-                }
-                if (r !== "escapeKey") {
-                    z(n);
-                    ne(n);
-                }
-            }), [ 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();
-                }
-            };
-            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);
+            }), [ a ]);
+            var M = (0, e.useCallback)((function(e) {
+                var r = e !== F;
+                if (!O) {
+                    j(e);
                 }
-                z(a);
-                if (t) {
-                    w === null || w === void 0 ? void 0 : w({
-                        value: r,
-                        name: m
+                if (r) {
+                    m === null || m === void 0 ? void 0 : m({
+                        value: e,
+                        name: y
                     });
                 }
-            }), [ 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);
-                }
-                u = a ? "transparent" : u;
-                u = o ? null : u;
+            }), [ O, y, m, F ]);
+            var L = (0, e.useCallback)((function() {
+                R(false);
+            }), []);
+            var z = (0, e.useCallback)((function() {
+                R(true);
+            }), []);
+            var V = (0, e.useCallback)((function(e, r) {
+                var n = r.value;
+                e.preventDefault();
+                R(false);
+                M(n);
+            }), [ M ]);
+            var W = (0, e.useCallback)((function(e, r) {
+                var n = r.value;
+                R(false);
+                M(n);
+            }), [ M ]);
+            var K = function e() {
                 
-                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, {
+                return r().createElement(Ae, {
+                    activeInputRef: D,
+                    "aria-label": (0, v._)("Choose color"),
+                    disabled: l,
+                    onChange: V,
+                    palette: g,
                     role: "dialog",
-                    "aria-label": (0, b._)("Choose color"),
-                    palette: C,
-                    value: ee(),
-                    swatchToFocusRef: Z,
-                    renderInput: ce,
-                    onSwatchClick: re,
-                    onSystemColorPickerChange: ue,
-                    disabled: l
+                    value: F
                 });
             };
-            var fe = function e() {
+            var U = function e() {
                 
-                return r().createElement(ve, me({
-                    append: R ? true : t,
+                return r().createElement(ae, He({
+                    append: !f ? true : t,
                     "data-test": "color",
-                    "data-test-value": M,
+                    "data-test-value": F,
                     "aria-describedby": o,
-                    "aria-labelledby": g ? "".concat(g, " ").concat(Q) : Q,
+                    "aria-labelledby": b ? "".concat(b, " ").concat(N) : N,
                     "aria-invalid": c || undefined,
                     disabled: l,
                     error: c,
                     elementRef: u,
-                    name: m,
-                    prepend: x,
-                    ref: Y,
-                    value: ee()
-                }, q));
+                    name: y,
+                    prepend: w,
+                    ref: H,
+                    value: F
+                }, x));
             };
             
-            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,
+            return r().createElement(ge, null,  r().createElement(Ne["default"], {
+                id: N
+            }, (0, v._)("Color picker")),  r().createElement(i(), {
+                closeReasons: Ge,
+                onRequestClose: L,
+                onRequestOpen: z,
+                open: B,
                 retainFocus: true,
                 takeFocus: false,
-                toggle: fe()
-            }, de()), R && se({
-                inDropdown: false
+                toggle: U()
+            }, K()), !f &&  r().createElement(Ce, {
+                allowTransparent: k,
+                append: t,
+                disabled: l,
+                labelledBy: b,
+                onChange: W,
+                prepend: true,
+                required: C,
+                value: F
             }));
         }
-        Te.propTypes = qe;
-        Te.componentType = "Color";
-        /* harmony default export */        const De = Te;
+        Je.propTypes = Ue;
+        Je.componentType = "Color";
+        /* harmony default export */        const Qe = Je;
     }) // CONCATENATED MODULE: ./src/Color/index.ts
     ();
     module.exports = t;