@atlaskit/color-picker 3.1.9 → 3.2.0

package/dist/es2019/components/components.js

@@ -1,24 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+/** @jsx jsx */
+
 import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
-import { ColorPaletteContainer, ColorCardWrapper } from '../styled/ColorPalette';
+import { COLOR_CARD_SIZE } from '../constants';
+import { css, jsx } from '@emotion/react';
 export const MenuList = props => {
   const {
-    cx,
     selectProps: {
       cols
     },
     innerRef,
-    ...rest
+    children
   } = props;
-  return /*#__PURE__*/React.createElement(ColorPaletteContainer, _extends({
+  return jsx("div", {
+    css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
       maxWidth: cols ? getWidth(cols) : undefined
     },
-    innerRef: innerRef
-  }, rest));
+    ref: innerRef
+  }, children);
 };
 export const Option = props => {
   const {
@@ -35,20 +37,28 @@ export const Option = props => {
     isSelected,
     innerProps
   } = props;
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error - known issue: https://github.com/mui/material-ui/issues/13921. TS treats styled components to be different from HTMLDivElement
-    React.createElement(ColorCardWrapper, innerProps, /*#__PURE__*/React.createElement(ColorCard, {
-      label: label,
-      value: value,
-      checkMarkColor: checkMarkColor,
-      isOption: true,
-      focused: isFocused,
-      selected: isSelected,
-      onKeyDown: value => onOptionKeyDown(value),
-      isTabbing: isTabbing
-    }))
-  );
+  return jsx("div", _extends({
+    css: colorCardWrapperStyles
+  }, innerProps), jsx(ColorCard, {
+    label: label,
+    value: value,
+    checkMarkColor: checkMarkColor,
+    isOption: true,
+    focused: isFocused,
+    selected: isSelected,
+    onKeyDown: value => onOptionKeyDown(value),
+    isTabbing: isTabbing
+  }));
 };
 export const DropdownIndicator = () => null;
-export const Placeholder = () => null;
+export const Placeholder = () => null;
+const colorCardWrapperStyles = css({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: `${COLOR_CARD_SIZE}px`
+});
+const colorPaletteContainerStyles = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  padding: "var(--ds-space-050, 4px)"
+});

package/dist/es2019/utils.js

@@ -3,7 +3,11 @@
 import { gridSize } from '@atlaskit/theme';
 import { COLOR_CARD_SIZE } from './constants';
 import memoizeOne from 'memoize-one';
-export const getWidth = cols => cols * (COLOR_CARD_SIZE + gridSize() / 2);
+import { Mode } from './types';
+export const getWidth = (cols, mode) => {
+  const width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
+  return mode === Mode.Standard ? width + gridSize() : width;
+};
 export const getOptions = memoizeOne((palette, selectedColor) => {
   let focusedItemIndex = 0;
   const value = palette.find((color, index) => {

package/dist/esm/components/ColorCard.js

@@ -1,91 +1,95 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React from 'react';
-import { PureComponent } from 'react';
+/** @jsx jsx */
+import React, { useCallback } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors } from '@atlaskit/theme';
 import Tooltip from '@atlaskit/tooltip';
-import { ColorCardOption, ColorCardContent, ColorCardContentCheckMark } from '../styled/ColorCard';
-import { KEY_SPACE, KEY_ENTER } from '../constants';
-var ColorCard = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ColorCard, _PureComponent);
-  var _super = _createSuper(ColorCard);
-  function ColorCard() {
-    var _this;
-    _classCallCheck(this, ColorCard);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+import { COLOR_CARD_SIZE, KEY_ENTER, KEY_SPACE } from '../constants';
+import { css, jsx } from '@emotion/react';
+import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
+var ColorCard = function ColorCard(props) {
+  var value = props.value,
+    label = props.label,
+    selected = props.selected,
+    focused = props.focused,
+    _props$checkMarkColor = props.checkMarkColor,
+    checkMarkColor = _props$checkMarkColor === void 0 ? "var(--ds-icon-inverse, ".concat(N0, ")") : _props$checkMarkColor,
+    isTabbing = props.isTabbing,
+    onClick = props.onClick,
+    onKeyDown = props.onKeyDown;
+  var handleMouseDown = useCallback(function (event) {
+    event.preventDefault();
+  }, []);
+  var handleClick = useCallback(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      onClick(value);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (event) {
+  }, [onClick, value]);
+  var handleKeyDown = useCallback(function (event) {
+    var key = event.key;
+    if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
       event.preventDefault();
-    });
-    _defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
-      var _this$props = _this.props,
-        onClick = _this$props.onClick,
-        value = _this$props.value;
-      if (onClick) {
-        event.preventDefault();
-        onClick(value);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
-      var key = event.key;
-      var _this$props2 = _this.props,
-        onKeyDown = _this$props2.onKeyDown,
-        value = _this$props2.value,
-        isTabbing = _this$props2.isTabbing;
-      if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
-        event.preventDefault();
-        if (isTabbing) {
-          event.stopPropagation();
-        }
-        onKeyDown(value);
+      if (isTabbing) {
+        event.stopPropagation();
       }
-    });
-    _defineProperty(_assertThisInitialized(_this), "ref", /*#__PURE__*/React.createRef());
-    return _this;
-  }
-  _createClass(ColorCard, [{
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-        value = _this$props3.value,
-        label = _this$props3.label,
-        selected = _this$props3.selected,
-        focused = _this$props3.focused,
-        _this$props3$checkMar = _this$props3.checkMarkColor,
-        checkMarkColor = _this$props3$checkMar === void 0 ? colors.N0 : _this$props3$checkMar,
-        isTabbing = _this$props3.isTabbing;
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: label
-      }, /*#__PURE__*/React.createElement(ColorCardOption, {
-        onClick: this.onClick,
-        onMouseDown: this.onMouseDown,
-        focused: focused,
-        role: "radio",
-        "aria-checked": selected,
-        "aria-label": label,
-        tabIndex: 0,
-        onKeyDown: this.onKeyDown,
-        isTabbing: isTabbing
-      }, /*#__PURE__*/React.createElement(ColorCardContent, {
-        color: value || 'transparent'
-      }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {
-        primaryColor: checkMarkColor,
-        label: ""
-      })))));
+      onKeyDown(value);
     }
-  }]);
-  return ColorCard;
-}(PureComponent);
-export { ColorCard as default };
+  }, [isTabbing, onKeyDown, value]);
+  return jsx(Tooltip, {
+    content: label
+  }, jsx("div", {
+    css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyDown: handleKeyDown,
+    role: "radio",
+    "aria-checked": selected,
+    "aria-label": label,
+    tabIndex: 0
+  }, jsx("div", {
+    css: colorCardContentStyles,
+    style: {
+      background: value || 'transparent'
+    }
+  }, selected && jsx("div", {
+    css: colorCardContentCheckMarkStyles
+  }, jsx(EditorDoneIcon, {
+    primaryColor: checkMarkColor,
+    label: ""
+  })))));
+};
+export default ColorCard;
+var sharedColorContainerStyles = css({
+  display: 'inline-block',
+  position: 'relative',
+  width: "".concat(COLOR_CARD_SIZE, "px"),
+  height: "".concat(COLOR_CARD_SIZE, "px"),
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: '6px',
+  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
+  borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
+  padding: "var(--ds-space-0, 0px)",
+  cursor: 'pointer',
+  outline: 'none'
+});
+var colorCardOptionTabbingStyles = css({
+  ':hover, :focus': {
+    borderColor: "var(--ds-border-focused, ".concat(B75, ")")
+  }
+});
+var colorCardOptionFocusedStyles = css({
+  borderColor: "var(--ds-border-focused, ".concat(B75, ")")
+});
+var colorCardContentStyles = css({
+  position: 'absolute',
+  top: '1px',
+  left: '1px',
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
+});
+var colorCardContentCheckMarkStyles = css({
+  margin: '1px'
+});

package/dist/esm/components/ColorPaletteMenu.js

@@ -1,97 +1,96 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React from 'react';
+/** @jsx jsx */
 import { Mode } from '../types';
-import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
-import { ColorCardWrapper, ColorPaletteMenu, ColorPaletteContainer } from '../styled/ColorPalette';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import ColorCard from './ColorCard';
-import { getOptions } from '../utils';
-export var ColorPaletteMenuWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  _inherits(ColorPaletteMenuWithoutAnalytics, _React$Component);
-  var _super = _createSuper(ColorPaletteMenuWithoutAnalytics);
-  function ColorPaletteMenuWithoutAnalytics() {
-    var _this;
-    _classCallCheck(this, ColorPaletteMenuWithoutAnalytics);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+import { getOptions, getWidth } from '../utils';
+import { css, jsx } from '@emotion/react';
+import { COLOR_CARD_SIZE } from '../constants';
+import { N0, N40 } from '@atlaskit/theme/colors';
+export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
+  var createAnalyticsEvent = _ref.createAnalyticsEvent,
+    onChange = _ref.onChange,
+    palette = _ref.palette,
+    selectedColor = _ref.selectedColor,
+    checkMarkColor = _ref.checkMarkColor,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Color picker' : _ref$label,
+    _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 6 : _ref$cols,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? Mode.Standard : _ref$mode;
+  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+  var changeAnalyticsCaller = function changeAnalyticsCaller() {
+    if (createAnalyticsEvent) {
+      return createAndFireEventOnAtlaskit({
+        action: 'clicked',
+        actionSubject: 'color-palette-menu',
+        attributes: {
+          componentName: 'color-picker',
+          packageName: "@atlaskit/color-picker",
+          packageVersion: "3.2.0"
+        }
+      })(createAnalyticsEvent);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "createAndFireEventOnAtlaskit", createAndFireEvent('atlaskit'));
-    _defineProperty(_assertThisInitialized(_this), "changeAnalyticsCaller", function () {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-      if (createAnalyticsEvent) {
-        return _this.createAndFireEventOnAtlaskit({
-          action: 'clicked',
-          actionSubject: 'color-palette-menu',
-          attributes: {
-            componentName: 'color-picker',
-            packageName: "@atlaskit/color-picker",
-            packageVersion: "3.1.9"
-          }
-        })(createAnalyticsEvent);
-      }
-      return undefined;
-    });
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
-      _this.props.onChange(value, _this.changeAnalyticsCaller());
-    });
-    return _this;
-  }
-  _createClass(ColorPaletteMenuWithoutAnalytics, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        palette = _this$props.palette,
-        selectedColor = _this$props.selectedColor,
-        checkMarkColor = _this$props.checkMarkColor,
-        cols = _this$props.cols,
-        _this$props$label = _this$props.label,
-        label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
-        mode = _this$props.mode;
-      var _getOptions = getOptions(palette, selectedColor),
-        options = _getOptions.options,
-        selectedValue = _getOptions.value;
-      var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
-      return /*#__PURE__*/React.createElement(ColorPaletteMenu, {
-        cols: cols,
-        "aria-label": fullLabel,
-        mode: mode,
-        role: "radiogroup"
-      }, /*#__PURE__*/React.createElement(ColorPaletteContainer, {
-        mode: mode
-      }, options.map(function (_ref) {
-        var label = _ref.label,
-          value = _ref.value;
-        return /*#__PURE__*/React.createElement(ColorCardWrapper, {
-          key: value
-        }, /*#__PURE__*/React.createElement(ColorCard, {
-          label: label,
-          value: value,
-          checkMarkColor: checkMarkColor,
-          isOption: true,
-          selected: value === selectedValue.value,
-          onClick: _this2.onChange,
-          onKeyDown: _this2.onChange
-        }));
-      })));
+    return undefined;
+  };
+  var handleChange = function handleChange(value) {
+    onChange(value, changeAnalyticsCaller());
+  };
+  var _getOptions = getOptions(palette, selectedColor),
+    options = _getOptions.options,
+    selectedValue = _getOptions.value;
+  var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
+  return jsx("div", {
+    "aria-label": fullLabel,
+    role: "radiogroup",
+    css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
+    style: {
+      width: "".concat(getWidth(cols, mode), "px")
     }
-  }]);
-  return ColorPaletteMenuWithoutAnalytics;
-}(React.Component);
-_defineProperty(ColorPaletteMenuWithoutAnalytics, "defaultProps", {
-  cols: 6,
-  mode: Mode.Standard
-});
+  }, jsx("div", {
+    css: [colorPaletteContainerStyles, mode === Mode.Compact && colorPaletteContainerCompactStyles]
+  }, options.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return jsx("div", {
+      css: colorCardWrapperStyles,
+      key: value
+    }, jsx(ColorCard, {
+      label: label,
+      value: value,
+      checkMarkColor: checkMarkColor,
+      isOption: true,
+      selected: value === selectedValue.value,
+      onClick: handleChange,
+      onKeyDown: handleChange
+    }));
+  })));
+};
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.1.9"
-})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
+  packageVersion: "3.2.0"
+})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
+var colorCardWrapperStyles = css({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "".concat(COLOR_CARD_SIZE, "px")
+});
+var colorPaletteContainerStyles = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  padding: "var(--ds-space-050, 4px)"
+});
+var colorPaletteContainerCompactStyles = css({
+  padding: "var(--ds-space-0, 0)"
+});
+var colorPaletteMenuStyles = css({
+  display: 'flex',
+  position: 'relative',
+  margin: "var(--ds-space-0, 0)",
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")")
+});
+var colorPaletteMenuStandardStyles = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N40, ", 0 0 8px ").concat(N40), ")")
+});

package/dist/esm/components/ColorPicker.js

@@ -8,14 +8,15 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
 import React from 'react';
 import { PopupSelect } from '@atlaskit/select';
 import Trigger from './Trigger';
 import * as components from './components';
-import { KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_TAB } from '../constants';
-import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
-import { ColorCardWrapper } from '../styled/ColorPicker';
+import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } from '../constants';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getOptions } from '../utils';
+import { css, jsx } from '@emotion/react';
 var defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -27,7 +28,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.1.9";
+var packageVersion = "3.2.0";
 export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);
@@ -93,13 +94,14 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
         options = _getOptions.options,
         value = _getOptions.value;
       var fullLabel = "".concat(label, ", ").concat(value.label, " selected");
-      return /*#__PURE__*/React.createElement(PopupSelect, {
+      return jsx(PopupSelect, {
         target: function target(_ref) {
           var ref = _ref.ref,
             isOpen = _ref.isOpen;
-          return /*#__PURE__*/React.createElement(ColorCardWrapper, {
-            innerRef: ref
-          }, /*#__PURE__*/React.createElement(Trigger, _extends({}, value, {
+          return jsx("div", {
+            css: colorCardWrapperStyles,
+            ref: ref
+          }, jsx(Trigger, _extends({}, value, {
             label: fullLabel,
             expanded: isOpen
           })));
@@ -131,4 +133,7 @@ export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: packageName,
   packageVersion: packageVersion
-})(withAnalyticsEvents()(ColorPickerWithoutAnalytics));
+})(withAnalyticsEvents()(ColorPickerWithoutAnalytics));
+var colorCardWrapperStyles = css({
+  display: 'inline-block'
+});

package/dist/esm/components/Trigger.js

@@ -1,60 +1,74 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React from 'react';
-import { ColorCardButton, ColorCardContent } from '../styled/ColorCard';
+/** @jsx jsx */
+import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
-var ColorCard = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ColorCard, _React$PureComponent);
-  var _super = _createSuper(ColorCard);
-  function ColorCard() {
-    var _this;
-    _classCallCheck(this, ColorCard);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (event) {
+import { css, jsx } from '@emotion/react';
+import { COLOR_CARD_SIZE } from '../constants';
+import { B100, DN600A, N0 } from '@atlaskit/theme/colors';
+var ColorCard = function ColorCard(_ref) {
+  var value = _ref.value,
+    label = _ref.label,
+    expanded = _ref.expanded,
+    onClick = _ref.onClick;
+  var handleMouseDown = useCallback(function (event) {
+    event.preventDefault();
+  }, []);
+  var handleClick = useCallback(function (event) {
+    event.currentTarget.focus();
+    if (onClick) {
       event.preventDefault();
-    });
-    _defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
-      var onClick = _this.props.onClick;
-      event.currentTarget.focus();
-      if (onClick) {
-        event.preventDefault();
-        onClick();
-      }
-    });
-    return _this;
-  }
-  _createClass(ColorCard, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        value = _this$props.value,
-        label = _this$props.label,
-        expanded = _this$props.expanded;
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: label
-      }, /*#__PURE__*/React.createElement(ColorCardButton, {
-        onClick: this.onClick,
-        onMouseDown: this.onMouseDown,
-        focused: expanded,
-        "aria-label": label,
-        "aria-expanded": expanded,
-        "aria-haspopup": true,
-        type: "button"
-      }, /*#__PURE__*/React.createElement(ColorCardContent, {
-        color: value || 'transparent'
-      })));
+      onClick();
     }
-  }]);
-  return ColorCard;
-}(React.PureComponent);
-export { ColorCard as default };
+  }, [onClick]);
+  return jsx(Tooltip, {
+    content: label
+  }, jsx("button", {
+    css: [sharedColorContainerStyles, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    "aria-label": label,
+    "aria-expanded": expanded,
+    "aria-haspopup": true,
+    type: "button"
+  }, jsx("span", {
+    css: colorCardContentStyles,
+    style: {
+      background: value || 'transparent'
+    }
+  })));
+};
+export default ColorCard;
+var sharedColorContainerStyles = css({
+  display: 'inline-block',
+  position: 'relative',
+  width: "".concat(COLOR_CARD_SIZE, "px"),
+  height: "".concat(COLOR_CARD_SIZE, "px"),
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: '6px',
+  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
+  borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
+  padding: "var(--ds-space-0, 0px)",
+  cursor: 'pointer',
+  outline: 'none'
+});
+var colorCardButtonStyles = css({
+  ':hover': {
+    borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")")
+  },
+  ':not(:focus):hover, :focus': {
+    borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+  }
+});
+var colorCardButtonFocusedStyles = css({
+  borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+});
+var colorCardContentStyles = css({
+  position: 'absolute',
+  top: '1px',
+  left: '1px',
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
+});