@splunk/react-ui 5.3.0 → 5.5.0

package/Color.js

@@ -1,151 +1,34 @@
 /******/ (() => {
     // webpackBootstrap
     /******/ "use strict";
-    /******/    var e = {
-        /***/ 6165: 
-        /***/ (e, r, t) => {
-            // EXPORTS
-            t.d(r, {
-                default: () => /* reexport */ y
-            });
-            // EXTERNAL MODULE: external "react"
-                        var n = t(9497);
-            var a =  t.n(n);
-            // EXTERNAL MODULE: external "prop-types"
-                        var o = t(23);
-            var l =  t.n(o);
-            // EXTERNAL MODULE: external "styled-components"
-                        var i = t(232);
-            var u =  t.n(i);
-            // EXTERNAL MODULE: external "@splunk/themes"
-                        var s = t(3563);
-            // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContentStyles.ts
-            var c = u().span.withConfig({
-                displayName: "ScreenReaderContentStyles__Styled",
-                componentId: "sc-1lnohwp-0"
-            })([ "", ";" ], s.mixins.screenReaderContent());
-            // CONCATENATED MODULE: ./src/ScreenReaderContent/ScreenReaderContent.tsx
-            function d() {
-                return d = Object.assign ? Object.assign.bind() : function(e) {
-                    for (var r = 1; r < arguments.length; r++) {
-                        var t = arguments[r];
-                        for (var n in t) {
-                            ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
-                        }
-                    }
-                    return e;
-                }, d.apply(null, arguments);
-            }
-            function f(e, r) {
-                if (null == e) return {};
-                var t, n, a = p(e, r);
-                if (Object.getOwnPropertySymbols) {
-                    var o = Object.getOwnPropertySymbols(e);
-                    for (n = 0; n < o.length; n++) {
-                        t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
-                    }
-                }
-                return a;
-            }
-            function p(e, r) {
-                if (null == e) return {};
-                var t = {};
-                for (var n in e) {
-                    if ({}.hasOwnProperty.call(e, n)) {
-                        if (-1 !== r.indexOf(n)) continue;
-                        t[n] = e[n];
-                    }
-                }
-                return t;
-            }
-            var v = {
-                children: l().node.isRequired,
-                elementRef: l().oneOfType([ l().func, l().object ])
-            };
-            /**
- * The screen reader text is used to wrap content that
- * is only accessible through screen readers.
- */            function b(e) {
-                var r = e.children, t = e.elementRef, n = f(e, [ "children", "elementRef" ]);
-                // @docs-props-type ScreenReaderContentPropsBase
-                                
-                return a().createElement(c, d({
-                    "data-test": "screen-reader-content",
-                    ref: t
-                }, n), r);
-            }
-            b.propTypes = v;
-            /* harmony default export */            const y = b;
-        } // CONCATENATED MODULE: ./src/ScreenReaderContent/index.ts
-        /***/ ,
-        /***/ 3563: 
-        /***/ e => {
-            e.exports = require("@splunk/themes");
-            /***/        },
-        /***/ 23: 
-        /***/ e => {
-            e.exports = require("prop-types");
-            /***/        },
-        /***/ 9497: 
-        /***/ e => {
-            e.exports = require("react");
-            /***/        },
-        /***/ 232: 
-        /***/ e => {
-            e.exports = require("styled-components");
-            /***/
-            /******/        }
-    };
-    /************************************************************************/
-    /******/ // The module cache
-    /******/    var r = {};
-    /******/
-    /******/ // The require function
-    /******/    function t(n) {
-        /******/ // Check if module is in cache
-        /******/ var a = r[n];
-        /******/        if (a !== undefined) {
-            /******/ return a.exports;
-            /******/        }
-        /******/ // Create a new module (and put it into the cache)
-        /******/        var o = r[n] = {
-            /******/ // no module.id needed
-            /******/ // no module.loaded needed
-            /******/ exports: {}
-            /******/        };
-        /******/
-        /******/ // Execute the module function
-        /******/        e[n](o, o.exports, t);
-        /******/
-        /******/ // Return the exports of the module
-        /******/        return o.exports;
-        /******/    }
+    /******/ // The require scope
+    /******/    var e = {};
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ t.n = e => {
-            /******/ var r = e && e.__esModule ? 
-            /******/ () => e["default"]
-            /******/ : () => e
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            t.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ t.d = (e, r) => {
-            /******/ for (var n in r) {
-                /******/ if (t.o(r, n) && !t.o(e, n)) {
-                    /******/ Object.defineProperty(e, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -154,14 +37,14 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ t.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ t.r = e => {
+        /******/ e.r = e => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                 /******/ Object.defineProperty(e, Symbol.toStringTag, {
                     value: "Module"
@@ -173,151 +56,149 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var n = {};
-    // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-        (() => {
-        // ESM COMPAT FLAG
-        t.r(n);
-        // EXPORTS
-                t.d(n, {
-            default: () => /* reexport */ cr,
-            defaultPalette: () => /* reexport */ $e
-        });
-        // EXTERNAL MODULE: external "react"
-                var e = t(9497);
-        var r =  t.n(e);
-        // CONCATENATED MODULE: external "lodash/omit"
-        const a = require("lodash/omit");
-        var o =  t.n(a);
-        // CONCATENATED MODULE: external "lodash/pickBy"
-        const l = require("lodash/pickBy");
-        var i =  t.n(l);
-        // EXTERNAL MODULE: external "prop-types"
-                var u = t(23);
-        var s =  t.n(u);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-        const c = require("@splunk/react-ui/Dropdown");
-        var d =  t.n(c);
-        // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
-        const f = require("@splunk/react-ui/useControlled");
-        var p =  t.n(f);
-        // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-        const v = require("@splunk/react-ui/usePrevious");
-        var b =  t.n(v);
-        // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-        const y = require("@splunk/ui-utils/color");
-        // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-        const m = require("@splunk/ui-utils/i18n");
-        // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-        const h = require("@splunk/ui-utils/id");
-        // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-        const g = require("@splunk/react-ui/ScreenReaderContent");
-        var w =  t.n(g);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-        const S = require("@splunk/react-ui/Tooltip");
-        var C =  t.n(S);
-        // EXTERNAL MODULE: external "styled-components"
-                var O = t(232);
-        var x =  t.n(O);
-        // CONCATENATED MODULE: external "@splunk/react-icons/Palette"
-        const k = require("@splunk/react-icons/Palette");
-        var j =  t.n(k);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-        const E = require("@splunk/react-ui/Text");
-        var I =  t.n(E);
-        // EXTERNAL MODULE: external "@splunk/themes"
-                var P = t(3563);
-        // 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 _ = "104px";
-        var q = x().div.withConfig({
-            displayName: "ColorInputStyles__StyledTextWrapper",
-            componentId: "sc-80hen8-0"
-        })([ "display:flex;width:", ";flex:1 0 auto;" ], _);
-        var B = x()(I()).withConfig({
-            displayName: "ColorInputStyles__StyledText",
-            componentId: "sc-80hen8-1"
-        })([ "width:", ";" ], _);
-        var R = x().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:", ";}" ], P.variables.inputHeight, P.variables.inputHeight, P.variables.inputBorderWidth, P.variables.interactiveColorBorder, P.variables.borderRadius, (function(e) {
-            var r = e.$append;
-            return r && (0, O.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, O.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
-        }), P.variables.focusShadow);
-        var A = x().input.withConfig({
-            displayName: "ColorInputStyles__StyledSystemColorPicker",
-            componentId: "sc-80hen8-3"
-        })([ "opacity:0;width:100%;height:100%;border:", " solid transparent;cursor:pointer;pointer-events:auto;" ], P.variables.inputBorderWidth);
-        var T = x()(j()).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 $ = require("@splunk/react-icons/Checkmark");
-        var D =  t.n($);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const N = require("@splunk/react-ui/Clickable");
-        var H =  t.n(N);
-        // CONCATENATED MODULE: ./src/utils/determineTextBrightness.ts
-        function F(e, r) {
-            return W(e) || V(e, r) || L(e, r) || M();
-        }
-        function M() {
-            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ cr,
+        defaultPalette: () => /* reexport */ De
+    });
+    // CONCATENATED MODULE: external "react"
+    const t = require("react");
+    var n =  e.n(t);
+    // CONCATENATED MODULE: external "lodash/omit"
+    const a = require("lodash/omit");
+    var o =  e.n(a);
+    // CONCATENATED MODULE: external "lodash/pickBy"
+    const l = require("lodash/pickBy");
+    var i =  e.n(l);
+    // CONCATENATED MODULE: external "prop-types"
+    const u = require("prop-types");
+    var s =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
+    const c = require("@splunk/react-ui/Dropdown");
+    var d =  e.n(c);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const f = require("@splunk/react-ui/ScreenReaderContent");
+    var p =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
+    const v = require("@splunk/react-ui/useControlled");
+    var b =  e.n(v);
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const y = require("@splunk/react-ui/usePrevious");
+    var m =  e.n(y);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/color"
+    const h = require("@splunk/ui-utils/color");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const g = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const w = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
+    const C = require("@splunk/react-ui/Tooltip");
+    var S =  e.n(C);
+    // CONCATENATED MODULE: external "styled-components"
+    const O = require("styled-components");
+    var x =  e.n(O);
+    // CONCATENATED MODULE: external "@splunk/react-icons/Palette"
+    const k = require("@splunk/react-icons/Palette");
+    var E =  e.n(k);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Text"
+    const j = require("@splunk/react-ui/Text");
+    var I =  e.n(j);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const P = require("@splunk/themes");
+    // 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 _ = "104px";
+    var q = x().div.withConfig({
+        displayName: "ColorInputStyles__StyledTextWrapper",
+        componentId: "sc-80hen8-0"
+    })([ "display:flex;width:", ";flex:1 0 auto;" ], _);
+    var B = x()(I()).withConfig({
+        displayName: "ColorInputStyles__StyledText",
+        componentId: "sc-80hen8-1"
+    })([ "width:", ";" ], _);
+    var A = x().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:", ";}" ], P.variables.inputHeight, P.variables.inputHeight, P.variables.inputBorderWidth, P.variables.interactiveColorBorder, P.variables.borderRadius, (function(e) {
+        var r = e.$append;
+        return r && (0, O.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, O.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
+    }), P.variables.focusShadow);
+    var $ = x().input.withConfig({
+        displayName: "ColorInputStyles__StyledSystemColorPicker",
+        componentId: "sc-80hen8-3"
+    })([ "opacity:0;width:100%;height:100%;border:", " solid transparent;cursor:pointer;pointer-events:auto;" ], P.variables.inputBorderWidth);
+    var T = x()(E()).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 R = require("@splunk/react-icons/Checkmark");
+    var D =  e.n(R);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const N = require("@splunk/react-ui/Clickable");
+    var H =  e.n(N);
+    // CONCATENATED MODULE: ./src/utils/determineTextBrightness.ts
+    function F(e, r) {
+        return W(e) || V(e, r) || L(e, r) || M();
+    }
+    function M() {
+        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 L(e, r) {
+        if (e) {
+            if ("string" == typeof e) return z(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? z(e, r) : void 0;
         }
-        function L(e, r) {
-            if (e) {
-                if ("string" == typeof e) return z(e, r);
-                var t = {}.toString.call(e).slice(8, -1);
-                return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? z(e, r) : void 0;
-            }
-        }
-        function z(e, r) {
-            (null == r || r > e.length) && (r = e.length);
-            for (var t = 0, n = Array(r); t < r; t++) {
-                n[t] = e[t];
-            }
-            return n;
+    }
+    function z(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
         }
-        function V(e, r) {
-            var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-            if (null != t) {
-                var n, a, o, l, i = [], u = !0, s = !1;
+        return n;
+    }
+    function V(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, a, o, l, i = [], u = !0, s = !1;
+            try {
+                if (o = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = o.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
+                }
+            } catch (e) {
+                s = !0, a = e;
+            } finally {
                 try {
-                    if (o = (t = t.call(e)).next, 0 === r) {
-                        if (Object(t) !== t) return;
-                        u = !1;
-                    } else for (;!(u = (n = o.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
-                    }
-                } catch (e) {
-                    s = !0, a = e;
+                    if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
                 } finally {
-                    try {
-                        if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
-                    } finally {
-                        if (s) throw a;
-                    }
+                    if (s) throw a;
                 }
-                return i;
             }
+            return i;
         }
-        function W(e) {
-            if (Array.isArray(e)) return e;
-        }
-        var K = "lightText";
-        var U = "darkText";
-        function G(e) {
-            var r = F(e, 3), t = r[0], n = r[1], a = r[2];
-            var o = (t * 299 + n * 587 + a * 114) / 1e3;
+    }
+    function W(e) {
+        if (Array.isArray(e)) return e;
+    }
+    var K = "lightText";
+    var U = "darkText";
+    function G(e) {
+        var r = F(e, 3), t = r[0], n = r[1], a = r[2];
+        var o = (t * 299 + n * 587 + a * 114) / 1e3;
  // formula from https://www.w3.org/TR/AERT/#color-contrast
-                        return o > 125 ? U : K;
-        }
-        /**
+                return o > 125 ? U : K;
+    }
+    /**
  * 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.
@@ -330,821 +211,819 @@
  * 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 J(e, r) {
-            if (typeof r === "string") {
-                if ((0, y.isValidHexColor)(r)) {
-                    // hex
-                    var t = r;
-                    if (t.length === 3 || t.length === 4) {
-                        // shorthand hex
-                        t = (0, y.expandShortHandHex)(t);
-                    }
-                    var n = (0, y.hexToRgb)(t);
-                    if (n != null) {
-                        return G(n);
-                    }
-                } else if (r.includes(",")) {
-                    if ((0, y.isValidRgb)(r)) {
-                        // rgb
-                        var a = r.replace(/[^\d,]/g, "").split(",").slice(0, 3);
-                        var o = a.map((function(e) {
-                            return parseInt(e, 10);
-                        })), l = F(o, 3), i = l[0], u = l[1], s = l[2];
-                        return G([ i, u, s ]);
-                    }
-                } else if (y.extendedColorKeywords.includes(r.toLowerCase())) {
-                    // named color
-                    var c = (0, y.namedColorToHex)(r.toLowerCase());
-                    if (c != null) {
-                        var d = (0, y.hexToRgb)(c);
-                        if (d != null) {
-                            return G(d);
-                        }
+ */    function J(e, r) {
+        if (typeof r === "string") {
+            if ((0, h.isValidHexColor)(r)) {
+                // hex
+                var t = r;
+                if (t.length === 3 || t.length === 4) {
+                    // shorthand hex
+                    t = (0, h.expandShortHandHex)(t);
+                }
+                var n = (0, h.hexToRgb)(t);
+                if (n != null) {
+                    return G(n);
+                }
+            } else if (r.includes(",")) {
+                if ((0, h.isValidRgb)(r)) {
+                    // rgb
+                    var a = r.replace(/[^\d,]/g, "").split(",").slice(0, 3);
+                    var o = a.map((function(e) {
+                        return parseInt(e, 10);
+                    })), l = F(o, 3), i = l[0], u = l[1], s = l[2];
+                    return G([ i, u, s ]);
+                }
+            } else if (h.extendedColorKeywords.includes(r.toLowerCase())) {
+                // named color
+                var c = (0, h.namedColorToHex)(r.toLowerCase());
+                if (c != null) {
+                    var d = (0, h.hexToRgb)(c);
+                    if (d != null) {
+                        return G(d);
                     }
                 }
             }
-            // TODO: Need to add support for auto text color to work with theme variable background color (SUI-5706).
-            /**
+        }
+        // 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 ? U : K;
-        }
-        // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
-        var Q = "rgba(0, 0, 0, 0.2)";
-        var X = "n/a";
-        var Y = "transparent";
-        var Z = function e(r, t) {
-            return J(r, t || undefined) === U ? P.variables.black : P.variables.white;
-        };
-        var ee = x()(D()).withConfig({
-            displayName: "SwatchStyles__StyledCheck",
-            componentId: "sc-1wxunhq-0"
-        })([ "box-sizing:border-box;", "" ], (function(e) {
-            var r = e.$value;
-            return r === Y ? (0, O.css)([ "color:", ";" ], P.variables.black) : (0, P.pick)({
-                light: (0, O.css)([ "color:", ";" ], Z(true, r)),
-                dark: (0, O.css)([ "color:", ";" ], Z(false, r))
-            });
-        }));
-        var re = x().div.withConfig({
-            displayName: "SwatchStyles__StyledOuter",
-            componentId: "sc-1wxunhq-1"
-        })([ "border:", " solid ", ";border-radius:", ";box-sizing:border-box;height:", ";min-width:", ";&:focus-within{box-shadow:", ";z-index:1;}", " ", " ", "" ], P.variables.inputBorderWidth, P.variables.interactiveColorBorder, P.variables.borderRadius, P.variables.inputHeight, P.variables.inputHeight, P.variables.focusShadow, (function(e) {
-            var r = e.$disabled;
-            return !r && (0, O.css)([ "&:hover{border-color:", ";}" ], P.variables.interactiveColorBorderHover);
-        }), (function(e) {
-            var r = e.$prepend;
-            return r && (0, O.css)([ "margin-left:1px;border-start-start-radius:0;border-end-start-radius:0;" ]);
-        }), (function(e) {
-            var r = e.$append;
-            return r && (0, O.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-right:none;" ]);
-        }));
-        var te = x()(H()).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 !== Y ? {
-                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:", " solid ", ";border-radius:3px;", ";", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], P.variables.inputBorderWidth, P.variables.neutral100, (function(e) {
-            var r = e.$value;
-            return r === null && (0, O.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );" ], P.variables.contentColorNegative);
-        }), (function(e) {
-            var r = e.$value;
-            return r === Y && (0, O.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:", ";" ], Q, Q, Q, Q, Q, Q, P.variables.white);
-        }), (function(e) {
-            var r = e.$prepend;
-            return r && (0, O.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
-        }), (function(e) {
-            var r = e.$append;
-            return r && (0, O.css)([ "border-start-end-radius:0;border-end-end-radius:0;" ]);
-        }), (function(e) {
-            var r = e.$hasError;
-            return r && (0, O.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], P.variables.interactiveColorAccentError);
-        }), (function(e) {
-            var r = e.$showSelected;
-            return r && (0, O.css)([ "display:flex;align-items:center;justify-content:center;" ]);
-        }));
-        // CONCATENATED MODULE: ./src/Color/Swatch.tsx
-        function ne() {
-            return ne = Object.assign ? Object.assign.bind() : function(e) {
-                for (var r = 1; r < arguments.length; r++) {
-                    var t = arguments[r];
-                    for (var n in t) {
-                        ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
-                    }
-                }
-                return e;
-            }, ne.apply(null, arguments);
-        }
-        function ae(e, r) {
-            if (null == e) return {};
-            var t, n, a = oe(e, r);
-            if (Object.getOwnPropertySymbols) {
-                var o = Object.getOwnPropertySymbols(e);
-                for (n = 0; n < o.length; n++) {
-                    t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
-                }
+        // backgroundColor is either not provided or an accepted representation of color
+                return e ? U : K;
+    }
+    // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
+    var Q = "rgba(0, 0, 0, 0.2)";
+    var X = "n/a";
+    var Y = "transparent";
+    var Z = function e(r, t) {
+        return J(r, t || undefined) === U ? P.variables.black : P.variables.white;
+    };
+    var ee = x()(D()).withConfig({
+        displayName: "SwatchStyles__StyledCheck",
+        componentId: "sc-1wxunhq-0"
+    })([ "box-sizing:border-box;", "" ], (function(e) {
+        var r = e.$value;
+        return r === Y ? (0, O.css)([ "color:", ";" ], P.variables.black) : (0, P.pick)({
+            light: (0, O.css)([ "color:", ";" ], Z(true, r)),
+            dark: (0, O.css)([ "color:", ";" ], Z(false, r))
+        });
+    }));
+    var re = x().div.withConfig({
+        displayName: "SwatchStyles__StyledOuter",
+        componentId: "sc-1wxunhq-1"
+    })([ "border:", " solid ", ";border-radius:", ";box-sizing:border-box;height:", ";min-width:", ";&:focus-within{box-shadow:", ";z-index:1;}", " ", " ", "" ], P.variables.inputBorderWidth, P.variables.interactiveColorBorder, P.variables.borderRadius, P.variables.inputHeight, P.variables.inputHeight, P.variables.focusShadow, (function(e) {
+        var r = e.$disabled;
+        return !r && (0, O.css)([ "&:hover{border-color:", ";}" ], P.variables.interactiveColorBorderHover);
+    }), (function(e) {
+        var r = e.$prepend;
+        return r && (0, O.css)([ "margin-left:1px;border-start-start-radius:0;border-end-start-radius:0;" ]);
+    }), (function(e) {
+        var r = e.$append;
+        return r && (0, O.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-right:none;" ]);
+    }));
+    var te = {};
+    var ne = x()(H()).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 !== Y ? {
+            style: {
+                backgroundColor: r
             }
-            return a;
-        }
-        function oe(e, r) {
-            if (null == e) return {};
-            var t = {};
-            for (var n in e) {
-                if ({}.hasOwnProperty.call(e, n)) {
-                    if (-1 !== r.indexOf(n)) continue;
-                    t[n] = e[n];
+        } : te;
+    })).withConfig({
+        displayName: "SwatchStyles__StyledClickable",
+        componentId: "sc-1wxunhq-2"
+    })([ "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));}", " ", "" ], P.variables.inputBorderWidth, P.variables.neutral100, (function(e) {
+        var r = e.$value;
+        return r === null && (0, O.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );" ], P.variables.contentColorNegative);
+    }), (function(e) {
+        var r = e.$value;
+        return r === Y && (0, O.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:", ";" ], Q, Q, Q, Q, Q, Q, P.variables.white);
+    }), (function(e) {
+        var r = e.$prepend;
+        return r && (0, O.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
+    }), (function(e) {
+        var r = e.$append;
+        return r && (0, O.css)([ "border-start-end-radius:0;border-end-end-radius:0;" ]);
+    }), (function(e) {
+        var r = e.$hasError;
+        return r && (0, O.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], P.variables.interactiveColorAccentError);
+    }), (function(e) {
+        var r = e.$showSelected;
+        return r && (0, O.css)([ "display:flex;align-items:center;justify-content:center;" ]);
+    }));
+    // CONCATENATED MODULE: ./src/Color/Swatch.tsx
+    function ae() {
+        return ae = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
-            return t;
-        }
-        var le = {
-            append: s().bool,
-            elementRef: s().oneOfType([ s().func, s().object ]),
-            /** @private */
-            error: s().bool,
-            /** @private. Call back function when activated. */
-            onClick: s().func,
-            prepend: s().bool,
-            value: s().string,
-            /** @private */
-            showSelected: s().bool
-        };
-        var ie =  r().forwardRef((function(t, n) {
-            var a = t.append, o = t.disabled, l = t.error, i = l === void 0 ? false : l, u = t.onClick, s = t.prepend, c = t.value, d = t.showSelected, f = ae(t, [ "append", "disabled", "error", "onClick", "prepend", "value", "showSelected" ]);
-            // @docs-props-type SwatchPropsBase
-                        var p = c === null || c === undefined ? (0, m._)("No color") : c;
-            // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
-            // Invalid values are converted to `undefined`
-                        var v = c;
-            if (!(typeof v === "string" && ((0, y.isValidHexColor)(v) || v === "transparent")) && v !== null && v !== undefined) {
-                v = undefined;
+            return e;
+        }, ae.apply(null, arguments);
+    }
+    function oe(e, r) {
+        if (null == e) return {};
+        var t, n, a = le(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
-            var b = (0, e.useCallback)((function(e) {
-                return u === null || u === void 0 ? void 0 : u(e, {
-                    value: c
-                });
-            }), [ u, c ]);
-            
-            return r().createElement(re, {
-                $disabled: o !== null && o !== void 0 ? o : false,
-                $append: a,
-                $prepend: s
-            },  r().createElement(te, ne({
-                onClick: b,
-                disabled: o ? "disabled" : undefined,
-                ref: n,
-                $value: v,
-                $append: a,
-                $prepend: s,
-                $hasError: i,
-                $showSelected: d,
-                "data-test": "swatch",
-                "data-test-value": c
-            }, f), d &&  r().createElement(ee, {
-                "aria-label": (0, m._)("Selected"),
-                role: "presentation",
-                $value: v
-            }),  r().createElement(w(), null, p)));
-        }));
-        ie.propTypes = le;
-        /* harmony default export */        const ue = ie;
-        // CONCATENATED MODULE: ./src/Color/ColorInput.tsx
-        function se() {
-            return se = Object.assign ? Object.assign.bind() : function(e) {
-                for (var r = 1; r < arguments.length; r++) {
-                    var t = arguments[r];
-                    for (var n in t) {
-                        ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
-                    }
-                }
-                return e;
-            }, se.apply(null, arguments);
         }
-        function ce(e, r) {
-            return be(e) || ve(e, r) || fe(e, r) || de();
+        return a;
+    }
+    function le(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== r.indexOf(n)) continue;
+                t[n] = e[n];
+            }
         }
-        function de() {
-            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+        return t;
+    }
+    var ie = {
+        append: s().bool,
+        elementRef: s().oneOfType([ s().func, s().object ]),
+        /** @private */
+        error: s().bool,
+        /** @private. Call back function when activated. */
+        onClick: s().func,
+        prepend: s().bool,
+        value: s().string,
+        /** @private */
+        showSelected: s().bool
+    };
+    var ue =  n().forwardRef((function(e, r) {
+        var a = e.append, o = e.disabled, l = e.error, i = l === void 0 ? false : l, u = e.onClick, s = e.prepend, c = e.value, d = e.showSelected, f = oe(e, [ "append", "disabled", "error", "onClick", "prepend", "value", "showSelected" ]);
+        // @docs-props-type SwatchPropsBase
+                var v = c === null || c === undefined ? (0, g._)("No color") : c;
+        // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
+        // Invalid values are converted to `undefined`
+                var b = c;
+        if (!(typeof b === "string" && ((0, h.isValidHexColor)(b) || b === "transparent")) && b !== null && b !== undefined) {
+            b = undefined;
         }
-        function fe(e, r) {
-            if (e) {
-                if ("string" == typeof e) return pe(e, r);
-                var t = {}.toString.call(e).slice(8, -1);
-                return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? pe(e, r) : void 0;
+        var y = (0, t.useCallback)((function(e) {
+            return u === null || u === void 0 ? void 0 : u(e, {
+                value: c
+            });
+        }), [ u, c ]);
+        
+        return n().createElement(re, {
+            $disabled: o !== null && o !== void 0 ? o : false,
+            $append: a,
+            $prepend: s
+        },  n().createElement(ne, ae({
+            onClick: y,
+            disabled: o ? "disabled" : undefined,
+            ref: r,
+            $value: b,
+            $append: a,
+            $prepend: s,
+            $hasError: i,
+            $showSelected: d,
+            "data-test": "swatch",
+            "data-test-value": c
+        }, f), d &&  n().createElement(ee, {
+            "aria-label": (0, g._)("Selected"),
+            role: "presentation",
+            $value: b
+        }),  n().createElement(p(), null, v)));
+    }));
+    ue.propTypes = ie;
+    /* harmony default export */    const se = ue;
+    // CONCATENATED MODULE: ./src/Color/ColorInput.tsx
+    function ce() {
+        return ce = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                }
             }
+            return e;
+        }, ce.apply(null, arguments);
+    }
+    function de(e, r) {
+        return ye(e) || be(e, r) || pe(e, r) || fe();
+    }
+    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 pe(e, r) {
+        if (e) {
+            if ("string" == typeof e) return ve(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? ve(e, r) : void 0;
         }
-        function pe(e, r) {
-            (null == r || r > e.length) && (r = e.length);
-            for (var t = 0, n = Array(r); t < r; t++) {
-                n[t] = e[t];
-            }
-            return n;
+    }
+    function ve(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
         }
-        function ve(e, r) {
-            var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-            if (null != t) {
-                var n, a, o, l, i = [], u = !0, s = !1;
+        return n;
+    }
+    function be(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, a, o, l, i = [], u = !0, s = !1;
+            try {
+                if (o = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = o.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
+                }
+            } catch (e) {
+                s = !0, a = e;
+            } finally {
                 try {
-                    if (o = (t = t.call(e)).next, 0 === r) {
-                        if (Object(t) !== t) return;
-                        u = !1;
-                    } else for (;!(u = (n = o.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
-                    }
-                } catch (e) {
-                    s = !0, a = e;
+                    if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
                 } finally {
-                    try {
-                        if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
-                    } finally {
-                        if (s) throw a;
-                    }
+                    if (s) throw a;
                 }
-                return i;
             }
+            return i;
         }
-        function be(e) {
-            if (Array.isArray(e)) return e;
-        }
-        function ye(e, r) {
-            if (null == e) return {};
-            var t, n, a = me(e, r);
-            if (Object.getOwnPropertySymbols) {
-                var o = Object.getOwnPropertySymbols(e);
-                for (n = 0; n < o.length; n++) {
-                    t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
-                }
+    }
+    function ye(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function me(e, r) {
+        if (null == e) return {};
+        var t, n, a = he(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
-            return a;
         }
-        function me(e, r) {
-            if (null == e) return {};
-            var t = {};
-            for (var n in e) {
-                if ({}.hasOwnProperty.call(e, n)) {
-                    if (-1 !== r.indexOf(n)) continue;
-                    t[n] = e[n];
-                }
+        return a;
+    }
+    function he(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== r.indexOf(n)) continue;
+                t[n] = e[n];
             }
-            return t;
         }
-        /**
+        return t;
+    }
+    /**
  * Formats the value for display in the input.
- */        var he = function e(r) {
-            if (r === undefined) {
-                return "";
-            }
-            if (r === null) {
-                return X;
-            }
-            var t = r.toLowerCase();
-            if (t === X) {
-                return X;
-            }
-            if (t === Y) {
-                return Y;
-            }
-            // If the user types in the hexadecimal number without # in front, we add # automatically.
-                        if (!t.startsWith("#")) {
-                var n = "#".concat(t);
-                if ((0, y.isValidHexColor)(n)) {
-                    return (0, y.expandShortHandHex)(n);
-                }
+ */    var ge = function e(r) {
+        if (r === undefined) {
+            return "";
+        }
+        if (r === null) {
+            return X;
+        }
+        var t = r.toLowerCase();
+        if (t === X) {
+            return X;
+        }
+        if (t === Y) {
+            return Y;
+        }
+        // If the user types in the hexadecimal number without # in front, we add # automatically.
+                if (!t.startsWith("#")) {
+            var n = "#".concat(t);
+            if ((0, h.isValidHexColor)(n)) {
+                return (0, h.expandShortHandHex)(n);
             }
-            return (0, y.expandShortHandHex)(t);
-        };
-        /**
+        }
+        return (0, h.expandShortHandHex)(t);
+    };
+    /**
  * Returns the value that's valid for Color's onChange
- */        var ge = function e(r) {
-            if (r === X) {
-                return null;
+ */    var we = function e(r) {
+        if (r === X) {
+            return null;
+        }
+        if (r === "") {
+            return undefined;
+        }
+        return r;
+    };
+    var Ce = (0, g._)("Open system color picker");
+    var Se = function e(r) {
+        var a = r.allowTransparent, o = r.append, l = r.disabled, i = r.inputRef, u = r.labelledBy, s = r.onChange, c = r.showPicker, d = r.showSubmitButton, f = r.value, v = r.valueIsCustom, b = me(r, [ "allowTransparent", "append", "disabled", "inputRef", "labelledBy", "onChange", "showPicker", "showSubmitButton", "value", "valueIsCustom" ]);
+        var y = (0, t.useState)((0, w.createDOMID)("hex-input-reader-content")), m = de(y, 1), C = m[0];
+        var O = (0, t.useState)(""), x = de(O, 2), k = x[0], E = x[1];
+        var j = (0, t.useState)(""), I = de(j, 2), P = I[0], _ = I[1];
+        var R = (0, t.useCallback)((function(e) {
+            E(we(e));
+            _(e !== null && e !== void 0 ? e : "");
+        }), []);
+        (0, t.useEffect)((function() {
+            E(we(f));
+            _(ge(f));
+        }), [ f ]);
+        var D = (0, t.useCallback)((function(e) {
+            var r = we(ge(P));
+            var t = r !== undefined && (r == null || r === Y && a || (0, h.isValidHexColor)(r));
+            if (t) {
+                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.'));
             }
-            if (r === "") {
-                return undefined;
+        }), [ a, P, s ]);
+        var N = (0, t.useCallback)((function(e, r) {
+            var t = r.value;
+            R(t);
+        }), [ R ]);
+        var H = (0, t.useCallback)((function(e) {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                D(e);
             }
-            return r;
-        };
-        var we = (0, m._)("Open system color picker");
-        var Se = function t(n) {
-            var a = n.allowTransparent, o = n.append, l = n.disabled, i = n.inputRef, u = n.labelledBy, s = n.onChange, c = n.showPicker, d = n.showSubmitButton, f = n.value, p = n.valueIsCustom, v = ye(n, [ "allowTransparent", "append", "disabled", "inputRef", "labelledBy", "onChange", "showPicker", "showSubmitButton", "value", "valueIsCustom" ]);
-            var b = (0, e.useState)((0, h.createDOMID)("hex-input-reader-content")), g = ce(b, 1), S = g[0];
-            var O = (0, e.useState)(""), x = ce(O, 2), k = x[0], j = x[1];
-            var E = (0, e.useState)(""), I = ce(E, 2), P = I[0], _ = I[1];
-            var $ = (0, e.useCallback)((function(e) {
-                j(ge(e));
-                _(e !== null && e !== void 0 ? e : "");
-            }), []);
-            (0, e.useEffect)((function() {
-                j(ge(f));
-                _(he(f));
-            }), [ f ]);
-            var D = (0, e.useCallback)((function(e) {
-                var r = ge(he(P));
-                var t = r !== undefined && (r == null || r === Y && a || (0, y.isValidHexColor)(r));
-                if (t) {
-                    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, P, s ]);
-            var N = (0, e.useCallback)((function(e, r) {
-                var t = r.value;
-                $(t);
-            }), [ $ ]);
-            var H = (0, e.useCallback)((function(e) {
-                if (e.key === "Enter") {
-                    e.preventDefault();
-                    D(e);
-                }
-            }), [ D ]);
-            var F = (0, e.useCallback)((function(e) {
-                var r = e.target.value;
-                $(r);
-            }), [ $ ]);
-            var M = c &&  r().createElement(C(), {
-                content: we,
-                defaultPlacement: "below"
-            },  r().createElement(R, {
-                $append: o,
-                $prepend: true
-            },  r().createElement(T, null),  r().createElement(A, {
-                "aria-label": we,
-                disabled: !!l,
-                onChange: F,
-                type: "color",
-                value: f === null ? "" : f
-            })));
-            
-            return r().createElement(r().Fragment, null,  r().createElement(q, null,  r().createElement(w(), {
-                id: S
-            }, (0, m._)("Hexadecimal color value")),  r().createElement(B, se({
-                append: o || c,
-                autoCapitalize: "off",
-                autoComplete: "off",
-                autoCorrect: "off",
-                disabled: l,
-                inputRef: i,
-                labelledBy: u ? "".concat(u, " ").concat(S) : S,
-                onChange: N,
-                onKeyDown: H,
-                spellCheck: false,
-                value: P
-            }, v)), M), d &&  r().createElement(ue, {
-                "data-test": "textbox-swatch",
-                disabled: !!l,
-                onClick: D,
-                showSelected: p && k === f,
-                value: k
-            }));
-        };
-        /* harmony default export */        const Ce = Se;
-        // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-        var Oe = x().div.withConfig({
-            displayName: "ColorStyles__StyledColor",
-            componentId: "jxrost-0"
-        })([ "", ";flex-direction:row;" ], P.mixins.reset("flex"));
-        var xe = x().div.withConfig({
-            displayName: "ColorStyles__StyledPaletteInputWrapper",
-            componentId: "jxrost-1"
-        })([ "display:flex;min-width:0;gap:", ";" ], P.variables.spacingSmall);
-        var ke = x()(Ce).withConfig({
-            displayName: "ColorStyles__StyledColorInput",
-            componentId: "jxrost-2"
-        })([ "flex-grow:0;&:focus-within{z-index:1;}" ]);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-        const je = require("@splunk/react-ui/Divider");
-        var Ee =  t.n(je);
-        // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-        var Ie = 5;
-        var Pe = x().div.withConfig({
-            displayName: "PaletteStyles__StyledPalette",
-            componentId: "qgv9v9-0"
-        })([ "padding:", " ", ";" ], P.variables.spacingMedium, P.variables.spacingLarge);
-        var _e = x().ul.withConfig({
-            displayName: "PaletteStyles__StyledSwatches",
-            componentId: "qgv9v9-1"
-        })([ "", ";grid-template-columns:repeat(", ",", ");gap:", ";" ], P.mixins.reset("grid"), Ie, P.variables.inputHeight, P.variables.spacingSmall);
-        var qe = x().li.withConfig({
-            displayName: "PaletteStyles__StyledSwatch",
-            componentId: "qgv9v9-2"
-        })([ "", ";" ], P.mixins.reset("inline-block"));
-        var Be = x().div.withConfig({
-            displayName: "PaletteStyles__StyledToolBar",
-            componentId: "qgv9v9-3"
-        })([ "position:relative;display:flex;align-items:center;gap:", ";" ], P.variables.spacingSmall);
-        var Re = x()(Ee()).withConfig({
-            displayName: "PaletteStyles__StyledDivider",
-            componentId: "qgv9v9-4"
-        })([ "margin-block:", ";" ], P.variables.spacingSmall);
-        // CONCATENATED MODULE: ./src/Color/Palette.tsx
-        function Ae(e, r) {
-            if (null == e) return {};
-            var t, n, a = Te(e, r);
-            if (Object.getOwnPropertySymbols) {
-                var o = Object.getOwnPropertySymbols(e);
-                for (n = 0; n < o.length; n++) {
-                    t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
-                }
+        }), [ D ]);
+        var F = (0, t.useCallback)((function(e) {
+            var r = e.target.value;
+            R(r);
+        }), [ R ]);
+        var M = c &&  n().createElement(S(), {
+            content: Ce,
+            defaultPlacement: "below"
+        },  n().createElement(A, {
+            $append: o,
+            $prepend: true
+        },  n().createElement(T, null),  n().createElement($, {
+            "aria-label": Ce,
+            disabled: !!l,
+            onChange: F,
+            type: "color",
+            value: f === null ? "" : f
+        })));
+        
+        return n().createElement(n().Fragment, null,  n().createElement(q, null,  n().createElement(p(), {
+            id: C
+        }, (0, g._)("Hexadecimal color value")),  n().createElement(B, ce({
+            append: o || c,
+            autoCapitalize: "off",
+            autoComplete: "off",
+            autoCorrect: "off",
+            disabled: l,
+            inputRef: i,
+            labelledBy: u ? "".concat(u, " ").concat(C) : C,
+            onChange: N,
+            onKeyDown: H,
+            spellCheck: false,
+            value: P
+        }, b)), M), d &&  n().createElement(se, {
+            "data-test": "textbox-swatch",
+            disabled: !!l,
+            onClick: D,
+            showSelected: v && k === f,
+            value: k
+        }));
+    };
+    /* harmony default export */    const Oe = Se;
+    // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
+    var xe = x().div.withConfig({
+        displayName: "ColorStyles__StyledColor",
+        componentId: "jxrost-0"
+    })([ "", ";flex-direction:row;" ], P.mixins.reset("flex"));
+    var ke = x().div.withConfig({
+        displayName: "ColorStyles__StyledPaletteInputWrapper",
+        componentId: "jxrost-1"
+    })([ "display:flex;min-width:0;gap:", ";" ], P.variables.spacingSmall);
+    var Ee = x()(Oe).withConfig({
+        displayName: "ColorStyles__StyledColorInput",
+        componentId: "jxrost-2"
+    })([ "flex-grow:0;&:focus-within{z-index:1;}" ]);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+    const je = require("@splunk/react-ui/Divider");
+    var Ie =  e.n(je);
+    // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
+    var Pe = 5;
+    var _e = x().div.withConfig({
+        displayName: "PaletteStyles__StyledPalette",
+        componentId: "qgv9v9-0"
+    })([ "padding:", " ", ";" ], P.variables.spacingMedium, P.variables.spacingLarge);
+    var qe = x().ul.withConfig({
+        displayName: "PaletteStyles__StyledSwatches",
+        componentId: "qgv9v9-1"
+    })([ "", ";grid-template-columns:repeat(", ",", ");gap:", ";" ], P.mixins.reset("grid"), Pe, P.variables.inputHeight, P.variables.spacingSmall);
+    var Be = x().li.withConfig({
+        displayName: "PaletteStyles__StyledSwatch",
+        componentId: "qgv9v9-2"
+    })([ "", ";" ], P.mixins.reset("inline-block"));
+    var Ae = x().div.withConfig({
+        displayName: "PaletteStyles__StyledToolBar",
+        componentId: "qgv9v9-3"
+    })([ "position:relative;display:flex;align-items:center;gap:", ";" ], P.variables.spacingSmall);
+    var $e = x()(Ie()).withConfig({
+        displayName: "PaletteStyles__StyledDivider",
+        componentId: "qgv9v9-4"
+    })([ "margin-block:", ";" ], P.variables.spacingSmall);
+    // CONCATENATED MODULE: ./src/Color/Palette.tsx
+    function Te(e, r) {
+        if (null == e) return {};
+        var t, n, a = Re(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
-            return a;
         }
-        function Te(e, r) {
-            if (null == e) return {};
-            var t = {};
-            for (var n in e) {
-                if ({}.hasOwnProperty.call(e, n)) {
-                    if (-1 !== r.indexOf(n)) continue;
-                    t[n] = e[n];
-                }
+        return a;
+    }
+    function Re(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== r.indexOf(n)) continue;
+                t[n] = e[n];
             }
-            return t;
         }
-        var $e = [ "#7B56DB", "#009CEB", "#00CDAF", "#DD9900", "#FF677B", "#CB2196", "#813193", "#0051B5", "#008C80", "#99B100", "#FFA476", "#FF6ACE", "#AE8CFF", "#00689D", "#00490A", "#465D00", "#9D6300", "#F6540B", "#FF969E", "#E47BFE" ];
-        var De = function e(r, t) {
-            return t != null && (r === null || r === void 0 ? void 0 : r.includes(t));
-        };
-        var Ne = [ null, "#ffffff", "#000000" ];
-        function He(t) {
-            var n = t.activeInputRef, a = t.disabled, o = t.onChange, l = t.palette, i = l === void 0 ? $e : l, u = t.value, s = Ae(t, [ "activeInputRef", "disabled", "onChange", "palette", "value" ]);
-            // @docs-props-type PalettePropsBase
-                        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 De(c, d);
-            }), [ c, d ]);
-            var p = (0, e.useMemo)((function() {
-                return De(Ne, d);
-            }), [ d ]);
-            var v = !f && !p && d !== "";
-            var b = (0, e.useMemo)((function() {
-                return c.some((function(e) {
-                    return e !== null && e.toLowerCase() === Y;
-                }));
-            }), [ c ]);
-            var y = (0, e.useCallback)((function(e, r) {
-                var t = r.value;
-                o(e, {
-                    value: t
-                });
-            }), [ o ]);
-            var m = c.map((function(e) {
-                var t = e === null ? null : e.toLowerCase();
-                var o = t === d;
-                
-                return r().createElement(qe, {
-                    key: t || "null"
-                },  r().createElement(ue, {
-                    value: t,
-                    ref: o ? n : null,
-                    onClick: y,
-                    showSelected: o,
-                    disabled: a
-                }));
+        return t;
+    }
+    var De = [ "#7B56DB", "#009CEB", "#00CDAF", "#DD9900", "#FF677B", "#CB2196", "#813193", "#0051B5", "#008C80", "#99B100", "#FFA476", "#FF6ACE", "#AE8CFF", "#00689D", "#00490A", "#465D00", "#9D6300", "#F6540B", "#FF969E", "#E47BFE" ];
+    var Ne = function e(r, t) {
+        return t != null && (r === null || r === void 0 ? void 0 : r.includes(t));
+    };
+    var He = [ null, "#ffffff", "#000000" ];
+    function Fe(e) {
+        var r = e.activeInputRef, a = e.disabled, o = e.onChange, l = e.palette, i = l === void 0 ? De : l, u = e.value, s = Te(e, [ "activeInputRef", "disabled", "onChange", "palette", "value" ]);
+        // @docs-props-type PalettePropsBase
+                var c = (0, t.useMemo)((function() {
+            return i === null || i === void 0 ? void 0 : i.map((function(e) {
+                return e === null ? e : e.toLowerCase();
             }));
-            var h =  r().createElement(Be, {
-                "data-test": "tool-bar"
-            }, Ne.map((function(e) {
-                
-                return r().createElement(ue, {
-                    key: e,
-                    disabled: a,
-                    onClick: y,
-                    ref: d === e ? n : null,
-                    showSelected: d === e,
-                    value: e
-                });
-            })));
+        }), [ i ]);
+        var d = u != null ? u.toLowerCase() : u;
+        var f = (0, t.useMemo)((function() {
+            return Ne(c, d);
+        }), [ c, d ]);
+        var p = (0, t.useMemo)((function() {
+            return Ne(He, d);
+        }), [ d ]);
+        var v = !f && !p && d !== "";
+        var b = (0, t.useMemo)((function() {
+            return c.some((function(e) {
+                return e !== null && e.toLowerCase() === Y;
+            }));
+        }), [ c ]);
+        var y = (0, t.useCallback)((function(e, r) {
+            var t = r.value;
+            o(e, {
+                value: t
+            });
+        }), [ o ]);
+        var m = c.map((function(e) {
+            var t = e === null ? null : e.toLowerCase();
+            var o = t === d;
             
-            return r().createElement(Pe, s, m.length > 0 &&  r().createElement(r().Fragment, null,  r().createElement(_e, null, m),  r().createElement(Re, {
-                appearance: "weak"
-            })), h,  r().createElement(Re, {
-                appearance: "weak"
-            }),  r().createElement(xe, null,  r().createElement(Ce, {
-                allowTransparent: b,
+            return n().createElement(Be, {
+                key: t || "null"
+            },  n().createElement(se, {
+                value: t,
+                ref: o ? r : null,
+                onClick: y,
+                showSelected: o,
+                disabled: a
+            }));
+        }));
+        var h =  n().createElement(Ae, {
+            "data-test": "tool-bar"
+        }, He.map((function(e) {
+            
+            return n().createElement(se, {
+                key: e,
                 disabled: a,
-                inputRef: v ? n : null,
-                onChange: y,
-                showPicker: true,
-                showSubmitButton: true,
-                value: d,
-                valueIsCustom: v
-            })));
-        }
-        /* harmony default export */        const Fe = He;
-        // EXTERNAL MODULE: ./src/ScreenReaderContent/index.ts + 2 modules
-                var Me = t(6165);
-        // CONCATENATED MODULE: ./src/Color/Color.tsx
-        function Le(e) {
-            "@babel/helpers - typeof";
-            return Le = "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;
-            }, Le(e);
-        }
-        function ze(e) {
-            return Ke(e) || We(e) || rr(e) || Ve();
-        }
-        function Ve() {
-            throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-        }
-        function We(e) {
-            if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
-        }
-        function Ke(e) {
-            if (Array.isArray(e)) return tr(e);
-        }
-        function Ue() {
-            return Ue = Object.assign ? Object.assign.bind() : function(e) {
-                for (var r = 1; r < arguments.length; r++) {
-                    var t = arguments[r];
-                    for (var n in t) {
-                        ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
-                    }
-                }
-                return e;
-            }, Ue.apply(null, arguments);
-        }
-        function Ge(e, r) {
-            var t = Object.keys(e);
-            if (Object.getOwnPropertySymbols) {
-                var n = Object.getOwnPropertySymbols(e);
-                r && (n = n.filter((function(r) {
-                    return Object.getOwnPropertyDescriptor(e, r).enumerable;
-                }))), t.push.apply(t, n);
-            }
-            return t;
-        }
-        function Je(e) {
+                onClick: y,
+                ref: d === e ? r : null,
+                showSelected: d === e,
+                value: e
+            });
+        })));
+        
+        return n().createElement(_e, s, m.length > 0 &&  n().createElement(n().Fragment, null,  n().createElement(qe, null, m),  n().createElement($e, {
+            appearance: "weak"
+        })), h,  n().createElement($e, {
+            appearance: "weak"
+        }),  n().createElement(ke, null,  n().createElement(Oe, {
+            allowTransparent: b,
+            disabled: a,
+            inputRef: v ? r : null,
+            onChange: y,
+            showPicker: true,
+            showSubmitButton: true,
+            value: d,
+            valueIsCustom: v
+        })));
+    }
+    /* harmony default export */    const Me = Fe;
+    // CONCATENATED MODULE: ./src/Color/Color.tsx
+    function Le(e) {
+        "@babel/helpers - typeof";
+        return Le = "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;
+        }, Le(e);
+    }
+    function ze(e) {
+        return Ke(e) || We(e) || rr(e) || Ve();
+    }
+    function Ve() {
+        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+    function We(e) {
+        if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
+    }
+    function Ke(e) {
+        if (Array.isArray(e)) return tr(e);
+    }
+    function Ue() {
+        return Ue = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var t = null != arguments[r] ? arguments[r] : {};
-                r % 2 ? Ge(Object(t), !0).forEach((function(r) {
-                    Qe(e, r, t[r]);
-                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Ge(Object(t)).forEach((function(r) {
-                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-                }));
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                }
             }
             return e;
+        }, Ue.apply(null, arguments);
+    }
+    function Ge(e, r) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            r && (n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), t.push.apply(t, n);
         }
-        function Qe(e, r, t) {
-            return (r = Xe(r)) in e ? Object.defineProperty(e, r, {
-                value: t,
-                enumerable: !0,
-                configurable: !0,
-                writable: !0
-            }) : e[r] = t, e;
-        }
-        function Xe(e) {
-            var r = Ye(e, "string");
-            return "symbol" == Le(r) ? r : r + "";
-        }
-        function Ye(e, r) {
-            if ("object" != Le(e) || !e) return e;
-            var t = e[Symbol.toPrimitive];
-            if (void 0 !== t) {
-                var n = t.call(e, r || "default");
-                if ("object" != Le(n)) return n;
-                throw new TypeError("@@toPrimitive must return a primitive value.");
-            }
-            return ("string" === r ? String : Number)(e);
+        return t;
+    }
+    function Je(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? Ge(Object(t), !0).forEach((function(r) {
+                Qe(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Ge(Object(t)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+            }));
         }
-        function Ze(e, r) {
-            return ar(e) || nr(e, r) || rr(e, r) || er();
+        return e;
+    }
+    function Qe(e, r, t) {
+        return (r = Xe(r)) in e ? Object.defineProperty(e, r, {
+            value: t,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = t, e;
+    }
+    function Xe(e) {
+        var r = Ye(e, "string");
+        return "symbol" == Le(r) ? r : r + "";
+    }
+    function Ye(e, r) {
+        if ("object" != Le(e) || !e) return e;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var n = t.call(e, r || "default");
+            if ("object" != Le(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
         }
-        function er() {
-            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+        return ("string" === r ? String : Number)(e);
+    }
+    function Ze(e, r) {
+        return ar(e) || nr(e, r) || rr(e, r) || er();
+    }
+    function er() {
+        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 rr(e, r) {
+        if (e) {
+            if ("string" == typeof e) return tr(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? tr(e, r) : void 0;
         }
-        function rr(e, r) {
-            if (e) {
-                if ("string" == typeof e) return tr(e, r);
-                var t = {}.toString.call(e).slice(8, -1);
-                return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? tr(e, r) : void 0;
-            }
-        }
-        function tr(e, r) {
-            (null == r || r > e.length) && (r = e.length);
-            for (var t = 0, n = Array(r); t < r; t++) {
-                n[t] = e[t];
-            }
-            return n;
+    }
+    function tr(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
         }
-        function nr(e, r) {
-            var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-            if (null != t) {
-                var n, a, o, l, i = [], u = !0, s = !1;
+        return n;
+    }
+    function nr(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, a, o, l, i = [], u = !0, s = !1;
+            try {
+                if (o = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = o.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
+                }
+            } catch (e) {
+                s = !0, a = e;
+            } finally {
                 try {
-                    if (o = (t = t.call(e)).next, 0 === r) {
-                        if (Object(t) !== t) return;
-                        u = !1;
-                    } else for (;!(u = (n = o.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
-                    }
-                } catch (e) {
-                    s = !0, a = e;
+                    if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
                 } finally {
-                    try {
-                        if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
-                    } finally {
-                        if (s) throw a;
-                    }
+                    if (s) throw a;
                 }
-                return i;
             }
+            return i;
         }
-        function ar(e) {
-            if (Array.isArray(e)) return e;
-        }
-        function or(e, r) {
-            if (null == e) return {};
-            var t, n, a = lr(e, r);
-            if (Object.getOwnPropertySymbols) {
-                var o = Object.getOwnPropertySymbols(e);
-                for (n = 0; n < o.length; n++) {
-                    t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
-                }
+    }
+    function ar(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function or(e, r) {
+        if (null == e) return {};
+        var t, n, a = lr(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
-            return a;
         }
-        function lr(e, r) {
-            if (null == e) return {};
-            var t = {};
-            for (var n in e) {
-                if ({}.hasOwnProperty.call(e, n)) {
-                    if (-1 !== r.indexOf(n)) continue;
-                    t[n] = e[n];
-                }
+        return a;
+    }
+    function lr(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== r.indexOf(n)) continue;
+                t[n] = e[n];
             }
-            return t;
         }
-        /** @public */        var ir = {
-            append: s().bool,
-            defaultValue: s().string,
-            describedBy: s().string,
-            disabled: s().bool,
-            elementRef: s().oneOfType([ s().func, s().object ]),
-            error: s().bool,
-            hideInput: s().bool,
-            labelledBy: s().string,
-            name: s().string,
-            onChange: s().func,
-            palette: s().array,
-            prepend: s().bool,
-            /** @private */
-            required: s().bool,
-            value: s().string
-        };
-        var ur = [ "clickAway", "escapeKey", "offScreen", "toggleClick" ];
-        /*
+        return t;
+    }
+    /** @public */    var ir = {
+        append: s().bool,
+        defaultValue: s().string,
+        describedBy: s().string,
+        disabled: s().bool,
+        elementRef: s().oneOfType([ s().func, s().object ]),
+        error: s().bool,
+        hideInput: s().bool,
+        labelledBy: s().string,
+        name: s().string,
+        onChange: s().func,
+        palette: s().array,
+        prepend: s().bool,
+        /** @private */
+        required: s().bool,
+        value: s().string
+    };
+    var ur = [ "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 sr(t) {
-            var n = t.append, a = t.defaultValue, l = t.disabled, u = t.describedBy, s = t.elementRef, c = t.error, f = t.hideInput, v = t.labelledBy, y = t.name, g = t.onChange, w = t.palette, S = w === void 0 ? $e : w, C = t.prepend, O = t.required, x = t.value, k = or(t, [ "append", "defaultValue", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "onChange", "palette", "prepend", "required", "value" ]);
-            // @docs-props-type ColorPropsBase
-                        var j = (0, e.useMemo)((function() {
-                return S.some((function(e) {
-                    return e !== null && e.toLowerCase() === Y;
-                }));
-            }), [ S ]);
-            var E = p()({
-                componentName: "Color",
-                /* eslint-disable-next-line prefer-rest-params */
-                componentProps: arguments[0]
-            });
-            var I = (0, e.useState)(a), P = Ze(I, 2), _ = P[0], q = P[1];
-            var B = (0, e.useState)(false), R = Ze(B, 2), A = R[0], T = R[1];
-            var $ = b()(A);
-            var D = (0, e.useState)((function() {
-                return (0, h.createDOMID)("swatch-reader-content");
-            })), N = Ze(D, 1), H = N[0];
-            var F = (0, e.useRef)(null);
-            var M = (0, e.useRef)(null);
-            (0, e.useEffect)((function() {
-                if (A) {
-                    var e, r;
-                    (e = M.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
-                } else if ($) {
-                    var t;
-                    F === null || F === void 0 ? void 0 : (t = F.current) === null || t === void 0 ? void 0 : t.focus();
-                }
-            }), [ A, $ ]);
-            var L = (0, e.useMemo)((function() {
-                return E ? x : _;
-            }), [ E, x, _ ]);
-            (0, e.useEffect)((function() {
-                if (false) {
-                    var e;
-                }
-            }), [ a ]);
-            var z = (0, e.useCallback)((function(e) {
-                var r = e !== L;
-                if (!E) {
-                    q(e);
-                }
-                if (r) {
-                    g === null || g === void 0 ? void 0 : g({
-                        value: e,
-                        name: y
-                    });
-                }
-            }), [ E, y, g, L ]);
-            var V = (0, e.useCallback)((function() {
-                T(false);
-            }), []);
-            var W = (0, e.useCallback)((function() {
-                T(true);
-            }), []);
-            var K = (0, e.useCallback)((function(e, r) {
-                var t = r.value;
-                e.preventDefault();
-                T(false);
-                z(t);
-            }), [ z ]);
-            var U = (0, e.useCallback)((function(e, r) {
-                var t = r.value;
-                T(false);
-                z(t);
-            }), [ z ]);
-            var G = function e() {
-                
-                return r().createElement(Fe, {
-                    activeInputRef: M,
-                    "aria-label": (0, m._)("Choose color"),
-                    disabled: l,
-                    onChange: K,
-                    palette: S,
-                    role: "dialog",
-                    value: L
-                });
-            };
-            var J = (0, e.useMemo)((function() {
-                return Je(Je({}, i()(k, (function(e, r) {
-                    return r.indexOf("aria-") === 0;
-                }))), {}, {
-                    "aria-describedby": u,
-                    "aria-labelledby": v ? "".concat(v, " ").concat(H) : H,
-                    "aria-invalid": c || undefined
+ */    function sr(e) {
+        var r = e.append, a = e.defaultValue, l = e.disabled, u = e.describedBy, s = e.elementRef, c = e.error, f = e.hideInput, v = e.labelledBy, y = e.name, h = e.onChange, C = e.palette, S = C === void 0 ? De : C, O = e.prepend, x = e.required, k = e.value, E = or(e, [ "append", "defaultValue", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "onChange", "palette", "prepend", "required", "value" ]);
+        // @docs-props-type ColorPropsBase
+                var j = (0, t.useMemo)((function() {
+            return S.some((function(e) {
+                return e !== null && e.toLowerCase() === Y;
+            }));
+        }), [ S ]);
+        var I = b()({
+            componentName: "Color",
+            /* eslint-disable-next-line prefer-rest-params */
+            componentProps: arguments[0]
+        });
+        var P = (0, t.useState)(a), _ = Ze(P, 2), q = _[0], B = _[1];
+        var A = (0, t.useState)(false), $ = Ze(A, 2), T = $[0], R = $[1];
+        var D = m()(T);
+        var N = (0, t.useState)((function() {
+            return (0, w.createDOMID)("swatch-reader-content");
+        })), H = Ze(N, 1), F = H[0];
+        var M = (0, t.useRef)(null);
+        var L = (0, t.useRef)(null);
+        (0, t.useEffect)((function() {
+            if (T) {
+                var e, r;
+                (e = L.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
+            } else if (D) {
+                var t;
+                M === null || M === void 0 ? void 0 : (t = M.current) === null || t === void 0 ? void 0 : t.focus();
+            }
+        }), [ T, D ]);
+        var z = (0, t.useMemo)((function() {
+            return I ? k : q;
+        }), [ I, k, q ]);
+        (0, t.useEffect)((function() {
+            if (false) {
+                var e;
+            }
+        }), [ a ]);
+        var V = (0, t.useCallback)((function(e) {
+            var r = e !== z;
+            if (!I) {
+                B(e);
+            }
+            if (r) {
+                h === null || h === void 0 ? void 0 : h({
+                    value: e,
+                    name: y
                 });
-            }), [ u, c, v, k, H ]);
-            var Q = function e() {
-                
-                return r().createElement(ue, Ue({
-                    append: !f ? true : n,
-                    "data-test": "toggle-swatch",
-                    "data-test-value": L
-                }, J, {
-                    disabled: l,
-                    error: c,
-                    name: y,
-                    prepend: C,
-                    ref: F,
-                    value: L
-                }));
-            };
+            }
+        }), [ I, y, h, z ]);
+        var W = (0, t.useCallback)((function() {
+            R(false);
+        }), []);
+        var K = (0, t.useCallback)((function() {
+            R(true);
+        }), []);
+        var U = (0, t.useCallback)((function(e, r) {
+            var t = r.value;
+            e.preventDefault();
+            R(false);
+            V(t);
+        }), [ V ]);
+        var G = (0, t.useCallback)((function(e, r) {
+            var t = r.value;
+            R(false);
+            V(t);
+        }), [ V ]);
+        var J = function e() {
             
-            return r().createElement(Oe, Ue({
-                "data-test": "color",
-                ref: s
-            }, o()(k, ze(Object.keys(J)))),  r().createElement(Me["default"], {
-                id: H
-            }, (0, m._)("Color picker")),  r().createElement(d(), {
-                closeReasons: ur,
-                onRequestClose: V,
-                onRequestOpen: W,
-                open: A,
-                retainFocus: true,
-                takeFocus: false,
-                toggle: Q()
-            }, G()), !f &&  r().createElement(ke, {
-                allowTransparent: j,
-                append: n,
+            return n().createElement(Me, {
+                activeInputRef: L,
+                "aria-label": (0, g._)("Choose color"),
                 disabled: l,
-                labelledBy: v,
                 onChange: U,
-                prepend: true,
-                required: O,
-                value: L
+                palette: S,
+                role: "dialog",
+                value: z
+            });
+        };
+        var Q = (0, t.useMemo)((function() {
+            return Je(Je({}, i()(E, (function(e, r) {
+                return r.indexOf("aria-") === 0;
+            }))), {}, {
+                "aria-describedby": u,
+                "aria-labelledby": v ? "".concat(v, " ").concat(F) : F,
+                "aria-invalid": c || undefined
+            });
+        }), [ u, c, v, E, F ]);
+        var X = function e() {
+            
+            return n().createElement(se, Ue({
+                append: !f ? true : r,
+                "data-test": "toggle-swatch",
+                "data-test-value": z
+            }, Q, {
+                disabled: l,
+                error: c,
+                name: y,
+                prepend: O,
+                ref: M,
+                value: z
             }));
-        }
-        sr.propTypes = ir;
-        sr.componentType = "Color";
-        /* harmony default export */        const cr = sr;
-    }) // CONCATENATED MODULE: ./src/Color/index.ts
-    ();
-    module.exports = n;
+        };
+        
+        return n().createElement(xe, Ue({
+            "data-test": "color",
+            ref: s
+        }, o()(E, ze(Object.keys(Q)))),  n().createElement(p(), {
+            id: F
+        }, (0, g._)("Color picker")),  n().createElement(d(), {
+            closeReasons: ur,
+            onRequestClose: W,
+            onRequestOpen: K,
+            open: T,
+            retainFocus: true,
+            takeFocus: false,
+            toggle: X()
+        }, J()), !f &&  n().createElement(Ee, {
+            allowTransparent: j,
+            append: r,
+            disabled: l,
+            labelledBy: v,
+            onChange: G,
+            prepend: true,
+            required: x,
+            value: z
+        }));
+    }
+    sr.propTypes = ir;
+    sr.componentType = "Color";
+    /* harmony default export */    const cr = sr;
+    // CONCATENATED MODULE: ./src/Color/index.ts
+    module.exports = r;
     /******/})();