@atlaskit/color-picker 3.1.9 → 3.2.0

package/dist/esm/components/components.js

@@ -1,22 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cx", "selectProps", "innerRef"];
-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 var MenuList = function MenuList(props) {
-  var cx = props.cx,
-    cols = props.selectProps.cols,
+  var cols = props.selectProps.cols,
     innerRef = props.innerRef,
-    rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(ColorPaletteContainer, _extends({
+    children = props.children;
+  return jsx("div", {
+    css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
       maxWidth: cols ? getWidth(cols) : undefined
     },
-    innerRef: innerRef
-  }, rest));
+    ref: innerRef
+  }, children);
 };
 export var Option = function Option(props) {
   var _props$data = props.data,
@@ -29,26 +29,34 @@ export var Option = function Option(props) {
     isFocused = props.isFocused,
     isSelected = props.isSelected,
     innerProps = props.innerProps;
-  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: function onKeyDown(value) {
-        return 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: function onKeyDown(value) {
+      return onOptionKeyDown(value);
+    },
+    isTabbing: isTabbing
+  }));
 };
 export var DropdownIndicator = function DropdownIndicator() {
   return null;
 };
 export var Placeholder = function Placeholder() {
   return null;
-};
+};
+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)"
+});

package/dist/esm/utils.js

@@ -3,8 +3,10 @@
 import { gridSize } from '@atlaskit/theme';
 import { COLOR_CARD_SIZE } from './constants';
 import memoizeOne from 'memoize-one';
-export var getWidth = function getWidth(cols) {
-  return cols * (COLOR_CARD_SIZE + gridSize() / 2);
+import { Mode } from './types';
+export var getWidth = function getWidth(cols, mode) {
+  var width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
+  return mode === Mode.Standard ? width + gridSize() : width;
 };
 export var getOptions = memoizeOne(function (palette, selectedColor) {
   var focusedItemIndex = 0;

package/dist/types/components/ColorCard.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
     label: string;
@@ -11,10 +10,5 @@ export interface Props {
     isOption?: boolean;
     isTabbing?: boolean;
 }
-export default class ColorCard extends PureComponent<Props> {
-    onMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    ref: React.RefObject<HTMLButtonElement>;
-    render(): JSX.Element;
-}
+declare const ColorCard: (props: Props) => jsx.JSX.Element;
+export default ColorCard;

package/dist/types/components/ColorPaletteMenu.d.ts

@@ -1,6 +1,8 @@
-import React from 'react';
-import { Palette, Mode } from '../types';
-export interface Props {
+/// <reference types="react" />
+/** @jsx jsx */
+import { Mode, Palette } from '../types';
+import { jsx } from '@emotion/react';
+export type Props = {
     /** color picker button label */
     label?: string;
     /** list of available colors */
@@ -17,19 +19,7 @@ export interface Props {
     createAnalyticsEvent?: any;
     /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
     mode?: Mode;
-}
-export declare class ColorPaletteMenuWithoutAnalytics extends React.Component<Props> {
-    static defaultProps: {
-        cols: number;
-        mode: Mode;
-    };
-    createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
-    changeAnalyticsCaller: () => import("@atlaskit/analytics-next").UIAnalyticsEvent | undefined;
-    onChange: (value: string) => void;
-    render(): JSX.Element;
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "onChange" | "checkMarkColor" | "palette" | "selectedColor"> & Partial<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "cols" | "mode">> & Partial<Pick<{
-    cols: number;
-    mode: Mode;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "mode" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;
+};
+export declare const ColorPaletteMenuWithoutAnalytics: ({ createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/ColorPicker.d.ts

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
-import { ValueType, PopupSelectProps } from '@atlaskit/select';
-import { Palette, Color } from '../types';
+import { PopupSelectProps, ValueType } from '@atlaskit/select';
+import { Color, Palette } from '../types';
+import { jsx } from '@emotion/react';
 export interface Props {
     /** color picker button label */
     label?: string;
@@ -28,7 +30,7 @@ export declare class ColorPickerWithoutAnalytics extends React.Component<Props>
     onChangeSelect: (option: ValueType<Color>) => void;
     onOptionKeyDown: (value: string) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/Trigger.d.ts

@@ -1,12 +1,9 @@
-import React from 'react';
+import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
     label?: string;
     onClick?: () => void;
     expanded?: boolean;
 }
-export default class ColorCard extends React.PureComponent<Props> {
-    onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): JSX.Element;
-}
+declare const ColorCard: ({ value, label, expanded, onClick }: Props) => jsx.JSX.Element;
+export default ColorCard;

package/dist/types/components/components.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+/** @jsx jsx */
 import { MenuListComponentProps, OptionProps } from '@atlaskit/select';
 import { Color } from '../types';
-export declare const MenuList: (props: MenuListComponentProps<Color>) => JSX.Element;
-export declare const Option: (props: OptionProps<Color>) => JSX.Element;
+import { jsx } from '@emotion/react';
+export declare const MenuList: (props: MenuListComponentProps<Color>) => jsx.JSX.Element;
+export declare const Option: (props: OptionProps<Color>) => jsx.JSX.Element;
 export declare const DropdownIndicator: () => null;
 export declare const Placeholder: () => null;

package/dist/types/utils.d.ts

@@ -1,5 +1,5 @@
-import { Palette } from './types';
-export declare const getWidth: (cols: number) => number;
+import { Mode, Palette } from './types';
+export declare const getWidth: (cols: number, mode?: Mode) => number;
 export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string) => {
     options: Palette;
     value: import("./types").Color;

package/dist/types-ts4.5/components/ColorCard.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
     label: string;
@@ -11,10 +10,5 @@ export interface Props {
     isOption?: boolean;
     isTabbing?: boolean;
 }
-export default class ColorCard extends PureComponent<Props> {
-    onMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    ref: React.RefObject<HTMLButtonElement>;
-    render(): JSX.Element;
-}
+declare const ColorCard: (props: Props) => jsx.JSX.Element;
+export default ColorCard;

package/dist/types-ts4.5/components/ColorPaletteMenu.d.ts

@@ -1,6 +1,8 @@
-import React from 'react';
-import { Palette, Mode } from '../types';
-export interface Props {
+/// <reference types="react" />
+/** @jsx jsx */
+import { Mode, Palette } from '../types';
+import { jsx } from '@emotion/react';
+export type Props = {
     /** color picker button label */
     label?: string;
     /** list of available colors */
@@ -17,19 +19,7 @@ export interface Props {
     createAnalyticsEvent?: any;
     /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
     mode?: Mode;
-}
-export declare class ColorPaletteMenuWithoutAnalytics extends React.Component<Props> {
-    static defaultProps: {
-        cols: number;
-        mode: Mode;
-    };
-    createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
-    changeAnalyticsCaller: () => import("@atlaskit/analytics-next").UIAnalyticsEvent | undefined;
-    onChange: (value: string) => void;
-    render(): JSX.Element;
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "onChange" | "checkMarkColor" | "palette" | "selectedColor"> & Partial<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "cols" | "mode">> & Partial<Pick<{
-    cols: number;
-    mode: Mode;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "mode" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;
+};
+export declare const ColorPaletteMenuWithoutAnalytics: ({ createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/ColorPicker.d.ts

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
-import { ValueType, PopupSelectProps } from '@atlaskit/select';
-import { Palette, Color } from '../types';
+import { PopupSelectProps, ValueType } from '@atlaskit/select';
+import { Color, Palette } from '../types';
+import { jsx } from '@emotion/react';
 export interface Props {
     /** color picker button label */
     label?: string;
@@ -28,7 +30,7 @@ export declare class ColorPickerWithoutAnalytics extends React.Component<Props>
     onChangeSelect: (option: ValueType<Color>) => void;
     onOptionKeyDown: (value: string) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/Trigger.d.ts

@@ -1,12 +1,9 @@
-import React from 'react';
+import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
     label?: string;
     onClick?: () => void;
     expanded?: boolean;
 }
-export default class ColorCard extends React.PureComponent<Props> {
-    onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): JSX.Element;
-}
+declare const ColorCard: ({ value, label, expanded, onClick }: Props) => jsx.JSX.Element;
+export default ColorCard;

package/dist/types-ts4.5/components/components.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+/** @jsx jsx */
 import { MenuListComponentProps, OptionProps } from '@atlaskit/select';
 import { Color } from '../types';
-export declare const MenuList: (props: MenuListComponentProps<Color>) => JSX.Element;
-export declare const Option: (props: OptionProps<Color>) => JSX.Element;
+import { jsx } from '@emotion/react';
+export declare const MenuList: (props: MenuListComponentProps<Color>) => jsx.JSX.Element;
+export declare const Option: (props: OptionProps<Color>) => jsx.JSX.Element;
 export declare const DropdownIndicator: () => null;
 export declare const Placeholder: () => null;

package/dist/types-ts4.5/utils.d.ts

@@ -1,5 +1,5 @@
-import { Palette } from './types';
-export declare const getWidth: (cols: number) => number;
+import { Mode, Palette } from './types';
+export declare const getWidth: (cols: number, mode?: Mode) => number;
 export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string) => {
     options: Palette;
     value: import("./types").Color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.1.9",
+  "version": "3.2.0",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,11 +33,11 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/select": "^17.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
-    "memoize-one": "^6.0.0",
-    "styled-components": "^3.2.6"
+    "@emotion/react": "^11.7.1",
+    "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"

package/dist/cjs/styled/ColorCard.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ColorCardOption = exports.ColorCardContentCheckMark = exports.ColorCardContent = exports.ColorCardButton = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _theme = require("@atlaskit/theme");
-var _constants = require("../constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var buttonFocusedBorder = "border-color: ".concat("var(--ds-border-focused, ".concat(_theme.colors.B100, ")"), ";");
-var sharedColorContainerStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n"])), _constants.COLOR_CARD_SIZE, _constants.COLOR_CARD_SIZE, (0, _theme.borderRadius)() * 2);
-var ColorCardOption = exports.ColorCardOption = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
-  if (props.isTabbing === undefined || props.isTabbing) {
-    return "&:hover,\n  &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(_theme.colors.B75, ")"), ";\n      }");
-  }
-}, function (props) {
-  if (props.focused && !props.isTabbing) {
-    return "border-color: ".concat("var(--ds-border-focused, ".concat(_theme.colors.B75, ")"));
-  }
-});
-var ColorCardButton = exports.ColorCardButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  &:hover {\n    border-color: transparent;\n  }\n  &:not(:focus):hover,\n  &:focus {\n    ", ";\n  }\n\n  ", ";\n"])), sharedColorContainerStyles, buttonFocusedBorder, function (props) {
-  if (props.focused) {
-    return buttonFocusedBorder;
-  }
-});
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var ColorCardContent = exports.ColorCardContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), (0, _theme.borderRadius)(), function (props) {
-  return props.color;
-}, "var(--ds-background-inverse-subtle, ".concat(_theme.colors.DN600A, ")"));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var ColorCardContentCheckMark = exports.ColorCardContentCheckMark = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px;\n"])));

package/dist/cjs/styled/ColorPalette.js

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ColorPaletteMenu = exports.ColorPaletteContainer = exports.ColorCardWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _theme = require("@atlaskit/theme");
-var _utils = require("../utils");
-var _types = require("../types");
-var _constants = require("../constants");
-var _templateObject, _templateObject2, _templateObject3; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-var ColorCardWrapper = exports.ColorCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: ", ";\n  height: ", "px;\n"])), "var(--ds-space-025, 2px)", _constants.COLOR_CARD_SIZE);
-var ColorPaletteContainer = exports.ColorPaletteContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: ", ";\n"])), function (props) {
-  return props.mode === _types.Mode.Compact ? "0" : "var(--ds-space-050, 4px)";
-});
-var ColorPaletteMenu = exports.ColorPaletteMenu = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), "var(--ds-surface-overlay, ".concat(_theme.colors.N0, ")"), function (props) {
-  return (0, _utils.getWidth)(props.cols);
-}, function (props) {
-  return props.mode && props.mode === _types.Mode.Standard && "\n    box-radius: ".concat("var(--ds-border-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_theme.colors.N40, ", 0 0 8px ").concat(_theme.colors.N40), ")"), ";\n    width: ", (0, _utils.getWidth)(props.cols) + (0, _theme.gridSize)(), "px;\n  ");
-});

package/dist/cjs/styled/ColorPicker.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ColorCardWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-var ColorCardWrapper = exports.ColorCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n"])));

package/dist/es2019/styled/ColorCard.js

@@ -1,72 +0,0 @@
-import styled, { css } from 'styled-components';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { borderRadius, colors } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from '../constants';
-const buttonFocusedBorder = `border-color: ${`var(--ds-border-focused, ${colors.B100})`};`;
-const sharedColorContainerStyles = css`
-  display: inline-block;
-  position: relative;
-  width: ${COLOR_CARD_SIZE}px;
-  height: ${COLOR_CARD_SIZE}px;
-  border: 2px solid transparent;
-  box-sizing: border-box;
-  border-radius: ${borderRadius() * 2}px;
-  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
-  background-color: transparent;
-  border-color: transparent;
-  padding: 0;
-  cursor: pointer;
-  outline: none;
-`;
-export const ColorCardOption = styled.div`
-  ${sharedColorContainerStyles};
-
-  ${props => {
-  if (props.isTabbing === undefined || props.isTabbing) {
-    return `&:hover,
-  &:focus {
-        border-color: ${`var(--ds-border-focused, ${colors.B75})`};
-      }`;
-  }
-}}
-
-  ${props => {
-  if (props.focused && !props.isTabbing) {
-    return `border-color: ${`var(--ds-border-focused, ${colors.B75})`}`;
-  }
-}};
-`;
-export const ColorCardButton = styled.button`
-  ${sharedColorContainerStyles};
-  &:hover {
-    border-color: transparent;
-  }
-  &:not(:focus):hover,
-  &:focus {
-    ${buttonFocusedBorder};
-  }
-
-  ${props => {
-  if (props.focused) {
-    return buttonFocusedBorder;
-  }
-}};
-`;
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const ColorCardContent = styled.div`
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 24px;
-  height: 24px;
-  border-radius: ${borderRadius()}px;
-  background: ${props => props.color};
-  box-shadow: inset 0px 0px 0px 1px
-    ${`var(--ds-background-inverse-subtle, ${colors.DN600A})`};
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const ColorCardContentCheckMark = styled.div`
-  margin: 1px;
-`;

package/dist/es2019/styled/ColorPalette.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { gridSize, colors } from '@atlaskit/theme';
-import { getWidth } from '../utils';
-import { Mode } from '../types';
-import { COLOR_CARD_SIZE } from '../constants';
-export const ColorCardWrapper = styled.div`
-  display: flex;
-  margin: ${"var(--ds-space-025, 2px)"};
-  height: ${COLOR_CARD_SIZE}px;
-`;
-export const ColorPaletteContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  padding: ${props => props.mode === Mode.Compact ? `0` : `${"var(--ds-space-050, 4px)"}`};
-`;
-export const ColorPaletteMenu = styled.div`
-  position: relative;
-  margin: 0;
-  background-color: ${`var(--ds-surface-overlay, ${colors.N0})`};
-  width: ${props => getWidth(props.cols)}px;
-  ${props => props.mode && props.mode === Mode.Standard && `
-    box-radius: ${"var(--ds-border-radius-100, 3px)"};
-    box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 0 1px ${colors.N40}, 0 0 8px ${colors.N40}`})`};
-    width: ${getWidth(props.cols) + gridSize()}px;
-  `}
-`;

package/dist/es2019/styled/ColorPicker.js

@@ -1,4 +0,0 @@
-import styled from 'styled-components';
-export const ColorCardWrapper = styled.div`
-  display: inline-block;
-`;

package/dist/esm/styled/ColorCard.js

@@ -1,30 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import styled, { css } from 'styled-components';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { borderRadius, colors } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from '../constants';
-var buttonFocusedBorder = "border-color: ".concat("var(--ds-border-focused, ".concat(colors.B100, ")"), ";");
-var sharedColorContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2);
-export var ColorCardOption = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
-  if (props.isTabbing === undefined || props.isTabbing) {
-    return "&:hover,\n  &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(colors.B75, ")"), ";\n      }");
-  }
-}, function (props) {
-  if (props.focused && !props.isTabbing) {
-    return "border-color: ".concat("var(--ds-border-focused, ".concat(colors.B75, ")"));
-  }
-});
-export var ColorCardButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  &:hover {\n    border-color: transparent;\n  }\n  &:not(:focus):hover,\n  &:focus {\n    ", ";\n  }\n\n  ", ";\n"])), sharedColorContainerStyles, buttonFocusedBorder, function (props) {
-  if (props.focused) {
-    return buttonFocusedBorder;
-  }
-});
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var ColorCardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), borderRadius(), function (props) {
-  return props.color;
-}, "var(--ds-background-inverse-subtle, ".concat(colors.DN600A, ")"));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var ColorCardContentCheckMark = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 1px;\n"])));

package/dist/esm/styled/ColorPalette.js

@@ -1,18 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
-import styled from 'styled-components';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { gridSize, colors } from '@atlaskit/theme';
-import { getWidth } from '../utils';
-import { Mode } from '../types';
-import { COLOR_CARD_SIZE } from '../constants';
-export var ColorCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: ", ";\n  height: ", "px;\n"])), "var(--ds-space-025, 2px)", COLOR_CARD_SIZE);
-export var ColorPaletteContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: ", ";\n"])), function (props) {
-  return props.mode === Mode.Compact ? "0" : "var(--ds-space-050, 4px)";
-});
-export var ColorPaletteMenu = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), "var(--ds-surface-overlay, ".concat(colors.N0, ")"), function (props) {
-  return getWidth(props.cols);
-}, function (props) {
-  return props.mode && props.mode === Mode.Standard && "\n    box-radius: ".concat("var(--ds-border-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(colors.N40, ", 0 0 8px ").concat(colors.N40), ")"), ";\n    width: ", getWidth(props.cols) + gridSize(), "px;\n  ");
-});

package/dist/esm/styled/ColorPicker.js

@@ -1,4 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-import styled from 'styled-components';
-export var ColorCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));