@splunk/react-ui 4.20.0 → 4.21.1

package/Color.js

@@ -1,1316 +1,1085 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 179);
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ 0:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
-/***/ 1:
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-
-/***/ 108:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/slice");
-
-/***/ }),
-
-/***/ 11:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/has");
-
-/***/ }),
-
-/***/ 119:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/startsWith");
-
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Clickable");
-
-/***/ }),
-
-/***/ 129:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/ChevronDown");
-
-/***/ }),
-
-/***/ 14:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/ScreenReaderContent");
-
-/***/ }),
-
-/***/ 15:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/includes");
-
-/***/ }),
-
-/***/ 179:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ src_Color_Color; });
-__webpack_require__.d(__webpack_exports__, "defaultPalette", function() { return /* reexport */ defaultPalette; });
-__webpack_require__.d(__webpack_exports__, "isValidHEX", function() { return /* reexport */ Color_isValidHEX; });
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(2);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(1);
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
-
-// EXTERNAL MODULE: external "lodash/debounce"
-var debounce_ = __webpack_require__(68);
-var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
-
-// EXTERNAL MODULE: external "lodash/has"
-var has_ = __webpack_require__(11);
-var has_default = /*#__PURE__*/__webpack_require__.n(has_);
-
-// EXTERNAL MODULE: external "lodash/includes"
-var includes_ = __webpack_require__(15);
-var includes_default = /*#__PURE__*/__webpack_require__.n(includes_);
-
-// EXTERNAL MODULE: external "lodash/keys"
-var keys_ = __webpack_require__(9);
-var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
-
-// EXTERNAL MODULE: external "lodash/omit"
-var omit_ = __webpack_require__(5);
-var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
-
-// EXTERNAL MODULE: external "lodash/slice"
-var slice_ = __webpack_require__(108);
-var slice_default = /*#__PURE__*/__webpack_require__.n(slice_);
-
-// EXTERNAL MODULE: external "lodash/startsWith"
-var startsWith_ = __webpack_require__(119);
-var startsWith_default = /*#__PURE__*/__webpack_require__.n(startsWith_);
-
-// EXTERNAL MODULE: external "lodash/toLower"
-var toLower_ = __webpack_require__(36);
-var toLower_default = /*#__PURE__*/__webpack_require__.n(toLower_);
-
-// EXTERNAL MODULE: external "lodash/memoize"
-var memoize_ = __webpack_require__(40);
-var memoize_default = /*#__PURE__*/__webpack_require__.n(memoize_);
-
-// EXTERNAL MODULE: external "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(69);
-var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Dropdown"
-var Dropdown_ = __webpack_require__(22);
-var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
-
-// EXTERNAL MODULE: external "@splunk/themes"
-var themes_ = __webpack_require__(0);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/color"
-var color_ = __webpack_require__(50);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(4);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-var keyboard_ = __webpack_require__(7);
-
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(3);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(32);
-var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
-var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
-
-// EXTERNAL MODULE: external "@splunk/react-icons/Checkmark"
-var Checkmark_ = __webpack_require__(78);
-var Checkmark_default = /*#__PURE__*/__webpack_require__.n(Checkmark_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(12);
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
-
-// CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
-
-
-
-
-var backgroundBlockColor = Object(themes_["pick"])({
-  enterprise: themes_["variables"].gray80,
-  prisma: 'rgba(0, 0, 0, 0.2)'
-});
-var transparentSwatch = Object(external_styled_components_["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:", ";"], backgroundBlockColor, backgroundBlockColor, backgroundBlockColor, backgroundBlockColor, backgroundBlockColor, backgroundBlockColor, Object(themes_["pick"])({
-  enterprise: 'transparent',
-  prisma: themes_["variables"].white
-}));
-var StyledCheck = external_styled_components_default()(Checkmark_default.a).withConfig({
-  displayName: "SwatchStyles__StyledCheck",
-  componentId: "sc-1wxunhq-0"
-})(["box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;"]);
-var StyledClickable = external_styled_components_default()(Clickable_default.a).withConfig({
-  displayName: "SwatchStyles__StyledClickable",
-  componentId: "sc-1wxunhq-1"
-})(["display:block;flex:0 0 auto;border:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", ""], Object(themes_["pick"])({
-  enterprise: {
-    light: Object(external_styled_components_["css"])(["1px solid ", ""], themes_["variables"].gray60),
-    dark: themes_["variables"].border
-  },
-  prisma: Object(external_styled_components_["css"])(["1px solid ", ""], themes_["variables"].interactiveColorBorder)
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["border-radius:2px;"])
-}), function (_ref) {
-  var $value = _ref.$value;
-  return $value === null && Object(external_styled_components_["css"])(["background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";"], Object(themes_["pick"])({
-    enterprise: '#ed1e24',
-    prisma: themes_["variables"].accentColorNegative
-  }), Object(themes_["pick"])({
-    prisma: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].white)
-  }));
-}, function (_ref2) {
-  var $value = _ref2.$value;
-  return $value && ($value === 'transparent' ? transparentSwatch : "background-color: ".concat($value));
-}, function (_ref3) {
-  var $noBorder = _ref3.$noBorder;
-  return $noBorder && Object(external_styled_components_["css"])(["border:none;"]);
-}, themes_["variables"].focusColor, themes_["variables"].focusShadow, Object(themes_["pick"])({
-  enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["width:32px;height:32px;"]),
-    compact: Object(external_styled_components_["css"])(["width:28px;height:28px;"])
-  },
-  prisma: Object(external_styled_components_["css"])(["width:24px;height:24px;"])
-}), function (_ref4) {
-  var $prepend = _ref4.$prepend;
-  return $prepend && Object(external_styled_components_["css"])(["border-top-left-radius:0;border-bottom-left-radius:0;"]);
-}, function (_ref5) {
-  var $append = _ref5.$append;
-  return $append && Object(external_styled_components_["css"])(["margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;"]);
-}, function (_ref6) {
-  var $hasError = _ref6.$hasError;
-  return $hasError && Object(external_styled_components_["css"])(["box-shadow:inset 0 0 0 2px white;border-color:", ";"], Object(themes_["pick"])({
-    enterprise: themes_["variables"].errorColor,
-    prisma: themes_["variables"].accentColorNegative
-  }));
-}, function (_ref7) {
-  var $showSelected = _ref7.$showSelected;
-  return $showSelected && Object(external_styled_components_["css"])(["display:flex;align-items:center;justify-content:center;"]);
-});
-
-// CONCATENATED MODULE: ./src/Color/Swatch.tsx
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-
-
-
-
-
-
-var propTypes = {
-  append: external_prop_types_default.a.bool,
-  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-
-  /** @private */
-  error: external_prop_types_default.a.bool,
-
-  /** @private */
-  noBorder: external_prop_types_default.a.bool,
-
-  /** @private. Call back function when activated. */
-  onClick: external_prop_types_default.a.func,
-  prepend: external_prop_types_default.a.bool,
-  value: external_prop_types_default.a.string,
-
-  /** @private */
-  showSelected: external_prop_types_default.a.bool
-};
-var Swatch = /*#__PURE__*/external_react_default.a.forwardRef(function (_ref, ref) {
-  var append = _ref.append,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? false : _ref$error,
-      _onClick = _ref.onClick,
-      prepend = _ref.prepend,
-      value = _ref.value,
-      noBorder = _ref.noBorder,
-      showSelected = _ref.showSelected,
-      otherProps = _objectWithoutProperties(_ref, ["append", "error", "onClick", "prepend", "value", "noBorder", "showSelected"]);
-
-  var screenReaderValue = value === null || value === undefined ? Object(i18n_["_"])('No color') : value; // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
-  // Invalid values are converted to `undefined`
-
-  var $value = value;
-
-  if (!(typeof $value === 'string' && (Object(color_["isValidHexColor"])($value) || $value === 'transparent')) && $value !== null && $value !== undefined) {
-    $value = undefined;
-  }
-
-  return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, _extends({
-    onClick: function onClick(e) {
-      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(e, {
-        value: value
-      });
-    },
-    ref: ref,
-    $value: $value,
-    $append: append,
-    $prepend: prepend,
-    $hasError: error,
-    $noBorder: noBorder,
-    $showSelected: showSelected,
-    "data-test": "swatch",
-    "data-test-value": value
-  }, otherProps), showSelected && /*#__PURE__*/external_react_default.a.createElement(StyledCheck, {
-    "aria-label": Object(i18n_["_"])('Selected'),
-    role: "presentation"
-  }), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, screenReaderValue));
-});
-Swatch.propTypes = propTypes;
-/* harmony default export */ var Color_Swatch = (Swatch);
-// CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-
-
-
-
-var StyledColor = external_styled_components_default.a.div.withConfig({
-  displayName: "ColorStyles__StyledColor",
-  componentId: "jxrost-0"
-})(["", ";flex-direction:row;"], themes_["mixins"].reset('flex'));
-var StyledInput = external_styled_components_default.a.div.withConfig({
-  displayName: "ColorStyles__StyledInput",
-  componentId: "jxrost-1"
-})(["", ";"], Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["display:flex;width:100%;"]),
-  prisma: Object(external_styled_components_["css"])(["position:relative;", ""], function (_ref) {
-    var $inDropdown = _ref.$inDropdown;
-    return $inDropdown ? Object(external_styled_components_["css"])(["width:80px;"]) : Object(external_styled_components_["css"])(["flex:0 1 auto;min-width:0;"]);
-  })
-}));
-var StyledInputText = external_styled_components_default()(Text_default.a).withConfig({
-  displayName: "ColorStyles__StyledInputText",
-  componentId: "jxrost-2"
-})(["", ""], function (_ref2) {
-  var $inDropdown = _ref2.$inDropdown;
-  return $inDropdown && Object(external_styled_components_["css"])(["font-size:12px;"]);
-});
-var StyledToggleSwatch = external_styled_components_default()(Color_Swatch).withConfig({
-  displayName: "ColorStyles__StyledToggleSwatch",
-  componentId: "jxrost-3"
-})(["", ""], Object(themes_["pick"])({
-  prisma: {
-    comfortable: Object(external_styled_components_["css"])(["width:40px;height:40px;"]),
-    compact: Object(external_styled_components_["css"])(["width:32px;height:32px;"])
-  },
-  enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["width:32px;height:32px;"]),
-    compact: Object(external_styled_components_["css"])(["width:28px;height:28px;"])
-  }
-}));
-
-// EXTERNAL MODULE: external "@splunk/react-icons/ChevronDown"
-var ChevronDown_ = __webpack_require__(129);
-var ChevronDown_default = /*#__PURE__*/__webpack_require__.n(ChevronDown_);
-
-// CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-
-
-
-
-var StyledPalette = external_styled_components_default.a.div.withConfig({
-  displayName: "PaletteStyles__StyledPalette",
-  componentId: "qgv9v9-0"
-})(["width:", ";padding:", ";", ""], Object(themes_["pick"])({
-  enterprise: '180px',
-  prisma: '224px'
-}), Object(themes_["pick"])({
-  enterprise: themes_["variables"].spacingHalf,
-  prisma: '8px'
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["display:flex;flex-direction:column;border-radius:2px;"])
-}));
-var StyledSwatches = external_styled_components_default.a.ul.withConfig({
-  displayName: "PaletteStyles__StyledSwatches",
-  componentId: "qgv9v9-1"
-})(["", ";margin-bottom:", ";margin-right:", ";", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
-  enterprise: '6px'
-}), Object(themes_["pick"])({
-  enterprise: '-6px'
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["position:relative;"])
-}));
-var StyledSwatch = external_styled_components_default.a.li.withConfig({
-  displayName: "PaletteStyles__StyledSwatch",
-  componentId: "qgv9v9-2"
-})(["", ";margin-right:", ";margin-bottom:", ";", ""], themes_["mixins"].reset('inline-block'), Object(themes_["pick"])({
-  enterprise: themes_["variables"].spacingQuarter,
-  prisma: '4px'
-}), Object(themes_["pick"])({
-  enterprise: themes_["variables"].spacingQuarter,
-  prisma: '4px'
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["vertical-align:top;&:nth-child(8n){margin-right:0;}"])
-}));
-var StyledToolBarPrisma = external_styled_components_default.a.div.withConfig({
-  displayName: "PaletteStyles__StyledToolBarPrisma",
-  componentId: "qgv9v9-3"
-})(["position:relative;display:flex;align-items:center;padding:0;margin-top:12px;gap:4px;"]);
-var StyledExpandButton = external_styled_components_default()(Clickable_default.a).withConfig({
-  displayName: "PaletteStyles__StyledExpandButton",
-  componentId: "qgv9v9-4"
-})(["position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", ""], themes_["variables"].focusShadow, function (_ref) {
-  var $expanded = _ref.$expanded;
-  return $expanded && Object(external_styled_components_["css"])(["transform:rotate(180deg);"]);
-});
-var StyledSystemColorPickerWrapper = external_styled_components_default.a.div.withConfig({
-  displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
-  componentId: "qgv9v9-5"
-})(["position:relative;"]);
-var StyledSystemColorPicker = external_styled_components_default.a.input.withConfig({
-  displayName: "PaletteStyles__StyledSystemColorPicker",
-  componentId: "qgv9v9-6"
-})(["box-sizing:border-box;height:24px;width:24px;border:none;border-radius:2px;outline:none;appearance:none;padding:12px;margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;background-position:-6px -6px;background-size:36px 36px;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}"], themes_["variables"].focusShadow);
-var PaletteStyles_StyledCheck = external_styled_components_default()(Checkmark_default.a).withConfig({
-  displayName: "PaletteStyles__StyledCheck",
-  componentId: "qgv9v9-7"
-})(["box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;"]);
-
-// CONCATENATED MODULE: ./src/Color/Palette.tsx
-
-
-
-
-
-
-
-
-
-
-function Palette(_ref) {
-  var expanded = _ref.expanded,
-      palette = _ref.palette,
-      value = _ref.value,
-      swatchToFocusRef = _ref.swatchToFocusRef,
-      onSwatchClick = _ref.onSwatchClick,
-      expandButtonRef = _ref.expandButtonRef,
-      onPaletteExpand = _ref.onPaletteExpand,
-      onSystemColorPickerChange = _ref.onSystemColorPickerChange,
-      renderInput = _ref.renderInput;
-
-  var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
-      isPrisma = _useSplunkTheme.isPrisma,
-      isLight = _useSplunkTheme.isLight;
-
-  var isValueInPalette = includes_default()(palette.map(function (c) {
-    return c && toLower_default()(c);
-  }), value);
-  var swatches = palette.map(function (swatchValue, index) {
-    var formattedValue = swatchValue === null ? null : toLower_default()(swatchValue);
-    var selected = formattedValue === value;
-    var shouldFocus = !isValueInPalette && index === 0 || isValueInPalette && selected;
-    return /*#__PURE__*/external_react_default.a.createElement(StyledSwatch, {
-      key: formattedValue || 'null'
-    }, /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-      value: formattedValue,
-      ref: shouldFocus ? swatchToFocusRef : null,
-      onClick: onSwatchClick,
-      noBorder: isPrisma,
-      showSelected: isPrisma && selected
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
+            /******/;
+            e.d(r, {
+                a: r
+            });
+            /******/            return r;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
+                        enumerable: true,
+                        get: r[n]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var t = {};
+    // ESM COMPAT FLAG
+        e.r(t);
+    // EXPORTS
+        e.d(t, {
+        default: () => /* reexport */ Le,
+        defaultPalette: () => /* reexport */ Ve,
+        isValidHEX: () => /* reexport */ He
+    });
+    // CONCATENATED MODULE: external "react"
+    const r = require("react");
+    var n =  e.n(r);
+    // CONCATENATED MODULE: external "prop-types"
+    const a = require("prop-types");
+    var o =  e.n(a);
+    // CONCATENATED MODULE: external "lodash/debounce"
+    const l = require("lodash/debounce");
+    var i =  e.n(l);
+    // CONCATENATED MODULE: external "lodash/has"
+    const s = require("lodash/has");
+    var u =  e.n(s);
+    // CONCATENATED MODULE: external "lodash/includes"
+    const p = require("lodash/includes");
+    var c =  e.n(p);
+    // CONCATENATED MODULE: external "lodash/keys"
+    const d = require("lodash/keys");
+    var f =  e.n(d);
+    // CONCATENATED MODULE: external "lodash/omit"
+    const v = require("lodash/omit");
+    var h =  e.n(v);
+    // CONCATENATED MODULE: external "lodash/slice"
+    const y = require("lodash/slice");
+    var m =  e.n(y);
+    // CONCATENATED MODULE: external "lodash/startsWith"
+    const b = require("lodash/startsWith");
+    var g =  e.n(b);
+    // CONCATENATED MODULE: external "lodash/toLower"
+    const x = require("lodash/toLower");
+    var w =  e.n(x);
+    // CONCATENATED MODULE: external "lodash/memoize"
+    const S = require("lodash/memoize");
+    var k =  e.n(S);
+    // CONCATENATED MODULE: external "tinycolor2"
+    const C = require("tinycolor2");
+    var P =  e.n(C);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
+    const E = require("@splunk/react-ui/Dropdown");
+    var O =  e.n(E);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const _ = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/color"
+    const q = require("@splunk/ui-utils/color");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const j = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
+    const I = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: external "styled-components"
+    const T = require("styled-components");
+    var R =  e.n(T);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Text"
+    const B = require("@splunk/react-ui/Text");
+    var V =  e.n(B);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const N = require("@splunk/react-ui/ScreenReaderContent");
+    var A =  e.n(N);
+    // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
+    const D = require("@splunk/react-icons/Checkmark");
+    var $ =  e.n(D);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const H = require("@splunk/react-ui/Clickable");
+    var z =  e.n(H);
+    // CONCATENATED MODULE: ./src/Color/SwatchStyles.ts
+    var K = (0, _.pick)({
+        enterprise: _.variables.gray80,
+        prisma: "rgba(0, 0, 0, 0.2)"
+    });
+    var F = (0, T.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, (0, 
+    _.pick)({
+        enterprise: "transparent",
+        prisma: _.variables.white
+    }));
+    var M = R()($()).withConfig({
+        displayName: "SwatchStyles__StyledCheck",
+        componentId: "sc-1wxunhq-0"
+    })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
+    var L = R()(z()).withConfig({
+        displayName: "SwatchStyles__StyledClickable",
+        componentId: "sc-1wxunhq-1"
+    })([ "display:block;flex:0 0 auto;border:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], (0, 
+    _.pick)({
+        enterprise: {
+            light: (0, T.css)([ "1px solid ", "" ], _.variables.gray60),
+            dark: _.variables.border
+        },
+        prisma: (0, T.css)([ "1px solid ", "" ], _.variables.interactiveColorBorder)
+    }), (0, _.pick)({
+        prisma: (0, T.css)([ "border-radius:2px;" ])
+    }), (function(e) {
+        var t = e.$value;
+        return t === null && (0, T.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
+        _.pick)({
+            enterprise: "#ed1e24",
+            prisma: _.variables.accentColorNegative
+        }), (0, _.pick)({
+            prisma: (0, T.css)([ "background-color:", ";" ], _.variables.white)
+        }));
+    }), (function(e) {
+        var t = e.$value;
+        return t && (t === "transparent" ? F : "background-color: ".concat(t));
+    }), (function(e) {
+        var t = e.$noBorder;
+        return t && (0, T.css)([ "border:none;" ]);
+    }), _.variables.focusColor, _.variables.focusShadow, (0, _.pick)({
+        enterprise: {
+            comfortable: (0, T.css)([ "width:32px;height:32px;" ]),
+            compact: (0, T.css)([ "width:28px;height:28px;" ])
+        },
+        prisma: (0, T.css)([ "width:24px;height:24px;" ])
+    }), (function(e) {
+        var t = e.$prepend;
+        return t && (0, T.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+    }), (function(e) {
+        var t = e.$append;
+        return t && (0, T.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+    }), (function(e) {
+        var t = e.$hasError;
+        return t && (0, T.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
+        _.pick)({
+            enterprise: _.variables.errorColor,
+            prisma: _.variables.accentColorNegative
+        }));
+    }), (function(e) {
+        var t = e.$showSelected;
+        return t && (0, T.css)([ "display:flex;align-items:center;justify-content:center;" ]);
     }));
-  });
-
-  if (isPrisma) {
-    var isCustomColor = !isValueInPalette && value !== '#ffffff' && value !== '#000000' && value !== null && value !== '';
-    var swatchEnd = swatches.length === 8 ? 7 : 15;
-    var swatchesDefaultDisplay = slice_default()(swatches, 0, swatchEnd);
-    var swatchesExpandDisplay = slice_default()(swatches, swatchEnd);
-    return /*#__PURE__*/external_react_default.a.createElement(StyledPalette, null, /*#__PURE__*/external_react_default.a.createElement("div", {
-      style: {
-        position: 'relative'
-      }
-    }, /*#__PURE__*/external_react_default.a.createElement(StyledSwatches, null, swatchesDefaultDisplay, expanded && swatchesExpandDisplay), expanded && /*#__PURE__*/external_react_default.a.createElement(StyledToolBarPrisma, {
-      "data-test": "tool-bar"
-    }, /*#__PURE__*/external_react_default.a.createElement(themes_["SplunkThemeProvider"], {
-      density: "compact"
-    }, renderInput && renderInput()), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-      value: null,
-      ref: value === null ? swatchToFocusRef : null,
-      onClick: onSwatchClick,
-      noBorder: !isLight,
-      showSelected: value === null
-    }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-      value: "#ffffff",
-      ref: value === '#ffffff' ? swatchToFocusRef : null,
-      onClick: onSwatchClick,
-      noBorder: !isLight,
-      showSelected: value === '#ffffff'
-    }), /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-      value: "#000000",
-      ref: value === '#000000' ? swatchToFocusRef : null,
-      onClick: onSwatchClick,
-      noBorder: true,
-      showSelected: value === '#000000'
-    }), /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPickerWrapper, null, /*#__PURE__*/external_react_default.a.createElement(StyledSystemColorPicker, {
-      type: "color" // TODO: SUI-2806 Remove the warning with Prisma null example
-      // Warning only exists in Chrome: https://chromium.googlesource.com/chromium/src/+/011c27ced479c76cffd5093ce107082e4da657f3/third_party/blink/renderer/core/html/forms/color_input_type.cc#190
-      ,
-      value: value === null ? '' : value,
-      onChange: onSystemColorPickerChange,
-      ref: isCustomColor ? swatchToFocusRef : null
-    }), isCustomColor && /*#__PURE__*/external_react_default.a.createElement(PaletteStyles_StyledCheck, {
-      "aria-label": Object(i18n_["_"])('Selected'),
-      role: "presentation"
-    }))), /*#__PURE__*/external_react_default.a.createElement(StyledExpandButton, {
-      ref: expandButtonRef,
-      $expanded: expanded,
-      onClick: onPaletteExpand,
-      "data-test": "expand-button"
-    }, /*#__PURE__*/external_react_default.a.createElement(ChevronDown_default.a, null))));
-  }
-
-  return /*#__PURE__*/external_react_default.a.createElement(StyledPalette, null, /*#__PURE__*/external_react_default.a.createElement(StyledSwatches, null, swatches), renderInput && renderInput());
-}
-
-/* harmony default export */ var Color_Palette = (Palette);
-// CONCATENATED MODULE: ./src/Color/Color.tsx
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function Color_extends() { Color_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Color_extends.apply(this, arguments); }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function Color_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Color_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function Color_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// The default palette in Prisma theme.
-var defaultPalette = ['#912344', '#D44C20', '#C0891E', '#26AA92', '#2F8AA7', '#2E49AA', '#602CA1', '#BA4ABD'];
-var generatePalette = memoize_default()(function (initialPalette) {
-  var palette = [];
-
-  for (var i = 1; i <= initialPalette.length * 4; i += 1) {
-    var baseColor = initialPalette[(i - 1) % initialPalette.length];
-
-    if (i > initialPalette.length * 3) {
-      palette.push(baseColor);
-    } else {
-      var lightenBy = 40 - 10 * (i / initialPalette.length);
-      palette.push(external_tinycolor2_default()(baseColor).lighten(lightenBy).toString());
+    // CONCATENATED MODULE: ./src/Color/Swatch.tsx
+    function Q() {
+        Q = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return Q.apply(this, arguments);
     }
-  }
-
-  return palette;
-}); // The tool palette in Prisma theme.
-
-var toolPalette = ['#ffffff', '#000000', null];
-var Color_propTypes = {
-  append: external_prop_types_default.a.bool,
-  defaultValue: external_prop_types_default.a.string,
-  describedBy: external_prop_types_default.a.string,
-  disabled: external_prop_types_default.a.bool,
-  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-  error: external_prop_types_default.a.bool,
-  hideInput: external_prop_types_default.a.bool,
-  labelledBy: external_prop_types_default.a.string,
-  name: external_prop_types_default.a.string,
-  onChange: external_prop_types_default.a.func,
-  palette: external_prop_types_default.a.array,
-  prepend: external_prop_types_default.a.bool,
-
-  /** @private */
-  splunkTheme: external_prop_types_default.a.object,
-  value: external_prop_types_default.a.string
-};
-var defaultProps = {
-  append: false,
-  disabled: false,
-  error: false,
-  hideInput: false,
-  palette: generatePalette(defaultPalette),
-  prepend: false
-};
-
-// TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-var Color_isValidHEX = function isValidHEX(value) {
-  return Object(color_["isValidHexColor"])(value);
-};
-
-var NAUppercase = 'N/A';
-var NALowercase = 'n/a';
-/*
- * When the dropdown opens:
- * 1. If palette contains the color and the color is selected, the dropdown focus the color.
- * 2. If palette doesn't contain the color:
- *     1. If the current theme `family` is `prisma` the input receives focus.
- *     2. Otherwise the first color swatch receives focus.
- */
-
-var Color_Color = /*#__PURE__*/function (_Component) {
-  _inherits(Color, _Component);
-
-  var _super = _createSuper(Color);
-
-  _createClass(Color, null, [{
-    key: "hasNull",
-    // @docs-props-type ColorPropsBase
-    value: function hasNull(palette) {
-      return palette.some(function (color) {
-        return color === null;
-      });
+    function U(e, t) {
+        if (e == null) return {};
+        var r = W(e, t);
+        var n, a;
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (a = 0; a < o.length; a++) {
+                n = o[a];
+                if (t.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
     }
-  }, {
-    key: "hasTransparent",
-    value: function hasTransparent(palette) {
-      return palette.some(function (color) {
-        return color !== null && toLower_default()(color) === 'transparent';
-      });
+    function W(e, t) {
+        if (e == null) return {};
+        var r = {};
+        var n = Object.keys(e);
+        var a, o;
+        for (o = 0; o < n.length; o++) {
+            a = n[o];
+            if (t.indexOf(a) >= 0) continue;
+            r[a] = e[a];
+        }
+        return r;
     }
-  }]);
-
-  function Color(props) {
-    var _this;
-
-    _classCallCheck(this, Color);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "focusSwatch", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "focusExpandButton", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "controlledExternally", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "dropdown", null);
-
-    _defineProperty(_assertThisInitialized(_this), "handleSwatchClick", function (e, _ref) {
-      var value = _ref.value;
-      e.preventDefault();
-      var _this$props = _this.props,
-          name = _this$props.name,
-          onChange = _this$props.onChange;
-
-      var prevValue = _this.getValue();
-
-      var hasColorChanged = value !== prevValue;
-      var displayValue = value === null ? NAUppercase : value;
-
-      if (!_this.isControlled()) {
-        _this.setState({
-          value: value
-        });
-      }
-
-      _this.setState({
-        displayValue: displayValue,
-        open: false
-      });
-
-      if (hasColorChanged) {
-        onChange === null || onChange === void 0 ? void 0 : onChange({
-          value: value,
-          name: name
-        });
-      }
-
-      _this.focus();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handlePaletteExpand", function () {
-      _this.setState(function (state) {
-        return {
-          expanded: !state.expanded
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (e, _ref2) {
-      var value = _ref2.value;
-
-      _this.setState({
-        displayValue: value
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTextKeyDown", function (e) {
-      if (Object(keyboard_["keycode"])(e.nativeEvent) === 'enter') {
-        e.preventDefault();
-
-        _this.handleRequestClose({
-          reason: 'enterKey'
-        });
-
-        _this.focus();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleButtonClick", function (e) {
-      e.preventDefault();
-
-      _this.handleRequestClose({
-        reason: 'buttonClick'
-      });
-
-      _this.focus();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (_ref3) {
-      var reason = _ref3.reason;
-      var displayValue = _this.state.displayValue;
-      var value = _this.state.value;
-
-      if (toLower_default()(displayValue) === NALowercase) {
-        displayValue = NAUppercase;
-
-        _this.setState({
-          displayValue: displayValue
-        });
-      } else if (toLower_default()(displayValue) === 'transparent') {
-        displayValue = 'transparent';
-
-        _this.setState({
-          displayValue: displayValue
-        });
-      } // If the user types in the hexadecimal number without # in front,
-      // we add # automatically.
-
-
-      if (displayValue !== NAUppercase && toLower_default()(displayValue) !== 'transparent' && !startsWith_default()(displayValue, '#')) {
-        displayValue = "#".concat(displayValue);
-
-        if (reason === 'escapeKey') {
-          if (value == null) {
-            _this.setState({
-              displayValue: NAUppercase
-            });
-          } else {
-            _this.setState({
-              displayValue: value
-            });
-          }
+    var X = {
+        append: o().bool,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        /** @private */
+        error: o().bool,
+        /** @private */
+        noBorder: o().bool,
+        /** @private. Call back function when activated. */
+        onClick: o().func,
+        prepend: o().bool,
+        value: o().string,
+        /** @private */
+        showSelected: o().bool
+    };
+    var G =  n().forwardRef((function(e, t) {
+        var r = e.append, a = e.error, o = a === void 0 ? false : a, l = e.onClick, i = e.prepend, s = e.value, u = e.noBorder, p = e.showSelected, c = U(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
+        var d = s === null || s === undefined ? (0, j._)("No color") : s;
+ // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
+        // Invalid values are converted to `undefined`
+                var f = s;
+        if (!(typeof f === "string" && ((0, q.isValidHexColor)(f) || f === "transparent")) && f !== null && f !== undefined) {
+            f = undefined;
+        }
+        
+        return n().createElement(L, Q({
+            onClick: function e(t) {
+                return l === null || l === void 0 ? void 0 : l(t, {
+                    value: s
+                });
+            },
+            ref: t,
+            $value: f,
+            $append: r,
+            $prepend: i,
+            $hasError: o,
+            $noBorder: u,
+            $showSelected: p,
+            "data-test": "swatch",
+            "data-test-value": s
+        }, c), p &&  n().createElement(M, {
+            "aria-label": (0, j._)("Selected"),
+            role: "presentation"
+        }),  n().createElement(A(), null, d));
+    }));
+    G.propTypes = X;
+    /* harmony default export */    const J = G;
+    // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
+    var Y = R().div.withConfig({
+        displayName: "ColorStyles__StyledColor",
+        componentId: "jxrost-0"
+    })([ "", ";flex-direction:row;" ], _.mixins.reset("flex"));
+    var Z = R().div.withConfig({
+        displayName: "ColorStyles__StyledInput",
+        componentId: "jxrost-1"
+    })([ "", ";" ], (0, _.pick)({
+        enterprise: (0, T.css)([ "display:flex;width:100%;" ]),
+        prisma: (0, T.css)([ "position:relative;", "" ], (function(e) {
+            var t = e.$inDropdown;
+            return t ? (0, T.css)([ "width:80px;" ]) : (0, T.css)([ "flex:0 1 auto;min-width:0;" ]);
+        }))
+    }));
+    var ee = R()(V()).withConfig({
+        displayName: "ColorStyles__StyledInputText",
+        componentId: "jxrost-2"
+    })([ "", "" ], (function(e) {
+        var t = e.$inDropdown;
+        return t && (0, T.css)([ "font-size:12px;" ]);
+    }));
+    var te = R()(J).withConfig({
+        displayName: "ColorStyles__StyledToggleSwatch",
+        componentId: "jxrost-3"
+    })([ "", "" ], (0, _.pick)({
+        prisma: {
+            comfortable: (0, T.css)([ "width:40px;height:40px;" ]),
+            compact: (0, T.css)([ "width:32px;height:32px;" ])
+        },
+        enterprise: {
+            comfortable: (0, T.css)([ "width:32px;height:32px;" ]),
+            compact: (0, T.css)([ "width:28px;height:28px;" ])
+        }
+    }));
+    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
+    const re = require("@splunk/react-icons/ChevronDown");
+    var ne =  e.n(re);
+    // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
+    var ae = R().div.withConfig({
+        displayName: "PaletteStyles__StyledPalette",
+        componentId: "qgv9v9-0"
+    })([ "width:", ";padding:", ";", "" ], (0, _.pick)({
+        enterprise: "180px",
+        prisma: "224px"
+    }), (0, _.pick)({
+        enterprise: _.variables.spacingHalf,
+        prisma: "8px"
+    }), (0, _.pick)({
+        prisma: (0, T.css)([ "display:flex;flex-direction:column;border-radius:2px;" ])
+    }));
+    var oe = R().ul.withConfig({
+        displayName: "PaletteStyles__StyledSwatches",
+        componentId: "qgv9v9-1"
+    })([ "", ";margin-bottom:", ";margin-right:", ";", "" ], _.mixins.reset("block"), (0, 
+    _.pick)({
+        enterprise: "6px"
+    }), (0, _.pick)({
+        enterprise: "-6px"
+    }), (0, _.pick)({
+        prisma: (0, T.css)([ "position:relative;" ])
+    }));
+    var le = R().li.withConfig({
+        displayName: "PaletteStyles__StyledSwatch",
+        componentId: "qgv9v9-2"
+    })([ "", ";margin-right:", ";margin-bottom:", ";", "" ], _.mixins.reset("inline-block"), (0, 
+    _.pick)({
+        enterprise: _.variables.spacingQuarter,
+        prisma: "4px"
+    }), (0, _.pick)({
+        enterprise: _.variables.spacingQuarter,
+        prisma: "4px"
+    }), (0, _.pick)({
+        prisma: (0, T.css)([ "vertical-align:top;&:nth-child(8n){margin-right:0;}" ])
+    }));
+    var ie = R().div.withConfig({
+        displayName: "PaletteStyles__StyledToolBarPrisma",
+        componentId: "qgv9v9-3"
+    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:12px;gap:4px;" ]);
+    var se = R()(z()).withConfig({
+        displayName: "PaletteStyles__StyledExpandButton",
+        componentId: "qgv9v9-4"
+    })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], _.variables.focusShadow, (function(e) {
+        var t = e.$expanded;
+        return t && (0, T.css)([ "transform:rotate(180deg);" ]);
+    }));
+    var ue = R().div.withConfig({
+        displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
+        componentId: "qgv9v9-5"
+    })([ "position:relative;" ]);
+    var pe = R().input.withConfig({
+        displayName: "PaletteStyles__StyledSystemColorPicker",
+        componentId: "qgv9v9-6"
+    })([ "box-sizing:border-box;height:24px;width:24px;border:none;border-radius:2px;outline:none;appearance:none;padding:12px;margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;background-position:-6px -6px;background-size:36px 36px;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], _.variables.focusShadow);
+    var ce = R()($()).withConfig({
+        displayName: "PaletteStyles__StyledCheck",
+        componentId: "qgv9v9-7"
+    })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;" ]);
+    // CONCATENATED MODULE: ./src/Color/Palette.tsx
+    function de(e) {
+        var t = e.expanded, r = e.palette, a = e.value, o = e.swatchToFocusRef, l = e.onSwatchClick, i = e.expandButtonRef, s = e.onPaletteExpand, u = e.onSystemColorPickerChange, p = e.renderInput;
+        var d = (0, _.useSplunkTheme)(), f = d.isPrisma, v = d.isLight;
+        var h = c()(r.map((function(e) {
+            return e && w()(e);
+        })), a);
+        var y = r.map((function(e, t) {
+            var r = e === null ? null : w()(e);
+            var i = r === a;
+            var s = !h && t === 0 || h && i;
+            
+            return n().createElement(le, {
+                key: r || "null"
+            },  n().createElement(J, {
+                value: r,
+                ref: s ? o : null,
+                onClick: l,
+                noBorder: f,
+                showSelected: f && i
+            }));
+        }));
+        if (f) {
+            var b = !h && a !== "#ffffff" && a !== "#000000" && a !== null && a !== "";
+            var g = y.length === 8 ? 7 : 15;
+            var x = m()(y, 0, g);
+            var S = m()(y, g);
+            
+            return n().createElement(ae, null,  n().createElement("div", {
+                style: {
+                    position: "relative"
+                }
+            },  n().createElement(oe, null, x, t && S), t &&  n().createElement(ie, {
+                "data-test": "tool-bar"
+            },  n().createElement(_.SplunkThemeProvider, {
+                density: "compact"
+            }, p && p()),  n().createElement(J, {
+                value: null,
+                ref: a === null ? o : null,
+                onClick: l,
+                noBorder: !v,
+                showSelected: a === null
+            }),  n().createElement(J, {
+                value: "#ffffff",
+                ref: a === "#ffffff" ? o : null,
+                onClick: l,
+                noBorder: !v,
+                showSelected: a === "#ffffff"
+            }),  n().createElement(J, {
+                value: "#000000",
+                ref: a === "#000000" ? o : null,
+                onClick: l,
+                noBorder: true,
+                showSelected: a === "#000000"
+            }),  n().createElement(ue, null,  n().createElement(pe, {
+                type: "color",
+                value: a === null ? "" : a,
+                onChange: u,
+                ref: b ? o : null
+            }), b &&  n().createElement(ce, {
+                "aria-label": (0, j._)("Selected"),
+                role: "presentation"
+            }))),  n().createElement(se, {
+                ref: i,
+                $expanded: t,
+                onClick: s,
+                "data-test": "expand-button"
+            },  n().createElement(ne(), null))));
+        }
+        
+        return n().createElement(ae, null,  n().createElement(oe, null, y), p && p());
+    }
+    /* harmony default export */    const fe = de;
+    // CONCATENATED MODULE: ./src/Color/Color.tsx
+    function ve(e) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            ve = function e(t) {
+                return typeof t;
+            };
         } else {
-          _this.setState({
-            displayValue: displayValue
-          });
+            ve = function e(t) {
+                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+            };
         }
-      }
-
-      if (reason !== 'contentClick') {
-        _this.setState({
-          open: false
-        });
-      }
-
-      if (reason !== 'escapeKey') {
-        _this.submitValue(displayValue);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleRequestOpen", function () {
-      var _this$props2 = _this.props,
-          splunkTheme = _this$props2.splunkTheme,
-          palette = _this$props2.palette;
-      var isPrisma = splunkTheme.isPrisma;
-
-      var value = _this.getValue();
-
-      var displayValue = value === null ? NAUppercase : value;
-
-      _this.setState({
-        displayValue: displayValue,
-        open: true
-      }, function () {
-        if (_this.focusSwatch.current && _this.focusSwatch.current.focus) {
-          _this.focusSwatch.current.focus();
+        return ve(e);
+    }
+    function he() {
+        he = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return he.apply(this, arguments);
+    }
+    function ye(e) {
+        return xe(e) || ge(e) || be(e) || me();
+    }
+    function me() {
+        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 be(e, t) {
+        if (!e) return;
+        if (typeof e === "string") return we(e, t);
+        var r = Object.prototype.toString.call(e).slice(8, -1);
+        if (r === "Object" && e.constructor) r = e.constructor.name;
+        if (r === "Map" || r === "Set") return Array.from(e);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return we(e, t);
+    }
+    function ge(e) {
+        if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
+    }
+    function xe(e) {
+        if (Array.isArray(e)) return we(e);
+    }
+    function we(e, t) {
+        if (t == null || t > e.length) t = e.length;
+        for (var r = 0, n = new Array(t); r < t; r++) {
+            n[r] = e[r];
         }
-      });
-
-      var hidePalette = isPrisma ? slice_default()(palette, 15) : palette;
-      var isCustomColor = isPrisma && !includes_default()(palette.map(function (c) {
-        return c && toLower_default()(c);
-      }), value);
-      var colorInHiddenPalette = isCustomColor || includes_default()(hidePalette.map(function (c) {
-        return c && toLower_default()(c);
-      }), value) || includes_default()(toolPalette, value);
-
-      if (colorInHiddenPalette && !_this.state.expanded) {
-        _this.setState({
-          expanded: true
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleSystemColorPickerChange", debounce_default()(function (value) {
-      var prevValue = _this.getValue();
-
-      var hasColorChanged = value !== prevValue;
-      var name = _this.props.name;
-      var displayValue = value === null ? NAUppercase : value;
-
-      if (!_this.isControlled()) {
-        _this.setState({
-          value: value
-        });
-      }
-
-      _this.setState({
-        displayValue: displayValue
-      });
-
-      if (hasColorChanged) {
-        var _this$props$onChange, _this$props3;
-
-        (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, {
-          value: value,
-          name: name
-        });
-      }
-
-      _this.focus();
-    }, 200));
-
-    _this.focusSwatch = /*#__PURE__*/external_react_default.a.createRef();
-    _this.focusExpandButton = /*#__PURE__*/external_react_default.a.createRef();
-    _this.controlledExternally = has_default()(props, 'value'); // value can be hexadecimal color, 'transparent' or null
-
-    var _value = _this.controlledExternally ? Object(color_["expandShortHandHex"])(props.value) : Object(color_["expandShortHandHex"])(props.defaultValue);
-
-    if (_value !== null) {
-      _value = toLower_default()(_value);
-    } // displayValue can be hexadecimal color or 'transparent' to represent 'transparent' or 'N/A' to represent null
-
-
-    var _displayValue = _value === null ? NAUppercase : _value;
-
-    _this.state = {
-      displayValue: _displayValue,
-      open: false,
-      value: _value,
-      expanded: false
-    };
-
-    if (false) {}
-
-    if (false) { var isDefaultValidHEX; }
-
-    return _this;
-  }
-
-  _createClass(Color, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (false) {}
-
-      if (false) {}
+        return n;
     }
-  }, {
-    key: "showNull",
-    value: function showNull() {
-      var isPrisma = this.props.splunkTheme.isPrisma;
-      return Color.hasNull(this.props.palette) || isPrisma;
+    function Se(e, t) {
+        if (e == null) return {};
+        var r = ke(e, t);
+        var n, a;
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (a = 0; a < o.length; a++) {
+                n = o[a];
+                if (t.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
     }
-    /**
-     * Standardizes the current value of the Color:
-     * returns based on the input being controlled or uncontrolled
-     * returns controlled component's value as formatted.
-     */
-
-  }, {
-    key: "getValue",
-    value: function getValue() {
-      var formatValueForProp = function formatValueForProp(value) {
-        return value === null ? null : toLower_default()(value);
-      };
-
-      var sixDigitHex = Object(color_["expandShortHandHex"])(this.props.value);
-
-      if (this.props.value === null && !this.showNull()) {
-        return undefined;
-      }
-
-      if (this.isControlled()) {
-        return formatValueForProp(sixDigitHex);
-      }
-
-      return this.state.value;
+    function ke(e, t) {
+        if (e == null) return {};
+        var r = {};
+        var n = Object.keys(e);
+        var a, o;
+        for (o = 0; o < n.length; o++) {
+            a = n[o];
+            if (t.indexOf(a) >= 0) continue;
+            r[a] = e[a];
+        }
+        return r;
     }
-  }, {
-    key: "submitValue",
-    value: function submitValue(displayValue) {
-      var splunkTheme = this.props.splunkTheme;
-      var isPrisma = splunkTheme.isPrisma;
-
-      if (displayValue) {
-        var isValidHEXValue = Color_isValidHEX(displayValue);
-
-        if (!isValidHEXValue && displayValue !== 'transparent' && displayValue !== NAUppercase) {
-          // eslint-disable-next-line no-console
-          console.warn("\"".concat(displayValue, "\" is not a valid hex color."));
+    function Ce(e, t) {
+        if (!(e instanceof t)) {
+            throw new TypeError("Cannot call a class as a function");
         }
-
-        if (isValidHEXValue || Color.hasTransparent(this.props.palette) && displayValue === 'transparent' || (Color.hasNull(this.props.palette) || isPrisma) && displayValue === NAUppercase) {
-          var formattedDisplayValue = Object(color_["expandShortHandHex"])(displayValue);
-          this.setState({
-            displayValue: formattedDisplayValue
-          });
-          var hasColorChanged = displayValue !== (this.props.value && toLower_default()(this.props.value));
-          var name = this.props.name;
-          var value = displayValue === NAUppercase ? null : displayValue;
-          var formattedValue = Object(color_["expandShortHandHex"])(value);
-
-          if (displayValue && !this.isControlled()) {
-            this.setState({
-              value: formattedValue
-            });
-          }
-
-          if (hasColorChanged) {
-            var _this$props$onChange2, _this$props4;
-
-            (_this$props$onChange2 = (_this$props4 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props4, {
-              value: formattedValue,
-              name: name
-            });
-          }
+    }
+    function Pe(e, t) {
+        for (var r = 0; r < t.length; r++) {
+            var n = t[r];
+            n.enumerable = n.enumerable || false;
+            n.configurable = true;
+            if ("value" in n) n.writable = true;
+            Object.defineProperty(e, n.key, n);
         }
-      }
     }
-    /**
-     * Place focus on the input.
-     */
-
-  }, {
-    key: "focus",
-    value: function focus() {
-      var _this$dropdown;
-
-      (_this$dropdown = this.dropdown) === null || _this$dropdown === void 0 ? void 0 : _this$dropdown.focus();
+    function Ee(e, t, r) {
+        if (t) Pe(e.prototype, t);
+        if (r) Pe(e, r);
+        return e;
+    }
+    function Oe(e, t) {
+        if (typeof t !== "function" && t !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        e.prototype = Object.create(t && t.prototype, {
+            constructor: {
+                value: e,
+                writable: true,
+                configurable: true
+            }
+        });
+        if (t) _e(e, t);
     }
-  }, {
-    key: "isControlled",
-    value: function isControlled() {
-      return this.controlledExternally;
+    function _e(e, t) {
+        _e = Object.setPrototypeOf || function e(t, r) {
+            t.__proto__ = r;
+            return t;
+        };
+        return _e(e, t);
     }
-  }, {
-    key: "renderInput",
-    value: function renderInput(_ref4) {
-      var textAppend = _ref4.textAppend,
-          textPrepend = _ref4.textPrepend,
-          textInline = _ref4.textInline,
-          inDropdown = _ref4.inDropdown;
-      var splunkTheme = this.props.splunkTheme;
-      var displayValue = this.state.displayValue;
-      var isPrisma = splunkTheme.isPrisma;
-      var showTransparent = Color.hasTransparent(this.props.palette) && toLower_default()(displayValue) === 'transparent';
-      var showNullSwatch = this.showNull() && toLower_default()(displayValue) === NALowercase;
-      var inputSwatchValue = displayValue;
-
-      if (!startsWith_default()(displayValue, '#')) {
-        inputSwatchValue = "#".concat(displayValue);
-      }
-
-      inputSwatchValue = showTransparent ? 'transparent' : inputSwatchValue;
-      inputSwatchValue = showNullSwatch ? null : inputSwatchValue;
-      return /*#__PURE__*/external_react_default.a.createElement(StyledInput, {
-        $inDropdown: inDropdown
-      }, /*#__PURE__*/external_react_default.a.createElement(StyledInputText, {
-        $inDropdown: inDropdown,
-        append: textAppend,
-        autoCapitalize: "off",
-        autoComplete: "off",
-        autoCorrect: "off",
-        spellCheck: false,
-        "aria-label": Object(i18n_["_"])('Hexadecimal color value'),
-        prepend: textPrepend,
-        inline: textInline,
-        onKeyDown: this.handleTextKeyDown,
-        onChange: this.handleTextChange,
-        value: displayValue
-      }), !isPrisma && /*#__PURE__*/external_react_default.a.createElement(Color_Swatch, {
-        "data-test": "textbox-swatch",
-        onClick: this.handleButtonClick,
-        value: inputSwatchValue,
-        tabIndex: -1,
-        style: {
-          marginLeft: '1px'
-        } // Used to cancel out the `margin-right: -1px` of Text append style
-
-      }));
+    function qe(e) {
+        var t = Te();
+        return function r() {
+            var n = Re(e), a;
+            if (t) {
+                var o = Re(this).constructor;
+                a = Reflect.construct(n, arguments, o);
+            } else {
+                a = n.apply(this, arguments);
+            }
+            return je(this, a);
+        };
     }
-  }, {
-    key: "renderPalette",
-    value: function renderPalette() {
-      var _this2 = this;
-
-      var _this$props5 = this.props,
-          splunkTheme = _this$props5.splunkTheme,
-          palette = _this$props5.palette;
-      var expanded = this.state.expanded;
-      var isPrisma = splunkTheme.isPrisma;
-      return /*#__PURE__*/external_react_default.a.createElement(Color_Palette, {
-        palette: palette,
-        value: this.getValue(),
-        swatchToFocusRef: this.focusSwatch,
-        renderInput: function renderInput() {
-          return isPrisma ? _this2.renderInput({
-            textAppend: false,
-            textPrepend: false,
-            textInline: true,
-            inDropdown: true
-          }) : _this2.renderInput({
-            textAppend: true,
-            textPrepend: true,
-            textInline: true,
-            inDropdown: false
-          });
-        },
-        expandButtonRef: this.focusExpandButton,
-        onSwatchClick: this.handleSwatchClick,
-        expanded: expanded,
-        onPaletteExpand: this.handlePaletteExpand,
-        onSystemColorPickerChange: function onSystemColorPickerChange(e) {
-          return _this2.handleSystemColorPickerChange(e.target.value);
+    function je(e, t) {
+        if (t && (ve(t) === "object" || typeof t === "function")) {
+            return t;
         }
-      });
+        return Ie(e);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props6 = this.props,
-          append = _this$props6.append,
-          disabled = _this$props6.disabled,
-          describedBy = _this$props6.describedBy,
-          elementRef = _this$props6.elementRef,
-          error = _this$props6.error,
-          hideInput = _this$props6.hideInput,
-          labelledBy = _this$props6.labelledBy,
-          name = _this$props6.name,
-          prepend = _this$props6.prepend,
-          splunkTheme = _this$props6.splunkTheme,
-          otherProps = Color_objectWithoutProperties(_this$props6, ["append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme"]);
-
-      var isPrisma = splunkTheme.isPrisma;
-      var value = this.getValue();
-      var displayValue = this.state.displayValue;
-      var toggle = /*#__PURE__*/external_react_default.a.createElement(StyledToggleSwatch, Color_extends({
-        append: isPrisma && !hideInput ? true : append,
-        "data-test": "color",
-        "data-test-value": displayValue,
-        "aria-describedby": describedBy,
-        "aria-labelledby": labelledBy,
-        "aria-invalid": error || undefined,
-        disabled: disabled,
-        error: error,
-        elementRef: elementRef,
-        name: name,
-        prepend: prepend,
-        value: value
-      }, omit_default()(otherProps, [].concat(_toConsumableArray(keys_default()(Color.propTypes)), [// TS: trick omit
-      'onChange']))));
-      return /*#__PURE__*/external_react_default.a.createElement(StyledColor, null, /*#__PURE__*/external_react_default.a.createElement(Dropdown_default.a, {
-        closeReasons: ['clickAway', 'escapeKey', 'offScreen', 'toggleClick'],
-        onRequestClose: this.handleRequestClose,
-        onRequestOpen: this.handleRequestOpen,
-        open: this.state.open,
-        ref: function ref(c) {
-          _this3.dropdown = c;
-        },
-        retainFocus: true,
-        takeFocus: false // Disable the default focus behavior in Dropdown.
-        ,
-        toggle: toggle
-      }, this.renderPalette()), isPrisma && !hideInput && this.renderInput({
-        textAppend: false,
-        textPrepend: true,
-        textInline: true,
-        inDropdown: false
-      }));
+    function Ie(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        }
+        return e;
+    }
+    function Te() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    function Re(e) {
+        Re = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+            return t.__proto__ || Object.getPrototypeOf(t);
+        };
+        return Re(e);
+    }
+    function Be(e, t, r) {
+        if (t in e) {
+            Object.defineProperty(e, t, {
+                value: r,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[t] = r;
+        }
+        return e;
     }
-  }]);
-
-  return Color;
-}(external_react_["Component"]);
-
-_defineProperty(Color_Color, "propTypes", Color_propTypes);
-
-_defineProperty(Color_Color, "defaultProps", defaultProps);
-
-var ColorWithTheme = Object(themes_["withSplunkTheme"])(Color_Color);
-ColorWithTheme.propTypes = Color_Color.propTypes;
- // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
-
-/* harmony default export */ var src_Color_Color = (ColorWithTheme);
-// CONCATENATED MODULE: ./src/Color/index.ts
-
-
-
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
-/***/ 22:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Dropdown");
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 32:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Text");
-
-/***/ }),
-
-/***/ 36:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/toLower");
-
-/***/ }),
-
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-
-/***/ 40:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/memoize");
-
-/***/ }),
-
-/***/ 5:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/omit");
-
-/***/ }),
-
-/***/ 50:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/color");
-
-/***/ }),
-
-/***/ 68:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/debounce");
-
-/***/ }),
-
-/***/ 69:
-/***/ (function(module, exports) {
-
-module.exports = require("tinycolor2");
-
-/***/ }),
-
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/keyboard");
-
-/***/ }),
-
-/***/ 78:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/Checkmark");
-
-/***/ }),
-
-/***/ 9:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/keys");
-
-/***/ })
-
-/******/ });
+    // The default palette in Prisma theme.
+        var Ve = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
+    var Ne = k()((function(e) {
+        var t = [];
+        for (var r = 1; r <= e.length * 4; r += 1) {
+            var n = e[(r - 1) % e.length];
+            if (r > e.length * 3) {
+                t.push(n);
+            } else {
+                var a = 40 - 10 * (r / e.length);
+                t.push(P()(n).lighten(a).toString());
+            }
+        }
+        return t;
+    }));
+ // The tool palette in Prisma theme.
+        var Ae = [ "#ffffff", "#000000", null ];
+    var De = {
+        append: o().bool,
+        defaultValue: o().string,
+        describedBy: o().string,
+        disabled: o().bool,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        error: o().bool,
+        hideInput: o().bool,
+        labelledBy: o().string,
+        name: o().string,
+        onChange: o().func,
+        palette: o().array,
+        prepend: o().bool,
+        /** @private */
+        splunkTheme: o().object,
+        value: o().string
+    };
+    var $e = {
+        append: false,
+        disabled: false,
+        error: false,
+        hideInput: false,
+        palette: Ne(Ve),
+        prepend: false
+    };
+    // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
+        var He = function e(t) {
+        return (0, q.isValidHexColor)(t);
+    };
+    var ze = "N/A";
+    var Ke = "n/a";
+    /*
+ * When the dropdown opens:
+ * 1. If palette contains the color and the color is selected, the dropdown focus the color.
+ * 2. If palette doesn't contain the color:
+ *     1. If the current theme `family` is `prisma` the input receives focus.
+ *     2. Otherwise the first color swatch receives focus.
+ */    var Fe =  function(e) {
+        Oe(r, e);
+        var t = qe(r);
+        Ee(r, null, [ {
+            key: "hasNull",
+            // @docs-props-type ColorPropsBase
+            value: function e(t) {
+                return t.some((function(e) {
+                    return e === null;
+                }));
+            }
+        }, {
+            key: "hasTransparent",
+            value: function e(t) {
+                return t.some((function(e) {
+                    return e !== null && w()(e) === "transparent";
+                }));
+            }
+        } ]);
+        function r(e) {
+            var a;
+            Ce(this, r);
+            a = t.call(this, e);
+            Be(Ie(a), "focusSwatch", void 0);
+            Be(Ie(a), "focusExpandButton", void 0);
+            Be(Ie(a), "controlledExternally", void 0);
+            Be(Ie(a), "dropdown", null);
+            Be(Ie(a), "handleSwatchClick", (function(e, t) {
+                var r = t.value;
+                e.preventDefault();
+                var n = a.props, o = n.name, l = n.onChange;
+                var i = a.getValue();
+                var s = r !== i;
+                var u = r === null ? ze : r;
+                if (!a.isControlled()) {
+                    a.setState({
+                        value: r
+                    });
+                }
+                a.setState({
+                    displayValue: u,
+                    open: false
+                });
+                if (s) {
+                    l === null || l === void 0 ? void 0 : l({
+                        value: r,
+                        name: o
+                    });
+                }
+                a.focus();
+            }));
+            Be(Ie(a), "handlePaletteExpand", (function() {
+                a.setState((function(e) {
+                    return {
+                        expanded: !e.expanded
+                    };
+                }));
+            }));
+            Be(Ie(a), "handleTextChange", (function(e, t) {
+                var r = t.value;
+                a.setState({
+                    displayValue: r
+                });
+            }));
+            Be(Ie(a), "handleTextKeyDown", (function(e) {
+                if ((0, I.keycode)(e.nativeEvent) === "enter") {
+                    e.preventDefault();
+                    a.handleRequestClose({
+                        reason: "enterKey"
+                    });
+                    a.focus();
+                }
+            }));
+            Be(Ie(a), "handleButtonClick", (function(e) {
+                e.preventDefault();
+                a.handleRequestClose({
+                    reason: "buttonClick"
+                });
+                a.focus();
+            }));
+            Be(Ie(a), "handleRequestClose", (function(e) {
+                var t = e.reason;
+                var r = a.state.displayValue;
+                var n = a.state.value;
+                if (w()(r) === Ke) {
+                    r = ze;
+                    a.setState({
+                        displayValue: r
+                    });
+                } else if (w()(r) === "transparent") {
+                    r = "transparent";
+                    a.setState({
+                        displayValue: r
+                    });
+                }
+ // If the user types in the hexadecimal number without # in front,
+                // we add # automatically.
+                                if (r !== ze && w()(r) !== "transparent" && !g()(r, "#")) {
+                    r = "#".concat(r);
+                    if (t === "escapeKey") {
+                        if (n == null) {
+                            a.setState({
+                                displayValue: ze
+                            });
+                        } else {
+                            a.setState({
+                                displayValue: n
+                            });
+                        }
+                    } else {
+                        a.setState({
+                            displayValue: r
+                        });
+                    }
+                }
+                if (t !== "contentClick") {
+                    a.setState({
+                        open: false
+                    });
+                }
+                if (t !== "escapeKey") {
+                    a.submitValue(r);
+                }
+            }));
+            Be(Ie(a), "handleRequestOpen", (function() {
+                var e = a.props, t = e.splunkTheme, r = e.palette;
+                var n = t.isPrisma;
+                var o = a.getValue();
+                var l = o === null ? ze : o;
+                a.setState({
+                    displayValue: l,
+                    open: true
+                }, (function() {
+                    if (a.focusSwatch.current && a.focusSwatch.current.focus) {
+                        a.focusSwatch.current.focus();
+                    }
+                }));
+                var i = n ? m()(r, 15) : r;
+                var s = n && !c()(r.map((function(e) {
+                    return e && w()(e);
+                })), o);
+                var u = s || c()(i.map((function(e) {
+                    return e && w()(e);
+                })), o) || c()(Ae, o);
+                if (u && !a.state.expanded) {
+                    a.setState({
+                        expanded: true
+                    });
+                }
+            }));
+            Be(Ie(a), "handleSystemColorPickerChange", i()((function(e) {
+                var t = a.getValue();
+                var r = e !== t;
+                var n = a.props.name;
+                var o = e === null ? ze : e;
+                if (!a.isControlled()) {
+                    a.setState({
+                        value: e
+                    });
+                }
+                a.setState({
+                    displayValue: o
+                });
+                if (r) {
+                    var l, i;
+                    (l = (i = a.props).onChange) === null || l === void 0 ? void 0 : l.call(i, {
+                        value: e,
+                        name: n
+                    });
+                }
+                a.focus();
+            }), 200));
+            a.focusSwatch =  n().createRef();
+            a.focusExpandButton =  n().createRef();
+            a.controlledExternally = u()(e, "value");
+ // value can be hexadecimal color, 'transparent' or null
+                        var o = a.controlledExternally ? (0, q.expandShortHandHex)(e.value) : (0, 
+            q.expandShortHandHex)(e.defaultValue);
+            if (o !== null) {
+                o = w()(o);
+            }
+ // displayValue can be hexadecimal color or 'transparent' to represent 'transparent' or 'N/A' to represent null
+                        var l = o === null ? ze : o;
+            a.state = {
+                displayValue: l,
+                open: false,
+                value: o,
+                expanded: false
+            };
+            if (false) {}
+            if (false) {
+                var s;
+            }
+            return a;
+        }
+        Ee(r, [ {
+            key: "componentDidUpdate",
+            value: function e(t) {
+                if (false) {}
+                if (false) {}
+            }
+        }, {
+            key: "showNull",
+            value: function e() {
+                var t = this.props.splunkTheme.isPrisma;
+                return r.hasNull(this.props.palette) || t;
+            }
+            /**
+     * Standardizes the current value of the Color:
+     * returns based on the input being controlled or uncontrolled
+     * returns controlled component's value as formatted.
+     */        }, {
+            key: "getValue",
+            value: function e() {
+                var t = function e(t) {
+                    return t === null ? null : w()(t);
+                };
+                var r = (0, q.expandShortHandHex)(this.props.value);
+                if (this.props.value === null && !this.showNull()) {
+                    return undefined;
+                }
+                if (this.isControlled()) {
+                    return t(r);
+                }
+                return this.state.value;
+            }
+        }, {
+            key: "submitValue",
+            value: function e(t) {
+                var n = this.props.splunkTheme;
+                var a = n.isPrisma;
+                if (t) {
+                    var o = He(t);
+                    if (!o && t !== "transparent" && t !== ze) {
+                        // eslint-disable-next-line no-console
+                        console.warn('"'.concat(t, '" is not a valid hex color.'));
+                    }
+                    if (o || r.hasTransparent(this.props.palette) && t === "transparent" || (r.hasNull(this.props.palette) || a) && t === ze) {
+                        var l = (0, q.expandShortHandHex)(t);
+                        this.setState({
+                            displayValue: l
+                        });
+                        var i = t !== (this.props.value && w()(this.props.value));
+                        var s = this.props.name;
+                        var u = t === ze ? null : t;
+                        var p = (0, q.expandShortHandHex)(u);
+                        if (t && !this.isControlled()) {
+                            this.setState({
+                                value: p
+                            });
+                        }
+                        if (i) {
+                            var c, d;
+                            (c = (d = this.props).onChange) === null || c === void 0 ? void 0 : c.call(d, {
+                                value: p,
+                                name: s
+                            });
+                        }
+                    }
+                }
+            }
+            /**
+     * Place focus on the input.
+     */        }, {
+            key: "focus",
+            value: function e() {
+                var t;
+                (t = this.dropdown) === null || t === void 0 ? void 0 : t.focus();
+            }
+        }, {
+            key: "isControlled",
+            value: function e() {
+                return this.controlledExternally;
+            }
+        }, {
+            key: "renderInput",
+            value: function e(t) {
+                var a = t.textAppend, o = t.textPrepend, l = t.textInline, i = t.inDropdown;
+                var s = this.props.splunkTheme;
+                var u = this.state.displayValue;
+                var p = s.isPrisma;
+                var c = r.hasTransparent(this.props.palette) && w()(u) === "transparent";
+                var d = this.showNull() && w()(u) === Ke;
+                var f = u;
+                if (!g()(u, "#")) {
+                    f = "#".concat(u);
+                }
+                f = c ? "transparent" : f;
+                f = d ? null : f;
+                
+                return n().createElement(Z, {
+                    $inDropdown: i
+                },  n().createElement(ee, {
+                    $inDropdown: i,
+                    append: a,
+                    autoCapitalize: "off",
+                    autoComplete: "off",
+                    autoCorrect: "off",
+                    spellCheck: false,
+                    "aria-label": (0, j._)("Hexadecimal color value"),
+                    prepend: o,
+                    inline: l,
+                    onKeyDown: this.handleTextKeyDown,
+                    onChange: this.handleTextChange,
+                    value: u
+                }), !p &&  n().createElement(J, {
+                    "data-test": "textbox-swatch",
+                    onClick: this.handleButtonClick,
+                    value: f,
+                    tabIndex: -1,
+                    style: {
+                        marginLeft: "1px"
+                    }
+                }));
+            }
+        }, {
+            key: "renderPalette",
+            value: function e() {
+                var t = this;
+                var r = this.props, a = r.splunkTheme, o = r.palette;
+                var l = this.state.expanded;
+                var i = a.isPrisma;
+                
+                return n().createElement(fe, {
+                    palette: o,
+                    value: this.getValue(),
+                    swatchToFocusRef: this.focusSwatch,
+                    renderInput: function e() {
+                        return i ? t.renderInput({
+                            textAppend: false,
+                            textPrepend: false,
+                            textInline: true,
+                            inDropdown: true
+                        }) : t.renderInput({
+                            textAppend: true,
+                            textPrepend: true,
+                            textInline: true,
+                            inDropdown: false
+                        });
+                    },
+                    expandButtonRef: this.focusExpandButton,
+                    onSwatchClick: this.handleSwatchClick,
+                    expanded: l,
+                    onPaletteExpand: this.handlePaletteExpand,
+                    onSystemColorPickerChange: function e(r) {
+                        return t.handleSystemColorPickerChange(r.target.value);
+                    }
+                });
+            }
+        }, {
+            key: "render",
+            value: function e() {
+                var t = this;
+                var a = this.props, o = a.append, l = a.disabled, i = a.describedBy, s = a.elementRef, u = a.error, p = a.hideInput, c = a.labelledBy, d = a.name, v = a.prepend, y = a.splunkTheme, m = Se(a, [ "append", "disabled", "describedBy", "elementRef", "error", "hideInput", "labelledBy", "name", "prepend", "splunkTheme" ]);
+                var b = y.isPrisma;
+                var g = this.getValue();
+                var x = this.state.displayValue;
+                var w =  n().createElement(te, he({
+                    append: b && !p ? true : o,
+                    "data-test": "color",
+                    "data-test-value": x,
+                    "aria-describedby": i,
+                    "aria-labelledby": c,
+                    "aria-invalid": u || undefined,
+                    disabled: l,
+                    error: u,
+                    elementRef: s,
+                    name: d,
+                    prepend: v,
+                    value: g
+                }, h()(m, [].concat(ye(f()(r.propTypes)), [ // TS: trick omit
+                "onChange" ]))));
+                
+                return n().createElement(Y, null,  n().createElement(O(), {
+                    closeReasons: [ "clickAway", "escapeKey", "offScreen", "toggleClick" ],
+                    onRequestClose: this.handleRequestClose,
+                    onRequestOpen: this.handleRequestOpen,
+                    open: this.state.open,
+                    ref: function e(r) {
+                        t.dropdown = r;
+                    },
+                    retainFocus: true,
+                    takeFocus: false,
+                    toggle: w
+                }, this.renderPalette()), b && !p && this.renderInput({
+                    textAppend: false,
+                    textPrepend: true,
+                    textInline: true,
+                    inDropdown: false
+                }));
+            }
+        } ]);
+        return r;
+    }(r.Component);
+    Be(Fe, "propTypes", De);
+    Be(Fe, "defaultProps", $e);
+    var Me = (0, _.withSplunkTheme)(Fe);
+    Me.propTypes = Fe.propTypes;
+    // TODO: SUI-2551 Deprecate this in favor of ui-utils implementation
+    /* harmony default export */    const Le = Me;
+    // CONCATENATED MODULE: ./src/Color/index.ts
+    module.exports = t;
+    /******/})();