Upgrade EUI to v36.0.0 (#106334)

* eui to v36.0.0

* i18n tokens

* remove temp styled-components types

* euiemptybutton size updates

* betanotification size prop

* i18n snapshot

* functional timeout

* beta badge unit test

package.json

@@ -101,7 +101,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.13",
     "@elastic/ems-client": "7.14.0",
-    "@elastic/eui": "35.0.0",
+    "@elastic/eui": "36.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/maki": "6.3.0",

src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap

@@ -34,9 +34,9 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiColorPicker.colorErrorMessage": "Invalid color value",
           "euiColorPicker.colorLabel": "Color value",
           "euiColorPicker.openLabel": "Press the escape key to close the popover",
-          "euiColorPicker.screenReaderAnnouncement": "A popup with a range of selectable colors opened. Tab forward to cycle through colors choices or press escape to close this popup.",
-          "euiColorPicker.swatchAriaLabel": [Function],
+          "euiColorPicker.popoverLabel": "Color selection dialog",
           "euiColorPicker.transparent": "Transparent",
+          "euiColorPickerSwatch.ariaLabel": [Function],
           "euiColorStopThumb.buttonAriaLabel": "Press the Enter key to modify this stop. Press Escape to focus the group",
           "euiColorStopThumb.buttonTitle": "Click to edit, drag to reposition",
           "euiColorStopThumb.removeLabel": "Remove this stop",
@@ -177,8 +177,8 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiResizableButton.horizontalResizerAriaLabel": "Press left or right to adjust panels size",
           "euiResizableButton.verticalResizerAriaLabel": "Press up or down to adjust panels size",
           "euiResizablePanel.toggleButtonAriaLabel": "Press to toggle this panel",
-          "euiSaturation.roleDescription": "HSV color mode saturation and value selection",
-          "euiSaturation.screenReaderAnnouncement": "Use the arrow keys to navigate the square color gradient. The coordinates resulting from each key press will be used to calculate HSV color mode \\"saturation\\" and \\"value\\" numbers, in the range of 0 to 1. Left and right decrease and increase (respectively) the \\"saturation\\" value. Up and down decrease and increase (respectively) the \\"value\\" value.",
+          "euiSaturation.ariaLabel": "HSV color mode saturation and value 2-axis slider",
+          "euiSaturation.screenReaderInstructions": "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode \\"saturation\\" and \\"value\\" numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.",
           "euiSelectable.loadingOptions": "Loading options",
           "euiSelectable.noAvailableOptions": "No options available",
           "euiSelectable.noMatchingOptions": [Function],

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -144,22 +144,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
           'ARIA label and tooltip content describing a button that expands an actions menu',
       }
     ),
-    'euiColorPicker.screenReaderAnnouncement': i18n.translate(
-      'core.euiColorPicker.screenReaderAnnouncement',
-      {
-        defaultMessage:
-          'A popup with a range of selectable colors opened. Tab forward to cycle through colors choices or press escape to close this popup.',
-        description:
-          'Message when the color picker popover is opened. Describes the interaction with the elements in the popover.',
-      }
-    ),
-    'euiColorPicker.swatchAriaLabel': ({ swatch }: EuiValues) =>
-      i18n.translate('core.euiColorPicker.swatchAriaLabel', {
-        defaultMessage: 'Select {swatch} as the color',
-        values: { swatch },
-        description:
-          'Screen reader text to describe the action and hex value of the selectable option',
-      }),
     'euiColorPicker.alphaLabel': i18n.translate('core.euiColorPicker.alphaLabel', {
       defaultMessage: 'Alpha channel (opacity) value',
       description: 'Label describing color alpha channel',
@@ -181,6 +165,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Press the down key to open a popover containing color options',
       description: 'Screen reader text to describe how to open the picker',
     }),
+    'euiColorPicker.popoverLabel': i18n.translate('core.euiColorPicker.popoverLabel', {
+      defaultMessage: 'Color selection dialog',
+    }),
     'euiColorStopThumb.removeLabel': i18n.translate('core.euiColorStopThumb.removeLabel', {
       defaultMessage: 'Remove this stop',
       description: 'Label accompanying a button whose action will remove the color stop',
@@ -219,6 +206,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description:
           'Screen reader text to describe the composite behavior of the color stops component.',
       }),
+    'euiColorPickerSwatch.ariaLabel': ({ color }: EuiValues) =>
+      i18n.translate('core.euiColorPickerSwatch.ariaLabel', {
+        defaultMessage: 'Select {color} as the color',
+        values: { color },
+      }),
     'euiColumnActions.hideColumn': i18n.translate('core.euiColumnActions.hideColumn', {
       defaultMessage: 'Hide column',
     }),
@@ -845,16 +837,16 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Press to toggle this panel',
       }
     ),
-    'euiSaturation.roleDescription': i18n.translate('core.euiSaturation.roleDescription', {
-      defaultMessage: 'HSV color mode saturation and value selection',
-    }),
-    'euiSaturation.screenReaderAnnouncement': i18n.translate(
-      'core.euiSaturation.screenReaderAnnouncement',
+    'euiSaturation.screenReaderInstructions': i18n.translate(
+      'core.euiSaturation.screenReaderInstructions',
       {
         defaultMessage:
-          'Use the arrow keys to navigate the square color gradient. The coordinates resulting from each key press will be used to calculate HSV color mode "saturation" and "value" numbers, in the range of 0 to 1. Left and right decrease and increase (respectively) the "saturation" value. Up and down decrease and increase (respectively) the "value" value.',
+          'Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode "saturation" and "value" numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.',
       }
     ),
+    'euiSaturation.ariaLabel': i18n.translate('core.euiSaturation.ariaLabel', {
+      defaultMessage: 'HSV color mode saturation and value 2-axis slider',
+    }),
     'euiSelectable.loadingOptions': i18n.translate('core.euiSelectable.loadingOptions', {
       defaultMessage: 'Loading options',
       description: 'Placeholder message while data is asynchronously loaded',

src/dev/license_checker/config.ts

@@ -74,7 +74,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@7.14.0': ['Elastic License 2.0'],
-  '@elastic/eui@35.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@36.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
 
   // TODO can be removed if the https://github.com/jindw/xmldom/issues/239 is released
   'xmldom@0.1.27': ['MIT'],

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/ResponsiveFlyout.tsx

@@ -5,21 +5,10 @@
  * 2.0.
  */
 
-import { ReactNode } from 'react';
-import { StyledComponent } from 'styled-components';
 import { EuiFlyout } from '@elastic/eui';
-import {
-  euiStyled,
-  EuiTheme,
-} from '../../../../../../../../../../src/plugins/kibana_react/common';
+import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
 
-// TODO: EUI team follow up on complex types and styled-components `styled`
-// https://github.com/elastic/eui/issues/4855
-export const ResponsiveFlyout: StyledComponent<
-  typeof EuiFlyout,
-  EuiTheme,
-  { children?: ReactNode }
-> = euiStyled(EuiFlyout)`
+export const ResponsiveFlyout = euiStyled(EuiFlyout)`
   width: 100%;
 
   @media (min-width: 800px) {

x-pack/plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.tsx

@@ -100,7 +100,7 @@ export const ErrorStatePrompt: React.FC = () => {
             defaultMessage="Review setup guide"
           />
         </EuiButtonTo>,
-        <BetaNotification buttonProps={{ size: 'l', flush: undefined }} />,
+        <BetaNotification buttonProps={{ size: 'm', flush: undefined }} />,
       ]}
     />
   );

x-pack/plugins/enterprise_search/public/applications/shared/layout/beta.test.tsx

@@ -62,10 +62,10 @@ describe('BetaNotification', () => {
     });
 
     it('passes down custom button props', () => {
-      const wrapper = shallow(<BetaNotification buttonProps={{ size: 'l' }} />);
+      const wrapper = shallow(<BetaNotification buttonProps={{ size: 'm' }} />);
       const toggleButton = getToggleButton(wrapper);
 
-      expect(toggleButton.prop('size')).toEqual('l');
+      expect(toggleButton.prop('size')).toEqual('m');
     });
   });
 

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx

@@ -5,9 +5,7 @@
  * 2.0.
  */
 
-import type { ReactNode } from 'react';
 import React, { useState } from 'react';
-import type { StyledComponent } from 'styled-components';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -31,13 +29,7 @@ import type { NewAgentPolicy, AgentPolicy } from '../../../../types';
 import { useCapabilities, useStartServices, sendCreateAgentPolicy } from '../../../../hooks';
 import { AgentPolicyForm, agentPolicyFormValidation } from '../../components';
 
-// TODO: EUI team follow up on complex types and styled-components `styled`
-// https://github.com/elastic/eui/issues/4855
-const FlyoutWithHigherZIndex: StyledComponent<
-  typeof EuiFlyout,
-  {},
-  { children?: ReactNode }
-> = styled(EuiFlyout)`
+const FlyoutWithHigherZIndex = styled(EuiFlyout)`
   z-index: ${(props) => props.theme.eui.euiZLevel5};
 `;
 

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx

@@ -82,7 +82,6 @@ export const ExpandableSection: FC<ExpandableSectionProps> = ({
             <EuiButtonEmpty
               onClick={toggleExpanded}
               iconType={isExpanded ? 'arrowUp' : 'arrowDown'}
-              size="l"
               iconSide="right"
               flush="left"
             >

x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx

@@ -296,7 +296,6 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({ jobId, end,
                           }
                         )}
                         color="primary"
-                        size="l"
                         onClick={() => {
                           handleEndDateChange(CHART_DIRECTION.BACK);
                         }}
@@ -460,7 +459,6 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({ jobId, end,
                           }
                         )}
                         color="primary"
-                        size="l"
                         onClick={() => {
                           handleEndDateChange(CHART_DIRECTION.FORWARD);
                         }}

x-pack/plugins/ml/public/application/settings/anomaly_detection_settings.tsx

@@ -131,7 +131,6 @@ export const AnomalyDetectionSettings: FC = () => {
                 <EuiButtonEmpty
                   data-test-subj="mlCalendarsMngButton"
                   flush="left"
-                  size="l"
                   color="primary"
                   onClick={redirectToCalendarList}
                   isDisabled={canGetCalendars === false}
@@ -146,7 +145,6 @@ export const AnomalyDetectionSettings: FC = () => {
                 <EuiButtonEmpty
                   data-test-subj="mlCalendarsCreateButton"
                   flush="left"
-                  size="l"
                   color="primary"
                   onClick={redirectToNewCalendarPage}
                   isDisabled={canCreateCalendar === false}
@@ -199,7 +197,6 @@ export const AnomalyDetectionSettings: FC = () => {
                 <EuiButtonEmpty
                   data-test-subj="mlFilterListsMngButton"
                   flush="left"
-                  size="l"
                   color="primary"
                   onClick={redirectToFilterLists}
                   isDisabled={canGetFilters === false}
@@ -213,7 +210,6 @@ export const AnomalyDetectionSettings: FC = () => {
               <EuiFlexItem grow={false}>
                 <EuiButtonEmpty
                   data-test-subj="mlFilterListsCreateButton"
-                  size="l"
                   color="primary"
                   onClick={redirectToNewFilterListPage}
                   isDisabled={canCreateFilter === false}

x-pack/plugins/observability/public/components/app/cases/create/flyout.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { memo, ReactNode } from 'react';
-import styled, { StyledComponent } from 'styled-components';
+import React, { memo } from 'react';
+import styled from 'styled-components';
 import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
 
 import * as i18n from '../translations';
@@ -20,11 +20,7 @@ export interface CreateCaseModalProps {
   onSuccess: (theCase: Case) => Promise<void>;
 }
 
-// TODO: EUI team follow up on complex types and styled-components `styled`
-// https://github.com/elastic/eui/issues/4855
-const StyledFlyout: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
-  EuiFlyout
-)`
+const StyledFlyout = styled(EuiFlyout)`
   ${({ theme }) => `
     z-index: ${theme.eui.euiZModal};
   `}

x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { memo, ReactNode } from 'react';
-import styled, { StyledComponent } from 'styled-components';
+import React, { memo } from 'react';
+import styled from 'styled-components';
 import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
 
 import * as i18n from '../../translations';
@@ -20,11 +20,7 @@ export interface CreateCaseModalProps {
   onSuccess: (theCase: Case) => Promise<void>;
 }
 
-// TODO: EUI team follow up on complex types and styled-components `styled`
-// https://github.com/elastic/eui/issues/4855
-const StyledFlyout: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
-  EuiFlyout
-)`
+const StyledFlyout = styled(EuiFlyout)`
   ${({ theme }) => `
     z-index: ${theme.eui.euiZModal};
   `}

x-pack/plugins/security_solution/public/common/components/sourcerer/index.tsx

@@ -128,7 +128,6 @@ export const Sourcerer = React.memo<SourcererComponentProps>(({ scope: scopeId }
         iconType="arrowDown"
         isLoading={loading}
         onClick={setPopoverIsOpenCb}
-        size="l"
         title={i18n.SOURCERER}
       >
         {i18n.SOURCERER}
@@ -198,7 +197,6 @@ export const Sourcerer = React.memo<SourcererComponentProps>(({ scope: scopeId }
                 data-test-subj="sourcerer-reset"
                 flush="left"
                 onClick={resetDataSources}
-                size="l"
                 title={i18n.INDEX_PATTERNS_RESET}
               >
                 {i18n.INDEX_PATTERNS_RESET}

x-pack/plugins/security_solution/public/timelines/components/timeline/search_or_filter/pick_events.tsx

@@ -375,7 +375,6 @@ const PickEventTypeComponents: React.FC<PickEventTypeProps> = ({
                   data-test-subj="sourcerer-reset"
                   flush="left"
                   onClick={resetDataSources}
-                  size="l"
                   title={i18n.DATA_SOURCES_RESET}
                 >
                   {i18n.DATA_SOURCES_RESET}

x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx

@@ -204,7 +204,6 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
       incremental: true,
       append: (
         <StyledEuiFilterButton
-          size="l"
           data-test-subj="only-favorites-toggle"
           hasActiveFilters={onlyFavorites}
           onClick={handleOnToggleOnlyFavorites}

x-pack/plugins/translations/translations/ja-JP.json

@@ -272,8 +272,6 @@
     "core.euiColorPicker.colorErrorMessage": "無効な色値",
     "core.euiColorPicker.colorLabel": "色値",
     "core.euiColorPicker.openLabel": "Escapeキーを押すと、ポップオーバーを閉じます",
-    "core.euiColorPicker.screenReaderAnnouncement": "選択可能な色の範囲を表示するポップアップが開きました。選択可能な色を閲覧するには Tab を押し、Esc でこのポップアップを閉じます。",
-    "core.euiColorPicker.swatchAriaLabel": "{swatch} を色として選択します",
     "core.euiColorPicker.transparent": "透明",
     "core.euiColorStops.screenReaderAnnouncement": "{label}：{readOnly} {disabled}色終了位置ピッカー。各終了には数値と対応するカラー値があります。上下矢印キーを使用して、個別の終了を選択します。Enterキーを押すと、新しい終了を作成します。",
     "core.euiColorStopThumb.buttonAriaLabel": "Enterキーを押すと、この点を変更します。Escapeキーを押すと、グループにフォーカスします",
@@ -402,8 +400,6 @@
     "core.euiResizableButton.horizontalResizerAriaLabel": "左右矢印キーを押してパネルサイズを調整します",
     "core.euiResizableButton.verticalResizerAriaLabel": "上下矢印キーを押してパネルサイズを調整します",
     "core.euiResizablePanel.toggleButtonAriaLabel": "押すと、このパネルを切り替えます",
-    "core.euiSaturation.roleDescription": "HSV カラーモード彩度と値の選択",
-    "core.euiSaturation.screenReaderAnnouncement": "矢印キーで四角いカラーグラデーションを操作します。キーを押すごとに移動する座標が 0 から 1 の範囲で HSV カラーモードの「彩度」と「値」の数字に使用されます。左で「彩度」の値を下げ、右で上げます。上で「値」の値を上げ、下で下げます。",
     "core.euiSelectable.loadingOptions": "オプションを読み込み中",
     "core.euiSelectable.noAvailableOptions": "利用可能なオプションがありません",
     "core.euiSelectable.noMatchingOptions": "{searchValue} はどのオプションにも一致していません",

x-pack/plugins/translations/translations/zh-CN.json

@@ -275,8 +275,6 @@
     "core.euiColorPicker.colorErrorMessage": "颜色值无效",
     "core.euiColorPicker.colorLabel": "颜色值",
     "core.euiColorPicker.openLabel": "按 Esc 键关闭弹出框",
-    "core.euiColorPicker.screenReaderAnnouncement": "具有一系列可选颜色的弹出式窗口打开。按 Tab 键正向遍历颜色选项或按 Esc 键关闭此弹出式窗口。",
-    "core.euiColorPicker.swatchAriaLabel": "将 {swatch} 选为颜色",
     "core.euiColorPicker.transparent": "透明",
     "core.euiColorStops.screenReaderAnnouncement": "{label}：{readOnly} {disabled} 颜色停止点选取器。每个停止点由数字和相应颜色值构成。使用向下和向上箭头键选择单个停止点。按 Enter 键创建新的停止点。",
     "core.euiColorStopThumb.buttonAriaLabel": "按 Enter 键修改此停止点。按 Esc 键聚焦该组",
@@ -405,8 +403,6 @@
     "core.euiResizableButton.horizontalResizerAriaLabel": "按左或右箭头键调整面板大小",
     "core.euiResizableButton.verticalResizerAriaLabel": "按上或下箭头键调整面板大小",
     "core.euiResizablePanel.toggleButtonAriaLabel": "按下切换此面板",
-    "core.euiSaturation.roleDescription": "HSV 颜色模式饱和度和值选择",
-    "core.euiSaturation.screenReaderAnnouncement": "使用箭头键导航四色调颜色方案。每次按键生成的坐标将用于计算 HSV 颜色模式“饱和度”和“值”数值（范围为 0 至 1）。左箭头键和右箭头键分别减少和增加“饱和度”值。上箭头键和下箭头键分别减少和增加“值”值。",
     "core.euiSelectable.loadingOptions": "正在加载选项",
     "core.euiSelectable.noAvailableOptions": "没有任何可用选项",
     "core.euiSelectable.noMatchingOptions": "{searchValue} 不匹配任何选项",

x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx

@@ -92,5 +92,6 @@ test('if action is beta, beta badge is shown', () => {
     }
   );
   const screen = render(<Demo actionFactories={[dashboardFactory, betaUrl]} />);
-  expect(screen.getByText(/Beta/i)).toBeVisible();
+  // Uses the single letter beta badge
+  expect(screen.getByText(/^B/i)).toBeVisible();
 });

x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_flyout.tsx

@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import React, { useEffect, useRef, ReactNode } from 'react';
+import React, { useEffect, useRef } from 'react';
 
-import styled, { StyledComponent } from 'styled-components';
+import styled from 'styled-components';
 
 import {
   EuiFlyout,
@@ -49,11 +49,7 @@ export const RESPONSE_HEADERS = i18n.translate(
   }
 );
 
-// TODO: EUI team follow up on complex types and styled-components `styled`
-// https://github.com/elastic/eui/issues/4855
-const FlyoutContainer: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
-  EuiFlyout
-)`
+const FlyoutContainer = styled(EuiFlyout)`
   z-index: ${(props) => props.theme.eui.euiZLevel5};
 `;
 

x-pack/test/functional/page_objects/tag_management_page.ts

@@ -57,6 +57,8 @@ class TagModal extends FtrService {
     }
     if (fields.color !== undefined) {
       await this.testSubjects.setValue('~createModalField-color', fields.color);
+      // Wait for the popover to be closable before moving to the next input
+      await new Promise((res) => setTimeout(res, 200));
     }
     if (fields.description !== undefined) {
       await this.testSubjects.click('createModalField-description');

yarn.lock

@@ -1466,10 +1466,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@35.0.0":
-  version "35.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-35.0.0.tgz#e270b4f4ce216b8bba7dc874464bfc76c242e8ce"
-  integrity sha512-btjkhFb017iY5OM60ka0w+N4TqNeEpsXfaVmvPB5AzYMCT4wLC1L4I2xBD7W2xQbk5fTpKuh9Q6fOk3hmv3iKQ==
+"@elastic/eui@36.0.0":
+  version "36.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-36.0.0.tgz#ebb180e859fd86171b5f84d08f8c958bb659b1cd"
+  integrity sha512-VLwtHZp3Qdj+vWR8wSNwxEYpGtJIdiErq0/PBsg83HDfz4KwgEveSI6STwODLgiUDr/YnpDhawuz+HU3JpfXRg==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"