@zendeskgarden/react-colorpickers 8.57.1 → 8.58.0

package/dist/index.esm.js

@@ -20,192 +20,55 @@ import { composeEventHandlers, useId } from '@zendeskgarden/container-utilities'
 import { Tooltip } from '@zendeskgarden/react-tooltips';
 import { useGrid } from '@zendeskgarden/container-grid';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-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;
-}
-
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : 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$2.apply(this, arguments);
 }
 
-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;
-}
-
-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 _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-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 _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 _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 function hslToHsv(h, s, l) {
-  var saturation = s;
+  let saturation = s;
   saturation *= (l < 50 ? l : 100 - l) / 100;
-  var v = l + saturation;
+  const v = l + saturation;
   return {
-    h: h,
+    h,
     s: v === 0 ? 0 : 2 * saturation / v * 100,
-    v: v
+    v
   };
 }
 function hsvToHsl(h, s, v) {
-  var saturation = s;
-  var value = v;
+  let saturation = s;
+  let value = v;
   saturation /= 100;
   value /= 100;
-  var l = (2 - saturation) * value;
-  var sl = saturation * value;
+  let l = (2 - saturation) * value;
+  let sl = saturation * value;
   sl /= l <= 1 ? l : 2 - l;
   sl = sl || 0;
   l /= 2;
   return {
-    h: h,
+    h,
     s: sl * 100,
     l: l * 100
   };
 }
 
-var getSaturationLightness = function getSaturationLightness(element, x, y, rtl) {
-  var _element$getBoundingC = element.getBoundingClientRect(),
-      width = _element$getBoundingC.width,
-      height = _element$getBoundingC.height;
-  var left = x - (element.getBoundingClientRect().left + window.pageXOffset);
-  var top = y - (element.getBoundingClientRect().top + window.pageYOffset);
+const getSaturationLightness = (element, x, y, rtl) => {
+  const {
+    width,
+    height
+  } = element.getBoundingClientRect();
+  let left = x - (element.getBoundingClientRect().left + window.pageXOffset);
+  let top = y - (element.getBoundingClientRect().top + window.pageYOffset);
   if (left < 0) {
     left = 0;
   } else if (left > width) {
@@ -219,33 +82,35 @@ var getSaturationLightness = function getSaturationLightness(element, x, y, rtl)
   if (rtl) {
     left = width - left;
   }
-  var saturation = left / width;
-  var bright = 1 - top / height;
+  const saturation = left / width;
+  const bright = 1 - top / height;
   return {
-    saturation: saturation,
-    bright: bright
+    saturation,
+    bright
   };
 };
 function getNextHsv(e, hue, container, rtl) {
-  var _getSaturationLightne = getSaturationLightness(container, e.pageX, e.pageY, rtl),
-      saturation = _getSaturationLightne.saturation,
-      bright = _getSaturationLightne.bright;
+  const {
+    saturation,
+    bright
+  } = getSaturationLightness(container, e.pageX, e.pageY, rtl);
   return {
     h: hue,
     s: saturation,
     v: bright
   };
 }
-var getThumbPosition = function getThumbPosition(x, y, rtl, container) {
+const getThumbPosition = (x, y, rtl, container) => {
   if (container.current) {
-    var _getSaturationLightne2 = getSaturationLightness(container.current, x, y, rtl),
-        saturation = _getSaturationLightne2.saturation,
-        bright = _getSaturationLightne2.bright;
-    var topFromMouse = (1 - bright) * 100;
-    var leftFromMouse = rtl ? 100 - saturation * 100 : saturation * 100;
+    const {
+      saturation,
+      bright
+    } = getSaturationLightness(container.current, x, y, rtl);
+    const topFromMouse = (1 - bright) * 100;
+    const leftFromMouse = rtl ? 100 - saturation * 100 : saturation * 100;
     return {
-      topFromMouse: topFromMouse,
-      leftFromMouse: leftFromMouse
+      topFromMouse,
+      leftFromMouse
     };
   }
   return {
@@ -254,137 +119,208 @@ var getThumbPosition = function getThumbPosition(x, y, rtl, container) {
   };
 };
 
-var COMPONENT_ID$l = 'colorpickers.colorpicker';
-var getColorPickerWidth = function getColorPickerWidth(props) {
+const COMPONENT_ID$l = 'colorpickers.colorpicker';
+const getColorPickerWidth = props => {
   return props.isOpaque ? 268 : 312;
 };
-var StyledColorPicker = styled.div.attrs({
+const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$l, props);
-});
+})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledColorPicker.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$k = 'colorpickers.colorpicker_range';
-var thumbStyles = function thumbStyles(styles) {
-  var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return "\n    &".concat(modifier, "::-moz-range-thumb {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-ms-thumb {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-webkit-slider-thumb {\n      ").concat(styles, "\n    }\n  ");
-};
-var trackStyles = function trackStyles(styles) {
-  var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return "\n    &".concat(modifier, "::-moz-range-track {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-ms-track {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-webkit-slider-runnable-track {\n      ").concat(styles, "\n    }\n  ");
-};
-var trackLowerStyles = function trackLowerStyles(styles) {
-  var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return "\n    &".concat(modifier, "::-moz-range-progress {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-ms-fill-lower {\n      ").concat(styles, "\n    }\n  ");
-};
-var colorStyles$1 = function colorStyles(props) {
-  var thumbBackgroundColor = getColor('neutralHue', 100, props.theme);
-  var thumbBorderColor = thumbBackgroundColor;
-  var thumbActiveBackgroundColor = getColor('neutralHue', 200, props.theme);
-  var thumbActiveBorderColor = getColor('primaryHue', 600, props.theme);
-  var thumbHoverBackgroundColor = thumbActiveBackgroundColor;
-  var thumbHoverBorderColor = thumbHoverBackgroundColor;
-  return "\n    border-color: ".concat(props.isOpaque && props.theme.colors.background, ";\n\n    ").concat(trackStyles("\n      background-color: transparent;\n    "), "\n\n    ").concat(thumbStyles("\n      border-color: ".concat(thumbBorderColor, ";\n      background-color: ").concat(thumbBackgroundColor, ";\n    ")), "\n\n    ").concat(trackLowerStyles("\n      background-color: transparent;\n    "), "\n\n    ").concat(thumbStyles("\n        border-color: ".concat(thumbHoverBorderColor, ";\n        background-color: ").concat(thumbHoverBackgroundColor, ";\n      "), ':hover'), "\n\n    ").concat(thumbStyles("\n        background-color: ".concat(thumbBackgroundColor, ";\n        border-color: ").concat(thumbActiveBorderColor, ";\n      "), '[data-garden-focus-visible="true"]'), "\n\n    ").concat(thumbStyles("\n        border-color: ".concat(thumbActiveBorderColor, ";\n        background-color: ").concat(thumbActiveBackgroundColor, "\n      "), ':active'), "\n  ");
+const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
+const thumbStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-thumb {
+      ${styles}
+    }
+
+    &${modifier}::-ms-thumb {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-thumb {
+      ${styles}
+    }
+  `;
 };
-var getThumbSize = function getThumbSize(props) {
-  return props.theme.space.base * (props.isOpaque ? 6 : 4);
+const trackStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-track {
+      ${styles}
+    }
+
+    &${modifier}::-ms-track {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-runnable-track {
+      ${styles}
+    }
+  `;
 };
-var getTrackHeight = function getTrackHeight(props) {
-  return props.theme.space.base * (props.isOpaque ? 6 : 3);
+const trackLowerStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-progress {
+      ${styles}
+    }
+
+    &${modifier}::-ms-fill-lower {
+      ${styles}
+    }
+  `;
 };
-var getTrackMargin = function getTrackMargin(props) {
-  return (getThumbSize(props) - getTrackHeight(props)) / 2 + stripUnit(props.theme.shadowWidths.md);
+const colorStyles$1 = props => {
+  const thumbBackgroundColor = getColor('neutralHue', 100, props.theme);
+  const thumbBorderColor = thumbBackgroundColor;
+  const thumbActiveBackgroundColor = getColor('neutralHue', 200, props.theme);
+  const thumbActiveBorderColor = getColor('primaryHue', 600, props.theme);
+  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
+  const thumbHoverBorderColor = thumbHoverBackgroundColor;
+  return `
+    border-color: ${props.isOpaque && props.theme.colors.background};
+
+    ${trackStyles(`
+      background-color: transparent;
+    `)}
+
+    ${thumbStyles(`
+      border-color: ${thumbBorderColor};
+      background-color: ${thumbBackgroundColor};
+    `)}
+
+    ${trackLowerStyles(`
+      background-color: transparent;
+    `)}
+
+    ${thumbStyles(`
+        border-color: ${thumbHoverBorderColor};
+        background-color: ${thumbHoverBackgroundColor};
+      `, ':hover')}
+
+    ${thumbStyles(`
+        background-color: ${thumbBackgroundColor};
+        border-color: ${thumbActiveBorderColor};
+      `, '[data-garden-focus-visible="true"]')}
+
+    ${thumbStyles(`
+        border-color: ${thumbActiveBorderColor};
+        background-color: ${thumbActiveBackgroundColor}
+      `, ':active')}
+  `;
 };
-var sizeStyles$2 = function sizeStyles(props) {
-  var thumbSize = getThumbSize(props);
-  var trackHeight = getTrackHeight(props);
-  var trackMargin = getTrackMargin(props);
-  var thumbMargin = (trackHeight - thumbSize) / 2;
-  var trackOffset = props.theme.space.base * (props.isOpaque ? -2 : -1);
-  var height = props.isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
-  var marginHorizontal;
-  var border;
-  var borderRadius;
+const getThumbSize = props => props.theme.space.base * (props.isOpaque ? 6 : 4);
+const getTrackHeight = props => props.theme.space.base * (props.isOpaque ? 6 : 3);
+const getTrackMargin = props => (getThumbSize(props) - getTrackHeight(props)) / 2 + stripUnit(props.theme.shadowWidths.md);
+const sizeStyles$2 = props => {
+  const thumbSize = getThumbSize(props);
+  const trackHeight = getTrackHeight(props);
+  const trackMargin = getTrackMargin(props);
+  const thumbMargin = (trackHeight - thumbSize) / 2;
+  const trackOffset = props.theme.space.base * (props.isOpaque ? -2 : -1);
+  const height = props.isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
+  let marginHorizontal;
+  let border;
+  let borderRadius;
   if (props.isOpaque) {
-    marginHorizontal = "-".concat(trackMargin, "px");
-    border = "".concat(trackMargin, "px ").concat(props.theme.borderStyles.solid);
-    borderRadius = "".concat(trackMargin + stripUnit(props.theme.shadowWidths.md), "px");
+    marginHorizontal = `-${trackMargin}px`;
+    border = `${trackMargin}px ${props.theme.borderStyles.solid}`;
+    borderRadius = `${trackMargin + stripUnit(props.theme.shadowWidths.md)}px`;
   }
-  return "\n    /* stylelint-disable-next-line declaration-no-important */\n    margin-top: 0 !important;\n    margin-".concat(props.theme.rtl ? 'right' : 'left', ": ").concat(marginHorizontal, ";\n    height: ").concat(height, "px; /* [1] */\n    box-sizing: content-box; /* [2] */\n    border: ").concat(border, ";\n    border-radius: ").concat(borderRadius, ";\n\n    ").concat(trackStyles("\n      margin: ".concat(trackMargin, "px ").concat(trackOffset, "px;\n      height: ").concat(trackHeight, "px;\n    ")), "\n\n    ").concat(thumbStyles("\n      margin: ".concat(thumbMargin, "px 0;\n      border-width: ").concat(math("".concat(props.theme.borderWidths.sm, " * 2")), ";\n      height: ").concat(thumbSize, "px;\n      width: ").concat(thumbSize, "px;\n    ")), ";\n  ");
+  return `
+    /* stylelint-disable-next-line declaration-no-important */
+    margin-top: 0 !important;
+    margin-${props.theme.rtl ? 'right' : 'left'}: ${marginHorizontal};
+    height: ${height}px; /* [1] */
+    box-sizing: content-box; /* [2] */
+    border: ${border};
+    border-radius: ${borderRadius};
+
+    ${trackStyles(`
+      margin: ${trackMargin}px ${trackOffset}px;
+      height: ${trackHeight}px;
+    `)}
+
+    ${thumbStyles(`
+      margin: ${thumbMargin}px 0;
+      border-width: ${math(`${props.theme.borderWidths.sm} * 2`)};
+      height: ${thumbSize}px;
+      width: ${thumbSize}px;
+    `)};
+  `;
 };
-var StyledRange = styled(Range).attrs({
+const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
   componentId: "sc-ug3wi9-0"
-})(["", ";", " ", ";", ";"], sizeStyles$2, trackStyles("\n    border-radius: 0;\n  "), colorStyles$1, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$k, props);
-});
+})(["", ";", " ", ";", ";"], sizeStyles$2, trackStyles(`
+    border-radius: 0;
+  `), colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledRange.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
-var StyledHueRange = styled(StyledRange).attrs({
+const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
+const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
-})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return !props.isOpaque && "0 ".concat(getTrackMargin(props), "px");
-}, function (props) {
-  return getTrackHeight(props);
-});
+})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
 StyledHueRange.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var checkeredBackground = function checkeredBackground(theme, size) {
-  var positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
-  var color = getColor('neutralHue', 400, theme);
-  var dimensions = "".concat(size, "px ").concat(size, "px");
-  var positionX1 = theme.rtl ? '100%' : '0';
-  var positionX2 = theme.rtl ? "calc(100% - ".concat(size / 2, "px)") : "".concat(size / 2, "px");
-  var position1 = "".concat(positionX1, " ").concat(positionY, "px");
-  var position2 = "".concat(positionX2, " ").concat(size / 2 + positionY, "px");
-  var position3 = "".concat(positionX2, " ").concat(positionY, "px");
-  var position4 = "".concat(positionX1, " ").concat(size / -2 + positionY, "px");
-  return "\n    linear-gradient(45deg, ".concat(color, " 25%, transparent 25%) ").concat(position1, " / ").concat(dimensions, " ").concat(repeat, ",\n    linear-gradient(45deg, transparent 75%, ").concat(color, " 75%) ").concat(position2, " / ").concat(dimensions, " ").concat(repeat, ",\n    linear-gradient(135deg, ").concat(color, " 25%, transparent 25%) ").concat(position3, " / ").concat(dimensions, " ").concat(repeat, ",\n    linear-gradient(135deg, transparent 75%, ").concat(color, " 75%) ").concat(position4, " / ").concat(dimensions, " ").concat(repeat, "\n  ");
+const checkeredBackground = function (theme, size) {
+  let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
+  const color = getColor('neutralHue', 400, theme);
+  const dimensions = `${size}px ${size}px`;
+  const positionX1 = theme.rtl ? '100%' : '0';
+  const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
+  const position1 = `${positionX1} ${positionY}px`;
+  const position2 = `${positionX2} ${size / 2 + positionY}px`;
+  const position3 = `${positionX2} ${positionY}px`;
+  const position4 = `${positionX1} ${size / -2 + positionY}px`;
+  return `
+    linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat},
+    linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat},
+    linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat},
+    linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat}
+  `;
 };
 
-var COMPONENT_ID$i = 'colorpickers.colorpicker_alpha';
-var background$3 = function background(props) {
-  var direction = "to ".concat(props.theme.rtl ? 'left' : 'right');
-  var fromColor = "rgba(".concat(props.red, ", ").concat(props.green, ", ").concat(props.blue, ", 0)");
-  var toColor = "rgb(".concat(props.red, ", ").concat(props.green, ", ").concat(props.blue, ")");
-  var positionY = getTrackMargin(props);
-  var height = getTrackHeight(props);
-  var gradientBackground = "linear-gradient(".concat(direction, ", ").concat(fromColor, ", ").concat(toColor, ") 0 ").concat(positionY, "px / 100% ").concat(height, "px no-repeat");
-  return "".concat(gradientBackground, ", ").concat(checkeredBackground(props.theme, height, positionY, 'repeat-x'));
+const COMPONENT_ID$i = 'colorpickers.colorpicker_alpha';
+const background$3 = props => {
+  const direction = `to ${props.theme.rtl ? 'left' : 'right'}`;
+  const fromColor = `rgba(${props.red}, ${props.green}, ${props.blue}, 0)`;
+  const toColor = `rgb(${props.red}, ${props.green}, ${props.blue})`;
+  const positionY = getTrackMargin(props);
+  const height = getTrackHeight(props);
+  const gradientBackground = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
+  return `${gradientBackground}, ${checkeredBackground(props.theme, height, positionY, 'repeat-x')}`;
 };
-var StyledAlphaRange = styled(StyledRange).attrs(function (props) {
-  return {
-    style: {
-      backgroundSize: 'auto',
-      background: background$3(props)
-    },
-    'data-garden-id': COMPONENT_ID$i,
-    'data-garden-version': '8.57.1'
-  };
-}).withConfig({
+const StyledAlphaRange = styled(StyledRange).attrs(props => ({
+  style: {
+    backgroundSize: 'auto',
+    background: background$3(props)
+  },
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '8.58.0'
+})).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
 })([""]);
@@ -392,476 +328,377 @@ StyledAlphaRange.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$h = 'colorpickers.colorpicker_preview_box';
-var background$2 = function background(props) {
-  var alpha = props.alpha ? props.alpha / 100 : 0;
-  var color = "rgba(".concat(props.red, ", ").concat(props.green, ", ").concat(props.blue, ", ").concat(alpha, ")");
-  var retVal = "linear-gradient(".concat(color, ", ").concat(color, ")");
+const COMPONENT_ID$h = 'colorpickers.colorpicker_preview_box';
+const background$2 = props => {
+  const alpha = props.alpha ? props.alpha / 100 : 0;
+  const color = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
+  let retVal = `linear-gradient(${color}, ${color})`;
   if (!props.isOpaque) {
-    retVal = "".concat(retVal, ", ").concat(checkeredBackground(props.theme, 13));
+    retVal = `${retVal}, ${checkeredBackground(props.theme, 13)}`;
   }
   return retVal;
 };
-var StyledPreview = styled.div.attrs(function (props) {
-  return {
-    style: {
-      background: background$2(props)
-    },
-    'data-garden-id': COMPONENT_ID$h,
-    'data-garden-version': '8.57.1',
-    'data-test-id': 'preview-box'
-  };
-}).withConfig({
+const StyledPreview = styled.div.attrs(props => ({
+  style: {
+    background: background$2(props)
+  },
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '8.58.0',
+  'data-test-id': 'preview-box'
+})).withConfig({
   displayName: "StyledPreview",
   componentId: "sc-d70mj1-0"
-})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return props.theme.borderWidths.sm;
-}, function (props) {
-  return rgba(props.theme.palette.black, 0.19);
-}, function (props) {
-  return props.theme.space.base * (props.isOpaque ? 6 : 8);
-}, function (props) {
-  return props.theme.space.base * (props.isOpaque ? 6 : 8);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$h, props);
-});
+})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledPreview.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell';
-var background$1 = function background(props) {
-  var blackAlpha = rgba(props.theme.palette.black, 0.9);
-  var black = "linear-gradient(0deg, ".concat(props.theme.palette.black, ", ").concat(blackAlpha, " 1%, transparent 99%)");
-  var whiteAngle = "".concat(props.theme.rtl ? -90 : 90, "deg");
-  var white = "linear-gradient(".concat(whiteAngle, ", ").concat(props.theme.palette.white, " 1%, transparent)");
-  var colorValue = hsl(props.hue, 1, 0.5);
-  var color = "linear-gradient(".concat(colorValue, ", ").concat(colorValue, ")");
-  return "".concat(black, ", ").concat(white, ", ").concat(color);
+const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell';
+const background$1 = props => {
+  const blackAlpha = rgba(props.theme.palette.black, 0.9);
+  const black = `linear-gradient(0deg, ${props.theme.palette.black}, ${blackAlpha} 1%, transparent 99%)`;
+  const whiteAngle = `${props.theme.rtl ? -90 : 90}deg`;
+  const white = `linear-gradient(${whiteAngle}, ${props.theme.palette.white} 1%, transparent)`;
+  const colorValue = hsl(props.hue, 1, 0.5);
+  const color = `linear-gradient(${colorValue}, ${colorValue})`;
+  return `${black}, ${white}, ${color}`;
 };
-var StyledColorWell = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$g,
-    'data-garden-version': '8.57.1',
-    'data-test-id': 'colorwell',
-    style: {
-      background: background$1(props)
-    }
-  };
-}).withConfig({
+const StyledColorWell = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '8.58.0',
+  'data-test-id': 'colorwell',
+  style: {
+    background: background$1(props)
+  }
+})).withConfig({
   displayName: "StyledColorWell",
   componentId: "sc-54ly7s-0"
-})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$g, props);
-});
+})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledColorWell.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
-var sizeStyles$1 = function sizeStyles(theme) {
-  var borderWidth = stripUnit(theme.borderWidths.sm) * 2;
-  var size = theme.space.base * 5;
-  var translateValue = size / -2;
-  return "\n    transform: translate(".concat(translateValue, "px, ").concat(translateValue, "px);\n    box-sizing: border-box;\n    border-width: ").concat(borderWidth, "px;\n    width: ").concat(size, "px;\n    height: ").concat(size, "px;\n  ");
+const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
+const sizeStyles$1 = theme => {
+  const borderWidth = stripUnit(theme.borderWidths.sm) * 2;
+  const size = theme.space.base * 5;
+  const translateValue = size / -2;
+  return `
+    transform: translate(${translateValue}px, ${translateValue}px);
+    box-sizing: border-box;
+    border-width: ${borderWidth}px;
+    width: ${size}px;
+    height: ${size}px;
+  `;
 };
-var StyledColorWellThumb = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$f,
-    'data-garden-version': '8.57.1',
-    'data-test-id': 'colorwell-thumb',
-    style: {
-      top: "".concat(props.top, "%"),
-      left: "".concat(props.left, "%")
-    }
-  };
-}).withConfig({
+const StyledColorWellThumb = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '8.58.0',
+  'data-test-id': 'colorwell-thumb',
+  style: {
+    top: `${props.top}%`,
+    left: `${props.left}%`
+  }
+})).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1pnz3jz-0"
-})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.shadows.lg("".concat(props.theme.space.base, "px"), "".concat(props.theme.space.base * 2, "px"), getColor('neutralHue', 800, props.theme, 0.24));
-}, function (props) {
-  return sizeStyles$1(props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$f, props);
-});
+})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledColorWellThumb.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
-var StyledSliderGroup = styled.div.attrs({
+const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
+const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
-})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$e, props);
-});
+})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledSliderGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
-var StyledHexField = styled(Field).attrs({
+const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
+const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
   componentId: "sc-1lk14t4-0"
-})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$d, props);
-});
+})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledHexField.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$c = 'colorpickers.colorpicker_label';
-var StyledLabel = styled(Label).attrs({
+const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
+const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$c, props);
-});
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$b = 'colorpickers.colorpicker_input';
-var StyledInput = styled(Input).attrs({
+const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
+const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1iap93p-0"
-})(["text-align:center;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+})(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
-var StyledInputGroup = styled.div.attrs({
+const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
+const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
-})(["display:flex;justify-content:space-between;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$a, props);
-});
+})(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledInputGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
-var sizeStyles = function sizeStyles(theme) {
-  var margin = "".concat(theme.space.base * 1.5, "px");
-  var width = "".concat(theme.space.base * 12.75, "px");
-  return "\n    margin-".concat(theme.rtl ? 'right' : 'left', ": ").concat(margin, ";\n    width: ").concat(width, ";\n    min-width: ").concat(width, ";\n  ");
+const COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
+const sizeStyles = theme => {
+  const margin = `${theme.space.base * 1.5}px`;
+  const width = `${theme.space.base * 12.75}px`;
+  return `
+    margin-${theme.rtl ? 'right' : 'left'}: ${margin};
+    width: ${width};
+    min-width: ${width};
+  `;
 };
-var StyledRGBAField = styled(Field).attrs({
+const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], function (props) {
-  return sizeStyles(props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledRGBAField.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
-var StyledSliders = styled.div.attrs({
+const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
+const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
-})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return getTrackMargin(props) * 2 + getTrackHeight(props);
-}, getTrackMargin, getTrackMargin, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledSliders.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'colorpickers.colordialog_button';
-var StyledButton = styled(Button).attrs({
+const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
+const StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
-})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], function (props) {
-  return props.theme.space.base * 17;
-}, function (props) {
-  return props.theme.space.base * 17;
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$6 = 'colorpickers.colordialog_preview';
-var background = function background(props) {
-  var backgroundColor = props.backgroundColor;
-  var color;
+const COMPONENT_ID$6 = 'colorpickers.colordialog_preview';
+const background = props => {
+  const {
+    backgroundColor
+  } = props;
+  let color;
   if (typeof backgroundColor === 'string') {
     color = backgroundColor;
   } else if (backgroundColor === undefined) {
     color = props.theme.palette.white;
   } else {
-    var red = backgroundColor.red,
-        green = backgroundColor.green,
-        blue = backgroundColor.blue,
-        _backgroundColor$alph = backgroundColor.alpha,
-        alpha = _backgroundColor$alph === void 0 ? 1 : _backgroundColor$alph;
-    color = "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha ? alpha / 100 : 0, ")");
+    const {
+      red,
+      green,
+      blue,
+      alpha = 1
+    } = backgroundColor;
+    color = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
   }
-  return "linear-gradient(".concat(color, ", ").concat(color, ")");
+  return `linear-gradient(${color}, ${color})`;
 };
-var StyledButtonPreview = styled.span.attrs(function (props) {
-  return {
-    style: {
-      background: "".concat(background(props), ", ").concat(checkeredBackground(props.theme, 8))
-    },
-    'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.57.1',
-    'data-test-id': 'dialog-preview'
-  };
-}).withConfig({
+const StyledButtonPreview = styled.span.attrs(props => ({
+  style: {
+    background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
+  },
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.58.0',
+  'data-test-id': 'dialog-preview'
+})).withConfig({
   displayName: "StyledButtonPreview",
   componentId: "sc-1jzysg3-0"
-})(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return props.theme.borderRadii.sm;
-}, function (props) {
-  return props.theme.borderWidths.sm;
-}, function (props) {
-  return rgba(props.theme.palette.black, 0.19);
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledButtonPreview.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
-var StyledTooltipModal = styled(TooltipModal).attrs({
+const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
+const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
-})(["width:auto !important;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledTooltipModal.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
-var StyledTooltipBody = styled(TooltipModal.Body).attrs({
+const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
+const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
-})(["padding:0;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledTooltipBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'colorpickers.swatch_button';
-var StyledSwatchButton = styled(StyledButtonPreview).attrs(function (props) {
-  return {
-    as: 'button',
-    'data-garden-id': COMPONENT_ID$3,
-    'data-test-id': props.backgroundColor,
-    'data-garden-version': '8.57.1'
-  };
-}).withConfig({
+const COMPONENT_ID$3 = 'colorpickers.swatch_button';
+const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
+  as: 'button',
+  'data-garden-id': COMPONENT_ID$3,
+  'data-test-id': props.backgroundColor,
+  'data-garden-version': '8.58.0'
+})).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
-})(["outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;&[data-garden-focus-visible]{box-shadow:", ";}", ";"], function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;&[data-garden-focus-visible]{box-shadow:", ";}", ";"], props => props.theme.borderRadii.md, props => props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35)), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledSwatchButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'colorpickers.color_swatch';
-var StyledColorSwatch = styled.table.attrs({
+const COMPONENT_ID$2 = 'colorpickers.color_swatch';
+const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
-})(["border-collapse:collapse;line-height:normal;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledColorSwatch.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$4 = ["children", "color", "theme"];
-var COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
-var colorStyles = function colorStyles(props) {
-  var theme = props.theme,
-      color = props.color;
-  var _parseToRgb = parseToRgb(color),
-      alpha = _parseToRgb.alpha;
-  var checkColor = readableColor(color, theme.colors.foreground, theme.colors.background);
+const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
+const colorStyles = props => {
+  const {
+    theme,
+    color
+  } = props;
+  const {
+    alpha
+  } = parseToRgb(color);
+  let checkColor = readableColor(color, theme.colors.foreground, theme.colors.background);
   if (alpha !== undefined && alpha < 0.4) {
     checkColor = theme.colors.foreground;
   }
-  return "\n    color: ".concat(checkColor, "\n  ");
+  return `
+    color: ${checkColor}
+  `;
 };
-var StyledIcon = styled(function (_ref) {
-  var children = _ref.children;
-      _ref.color;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$4);
+const StyledIcon = styled(_ref => {
+  let {
+    children,
+    color,
+    theme,
+    ...props
+  } = _ref;
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
-})(["transition:opacity 0.2s ease-in-out;opacity:", ";width:", "px;height:", "px;", " ", ";"], function (props) {
-  return props.selected ? 1 : 0;
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.theme.space.base * 5;
-}, colorStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["transition:opacity 0.2s ease-in-out;opacity:", ";width:", "px;height:", "px;", " ", ";"], props => props.selected ? 1 : 0, props => props.theme.space.base * 5, props => props.theme.space.base * 5, colorStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'colorpickers.swatch_cell';
-var StyledCell = styled.td.attrs({
+const COMPONENT_ID = 'colorpickers.swatch_cell';
+const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
-})(["padding:", "px;font-size:0;", ";"], function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCell.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var ColorWell = React__default.memo(function (_ref) {
-  var hue = _ref.hue,
-      saturation = _ref.saturation,
-      lightness = _ref.lightness,
-      onChange = _ref.onChange;
-  var _useContext = useContext(ThemeContext),
-      rtl = _useContext.rtl;
-  var containerRef = useRef(null);
-  var hsv = hslToHsv(hue, saturation, lightness);
-  var mouseActiveRef = useRef(false);
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      x = _useState2[0],
-      setX = _useState2[1];
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      y = _useState4[0],
-      setY = _useState4[1];
-  var _getThumbPosition = getThumbPosition(x, y, rtl, containerRef),
-      topFromMouse = _getThumbPosition.topFromMouse,
-      leftFromMouse = _getThumbPosition.leftFromMouse;
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      topPosition = _useState6[0],
-      setTopPosition = _useState6[1];
-  var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      leftPosition = _useState8[0],
-      setLeftPosition = _useState8[1];
-  useEffect(function () {
+const ColorWell = React__default.memo(_ref => {
+  let {
+    hue,
+    saturation,
+    lightness,
+    onChange
+  } = _ref;
+  const {
+    rtl
+  } = useContext(ThemeContext);
+  const containerRef = useRef(null);
+  const hsv = hslToHsv(hue, saturation, lightness);
+  const mouseActiveRef = useRef(false);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const {
+    topFromMouse,
+    leftFromMouse
+  } = getThumbPosition(x, y, rtl, containerRef);
+  const [topPosition, setTopPosition] = useState(0);
+  const [leftPosition, setLeftPosition] = useState(0);
+  useEffect(() => {
     setTopPosition(100 - hsv.v);
     setLeftPosition(rtl ? 100 - hsv.s : hsv.s);
   }, [hsv.s, hsv.v, rtl]);
-  var throttledChange = useMemo(function () {
-    return throttle(function (e) {
+  const throttledChange = useMemo(() => {
+    return throttle(e => {
       if (containerRef.current) {
-        var nextHsv = getNextHsv(e, hue, containerRef.current, rtl);
+        const nextHsv = getNextHsv(e, hue, containerRef.current, rtl);
         onChange && onChange(nextHsv, e);
       }
     }, 50);
   }, [hue, rtl, onChange]);
-  var handleMouseMove = useCallback(function (e) {
+  const handleMouseMove = useCallback(e => {
     mouseActiveRef.current = true;
     setX(e.pageX);
     setY(e.pageY);
     throttledChange(e);
   }, [throttledChange]);
-  var handleMouseUp = useCallback(function () {
+  const handleMouseUp = useCallback(() => {
     mouseActiveRef.current = true;
-    setTimeout(function () {
+    setTimeout(() => {
       mouseActiveRef.current = false;
     });
     throttledChange.cancel();
     window.removeEventListener('mousemove', handleMouseMove);
     window.removeEventListener('mouseup', handleMouseUp);
   }, [throttledChange, handleMouseMove]);
-  var handleMouseDown = useCallback(function (e) {
+  const handleMouseDown = useCallback(e => {
     mouseActiveRef.current = true;
     e.persist();
     handleMouseMove(e);
@@ -869,8 +706,8 @@ var ColorWell = React__default.memo(function (_ref) {
     window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);
   }, [throttledChange, handleMouseMove, handleMouseUp]);
-  useEffect(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       throttledChange.cancel();
     };
   }, [throttledChange]);
@@ -886,8 +723,8 @@ var ColorWell = React__default.memo(function (_ref) {
 });
 ColorWell.displayName = 'ColorWell';
 
-var isValidHex = function isValidHex(hexString) {
-  var regEx = /^#(?:(?:[0-9A-F]{6}(?:[0-9A-F]{2})?)|(?:[0-9A-F]{3})(?:[0-9A-F]?))$/i;
+const isValidHex = hexString => {
+  const regEx = /^#(?:(?:[0-9A-F]{6}(?:[0-9A-F]{2})?)|(?:[0-9A-F]{3})(?:[0-9A-F]?))$/iu;
   return regEx.test(hexString);
 };
 
@@ -895,45 +732,47 @@ function convertStringToColor(colorString) {
   if (colorString.includes('#') && !isValidHex(colorString)) {
     return undefined;
   }
-  var _parseToHsl = parseToHsl(colorString),
-      hue = _parseToHsl.hue,
-      saturation = _parseToHsl.saturation,
-      lightness = _parseToHsl.lightness;
-  var _parseToRgb = parseToRgb(colorString),
-      red = _parseToRgb.red,
-      green = _parseToRgb.green,
-      blue = _parseToRgb.blue,
-      alpha = _parseToRgb.alpha;
-  var computedAlpha = alpha === undefined ? 100 : alpha * 100;
-  var computedHex = rgb({
-    red: red,
-    green: green,
-    blue: blue
+  const {
+    hue,
+    saturation,
+    lightness
+  } = parseToHsl(colorString);
+  const {
+    red,
+    green,
+    blue,
+    alpha
+  } = parseToRgb(colorString);
+  const computedAlpha = alpha === undefined ? 100 : alpha * 100;
+  const computedHex = rgb({
+    red,
+    green,
+    blue
   });
   return {
-    hue: hue,
+    hue,
     saturation: saturation * 100,
     lightness: lightness * 100,
-    red: red,
-    green: green,
-    blue: blue,
+    red,
+    green,
+    blue,
     alpha: computedAlpha,
     hex: computedHex
   };
 }
-var areColorsEqual = function areColorsEqual(a, b) {
+const areColorsEqual = (a, b) => {
   if (a === undefined || b === undefined) {
     return false;
   }
-  var colorA = typeof a === 'string' ? convertStringToColor(a) : a;
-  var colorB = typeof b === 'string' ? convertStringToColor(b) : b;
+  const colorA = typeof a === 'string' ? convertStringToColor(a) : a;
+  const colorB = typeof b === 'string' ? convertStringToColor(b) : b;
   if (colorA === undefined || colorB === undefined) {
     return false;
   }
   return isEqual(colorA, colorB);
 };
 function getInitialState(color) {
-  var whiteColor = {
+  const whiteColor = {
     hue: 0,
     saturation: 0,
     lightness: 0,
@@ -947,11 +786,11 @@ function getInitialState(color) {
     return getInitialState(whiteColor);
   }
   if (typeof color === 'string') {
-    var computedColor = convertStringToColor(color);
+    const computedColor = convertStringToColor(color);
     return getInitialState(computedColor || whiteColor);
   }
   return {
-    color: color,
+    color,
     hexInput: color.hex,
     redInput: color.red.toString(),
     blueInput: color.blue.toString(),
@@ -959,80 +798,88 @@ function getInitialState(color) {
     alphaInput: color.alpha.toString()
   };
 }
-var reducer = function reducer(state, action) {
+const reducer = (state, action) => {
   switch (action.type) {
     case 'SATURATION_CHANGE':
       {
-        var hsl$1 = hsvToHsl(action.payload.h, action.payload.s * 100, action.payload.v * 100);
-        var hex = hsl({
+        const hsl$1 = hsvToHsl(action.payload.h, action.payload.s * 100, action.payload.v * 100);
+        const hex = hsl({
           hue: action.payload.h,
           saturation: hsl$1.s / 100,
           lightness: hsl$1.l / 100
         });
-        var rgb$1 = parseToRgb(hex);
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          color: _objectSpread2(_objectSpread2({}, state.color), {}, {
+        const rgb = parseToRgb(hex);
+        return {
+          ...state,
+          color: {
+            ...state.color,
             saturation: hsl$1.s,
             lightness: hsl$1.l,
-            hex: hex,
-            red: rgb$1.red,
-            green: rgb$1.green,
-            blue: rgb$1.blue
-          })
-        });
+            hex,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          }
+        };
       }
     case 'HUE_CHANGE':
       {
-        var hue = Number(action.payload);
-        var _hex = hsl({
-          hue: hue,
+        const hue = Number(action.payload);
+        const hex = hsl({
+          hue,
           saturation: state.color.saturation / 100,
           lightness: state.color.lightness / 100
         });
-        var _rgb = parseToRgb(_hex);
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          color: _objectSpread2(_objectSpread2({}, state.color), {}, {
-            hue: hue,
-            hex: _hex,
-            red: _rgb.red,
-            green: _rgb.green,
-            blue: _rgb.blue
-          })
-        });
+        const rgb = parseToRgb(hex);
+        return {
+          ...state,
+          color: {
+            ...state.color,
+            hue,
+            hex,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          }
+        };
       }
     case 'ALPHA_SLIDER_CHANGE':
       {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          color: _objectSpread2(_objectSpread2({}, state.color), {}, {
+        return {
+          ...state,
+          color: {
+            ...state.color,
             alpha: Math.round(Number(action.payload) * 100)
-          })
-        });
+          }
+        };
       }
     case 'HEX_CHANGE':
       {
-        var color = state.color;
+        let color = state.color;
         if (isValidHex(action.payload)) {
-          var _rgb2 = parseToRgb(action.payload);
-          var _hsl = parseToHsl("rgb(".concat(_rgb2.red, ", ").concat(_rgb2.green, ", ").concat(_rgb2.blue, ")"));
-          color = _objectSpread2(_objectSpread2({}, color), {}, {
-            hue: _hsl.hue,
-            saturation: _hsl.saturation * 100,
-            lightness: _hsl.lightness * 100,
+          const rgb = parseToRgb(action.payload);
+          const hsl = parseToHsl(`rgb(${rgb.red}, ${rgb.green}, ${rgb.blue})`);
+          color = {
+            ...color,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100,
             hex: action.payload,
-            red: _rgb2.red,
-            green: _rgb2.green,
-            blue: _rgb2.blue
-          });
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          };
         }
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           hexInput: action.payload,
-          color: color
-        });
+          color
+        };
       }
     case 'RED_CHANGE':
       {
-        var red = parseInt(action.payload, 10);
-        var _color = state.color;
+        let red = parseInt(action.payload, 10);
+        let color = state.color;
         if (!isNaN(red)) {
           if (red >= 255) {
             red = 255;
@@ -1040,25 +887,27 @@ var reducer = function reducer(state, action) {
           if (red < 0) {
             red = 0;
           }
-          var _hsl2 = parseToHsl("rgb(".concat(red, ", ").concat(_color.green, ", ").concat(_color.blue, ")"));
-          var _hex2 = rgb(red, _color.green, _color.blue);
-          _color = _objectSpread2(_objectSpread2({}, _color), {}, {
-            hex: _hex2,
-            red: action.payload === '' ? _color.red : red,
-            hue: _hsl2.hue,
-            saturation: _hsl2.saturation * 100,
-            lightness: _hsl2.lightness * 100
-          });
+          const hsl = parseToHsl(`rgb(${red}, ${color.green}, ${color.blue})`);
+          const hex = rgb(red, color.green, color.blue);
+          color = {
+            ...color,
+            hex,
+            red: action.payload === '' ? color.red : red,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
         }
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           redInput: action.payload,
-          color: _color
-        });
+          color
+        };
       }
     case 'GREEN_CHANGE':
       {
-        var green = parseInt(action.payload, 10);
-        var _color2 = state.color;
+        let green = parseInt(action.payload, 10);
+        let color = state.color;
         if (!isNaN(green)) {
           if (green >= 255) {
             green = 255;
@@ -1066,25 +915,27 @@ var reducer = function reducer(state, action) {
           if (green < 0) {
             green = 0;
           }
-          var _hsl3 = parseToHsl("rgb(".concat(_color2.red, ", ").concat(green, ", ").concat(_color2.blue, ")"));
-          var _hex3 = rgb(_color2.red, green, _color2.blue);
-          _color2 = _objectSpread2(_objectSpread2({}, _color2), {}, {
-            hex: _hex3,
-            green: action.payload === '' ? _color2.green : green,
-            hue: _hsl3.hue,
-            saturation: _hsl3.saturation * 100,
-            lightness: _hsl3.lightness * 100
-          });
+          const hsl = parseToHsl(`rgb(${color.red}, ${green}, ${color.blue})`);
+          const hex = rgb(color.red, green, color.blue);
+          color = {
+            ...color,
+            hex,
+            green: action.payload === '' ? color.green : green,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
         }
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           greenInput: action.payload,
-          color: _color2
-        });
+          color
+        };
       }
     case 'BLUE_CHANGE':
       {
-        var blue = parseInt(action.payload, 10);
-        var _color3 = state.color;
+        let blue = parseInt(action.payload, 10);
+        let color = state.color;
         if (!isNaN(blue)) {
           if (blue >= 255) {
             blue = 255;
@@ -1092,25 +943,27 @@ var reducer = function reducer(state, action) {
           if (blue < 0) {
             blue = 0;
           }
-          var _hsl4 = parseToHsl("rgb(".concat(_color3.red, ", ").concat(_color3.green, ", ").concat(blue, ")"));
-          var _hex4 = rgb(_color3.red, _color3.green, blue);
-          _color3 = _objectSpread2(_objectSpread2({}, _color3), {}, {
-            hex: _hex4,
-            blue: action.payload === '' ? _color3.blue : blue,
-            hue: _hsl4.hue,
-            saturation: _hsl4.saturation * 100,
-            lightness: _hsl4.lightness * 100
-          });
+          const hsl = parseToHsl(`rgb(${color.red}, ${color.green}, ${blue})`);
+          const hex = rgb(color.red, color.green, blue);
+          color = {
+            ...color,
+            hex,
+            blue: action.payload === '' ? color.blue : blue,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
         }
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           blueInput: action.payload,
-          color: _color3
-        });
+          color
+        };
       }
     case 'ALPHA_CHANGE':
       {
-        var alpha = parseInt(action.payload, 10);
-        var _color4 = state.color;
+        let alpha = parseInt(action.payload, 10);
+        let color = state.color;
         if (!isNaN(alpha)) {
           if (alpha > 100) {
             alpha = 100;
@@ -1118,14 +971,16 @@ var reducer = function reducer(state, action) {
           if (alpha < 0) {
             alpha = 0;
           }
-          _color4 = _objectSpread2(_objectSpread2({}, _color4), {}, {
-            alpha: alpha
-          });
+          color = {
+            ...color,
+            alpha
+          };
         }
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           alphaInput: action.payload,
-          color: _color4
-        });
+          color
+        };
       }
     case 'RESET_COLOR':
       {
@@ -1136,27 +991,24 @@ var reducer = function reducer(state, action) {
   }
 };
 
-var _excluded$3 = ["color", "defaultColor", "isOpaque", "labels", "autofocus", "onChange"];
-var Colorpicker = forwardRef(function (_ref, ref) {
-  var color = _ref.color,
-      defaultColor = _ref.defaultColor,
-      isOpaque = _ref.isOpaque,
-      _ref$labels = _ref.labels,
-      labels = _ref$labels === void 0 ? {} : _ref$labels,
-      autofocus = _ref.autofocus,
-      onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-  var _useReducer = useReducer(reducer, getInitialState(color || defaultColor)),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
-  var previousComputedColorRef = useRef(state.color);
-  var previousStateColorRef = useRef(state.color);
-  var computedColor = useMemo(function () {
-    var retVal = state.color;
+const Colorpicker = forwardRef((_ref, ref) => {
+  let {
+    color,
+    defaultColor,
+    isOpaque,
+    labels = {},
+    autofocus,
+    onChange,
+    ...props
+  } = _ref;
+  const [state, dispatch] = useReducer(reducer, getInitialState(color || defaultColor));
+  const previousComputedColorRef = useRef(state.color);
+  const previousStateColorRef = useRef(state.color);
+  const computedColor = useMemo(() => {
+    let retVal = state.color;
     if (color) {
       if (typeof color === 'string') {
-        var convertedColor = convertStringToColor(color);
+        const convertedColor = convertStringToColor(color);
         if (convertedColor) {
           retVal = convertedColor;
         }
@@ -1169,13 +1021,13 @@ var Colorpicker = forwardRef(function (_ref, ref) {
     }
     return retVal;
   }, [color, isOpaque, state.color]);
-  useEffect(function () {
+  useEffect(() => {
     if (!areColorsEqual(previousStateColorRef.current, state.color) && !areColorsEqual(color, state.color)) {
       onChange && onChange(state.color);
     }
     previousStateColorRef.current = state.color;
   }, [color, onChange, state.color]);
-  useEffect(function () {
+  useEffect(() => {
     if (!areColorsEqual(computedColor, previousComputedColorRef.current)) {
       dispatch({
         type: 'RESET_COLOR',
@@ -1184,55 +1036,55 @@ var Colorpicker = forwardRef(function (_ref, ref) {
     }
     previousComputedColorRef.current = computedColor;
   }, [computedColor]);
-  var handleColorWellChange = useCallback(function (hsv) {
+  const handleColorWellChange = useCallback(hsv => {
     dispatch({
       type: 'SATURATION_CHANGE',
       payload: hsv
     });
   }, []);
-  var handleHueChange = useCallback(function (e) {
+  const handleHueChange = useCallback(e => {
     dispatch({
       type: 'HUE_CHANGE',
       payload: e.target.value
     });
   }, []);
-  var handleAlphaSliderChange = useCallback(function (e) {
+  const handleAlphaSliderChange = useCallback(e => {
     dispatch({
       type: 'ALPHA_SLIDER_CHANGE',
       payload: e.target.value
     });
   }, []);
-  var handleHexChange = useCallback(function (e) {
+  const handleHexChange = useCallback(e => {
     dispatch({
       type: 'HEX_CHANGE',
       payload: e.target.value
     });
   }, []);
-  var handleRedChange = useCallback(function (e) {
+  const handleRedChange = useCallback(e => {
     dispatch({
       type: 'RED_CHANGE',
       payload: e.target.value
     });
   }, []);
-  var handleGreenChange = useCallback(function (e) {
+  const handleGreenChange = useCallback(e => {
     dispatch({
       type: 'GREEN_CHANGE',
       payload: e.target.value
     });
   }, []);
-  var handleBlueChange = useCallback(function (e) {
+  const handleBlueChange = useCallback(e => {
     dispatch({
       type: 'BLUE_CHANGE',
       payload: e.target.value
     });
   }, []);
-  var handleAlphaChange = useCallback(function (e) {
+  const handleAlphaChange = useCallback(e => {
     dispatch({
       type: 'ALPHA_CHANGE',
       payload: e.target.value
     });
   }, []);
-  var handleBlur = useCallback(function () {
+  const handleBlur = useCallback(() => {
     dispatch({
       type: 'RESET_COLOR',
       payload: computedColor
@@ -1351,65 +1203,61 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
 };
 
-var _excluded$2 = ["color", "defaultColor", "placement", "onChange", "onClose", "labels", "hasArrow", "isAnimated", "isOpaque", "isOpen", "popperModifiers", "zIndex", "focusInset", "disabled", "buttonProps", "onDialogChange", "children"];
-var ColorpickerDialog = forwardRef(function (_ref, ref) {
-  var color = _ref.color,
-      defaultColor = _ref.defaultColor,
-      placement = _ref.placement,
-      onChange = _ref.onChange,
-      _onClose = _ref.onClose,
-      labels = _ref.labels,
-      hasArrow = _ref.hasArrow,
-      isAnimated = _ref.isAnimated,
-      isOpaque = _ref.isOpaque,
-      isOpen = _ref.isOpen,
-      popperModifiers = _ref.popperModifiers,
-      zIndex = _ref.zIndex,
-      focusInset = _ref.focusInset,
-      disabled = _ref.disabled,
-      buttonProps = _ref.buttonProps,
-      onDialogChange = _ref.onDialogChange,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-  var isControlled = color !== null && color !== undefined;
-  var isDialogControlled = isOpen !== undefined && isOpen !== null;
-  var buttonRef = useRef(null);
-  var colorPickerRef = useRef(null);
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      referenceElement = _useState2[0],
-      setReferenceElement = _useState2[1];
-  var _useState3 = useState(defaultColor),
-      _useState4 = _slicedToArray(_useState3, 2),
-      uncontrolledColor = _useState4[0],
-      setUncontrolledColor = _useState4[1];
-  var openDialog = function openDialog() {
+const ColorpickerDialog = forwardRef((_ref, ref) => {
+  let {
+    color,
+    defaultColor,
+    placement,
+    onChange,
+    onClose,
+    labels,
+    hasArrow,
+    isAnimated,
+    isOpaque,
+    isOpen,
+    popperModifiers,
+    zIndex,
+    focusInset,
+    disabled,
+    buttonProps,
+    onDialogChange,
+    children,
+    ...props
+  } = _ref;
+  const isControlled = color !== null && color !== undefined;
+  const isDialogControlled = isOpen !== undefined && isOpen !== null;
+  const buttonRef = useRef(null);
+  const colorPickerRef = useRef(null);
+  const [referenceElement, setReferenceElement] = useState();
+  const [uncontrolledColor, setUncontrolledColor] = useState(defaultColor);
+  const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
       isOpen: true
     });
   };
-  var closeDialog = function closeDialog() {
+  const closeDialog = () => {
     setReferenceElement(null);
     onDialogChange && onDialogChange({
       isOpen: false
     });
   };
-  var onClick = composeEventHandlers(props.onClick, function () {
+  const onClick = composeEventHandlers(props.onClick, () => {
     if (referenceElement) {
       closeDialog();
     } else {
       openDialog();
     }
   });
-  useEffect(function () {
+  useEffect(() => {
     if (isDialogControlled) {
       if (isOpen) {
         setReferenceElement(buttonRef.current);
@@ -1419,7 +1267,7 @@ var ColorpickerDialog = forwardRef(function (_ref, ref) {
     }
   }, [isOpen, isDialogControlled]);
   return React__default.createElement(React__default.Fragment, null, children ? cloneElement(Children.only(children), {
-    onClick: onClick,
+    onClick,
     ref: buttonRef
   }) : React__default.createElement(StyledButton, _extends$2({
     disabled: disabled,
@@ -1440,9 +1288,9 @@ var ColorpickerDialog = forwardRef(function (_ref, ref) {
     focusOnMount: false,
     placement: placement,
     referenceElement: referenceElement,
-    onClose: function onClose() {
+    onClose: () => {
       closeDialog();
-      _onClose && _onClose(isControlled ? color : uncontrolledColor);
+      onClose && onClose(isControlled ? color : uncontrolledColor);
     }
   }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(Colorpicker, {
     autofocus: true,
@@ -1454,7 +1302,8 @@ var ColorpickerDialog = forwardRef(function (_ref, ref) {
     onChange: isControlled ? onChange : setUncontrolledColor
   }))));
 });
-ColorpickerDialog.propTypes = _objectSpread2(_objectSpread2({}, Colorpicker.propTypes), {}, {
+ColorpickerDialog.propTypes = {
+  ...Colorpicker.propTypes,
   placement: PropTypes.oneOf(PLACEMENT),
   onClose: PropTypes.func,
   onDialogChange: PropTypes.func,
@@ -1467,7 +1316,7 @@ ColorpickerDialog.propTypes = _objectSpread2(_objectSpread2({}, Colorpicker.prop
   isAnimated: PropTypes.bool,
   isOpen: PropTypes.bool,
   focusInset: PropTypes.bool
-});
+};
 ColorpickerDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,
@@ -1487,7 +1336,8 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -1498,52 +1348,56 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
   })));
 };
 
-var _excluded$1 = ["colors"],
-    _excluded2 = ["aria-selected"];
-var ColorSwatch = forwardRef(function (_ref, ref) {
-  var colors = _ref.colors,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var _useContext = useContext(ThemeContext),
-      rtl = _useContext.rtl;
-  var _useGrid = useGrid(_objectSpread2({
-    rtl: rtl,
+const ColorSwatch = forwardRef((_ref, ref) => {
+  let {
+    colors,
+    ...props
+  } = _ref;
+  const {
+    rtl
+  } = useContext(ThemeContext);
+  const {
+    getGridCellProps
+  } = useGrid({
+    rtl,
     matrix: colors,
     selection: true,
     wrap: true,
-    idPrefix: useId()
-  }, props)),
-      getGridCellProps = _useGrid.getGridCellProps;
+    idPrefix: useId(),
+    ...props
+  });
   return React__default.createElement(StyledColorSwatch, {
     ref: ref
-  }, React__default.createElement("tbody", null, colors.map(function (row, rowIdx) {
-    return React__default.createElement("tr", {
-      key: row[0].value
-    }, row.map(function (color, colIdx) {
-      var label = color.label,
-          value = color.value;
-      var _getGridCellProps = getGridCellProps({
-        colIdx: colIdx,
-        rowIdx: rowIdx,
-        type: 'button',
-        role: undefined
-      }),
-          ariaSelected = _getGridCellProps['aria-selected'],
-          other = _objectWithoutProperties(_getGridCellProps, _excluded2);
-      return React__default.createElement(StyledCell, {
-        key: value,
-        "aria-selected": ariaSelected
-      }, React__default.createElement(Tooltip, {
-        content: label
-      }, React__default.createElement(StyledSwatchButton, _extends$2({
-        backgroundColor: value,
-        "aria-pressed": ariaSelected,
-        "aria-label": label
-      }, other), React__default.createElement(StyledIcon, {
-        color: value,
-        selected: ariaSelected
-      }, React__default.createElement(SvgCheckSmFill, null)))));
-    }));
-  })));
+  }, React__default.createElement("tbody", null, colors.map((row, rowIdx) => React__default.createElement("tr", {
+    key: row[0].value
+  }, row.map((color, colIdx) => {
+    const {
+      label,
+      value
+    } = color;
+    const {
+      'aria-selected': ariaSelected,
+      ...other
+    } = getGridCellProps({
+      colIdx,
+      rowIdx,
+      type: 'button',
+      role: undefined
+    });
+    return React__default.createElement(StyledCell, {
+      key: value,
+      "aria-selected": ariaSelected
+    }, React__default.createElement(Tooltip, {
+      content: label
+    }, React__default.createElement(StyledSwatchButton, _extends$2({
+      backgroundColor: value,
+      "aria-pressed": ariaSelected,
+      "aria-label": label
+    }, other), React__default.createElement(StyledIcon, {
+      color: value,
+      selected: ariaSelected
+    }, React__default.createElement(SvgCheckSmFill, null)))));
+  })))));
 });
 ColorSwatch.displayName = 'ColorSwatch';
 ColorSwatch.propTypes = {
@@ -1560,59 +1414,45 @@ ColorSwatch.propTypes = {
   onSelect: PropTypes.func
 };
 
-var _excluded = ["colors", "rowIndex", "colIndex", "selectedRowIndex", "selectedColIndex", "defaultRowIndex", "defaultColIndex", "defaultSelectedRowIndex", "defaultSelectedColIndex", "placement", "onChange", "onSelect", "hasArrow", "isAnimated", "popperModifiers", "zIndex", "isOpen", "focusInset", "disabled", "buttonProps", "onDialogChange", "children"];
-var ColorSwatchDialog = forwardRef(function (_ref, ref) {
+const ColorSwatchDialog = forwardRef((_ref, ref) => {
   var _controlledSelectedCo, _uncontrolledSelected;
-  var colors = _ref.colors,
-      rowIndex = _ref.rowIndex,
-      colIndex = _ref.colIndex,
-      selectedRowIndex = _ref.selectedRowIndex,
-      selectedColIndex = _ref.selectedColIndex,
-      defaultRowIndex = _ref.defaultRowIndex,
-      defaultColIndex = _ref.defaultColIndex,
-      defaultSelectedRowIndex = _ref.defaultSelectedRowIndex,
-      defaultSelectedColIndex = _ref.defaultSelectedColIndex,
-      placement = _ref.placement,
-      _onChange = _ref.onChange,
-      _onSelect = _ref.onSelect,
-      hasArrow = _ref.hasArrow,
-      isAnimated = _ref.isAnimated,
-      popperModifiers = _ref.popperModifiers,
-      zIndex = _ref.zIndex,
-      isOpen = _ref.isOpen,
-      focusInset = _ref.focusInset,
-      disabled = _ref.disabled,
-      buttonProps = _ref.buttonProps,
-      onDialogChange = _ref.onDialogChange,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-  var controlledFocus = rowIndex !== null && colIndex !== null && rowIndex !== undefined && colIndex !== undefined;
-  var controlledSelect = selectedRowIndex !== null && selectedColIndex !== null && selectedRowIndex !== undefined && selectedColIndex !== undefined;
-  var isControlled = controlledFocus || controlledSelect;
-  var isDialogControlled = isOpen !== undefined && isOpen !== null;
-  var buttonRef = useRef(null);
-  var colorSwatchRef = useRef(null);
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      referenceElement = _useState2[0],
-      setReferenceElement = _useState2[1];
-  var _useState3 = useState(defaultSelectedRowIndex || 0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      uncontrolledSelectedRowIndex = _useState4[0],
-      setUncontrolledSelectedRowIndex = _useState4[1];
-  var _useState5 = useState(defaultSelectedColIndex || 0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      uncontrolledSelectedColIndex = _useState6[0],
-      setUncontrolledSelectedColIndex = _useState6[1];
-  var _useState7 = useState(defaultRowIndex || 0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      uncontrolledRowIndex = _useState8[0],
-      setUncontrolledRowIndex = _useState8[1];
-  var _useState9 = useState(defaultColIndex || 0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      uncontrolledColIndex = _useState10[0],
-      setUncontrolledColIndex = _useState10[1];
-  useEffect(function () {
+  let {
+    colors,
+    rowIndex,
+    colIndex,
+    selectedRowIndex,
+    selectedColIndex,
+    defaultRowIndex,
+    defaultColIndex,
+    defaultSelectedRowIndex,
+    defaultSelectedColIndex,
+    placement,
+    onChange,
+    onSelect,
+    hasArrow,
+    isAnimated,
+    popperModifiers,
+    zIndex,
+    isOpen,
+    focusInset,
+    disabled,
+    buttonProps,
+    onDialogChange,
+    children,
+    ...props
+  } = _ref;
+  const controlledFocus = rowIndex !== null && colIndex !== null && rowIndex !== undefined && colIndex !== undefined;
+  const controlledSelect = selectedRowIndex !== null && selectedColIndex !== null && selectedRowIndex !== undefined && selectedColIndex !== undefined;
+  const isControlled = controlledFocus || controlledSelect;
+  const isDialogControlled = isOpen !== undefined && isOpen !== null;
+  const buttonRef = useRef(null);
+  const colorSwatchRef = useRef(null);
+  const [referenceElement, setReferenceElement] = useState();
+  const [uncontrolledSelectedRowIndex, setUncontrolledSelectedRowIndex] = useState(defaultSelectedRowIndex || 0);
+  const [uncontrolledSelectedColIndex, setUncontrolledSelectedColIndex] = useState(defaultSelectedColIndex || 0);
+  const [uncontrolledRowIndex, setUncontrolledRowIndex] = useState(defaultRowIndex || 0);
+  const [uncontrolledColIndex, setUncontrolledColIndex] = useState(defaultColIndex || 0);
+  useEffect(() => {
     if (isDialogControlled) {
       if (isOpen) {
         setReferenceElement(buttonRef.current);
@@ -1621,21 +1461,21 @@ var ColorSwatchDialog = forwardRef(function (_ref, ref) {
       }
     }
   }, [isOpen, isDialogControlled]);
-  var uncontrolledSelectedColor;
-  var controlledSelectedColor;
+  let uncontrolledSelectedColor;
+  let controlledSelectedColor;
   if (uncontrolledSelectedRowIndex > -1 && uncontrolledSelectedColIndex > -1) {
     uncontrolledSelectedColor = colors[uncontrolledSelectedRowIndex][uncontrolledSelectedColIndex];
   }
   if (selectedRowIndex !== undefined && selectedColIndex !== undefined && selectedRowIndex > -1 && selectedColIndex > -1) {
     controlledSelectedColor = colors[selectedRowIndex][selectedColIndex];
   }
-  var openDialog = function openDialog() {
+  const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
       isOpen: true
     });
   };
-  var closeDialog = function closeDialog() {
+  const closeDialog = () => {
     setUncontrolledRowIndex(uncontrolledSelectedRowIndex);
     setUncontrolledColIndex(uncontrolledSelectedColIndex);
     setReferenceElement(null);
@@ -1643,17 +1483,17 @@ var ColorSwatchDialog = forwardRef(function (_ref, ref) {
       isOpen: false
     });
   };
-  var onClick = composeEventHandlers(props.onClick, function () {
+  const onClick = composeEventHandlers(props.onClick, () => {
     if (referenceElement) {
       closeDialog();
     } else {
       openDialog();
     }
   });
-  useEffect(function () {
+  useEffect(() => {
     if (referenceElement && colorSwatchRef.current) {
-      var focusableButton = colorSwatchRef.current.querySelector('[tabindex="0"]');
-      var selectedCell = colorSwatchRef.current.querySelector('[aria-selected="true"]');
+      const focusableButton = colorSwatchRef.current.querySelector('[tabindex="0"]');
+      const selectedCell = colorSwatchRef.current.querySelector('[aria-selected="true"]');
       if (selectedCell) {
         selectedCell.children[0].focus();
       } else {
@@ -1662,7 +1502,7 @@ var ColorSwatchDialog = forwardRef(function (_ref, ref) {
     }
   }, [referenceElement]);
   return React__default.createElement(React__default.Fragment, null, children ? cloneElement(Children.only(children), {
-    onClick: onClick,
+    onClick,
     ref: buttonRef
   }) : React__default.createElement(StyledButton, _extends$2({
     disabled: disabled,
@@ -1694,23 +1534,24 @@ var ColorSwatchDialog = forwardRef(function (_ref, ref) {
     defaultColIndex: uncontrolledColIndex,
     defaultSelectedRowIndex: uncontrolledSelectedRowIndex,
     defaultSelectedColIndex: uncontrolledSelectedColIndex,
-    onChange: function onChange(rowIdx, colIdx) {
+    onChange: (rowIdx, colIdx) => {
       if (isControlled === false) {
         setUncontrolledRowIndex(rowIdx);
         setUncontrolledColIndex(colIdx);
       }
-      _onChange && _onChange(rowIdx, colIdx);
+      onChange && onChange(rowIdx, colIdx);
     },
-    onSelect: function onSelect(rowIdx, colIdx) {
+    onSelect: (rowIdx, colIdx) => {
       if (isControlled === false) {
         setUncontrolledSelectedRowIndex(rowIdx);
         setUncontrolledSelectedColIndex(colIdx);
       }
-      _onSelect && _onSelect(rowIdx, colIdx);
+      onSelect && onSelect(rowIdx, colIdx);
     }
   }))));
 });
-ColorSwatchDialog.propTypes = _objectSpread2(_objectSpread2({}, ColorSwatch.propTypes), {}, {
+ColorSwatchDialog.propTypes = {
+  ...ColorSwatch.propTypes,
   placement: PropTypes.oneOf(PLACEMENT),
   onDialogChange: PropTypes.func,
   disabled: PropTypes.bool,
@@ -1721,7 +1562,7 @@ ColorSwatchDialog.propTypes = _objectSpread2(_objectSpread2({}, ColorSwatch.prop
   isAnimated: PropTypes.bool,
   focusInset: PropTypes.bool,
   isOpen: PropTypes.bool
-});
+};
 ColorSwatchDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,