@sproutsocial/racine 12.20.0 → 12.21.1

package/lib/Tooltip/index.js

@@ -1,17 +1,13 @@
 var _excluded = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"],
-    _excluded2 = ["appearance", "children"];
-
+  _excluded2 = ["appearance", "children"];
 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import * as React from "react";
-import { useState, useEffect } from "react";
-import { TooltipContent } from "./styles";
-import Popout from "../Popout";
-import MOTION from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
+function _extends() { _extends = 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.apply(this, arguments); }
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { TooltipContent } from './styles';
+import Popout from '../Popout';
+import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
 var idCounter = 0;
-
 var wrapContent = function wrapContent(content, show, hide, Wrapper, appearance, ariaProps, wrapperStyles) {
   return /*#__PURE__*/React.createElement(Wrapper, _extends({
     appearance: appearance,
@@ -22,50 +18,41 @@ var wrapContent = function wrapContent(content, show, hide, Wrapper, appearance,
     style: Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles
   }, ariaProps), /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.cloneElement(content) : content);
 };
-
 var Tooltip = function Tooltip(_ref) {
   var content = _ref.content,
-      children = _ref.children,
-      _ref$enterDelay = _ref.enterDelay,
-      enterDelay = _ref$enterDelay === void 0 ? MOTION.MOTION_DURATION_FAST * 1000 : _ref$enterDelay,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? "auto" : _ref$placement,
-      appearance = _ref.appearance,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
-      qa = _ref.qa,
-      popoutProps = _ref.popoutProps,
-      _ref$truncated = _ref.truncated,
-      truncated = _ref$truncated === void 0 ? false : _ref$truncated,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    children = _ref.children,
+    _ref$enterDelay = _ref.enterDelay,
+    enterDelay = _ref$enterDelay === void 0 ? MOTION.MOTION_DURATION_FAST * 1000 : _ref$enterDelay,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
+    appearance = _ref.appearance,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
+    qa = _ref.qa,
+    popoutProps = _ref.popoutProps,
+    _ref$truncated = _ref.truncated,
+    truncated = _ref$truncated === void 0 ? false : _ref$truncated,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
-      shouldShow = _useState[0],
-      setShouldShow = _useState[1];
-
+    shouldShow = _useState[0],
+    setShouldShow = _useState[1];
   var _useState2 = useState(false),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useState3 = useState("Racine-tooltip-" + idCounter++),
-      id = _useState3[0];
-
+    id = _useState3[0];
   var isInvalidContent = content === null || content === undefined;
-
   var show = function show() {
     return setShouldShow(true);
   };
-
   var hide = function hide() {
     return setShouldShow(false);
   };
-
   var exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
-  var defaultAppearance = appearance || (typeof content === "object" ? "box" : "pill");
-  var shouldTooltipContentsBeInteractive = defaultAppearance === "box";
+  var defaultAppearance = appearance || (typeof content === 'object' ? 'box' : 'pill');
+  var shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
   useEffect(function () {
     var timeout;
-
     if (shouldShow) {
       timeout = setTimeout(function () {
         return setIsOpen(true);
@@ -75,57 +62,55 @@ var Tooltip = function Tooltip(_ref) {
         return setIsOpen(false);
       }, exitDelay);
     }
-
     return function () {
       return clearTimeout(timeout);
     };
   }, [isOpen, shouldShow, enterDelay, exitDelay]);
-  var wrappedContent = wrapContent( // $FlowIssue - https://github.com/facebook/flow/issues/6392
+  var wrappedContent = wrapContent(
+  // $FlowIssue - https://github.com/facebook/flow/issues/6392
   content, shouldTooltipContentsBeInteractive ? show : undefined, shouldTooltipContentsBeInteractive ? hide : undefined, Content, defaultAppearance, _extends({
     id: id
   }, rest), {});
   var ariaPropsForWrappedChildren = isOpen ? {
-    "aria-describedby": id
+    'aria-describedby': id
   } : {};
   var wrapperStylesForWrappedChildren = truncated ? {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
   } : {};
-  var wrappedChildren = wrapContent( // $FlowIssue - https://github.com/facebook/flow/issues/6392
-  children, show, hide, "span", defaultAppearance, ariaPropsForWrappedChildren, wrapperStylesForWrappedChildren);
+  var wrappedChildren = wrapContent(
+  // $FlowIssue - https://github.com/facebook/flow/issues/6392
+  children, show, hide, 'span', defaultAppearance, ariaPropsForWrappedChildren, wrapperStylesForWrappedChildren);
   return /*#__PURE__*/React.createElement(Popout, _extends({
     content: !isInvalidContent ? wrappedContent : undefined,
     isOpen: isOpen,
     placement: placement,
     qa: _extends({
-      "data-qa-tooltip": id
+      'data-qa-tooltip': id
     }, qa),
     focusOnContent: false,
     zIndex: zIndex,
-    display: truncated ? "flex" : undefined
+    display: truncated ? 'flex' : undefined
   }, popoutProps), wrappedChildren);
 };
-
 var Content = function Content(_ref2) {
   var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? "pill" : _ref2$appearance,
-      children = _ref2.children,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
+    appearance = _ref2$appearance === void 0 ? 'pill' : _ref2$appearance,
+    children = _ref2.children,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(TooltipContent, _extends({
     appearance: appearance,
-    borderRadius: appearance === "box" ? 500 : "5000em",
+    borderRadius: appearance === 'box' ? 500 : '5000em',
     px: 400,
-    py: appearance === "box" ? 400 : 200,
+    py: appearance === 'box' ? 400 : 200,
     m: 200,
     color: "text.body",
     bg: "container.background.base",
     boxShadow: "medium",
     border: 500,
-    borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
-
+    borderColor: "container.border.base"
+    // $FlowIssue - upgrade v0.112.0
   }, rest), children);
 };
-
 export default Tooltip;

package/lib/Tooltip/styles.js

@@ -1,6 +1,6 @@
-import styled from "styled-components";
-import Box from "../Box";
-// eslint-disable-next-line prettier/prettier
+
+import styled from 'styled-components';
+import Box from '../Box';
 export var TooltipContent = styled(Box).withConfig({
   displayName: "styles__TooltipContent",
   componentId: "sc-t1xjnk-0"
@@ -9,5 +9,5 @@ export var TooltipContent = styled(Box).withConfig({
 }, function (props) {
   return props.theme.typography[200];
 }, function (props) {
-  return props.appearance === "box" ? "left" : "center";
+  return props.appearance === 'box' ? 'left' : 'center';
 });

package/lib/VisuallyHidden/index.js

@@ -1,5 +1,6 @@
-import { visuallyHidden } from "../utils/mixins";
-import styled from "styled-components";
+
+import { visuallyHidden } from '../utils/mixins';
+import styled from 'styled-components';
 export var VisuallyHidden = styled.span.withConfig({
   displayName: "VisuallyHidden",
   componentId: "sc-rxkbyc-0"

package/lib/dataviz/index.js

@@ -1,6 +1,7 @@
-import React from "react";
-import Box from "../Box";
-import { withTheme } from "styled-components";
+
+import React from 'react';
+import Box from '../Box';
+import { withTheme } from 'styled-components';
 export var DataVizRotation = withTheme(function (p) {
   return p.theme.colors.DATAVIZ_COLORS_LIST.map(function (color, i) {
     return /*#__PURE__*/React.createElement(Box, {

package/lib/index.js

@@ -1,65 +1,67 @@
-export * from "./systemProps";
-export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
-export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { useInteractiveColor } from "./utils/useInteractiveColor";
-export { default as theme } from "./themes/light/theme";
-export { default as darkTheme } from "./themes/dark/theme";
-export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
-export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
 
-export { default as Alert } from "./Banner";
-export { default as Banner } from "./Banner";
-export { default as Badge } from "./Badge";
-export { default as Indicator } from "./Indicator";
-export { default as Card } from "./Card";
-export { default as CharacterCounter } from "./CharacterCounter";
-export { default as Checkbox } from "./Checkbox";
-export { default as Radio } from "./Radio";
-export { default as Textarea } from "./Textarea";
-export { default as ToggleHint } from "./ToggleHint";
-export { default as Loader } from "./Loader";
-export { default as Text } from "./Text";
-export { default as Image } from "./Image";
-export { default as KeyboardKey } from "./KeyboardKey";
-export { default as ChartLegend } from "./ChartLegend";
-export { default as Table } from "./Table";
-export { default as TableCell } from "./TableCell";
-export { default as TableHeaderCell } from "./TableHeaderCell";
-export { default as TableRowAccordion } from "./TableRowAccordion";
-export { default as Box } from "./Box";
-export { default as Label } from "./Label";
-export { default as Input } from "./Input";
-export { default as Select } from "./Select";
-export { default as Button } from "./Button";
-export { default as Link } from "./Link";
-export { default as Switch } from "./Switch";
-export { default as Token } from "./Token";
-export { default as TokenInput } from "./TokenInput";
-export { default as Tabs } from "./Tabs";
-export { default as Modal } from "./Modal";
-export { default as Popout } from "./Popout";
-export { default as ThemeProvider } from "./ThemeProvider";
-export { default as Tooltip } from "./Tooltip";
-export { default as Drawer } from "./Drawer";
-export { default as LoaderButton } from "./LoaderButton";
-export { default as Numeral } from "./Numeral";
-export { default as Collapsible } from "./Collapsible";
-export { default as SegmentedControl } from "./SegmentedControl";
-export { default as EmptyState } from "./EmptyState";
-export { default as FormField } from "./FormField";
-export { default as Fieldset } from "./Fieldset";
-export { default as Message } from "./Message";
-export { default as Stack } from "./Stack";
-export { default as Avatar } from "./Avatar";
-export { default as Breadcrumb } from "./Breadcrumb";
-export { default as Skeleton } from "./Skeleton";
-export { default as ToastContainer, toast } from "./Toast";
-export { default as Menu, MenuButton } from "./Menu";
-export { MenuButtonContext } from "./Menu/hooks";
-export { MenuItemContainer } from "./Menu/styles";
-export { default as Listbox, ListboxButton } from "./Listbox";
-export { default as OverflowList } from "./OverflowList";
-export { SingleDatePicker, DateRangePicker } from "./DatePicker";
-export { VisuallyHidden } from "./VisuallyHidden";
-export { default as PartnerLogo } from "./PartnerLogo";
-export { default as SpotIllustration } from "./SpotIllustration";
+
+export * from './systemProps';
+export { visuallyHidden, focusRing, disabled } from './utils/mixins';
+export { useSelect, useMultiselect, useTextContent } from './utils/hooks';
+export { useInteractiveColor } from './utils/useInteractiveColor';
+export { default as theme } from './themes/light/theme';
+export { default as darkTheme } from './themes/dark/theme';
+export { sproutLightTheme, sproutDarkTheme } from './themes/extendedThemes/sproutTheme';
+export { default as Icon } from './Icon';
+// DEPRECATED: Alert has been renamed to Banner
+export { default as Alert } from './Banner';
+export { default as Banner } from './Banner';
+export { default as Badge } from './Badge';
+export { default as Indicator } from './Indicator';
+export { default as Card } from './Card';
+export { default as CharacterCounter } from './CharacterCounter';
+export { default as Checkbox } from './Checkbox';
+export { default as Radio } from './Radio';
+export { default as Textarea } from './Textarea';
+export { default as ToggleHint } from './ToggleHint';
+export { default as Loader } from './Loader';
+export { default as Text } from './Text';
+export { default as Image } from './Image';
+export { default as KeyboardKey } from './KeyboardKey';
+export { default as ChartLegend } from './ChartLegend';
+export { default as Table } from './Table';
+export { default as TableCell } from './TableCell';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export { default as TableRowAccordion } from './TableRowAccordion';
+export { default as Box } from './Box';
+export { default as Label } from './Label';
+export { default as Input } from './Input';
+export { default as Select } from './Select';
+export { default as Button } from './Button';
+export { default as Link } from './Link';
+export { default as Switch } from './Switch';
+export { default as Token } from './Token';
+export { default as TokenInput } from './TokenInput';
+export { default as Tabs } from './Tabs';
+export { default as Modal } from './Modal';
+export { default as Popout } from './Popout';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as Tooltip } from './Tooltip';
+export { default as Drawer } from './Drawer';
+export { default as LoaderButton } from './LoaderButton';
+export { default as Numeral } from './Numeral';
+export { default as Collapsible } from './Collapsible';
+export { default as SegmentedControl } from './SegmentedControl';
+export { default as EmptyState } from './EmptyState';
+export { default as FormField } from './FormField';
+export { default as Fieldset } from './Fieldset';
+export { default as Message } from './Message';
+export { default as Stack } from './Stack';
+export { default as Avatar } from './Avatar';
+export { default as Breadcrumb } from './Breadcrumb';
+export { default as Skeleton } from './Skeleton';
+export { default as ToastContainer, toast } from './Toast';
+export { default as Menu, MenuButton } from './Menu';
+export { MenuButtonContext } from './Menu/hooks';
+export { MenuItemContainer } from './Menu/styles';
+export { default as Listbox, ListboxButton } from './Listbox';
+export { default as OverflowList } from './OverflowList';
+export { SingleDatePicker, DateRangePicker } from './DatePicker';
+export { VisuallyHidden } from './VisuallyHidden';
+export { default as PartnerLogo } from './PartnerLogo';
+export { default as SpotIllustration } from './SpotIllustration';

package/lib/systemProps/background.js

@@ -1,2 +1,4 @@
-import { background } from "styled-system";
+
+
+import { background } from 'styled-system';
 export var backgroundSystemProps = background;

package/lib/systemProps/border.js

@@ -1,2 +1,4 @@
-import { border } from "styled-system";
+
+
+import { border } from 'styled-system';
 export var borderSystemProps = border;

package/lib/systemProps/color.js

@@ -1,2 +1,4 @@
-import { color } from "styled-system";
+
+
+import { color } from 'styled-system';
 export var colorSystemProps = color;

package/lib/systemProps/custom.js

@@ -1,4 +1,6 @@
-import { compose, system } from "styled-system";
+
+
+import { compose, system } from 'styled-system';
 export var customSystemProps = compose(system({
   cursor: true,
   whiteSpace: true

package/lib/systemProps/flexbox.js

@@ -1,2 +1,4 @@
-import { flexbox } from "styled-system";
+
+
+import { flexbox } from 'styled-system';
 export var flexboxSystemProps = flexbox;

package/lib/systemProps/grid.js

@@ -1,2 +1,4 @@
-import { grid } from "styled-system";
+
+
+import { grid } from 'styled-system';
 export var gridSystemProps = grid;

package/lib/systemProps/index.js

@@ -1,14 +1,16 @@
-export * from "./types.flow.js";
-export * from "./background";
-export * from "./border";
-export * from "./color";
-export * from "./custom";
-export * from "./flexbox";
-export * from "./grid";
-export * from "./layout";
-export * from "./position";
-export * from "./shadow";
-export * from "./space";
-export * from "./systemProps";
-export * from "./typography";
-export * from "./variant";
+
+
+export * from './types.flow.js';
+export * from './background';
+export * from './border';
+export * from './color';
+export * from './custom';
+export * from './flexbox';
+export * from './grid';
+export * from './layout';
+export * from './position';
+export * from './shadow';
+export * from './space';
+export * from './systemProps';
+export * from './typography';
+export * from './variant';

package/lib/systemProps/layout.js

@@ -1,2 +1,4 @@
-import { layout } from "styled-system";
+
+
+import { layout } from 'styled-system';
 export var layoutSystemProps = layout;

package/lib/systemProps/position.js

@@ -1,2 +1,4 @@
-import { position } from "styled-system";
+
+
+import { position } from 'styled-system';
 export var positionSystemProps = position;

package/lib/systemProps/shadow.js

@@ -1,2 +1,4 @@
-import { shadow } from "styled-system";
+
+
+import { shadow } from 'styled-system';
 export var shadowSystemProps = shadow;

package/lib/systemProps/space.js

@@ -1,3 +1,4 @@
 /* eslint-disable prettier/prettier */
-import { space } from "styled-system";
+
+import { space } from 'styled-system';
 export var spaceSystemProps = space;

package/lib/systemProps/systemProps.js

@@ -1,14 +1,15 @@
-import { compose } from "styled-system";
-import { backgroundSystemProps } from "./background";
-import { borderSystemProps } from "./border";
-import { colorSystemProps } from "./color";
-import { customSystemProps } from "./custom";
-import { flexboxSystemProps } from "./flexbox";
-import { gridSystemProps } from "./grid";
-import { layoutSystemProps } from "./layout";
-import { positionSystemProps } from "./position";
-import { shadowSystemProps } from "./shadow";
-import { spaceSystemProps } from "./space";
-import { typographySystemProps } from "./typography";
-import { variantSystemProps } from "./variant";
+
+import { compose } from 'styled-system';
+import { backgroundSystemProps } from './background';
+import { borderSystemProps } from './border';
+import { colorSystemProps } from './color';
+import { customSystemProps } from './custom';
+import { flexboxSystemProps } from './flexbox';
+import { gridSystemProps } from './grid';
+import { layoutSystemProps } from './layout';
+import { positionSystemProps } from './position';
+import { shadowSystemProps } from './shadow';
+import { spaceSystemProps } from './space';
+import { typographySystemProps } from './typography';
+import { variantSystemProps } from './variant';
 export var systemProps = compose(customSystemProps, variantSystemProps, backgroundSystemProps, borderSystemProps, colorSystemProps, flexboxSystemProps, gridSystemProps, layoutSystemProps, positionSystemProps, shadowSystemProps, spaceSystemProps, typographySystemProps);

package/lib/systemProps/tests/types.flow.js

@@ -1,44 +1,49 @@
+
+
 /**
  * All system props should be responsive but accepting a tuple of length 1-5.
  */
-"a";
-["a"];
-["a", "a"];
-["a", "a", "a"];
-["a", "a", "a", "a"];
-["a", "a", "a", "a", "a"]; // $FlowExpectedError
-
-["a", "a", "a", "a", "a", "a"]; // $FlowExpectedError
-
-["b"]; // $FlowExpectedError
 
+'a';
+['a'];
+['a', 'a'];
+['a', 'a', 'a'];
+['a', 'a', 'a', 'a'];
+['a', 'a', 'a', 'a', 'a'];
+// $FlowExpectedError
+['a', 'a', 'a', 'a', 'a', 'a'];
+// $FlowExpectedError
+['b'];
+// $FlowExpectedError
 [null];
+
 /**
  * All system props should accept "base" values: boolean, null, and undefined.
  */
 
-"a";
+'a';
 true;
 false;
 null;
 undefined;
+
 /**
  * All system props should be responsive and allow "base" values.
  */
 
-"a";
-"b";
+'a';
+'b';
 true;
 false;
 null;
 undefined;
-["a", null, undefined, false, "b"];
-["a"]; // $FlowExpectedError
-
-"c"; // $FlowExpectedError
-
-1; // $FlowExpectedError
-
-({}); // $FlowExpectedError
-
+['a', null, undefined, false, 'b'];
+['a'];
+// $FlowExpectedError
+'c';
+// $FlowExpectedError
+1;
+// $FlowExpectedError
+({});
+// $FlowExpectedError
 [];

package/lib/systemProps/typography.js

@@ -1,2 +1,4 @@
-import { typography } from "styled-system";
+
+
+import { typography } from 'styled-system';
 export var typographySystemProps = typography;

package/lib/systemProps/variant.js

@@ -1,5 +1,6 @@
-import { compose, variant } from "styled-system";
+
+import { compose, variant } from 'styled-system';
 export var variantSystemProps = compose(variant({
-  key: "typography",
-  prop: "typeScale"
+  key: 'typography',
+  prop: 'typeScale'
 }));

package/lib/themes/dark/dataviz-palette.js

@@ -1,26 +1,28 @@
-import COLORS from "@sproutsocial/seeds-color";
+
+
+import COLORS from '@sproutsocial/seeds-color';
 export var datavizPalette = {
   DATAVIZ_COLORS_LIST: [COLORS.COLOR_TEAL_400, COLORS.COLOR_PURPLE_400, COLORS.COLOR_PINK_400, COLORS.COLOR_YELLOW_500, COLORS.COLOR_BLUE_400, COLORS.COLOR_MAGENTA_400, COLORS.COLOR_GREEN_400, COLORS.COLOR_ORANGE_400, COLORS.COLOR_RED_700, COLORS.COLOR_TEAL_700, COLORS.COLOR_PURPLE_700, COLORS.COLOR_PINK_700, COLORS.COLOR_YELLOW_800, COLORS.COLOR_BLUE_700, COLORS.COLOR_MAGENTA_700, COLORS.COLOR_GREEN_700, COLORS.COLOR_ORANGE_700, COLORS.COLOR_RED_400, COLORS.COLOR_GREEN_200, COLORS.COLOR_YELLOW_200],
   DATAVIZ_COLORS_MAP: {
-    "1": COLORS.COLOR_TEAL_400,
-    "2": COLORS.COLOR_PURPLE_400,
-    "3": COLORS.COLOR_PINK_400,
-    "4": COLORS.COLOR_YELLOW_500,
-    "5": COLORS.COLOR_BLUE_400,
-    "6": COLORS.COLOR_MAGENTA_400,
-    "7": COLORS.COLOR_GREEN_400,
-    "8": COLORS.COLOR_ORANGE_400,
-    "9": COLORS.COLOR_RED_700,
-    "10": COLORS.COLOR_TEAL_700,
-    "11": COLORS.COLOR_PURPLE_700,
-    "12": COLORS.COLOR_PINK_700,
-    "13": COLORS.COLOR_YELLOW_800,
-    "14": COLORS.COLOR_BLUE_700,
-    "15": COLORS.COLOR_MAGENTA_700,
-    "16": COLORS.COLOR_GREEN_700,
-    "17": COLORS.COLOR_ORANGE_700,
-    "18": COLORS.COLOR_RED_400,
-    "19": COLORS.COLOR_GREEN_200,
-    "20": COLORS.COLOR_YELLOW_200
+    '1': COLORS.COLOR_TEAL_400,
+    '2': COLORS.COLOR_PURPLE_400,
+    '3': COLORS.COLOR_PINK_400,
+    '4': COLORS.COLOR_YELLOW_500,
+    '5': COLORS.COLOR_BLUE_400,
+    '6': COLORS.COLOR_MAGENTA_400,
+    '7': COLORS.COLOR_GREEN_400,
+    '8': COLORS.COLOR_ORANGE_400,
+    '9': COLORS.COLOR_RED_700,
+    '10': COLORS.COLOR_TEAL_700,
+    '11': COLORS.COLOR_PURPLE_700,
+    '12': COLORS.COLOR_PINK_700,
+    '13': COLORS.COLOR_YELLOW_800,
+    '14': COLORS.COLOR_BLUE_700,
+    '15': COLORS.COLOR_MAGENTA_700,
+    '16': COLORS.COLOR_GREEN_700,
+    '17': COLORS.COLOR_ORANGE_700,
+    '18': COLORS.COLOR_RED_400,
+    '19': COLORS.COLOR_GREEN_200,
+    '20': COLORS.COLOR_YELLOW_200
   }
 };