@airtable/blocks 0.0.0-experimental-f52bc4e5e-20250709 → 0.0.0-experimental-75d011284-20250904

package/dist/cjs/base/ui/color_palette.js

@@ -1,26 +1,9 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sharedColorPalettePropTypes = exports.default = exports.colorPaletteStylePropTypes = exports.ColorPalette = void 0;
-require("core-js/modules/es.array.map.js");
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = exports.ColorPalette = void 0;
 var _emotion = require("emotion");
 var React = _interopRequireWildcard(require("react"));
 var _core = require("@styled-system/core");
@@ -32,16 +15,14 @@ var _icon = _interopRequireDefault(require("./icon"));
 var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
 var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
 var _system = require("./system");
-var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @module @airtable/blocks/ui: ColorPalette */ /** */
-var MIN_COLOR_SQUARE_SIZE = 16;
-var DEFAULT_COLOR_SQUARE_SIZE = 24;
-var MAX_COLOR_SQUARE_SIZE = 32;
+/** @module @airtable/blocks/ui: ColorPalette */ /** */
+
+const MIN_COLOR_SQUARE_SIZE = 16;
+const DEFAULT_COLOR_SQUARE_SIZE = 24;
+const MAX_COLOR_SQUARE_SIZE = 32;
 
 // TODO: it's confusing that this expects color names, but other components
 // expect a CSS color string.
@@ -58,22 +39,12 @@ var MAX_COLOR_SQUARE_SIZE = 32;
  * @noInheritDoc
  */
 
-var styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
-var colorPaletteStylePropTypes = exports.colorPaletteStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
 
 /**
  * Props shared between the {@link ColorPalette} and {@link ColorPaletteSynced} components.
  */
 
-var sharedColorPalettePropTypes = exports.sharedColorPalettePropTypes = _objectSpread({
-  allowedColors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  onChange: _propTypes.default.func,
-  squareMargin: _propTypes.default.number,
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  disabled: _propTypes.default.bool
-}, _tooltip_anchor_props.tooltipAnchorPropTypes);
-
 /**
  * Props for the {@link ColorPalette} component. Also accepts:
  * * {@link ColorPaletteStyleProps}
@@ -82,6 +53,7 @@ var sharedColorPalettePropTypes = exports.sharedColorPalettePropTypes = _objectS
  */
 
 /** @hidden */
+
 /**
  * A color selection component. Accepts a list of `allowedColors` to be displayed
  * as selectable color squares.
@@ -91,149 +63,134 @@ var sharedColorPalettePropTypes = exports.sharedColorPalettePropTypes = _objectS
  * @component
  * @docsPath UI/components/ColorPalette
  */
-var ColorPalette = exports.ColorPalette = /*#__PURE__*/function (_React$Component) {
+class ColorPalette extends React.Component {
+  /** @hidden */
+  static defaultProps = {
+    squareMargin: 4,
+    className: '',
+    style: {}
+  };
+  /** @internal */
+
+  /** @internal */
+
   /** @hidden */
-  function ColorPalette(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, ColorPalette);
-    _this = _callSuper(this, ColorPalette, [props]);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_detectElementResize", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_colorPaletteContainerRef", void 0);
-    _this._detectElementResize = (0, _create_detect_element_resize.default)();
-    _this._colorPaletteContainerRef = /*#__PURE__*/React.createRef();
-    _this._setColorSquareSize = _this._setColorSquareSize.bind(_this);
-    _this.state = {
+  constructor(props) {
+    super(props);
+    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._colorPaletteContainerRef = /*#__PURE__*/React.createRef();
+    this._setColorSquareSize = this._setColorSquareSize.bind(this);
+    this.state = {
       squareSize: DEFAULT_COLOR_SQUARE_SIZE
     };
-    return _this;
   }
   /** @hidden */
-  (0, _inherits2.default)(ColorPalette, _React$Component);
-  return (0, _createClass2.default)(ColorPalette, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this._colorPaletteContainerRef.current) {
-        this._detectElementResize.addResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
-      }
-      this._setColorSquareSize();
+  componentDidMount() {
+    if (this._colorPaletteContainerRef.current) {
+      this._detectElementResize.addResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
     }
-    /** @hidden */
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._colorPaletteContainerRef.current) {
-        this._detectElementResize.removeResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
-      }
+    this._setColorSquareSize();
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    if (this._colorPaletteContainerRef.current) {
+      this._detectElementResize.removeResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
     }
-    /** @hidden */
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.allowedColors.length !== prevProps.allowedColors.length) {
-        this._setColorSquareSize();
-      }
+  }
+  /** @hidden */
+  componentDidUpdate(prevProps) {
+    if (this.props.allowedColors.length !== prevProps.allowedColors.length) {
+      this._setColorSquareSize();
     }
-    // Attempts to fit all `allowedColors` onto one line by adjusting color square size.
-    /** @internal */
-  }, {
-    key: "_setColorSquareSize",
-    value: function _setColorSquareSize() {
-      var squareMargin = this.props.squareMargin;
-      (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-      (0, _error_utils.invariant)(this._colorPaletteContainerRef.current, 'No container to set color square size');
+  }
+  // Attempts to fit all `allowedColors` onto one line by adjusting color square size.
+  /** @internal */
+  _setColorSquareSize() {
+    const {
+      squareMargin
+    } = this.props;
+    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
+    (0, _error_utils.invariant)(this._colorPaletteContainerRef.current, 'No container to set color square size');
 
-      // Calculates the size of each square required to fit `numSquares` squares on one line.
-      var calculateSquareSize = numSquares => {
-        return (containerWidth - squareMargin * 2 * numSquares) / numSquares;
-      };
-      var containerWidth = this._colorPaletteContainerRef.current.getBoundingClientRect().width;
-      var numColors = this.props.allowedColors.length;
-      var calculatedSquareSize = calculateSquareSize(numColors);
-      var squareSize;
-      // If we can't fit them all in one line, find the closest square size to the default that
-      // fills the row and let flexbox wrap the remainder
-      if (calculatedSquareSize < MIN_COLOR_SQUARE_SIZE) {
-        var numColorsThatWillFitAsDefaultSize = Math.round((containerWidth + 2 * squareMargin) / (DEFAULT_COLOR_SQUARE_SIZE + 2 * squareMargin));
-        squareSize = squareSize = numColorsThatWillFitAsDefaultSize === 0 ? DEFAULT_COLOR_SQUARE_SIZE : calculateSquareSize(numColorsThatWillFitAsDefaultSize);
-      } else {
-        squareSize = Math.min(MAX_COLOR_SQUARE_SIZE, calculatedSquareSize);
-      }
-      this.setState({
-        squareSize
-      });
-    }
-    /** @internal */
-  }, {
-    key: "_onChange",
-    value: function _onChange(color) {
-      if (this.props.onChange) {
-        this.props.onChange(color);
-      }
+    // Calculates the size of each square required to fit `numSquares` squares on one line.
+    const calculateSquareSize = numSquares => {
+      return (containerWidth - squareMargin * 2 * numSquares) / numSquares;
+    };
+    const containerWidth = this._colorPaletteContainerRef.current.getBoundingClientRect().width;
+    const numColors = this.props.allowedColors.length;
+    const calculatedSquareSize = calculateSquareSize(numColors);
+    let squareSize;
+    // If we can't fit them all in one line, find the closest square size to the default that
+    // fills the row and let flexbox wrap the remainder
+    if (calculatedSquareSize < MIN_COLOR_SQUARE_SIZE) {
+      const numColorsThatWillFitAsDefaultSize = Math.round((containerWidth + 2 * squareMargin) / (DEFAULT_COLOR_SQUARE_SIZE + 2 * squareMargin));
+      squareSize = squareSize = numColorsThatWillFitAsDefaultSize === 0 ? DEFAULT_COLOR_SQUARE_SIZE : calculateSquareSize(numColorsThatWillFitAsDefaultSize);
+    } else {
+      squareSize = Math.min(MAX_COLOR_SQUARE_SIZE, calculatedSquareSize);
     }
-    /** @hidden */
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        color = _this$props.color,
-        allowedColors = _this$props.allowedColors,
-        squareMargin = _this$props.squareMargin,
-        onMouseEnter = _this$props.onMouseEnter,
-        onMouseLeave = _this$props.onMouseLeave,
-        onClick = _this$props.onClick,
-        className = _this$props.className,
-        style = _this$props.style,
-        disabled = _this$props.disabled;
-      var squareSize = this.state.squareSize;
-      (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-      return /*#__PURE__*/React.createElement(_box.default
-      // TODO (stephen): remove tooltip anchor props
-      , {
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-        onClick: onClick,
-        className: className,
-        style: style,
-        overflow: "hidden"
-      }, /*#__PURE__*/React.createElement(_box.default, {
-        ref: this._colorPaletteContainerRef,
-        display: "flex",
-        flexWrap: "wrap"
-        // Add a negative margin to offset the margin of each swatch,
-        // so the color swatches are flush with the outer container.
-        ,
-        margin: "".concat(-squareMargin, "px")
-      }, allowedColors.map(allowedColor => /*#__PURE__*/React.createElement("label", {
-        key: allowedColor,
-        onClick: disabled ? undefined : () => this._onChange(allowedColor),
-        style: {
-          backgroundColor: _color_utils.default.getHexForColor(allowedColor) || undefined,
-          height: squareSize,
-          width: squareSize,
-          margin: squareMargin
-        },
-        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('rounded flex items-center justify-center'), {
-          [(0, _baymax_utils.baymax)('pointer link-quiet')]: !disabled,
-          [(0, _baymax_utils.baymax)('quieter')]: !!disabled
-        })
-      }, allowedColor === color && /*#__PURE__*/React.createElement(_icon.default, {
-        name: "check",
-        size: squareSize,
-        className: (0, _baymax_utils.baymax)(_color_utils.default.shouldUseLightTextOnColor(allowedColor) ? 'text-white' : 'text-dark')
-      })))));
+    this.setState({
+      squareSize
+    });
+  }
+  /** @internal */
+  _onChange(color) {
+    if (this.props.onChange) {
+      this.props.onChange(color);
     }
-  }]);
-}(React.Component);
-/** @hidden */
-(0, _defineProperty2.default)(ColorPalette, "propTypes", _objectSpread({
-  color: _propTypes.default.string
-}, sharedColorPalettePropTypes));
-/** @hidden */
-(0, _defineProperty2.default)(ColorPalette, "defaultProps", {
-  squareMargin: 4,
-  className: '',
-  style: {}
-});
-var _default = exports.default = (0, _with_styled_system.default)(ColorPalette, styleParser, colorPaletteStylePropTypes);
+  }
+  /** @hidden */
+  render() {
+    const {
+      color,
+      allowedColors,
+      squareMargin,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      className,
+      style,
+      disabled
+    } = this.props;
+    const {
+      squareSize
+    } = this.state;
+    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
+    return /*#__PURE__*/React.createElement(_box.default
+    // TODO (stephen): remove tooltip anchor props
+    , {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClick,
+      className: className,
+      style: style,
+      overflow: "hidden"
+    }, /*#__PURE__*/React.createElement(_box.default, {
+      ref: this._colorPaletteContainerRef,
+      display: "flex",
+      flexWrap: "wrap"
+      // Add a negative margin to offset the margin of each swatch,
+      // so the color swatches are flush with the outer container.
+      ,
+      margin: `${-squareMargin}px`
+    }, allowedColors.map(allowedColor => /*#__PURE__*/React.createElement("label", {
+      key: allowedColor,
+      onClick: disabled ? undefined : () => this._onChange(allowedColor),
+      style: {
+        backgroundColor: _color_utils.default.getHexForColor(allowedColor) || undefined,
+        height: squareSize,
+        width: squareSize,
+        margin: squareMargin
+      },
+      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('rounded flex items-center justify-center'), {
+        [(0, _baymax_utils.baymax)('pointer link-quiet')]: !disabled,
+        [(0, _baymax_utils.baymax)('quieter')]: !!disabled
+      })
+    }, allowedColor === color && /*#__PURE__*/React.createElement(_icon.default, {
+      name: "check",
+      size: squareSize,
+      className: (0, _baymax_utils.baymax)(_color_utils.default.shouldUseLightTextOnColor(allowedColor) ? 'text-white' : 'text-dark')
+    })))));
+  }
+}
+exports.ColorPalette = ColorPalette;
+var _default = exports.default = (0, _with_styled_system.default)(ColorPalette, styleParser, {});

package/dist/cjs/base/ui/color_palette_synced.js

@@ -1,38 +1,17 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _error_utils = require("../../shared/error_utils");
-var _global_config_synced_component_helpers = _interopRequireDefault(require("../../shared/ui/global_config_synced_component_helpers"));
 var _synced = _interopRequireDefault(require("./synced"));
-var _color_palette = _interopRequireWildcard(require("./color_palette"));
-var _excluded = ["globalConfigKey", "disabled", "onChange"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+var _color_palette = _interopRequireDefault(require("./color_palette"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @module @airtable/blocks/ui: ColorPalette */ /** */
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: ColorPalette */ /** */
 /**
  * Props for the {@link ColorPaletteSynced} component. Also accepts:
  * * {@link ColorPaletteStyleProps}
@@ -40,6 +19,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @docsPath UI/components/ColorPaletteSynced
  * @groupPath UI/components/ColorPalette
  */
+
 /**
  * A wrapper around the {@link ColorPalette} component that syncs with {@link GlobalConfig}.
  *
@@ -49,50 +29,41 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @docsPath UI/components/ColorPaletteSynced
  * @groupPath UI/components/ColorPalette
  */
-var ColorPaletteSynced = /*#__PURE__*/function (_React$Component) {
-  function ColorPaletteSynced() {
-    (0, _classCallCheck2.default)(this, ColorPaletteSynced);
-    return _callSuper(this, ColorPaletteSynced, arguments);
-  }
-  (0, _inherits2.default)(ColorPaletteSynced, _React$Component);
-  return (0, _createClass2.default)(ColorPaletteSynced, [{
-    key: "render",
-    value: /** @hidden */
-    function render() {
-      var _this$props = this.props,
-        globalConfigKey = _this$props.globalConfigKey,
-        disabled = _this$props.disabled,
-        _onChange = _this$props.onChange,
-        restOfProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(_synced.default, {
-        globalConfigKey: globalConfigKey,
-        render: _ref => {
-          var value = _ref.value,
-            canSetValue = _ref.canSetValue,
-            setValue = _ref.setValue;
-          var currentColor;
-          if (typeof value === 'string' || value === null || value === undefined) {
-            currentColor = value;
-          } else {
-            (0, _error_utils.spawnError)('ColorPaletteSynced only works with a global config value that is a string, null, or undefined');
-          }
-          return /*#__PURE__*/React.createElement(_color_palette.default, (0, _extends2.default)({}, restOfProps, {
-            color: currentColor,
-            onChange: newValue => {
-              setValue(newValue);
-              if (_onChange) {
-                _onChange(newValue);
-              }
-            },
-            disabled: disabled || !canSetValue
-          }));
+class ColorPaletteSynced extends React.Component {
+  /** @hidden */
+  render() {
+    const {
+      globalConfigKey,
+      disabled,
+      onChange,
+      ...restOfProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(_synced.default, {
+      globalConfigKey: globalConfigKey,
+      render: _ref => {
+        let {
+          value,
+          canSetValue,
+          setValue
+        } = _ref;
+        let currentColor;
+        if (typeof value === 'string' || value === null || value === undefined) {
+          currentColor = value;
+        } else {
+          (0, _error_utils.spawnError)('ColorPaletteSynced only works with a global config value that is a string, null, or undefined');
         }
-      });
-    }
-  }]);
-}(React.Component);
-/** @hidden */
-(0, _defineProperty2.default)(ColorPaletteSynced, "propTypes", _objectSpread(_objectSpread({
-  globalConfigKey: _global_config_synced_component_helpers.default.globalConfigKeyPropType
-}, _color_palette.colorPaletteStylePropTypes), _color_palette.sharedColorPalettePropTypes));
+        return /*#__PURE__*/React.createElement(_color_palette.default, _extends({}, restOfProps, {
+          color: currentColor,
+          onChange: newValue => {
+            setValue(newValue);
+            if (onChange) {
+              onChange(newValue);
+            }
+          },
+          disabled: disabled || !canSetValue
+        }));
+      }
+    });
+  }
+}
 var _default = exports.default = ColorPaletteSynced;