@redsift/dashboard 7.7.0-alpha.0 → 7.7.0-alpha.2

package/index.js

@@ -1,4 +1,4 @@
-import { ColorTheme, getColorScale, scheme, StyledHorizontalBarChartTitle, StyledHorizontalBarChartCaption, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant, StyledPieChartTitle, StyledPieChartCenterText, StyledPieChartLabel, StyledPieChartCaption } from '@redsift/charts';
+import { ColorTheme, getColorScale, scheme, StyledHorizontalBarChartTitle, StyledHorizontalBarChartCaption, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant, StyledPieChartTitle, StyledPieChartCenterText, StyledPieChartLabel, StyledPieChartCaption, monochrome } from '@redsift/charts';
 export { ColorTheme, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant } from '@redsift/charts';
 import React, { useContext, useState, useLayoutEffect, useMemo, useEffect, useRef, useCallback, forwardRef, useReducer, useId } from 'react';
 import styled, { css } from 'styled-components';
@@ -9,7 +9,10 @@ import { config, rowChart, redrawAll, filterAll, pieChart, barChart, filters } f
 import { saveAs } from 'file-saver';
 import { Font, StyleSheet, Document, Page, View, Image, Text as Text$1, pdf } from '@react-pdf/renderer';
 import domToImage from 'dom-to-image';
+import * as d3 from 'd3';
 import { sum, utcParse, timeFormat, isoParse, timeMonth, scaleTime, timeMonths, timeYear, timeYears, timeWeek, timeWeeks, timeDay, timeDays, timeHour, timeHours } from 'd3';
+import * as fc from 'd3fc';
+import * as d3Annotation from 'd3-svg-annotation';
 
 const groupReduceCount = d => d.group().reduceCount();
 const COUNT = groupReduceCount;
@@ -18,6 +21,9 @@ const groupReduceSum = field => d => d.group().reduceSum(d => d[field]);
 const SUM = groupReduceSum;
 
 // Material Design Icons v7.1.96
+var mdiCheckboxBlankOutline = "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z";
+var mdiCheckboxMarked = "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+var mdiMinusBox = "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
 var mdiRefresh = "M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z";
 
 /**
@@ -65,6 +71,24 @@ const NeutralColorPalette = {
 
 const RedsiftColorDefaultPrimary = '#0079e1';
 
+/**
+ * Display a warning if no label was found for screen readers and assistive technologies.
+ *
+ * @param props Component props containing the aria-label and aria-labelledby params to check for.
+ * @param additionalKeysToCheck Additional props to check that can act as a label for screen readers (i.e. children).
+ */
+const warnIfNoAccessibleLabelFound = (props, additionalKeysToCheck) => {
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby
+  } = props;
+  const hasText = additionalKeysToCheck && additionalKeysToCheck.filter(key => !!key).length > 0;
+  const hasAriaLabel = Boolean(ariaLabel || ariaLabelledby);
+  if (!hasAriaLabel && !hasText) {
+    console.warn('You must provide a label for accessibility');
+  }
+};
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1934,6 +1958,11 @@ let $507fabe10e71c6fb$var$changeHandlers = new Set();
 let $507fabe10e71c6fb$var$hasSetupGlobalListeners = false;
 let $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
 let $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
+// Only Tab or Esc keys will make focus visible on text input elements
+const $507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS = {
+    Tab: true,
+    Escape: true
+};
 function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e) {
     for (let handler of $507fabe10e71c6fb$var$changeHandlers)handler(modality, e);
 }
@@ -2018,9 +2047,95 @@ if (typeof document !== "undefined") {
     if (document.readyState !== "loading") $507fabe10e71c6fb$var$setupGlobalFocusEvents();
     else document.addEventListener("DOMContentLoaded", $507fabe10e71c6fb$var$setupGlobalFocusEvents);
 }
+function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
+    return $507fabe10e71c6fb$var$currentModality !== "pointer";
+}
 function $507fabe10e71c6fb$export$630ff653c5ada6a9() {
     return $507fabe10e71c6fb$var$currentModality;
 }
+/**
+ * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that
+ * focus visible style can be properly set.
+ */ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) {
+    return !(isTextInput && modality === "keyboard" && e instanceof KeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
+}
+function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
+    $507fabe10e71c6fb$var$setupGlobalFocusEvents();
+    (useEffect)(()=>{
+        let handler = (modality, e)=>{
+            if (!$507fabe10e71c6fb$var$isKeyboardFocusEvent(opts === null || opts === void 0 ? void 0 : opts.isTextInput, modality, e)) return;
+            fn($507fabe10e71c6fb$export$b9b3dfddab17db27());
+        };
+        $507fabe10e71c6fb$var$changeHandlers.add(handler);
+        return ()=>{
+            $507fabe10e71c6fb$var$changeHandlers.delete(handler);
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+}
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ // Portions of the code in this file are based on code from react.
+// Original licensing for the following can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+
+
+function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
+    let { isDisabled: isDisabled , onBlurWithin: onBlurWithin , onFocusWithin: onFocusWithin , onFocusWithinChange: onFocusWithinChange  } = props;
+    let state = (useRef)({
+        isFocusWithin: false
+    });
+    let onBlur = (useCallback)((e)=>{
+        // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
+        // when moving focus inside the element. Only trigger if the currentTarget doesn't
+        // include the relatedTarget (where focus is moving).
+        if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
+            state.current.isFocusWithin = false;
+            if (onBlurWithin) onBlurWithin(e);
+            if (onFocusWithinChange) onFocusWithinChange(false);
+        }
+    }, [
+        onBlurWithin,
+        onFocusWithinChange,
+        state
+    ]);
+    let onSyntheticFocus = ($8a9cb279dc87e130$export$715c682d09d639cc)(onBlur);
+    let onFocus = (useCallback)((e)=>{
+        if (!state.current.isFocusWithin) {
+            if (onFocusWithin) onFocusWithin(e);
+            if (onFocusWithinChange) onFocusWithinChange(true);
+            state.current.isFocusWithin = true;
+            onSyntheticFocus(e);
+        }
+    }, [
+        onFocusWithin,
+        onFocusWithinChange,
+        onSyntheticFocus
+    ]);
+    if (isDisabled) return {
+        focusWithinProps: {
+            onFocus: null,
+            onBlur: null
+        }
+    };
+    return {
+        focusWithinProps: {
+            onFocus: onFocus,
+            onBlur: onBlur
+        }
+    };
+}
 
 
 /*
@@ -2207,6 +2322,60 @@ new $9bf71ea28793e738$var$Tree();
 
 
 
+
+
+function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
+    let { autoFocus: autoFocus = false , isTextInput: isTextInput , within: within  } = props;
+    let state = (useRef)({
+        isFocused: false,
+        isFocusVisible: autoFocus || ($507fabe10e71c6fb$export$b9b3dfddab17db27)()
+    });
+    let [isFocused, setFocused] = (useState)(false);
+    let [isFocusVisibleState, setFocusVisible] = (useState)(()=>state.current.isFocused && state.current.isFocusVisible);
+    let updateState = (useCallback)(()=>setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
+    let onFocusChange = (useCallback)((isFocused)=>{
+        state.current.isFocused = isFocused;
+        setFocused(isFocused);
+        updateState();
+    }, [
+        updateState
+    ]);
+    ($507fabe10e71c6fb$export$ec71b4b83ac08ec3)((isFocusVisible)=>{
+        state.current.isFocusVisible = isFocusVisible;
+        updateState();
+    }, [], {
+        isTextInput: isTextInput
+    });
+    let { focusProps: focusProps  } = ($a1ea59d68270f0dd$export$f8168d8dd8fd66e6)({
+        isDisabled: within,
+        onFocusChange: onFocusChange
+    });
+    let { focusWithinProps: focusWithinProps  } = ($9ab94262bd0047c7$export$420e68273165f4ec)({
+        isDisabled: !within,
+        onFocusWithinChange: onFocusChange
+    });
+    return {
+        isFocused: isFocused,
+        isFocusVisible: state.current.isFocused && isFocusVisibleState,
+        focusProps: within ? focusWithinProps : focusProps
+    };
+}
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
 let $e6afbd83fe6ebbd2$var$FocusableContext = /*#__PURE__*/ (React).createContext(null);
 function $e6afbd83fe6ebbd2$var$useFocusableContext(ref) {
     let context = (useContext)($e6afbd83fe6ebbd2$var$FocusableContext) || {};
@@ -2641,10 +2810,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$b = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$b = 'Icon';
-const CLASSNAME$b = 'redsift-icon';
-const DEFAULT_PROPS$a = {
+const _excluded$e = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$e = 'Icon';
+const CLASSNAME$e = 'redsift-icon';
+const DEFAULT_PROPS$d = {
   size: IconSize.medium
 };
 
@@ -2662,7 +2831,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   return /*#__PURE__*/React.createElement(StyledIcon, _extends({}, forwardedProps, {
     $color: color,
     $size: size,
@@ -2684,9 +2853,9 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     fill: "currentColor"
   })), badge ? badge : null);
 });
-Icon.className = CLASSNAME$b;
-Icon.defaultProps = DEFAULT_PROPS$a;
-Icon.displayName = COMPONENT_NAME$b;
+Icon.className = CLASSNAME$e;
+Icon.defaultProps = DEFAULT_PROPS$d;
+Icon.displayName = COMPONENT_NAME$e;
 
 /**
  * Component variant.
@@ -2869,7 +3038,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$a = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$d = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -2881,13 +3050,13 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$a = 'Spinner';
-const CLASSNAME$a = 'redsift-shield';
-const DEFAULT_PROPS$9 = {
+const COMPONENT_NAME$d = 'Spinner';
+const CLASSNAME$d = 'redsift-shield';
+const DEFAULT_PROPS$c = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
-const sizeToDimension$3 = size => {
+const sizeToDimension$4 = size => {
   switch (size) {
     case SpinnerSize.xsmall:
       return {
@@ -2924,11 +3093,11 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color: propsColor,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const {
     width,
     height
-  } = sizeToDimension$3(size);
+  } = sizeToDimension$4(size);
   const appContainerState = useContext(AppContainerContext);
   const color = propsColor === ColorPalette.default && appContainerState && appContainerState.productTheme ? appContainerState.productTheme : propsColor;
   const stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1(intlMessages);
@@ -2946,14 +3115,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$a;
-Spinner.defaultProps = DEFAULT_PROPS$9;
-Spinner.displayName = COMPONENT_NAME$a;
-
-const _excluded$9 = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
-const COMPONENT_NAME$9 = 'Button';
-const CLASSNAME$9 = 'redsift-button';
-const DEFAULT_PROPS$8 = {
+Spinner.className = CLASSNAME$d;
+Spinner.defaultProps = DEFAULT_PROPS$c;
+Spinner.displayName = COMPONENT_NAME$d;
+
+const _excluded$c = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
+const COMPONENT_NAME$c = 'Button';
+const CLASSNAME$c = 'redsift-button';
+const DEFAULT_PROPS$b = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -2990,7 +3159,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({}, forwardedProps, buttonProps, {
     $color: color,
     $fullWidth: fullWidth,
@@ -3014,9 +3183,9 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-Button.className = CLASSNAME$9;
-Button.defaultProps = DEFAULT_PROPS$8;
-Button.displayName = COMPONENT_NAME$9;
+Button.className = CLASSNAME$c;
+Button.defaultProps = DEFAULT_PROPS$b;
+Button.displayName = COMPONENT_NAME$c;
 
 /**
  * Component style.
@@ -3034,10 +3203,10 @@ const StyledFlexbox = styled.div`
   ${baseFlexbox}
 `;
 
-const _excluded$8 = ["children", "className"];
-const COMPONENT_NAME$8 = 'Flexbox';
-const CLASSNAME$8 = 'redsift-flex-box';
-const DEFAULT_PROPS$7 = {
+const _excluded$b = ["children", "className"];
+const COMPONENT_NAME$b = 'Flexbox';
+const CLASSNAME$b = 'redsift-flex-box';
+const DEFAULT_PROPS$a = {
   gap: '16px'
 };
 
@@ -3049,15 +3218,418 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
   return /*#__PURE__*/React.createElement(StyledFlexbox, _extends({}, forwardedProps, {
     className: classNames(Flexbox.className, className),
     ref: ref
   }), children);
 });
-Flexbox.className = CLASSNAME$8;
-Flexbox.defaultProps = DEFAULT_PROPS$7;
-Flexbox.displayName = COMPONENT_NAME$8;
+Flexbox.className = CLASSNAME$b;
+Flexbox.defaultProps = DEFAULT_PROPS$a;
+Flexbox.displayName = COMPONENT_NAME$b;
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component orientation.
+ */
+const CheckboxGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+const CheckboxGroupContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Component style.
+ */
+const StyledCheckboxGroup = styled.div`
+  ${baseStyling}
+
+  display: flex;
+  flex-direction: column;
+
+  ${_ref => {
+  let {
+    $orientation
+  } = _ref;
+  return $orientation === CheckboxGroupOrientation.vertical ? `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: column;
+    }
+  ` : `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `;
+}}
+
+  span.redsift-checkbox-group-label {
+    font-family: var(--redsift-typography-body-font-family);
+    font-weight: var(--redsift-typography-body-font-weight);
+    font-size: var(--redsift-typography-body-font-size);
+    line-height: var(--redsift-typography-body-line-height);
+
+    color: var(--redsift-color-neutral-black);
+    ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled ? `
+      color: var(--redsift-color-neutral-midgrey);
+    ` : '';
+}}
+    ${_ref3 => {
+  let {
+    $isInvalid
+  } = _ref3;
+  return $isInvalid ? `
+      color: var(--redsift-color-error-primary);
+    ` : '';
+}}
+  }
+
+  span.redsift-checkbox-group-description {
+    font-family: var(--redsift-typography-helper-font-family);
+    font-weight: var(--redsift-typography-helper-font-weight);
+    font-size: var(--redsift-typography-helper-font-size);
+    line-height: var(--redsift-typography-helper-line-height);
+
+    color: var(--redsift-color-neutral-darkgrey);
+    ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? `
+      color: var(--redsift-color-neutral-midgrey);
+    ` : '';
+}}
+    ${_ref5 => {
+  let {
+    $isInvalid
+  } = _ref5;
+  return $isInvalid ? `
+      color: var(--redsift-color-error-primary);
+    ` : '';
+}}
+  }
+`;
+
+const _excluded$a = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME$a = 'CheckboxGroup';
+const CLASSNAME$a = 'redsift-checkbox-group';
+const DEFAULT_PROPS$9 = {
+  color: ColorPalette.default,
+  orientation: CheckboxGroupOrientation.vertical
+};
+
+/**
+ * The CheckboxGroup component.
+ * Can be used as controlled or uncontrolled.
+ */
+const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultValues,
+      description,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      onChange,
+      orientation,
+      possibleValues,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+  const [selectedValues, setValue] = useState(value || defaultValues || []);
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+  const state = {
+    value: selectedValues,
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    possibleValues: possibleValues,
+    setValue(values) {
+      if (isReadOnly || isDisabled) {
+        return;
+      }
+      setValue(values);
+    },
+    addValue(value) {
+      if (!selectedValues.includes(value)) {
+        setValue(selectedValues.concat(value));
+        if (onChange) {
+          onChange(selectedValues.concat(value));
+        }
+      }
+    },
+    removeValue(value) {
+      if (selectedValues.includes(value)) {
+        setValue(selectedValues.filter(existingValue => existingValue !== value));
+        if (onChange) {
+          onChange(selectedValues.filter(existingValue => existingValue !== value));
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledCheckboxGroup, _extends({}, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
+    $isReadOnly: isReadOnly,
+    $orientation: orientation,
+    "aria-disabled": isDisabled,
+    className: classNames(CheckboxGroup.className, className),
+    ref: ref,
+    role: "group"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: `${CheckboxGroup.className}-label`
+  }, label, isRequired ? ' *' : null), /*#__PURE__*/React.createElement("div", {
+    className: `${CheckboxGroup.className}-boxes`
+  }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+    value: state
+  }, children)), /*#__PURE__*/React.createElement("span", {
+    className: `${CheckboxGroup.className}-description`
+  }, description));
+});
+CheckboxGroup.className = CLASSNAME$a;
+CheckboxGroup.defaultProps = DEFAULT_PROPS$9;
+CheckboxGroup.displayName = COMPONENT_NAME$a;
+
+/**
+ * Component style.
+ */
+const StyledCheckbox = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: baseline;
+  background: none;
+  border: none;
+  display: inline-flex;
+
+  input {
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  span.label {
+    ${_ref => {
+  let {
+    $isDisabled,
+    $isInvalid
+  } = _ref;
+  return $isDisabled ? css`
+            color: var(--redsift-color-neutral-midgrey);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-error-primary);
+          ` : css`
+            color: var(--redsift-color-neutral-black);
+          `;
+}}
+
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+    padding-left: 4px;
+    padding-right: 16px;
+    position: relative;
+    top: -4px;
+
+    [dir='rtl'] & {
+      padding-left: 16px;
+      padding-right: 4px;
+    }
+  }
+
+  .redsift-icon {
+    padding: 2px;
+    width: 24px;
+
+    ${_ref2 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isFocusVisible
+  } = _ref2;
+  return css`
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-midgrey);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-error-primary);
+          ` : css`
+            color: var(
+              --redsift-color-${$isColored ? 'default' : 'question'}-primary
+            );
+          `}
+
+      ${$isFocusVisible && !$isDisabled ? css`
+            background-color: var(
+              --redsift-color-${$isColored ? 'default' : 'question'}-hover
+            );
+          ` : ''}
+    `;
+}}
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isColored,
+    $isDisabled
+  } = _ref3;
+  return !$isDisabled ? css`
+            .redsift-icon {
+              background-color: var(
+                --redsift-color-${$isColored ? 'default' : 'question'}-hover
+              );
+            }
+          ` : '';
+}}
+  }
+`;
+
+const _excluded$9 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$9 = 'Checkbox';
+const CLASSNAME$9 = 'redsift-checkbox';
+const DEFAULT_PROPS$8 = {
+  isColored: true
+};
+
+/**
+ * The Checkbox component.
+ * Works both inside a CheckboxGroup or as standalone.
+ * Can be used as controlled or uncontrolled.
+ */
+const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(CheckboxGroupContext);
+  let {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      children,
+      className,
+      defaultSelected,
+      inputProps,
+      inputRef,
+      isColored,
+      isControlled,
+      isDisabled,
+      isIndeterminate,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isSelected: propsIsSelected,
+      name,
+      onChange,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+  const {
+    isFocusVisible,
+    focusProps
+  } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    autoFocus
+  });
+  isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
+  isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
+  const [isSelected, setSelected] = useState((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value));
+  useEffect(() => {
+    setSelected(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected);
+  }, [propsIsSelected, defaultSelected]);
+  useEffect(() => {
+    if (groupState) {
+      setSelected(groupState.value.includes(value));
+    }
+  }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
+  warnIfNoAccessibleLabelFound(props, [children]);
+  if (groupState && !isControlled) {
+    if (propsIsSelected != null) {
+      console.warn('isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (defaultSelected != null) {
+      console.warn('defaultSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (props.value == null) {
+      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property unless the <Checkbox> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      if (!groupState.value.includes(value)) {
+        groupState.addValue(value);
+      } else {
+        groupState.removeValue(value);
+      }
+    }
+    if (onChange) {
+      onChange(!isSelected, value, name, event, groupState);
+    }
+    setSelected(event.target.checked);
+  }, [onChange, groupState]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, _extends({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !isSelected,
+    $isRequired: isRequired,
+    $isSelected: isSelected,
+    className: classNames(Checkbox.className, className),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, focusProps, {
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : isIndeterminate ? 'mixed' : 'false',
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !isSelected,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    checked: isSelected ? true : false,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    ref: inputRef,
+    type: "checkbox",
+    value: value
+  })), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiCheckboxMarked
+  }) : isIndeterminate ? /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiMinusBox
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiCheckboxBlankOutline
+  }), children ? /*#__PURE__*/React.createElement("span", {
+    className: "label"
+  }, children) : null);
+});
+Checkbox.className = CLASSNAME$9;
+Checkbox.defaultProps = DEFAULT_PROPS$8;
+Checkbox.displayName = COMPONENT_NAME$9;
 
 /**
  * Component variant.
@@ -3176,10 +3748,10 @@ const StyledText = styled.span`
 }}
 `;
 
-const _excluded$7 = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
-const COMPONENT_NAME$7 = 'Text';
-const CLASSNAME$7 = 'redsift-text';
-const DEFAULT_PROPS$6 = {
+const _excluded$8 = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
+const COMPONENT_NAME$8 = 'Text';
+const CLASSNAME$8 = 'redsift-text';
+const DEFAULT_PROPS$7 = {
   fontFamily: FontFamily.raleway
 };
 
@@ -3198,7 +3770,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
   return /*#__PURE__*/React.createElement(StyledText, _extends({
     as: as
   }, forwardedProps, {
@@ -3213,9 +3785,9 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), children);
 });
-Text.className = CLASSNAME$7;
-Text.defaultProps = DEFAULT_PROPS$6;
-Text.displayName = COMPONENT_NAME$7;
+Text.className = CLASSNAME$8;
+Text.defaultProps = DEFAULT_PROPS$7;
+Text.displayName = COMPONENT_NAME$8;
 
 /**
  * Component style.
@@ -3224,10 +3796,10 @@ const StyledNumber = styled(StyledText)`
   font-family: var(--redsift-typography-font-family-source-code-pro);
 `;
 
-const _excluded$6 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
-const COMPONENT_NAME$6 = 'Number';
-const CLASSNAME$6 = 'redsift-number';
-const DEFAULT_PROPS$5 = {
+const _excluded$7 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const COMPONENT_NAME$7 = 'Number';
+const CLASSNAME$7 = 'redsift-number';
+const DEFAULT_PROPS$6 = {
   compactDisplay: 'short',
   currencyDisplay: 'symbol',
   currencySign: 'standard',
@@ -3276,7 +3848,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
   const formatter = $a916eb452884faea$export$b7a616150fdb9f44(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     compactDisplay,
     currency,
@@ -3323,9 +3895,9 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), formatter.format(value));
 });
-Number$1.className = CLASSNAME$6;
-Number$1.defaultProps = DEFAULT_PROPS$5;
-Number$1.displayName = COMPONENT_NAME$6;
+Number$1.className = CLASSNAME$7;
+Number$1.defaultProps = DEFAULT_PROPS$6;
+Number$1.displayName = COMPONENT_NAME$7;
 
 /**
  * Component style.
@@ -3357,9 +3929,9 @@ const StyledResetButton = styled(Button)`
   margin-top: 8px;
 `;
 
-const COMPONENT_NAME$5 = 'ChartEmptyState';
-const CLASSNAME$5 = 'redsift-chart-empty-state';
-const DEFAULT_PROPS$4 = {
+const COMPONENT_NAME$6 = 'ChartEmptyState';
+const CLASSNAME$6 = 'redsift-chart-empty-state';
+const DEFAULT_PROPS$5 = {
   title: 'No Data Available',
   subtitle: 'Please check the applied filters',
   resetLabel: 'Reset all filters'
@@ -3508,9 +4080,9 @@ const ChartEmptyState = /*#__PURE__*/forwardRef((props, ref) => {
     onPress: onReset
   }, resetLabel) : null);
 });
-ChartEmptyState.className = CLASSNAME$5;
-ChartEmptyState.defaultProps = DEFAULT_PROPS$4;
-ChartEmptyState.displayName = COMPONENT_NAME$5;
+ChartEmptyState.className = CLASSNAME$6;
+ChartEmptyState.defaultProps = DEFAULT_PROPS$5;
+ChartEmptyState.displayName = COMPONENT_NAME$6;
 
 const initialState = {
   tableFilters: []
@@ -3592,10 +4164,10 @@ const DashboardReducer = (state, action) => {
   }
 };
 
-const _excluded$5 = ["children", "className", "data"];
-const COMPONENT_NAME$4 = 'Dashboard';
-const CLASSNAME$4 = 'redsift-dashboard-container';
-const DEFAULT_PROPS$3 = {};
+const _excluded$6 = ["children", "className", "data"];
+const COMPONENT_NAME$5 = 'Dashboard';
+const CLASSNAME$5 = 'redsift-dashboard-container';
+const DEFAULT_PROPS$4 = {};
 const Dashboard = /*#__PURE__*/forwardRef((props, ref) => {
   const providerRef = ref || useRef();
   const dataGridApiRef = useGridApiRef();
@@ -3604,7 +4176,7 @@ const Dashboard = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       data
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
   const [state, dispatch] = useReducer(DashboardReducer, {
     tableFilters: []
   });
@@ -3623,17 +4195,17 @@ const Dashboard = /*#__PURE__*/forwardRef((props, ref) => {
     value: value
   }, children));
 });
-Dashboard.className = CLASSNAME$4;
-Dashboard.defaultProps = DEFAULT_PROPS$3;
-Dashboard.displayName = COMPONENT_NAME$4;
+Dashboard.className = CLASSNAME$5;
+Dashboard.defaultProps = DEFAULT_PROPS$4;
+Dashboard.displayName = COMPONENT_NAME$5;
 
-const _excluded$4 = ["rows", "onFilter"];
+const _excluded$5 = ["rows", "onFilter"];
 const DataGrid = _ref => {
   let {
       rows,
       onFilter
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   const {
     state,
     data,
@@ -3896,10 +4468,10 @@ const useChartAsListbox = _ref => {
   }, [chart]);
 };
 
-const _excluded$3 = ["aria-label", "aria-labelledby", "areXLabelsRotated", "caping", "caption", "className", "data", "datagridFilter", "dimension", "group", "isDimensionArray", "isResetable", "localeText", "onFilter", "others", "setLabels", "size", "theme", "title"];
-const COMPONENT_NAME$3 = 'HorizontalBarChart';
-const CLASSNAME$3 = 'redsift-horizontal-barchart';
-const DEFAULT_PROPS$2 = {
+const _excluded$4 = ["aria-label", "aria-labelledby", "areXLabelsRotated", "caping", "caption", "className", "data", "datagridFilter", "dimension", "group", "isDimensionArray", "isResetable", "localeText", "onFilter", "others", "setLabels", "size", "theme", "title"];
+const COMPONENT_NAME$4 = 'HorizontalBarChart';
+const CLASSNAME$4 = 'redsift-horizontal-barchart';
+const DEFAULT_PROPS$3 = {
   isResetable: true,
   localeText: {
     resetLabel: 'Reset'
@@ -3908,7 +4480,7 @@ const DEFAULT_PROPS$2 = {
   size: HorizontalBarChartSize.medium,
   theme: HorizontalBarChartTheme.default
 };
-const sizeToDimension$2 = size => {
+const sizeToDimension$3 = size => {
   switch (size) {
     case HorizontalBarChartSize.small:
       return {
@@ -3956,7 +4528,7 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       title
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
 
   // Get overriden labels and texts.
   const {
@@ -3964,10 +4536,10 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     emptyChartSubtitle,
     emptyChartResetLabel,
     resetLabel
-  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$2.localeText), localeText);
+  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$3.localeText), localeText);
 
   // Get charts dimensions based on the selected size.
-  const chartDimensions = sizeToDimension$2(size);
+  const chartDimensions = sizeToDimension$3(size);
 
   // Get ndx from context or initialize it.
   const {
@@ -4142,9 +4714,9 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     id: `id${id}__caption`
   }, caption) : null);
 });
-HorizontalBarChart.className = CLASSNAME$3;
-HorizontalBarChart.defaultProps = DEFAULT_PROPS$2;
-HorizontalBarChart.displayName = COMPONENT_NAME$3;
+HorizontalBarChart.className = CLASSNAME$4;
+HorizontalBarChart.defaultProps = DEFAULT_PROPS$3;
+HorizontalBarChart.displayName = COMPONENT_NAME$4;
 
 const BACKGROUND_COLOR = '#F8F8F8';
 const GREY_1 = '#E2E6EA';
@@ -4453,9 +5025,9 @@ const PdfDocument = _ref5 => {
   }))));
 };
 
-const _excluded$2 = ["children", "className", "componentRef", "fileName", "introduction", "localeText", "logo", "onClick", "primaryColor"];
-const COMPONENT_NAME$2 = 'PdfExportButton';
-const CLASSNAME$2 = 'redsift-pdf-export-button';
+const _excluded$3 = ["children", "className", "componentRef", "fileName", "introduction", "localeText", "logo", "onClick", "primaryColor"];
+const COMPONENT_NAME$3 = 'PdfExportButton';
+const CLASSNAME$3 = 'redsift-pdf-export-button';
 const getDashboardImage = async componentRef => {
   var _componentRef$current, _componentRef$current2, _componentRef$current3, _componentRef$current4;
   const filter = el => {
@@ -4487,7 +5059,7 @@ const PdfExportButton = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       primaryColor
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
   const [componentRef, setComponentRef] = useState(propComponentRef);
   const [isLoading, setIsLoading] = useState(false);
   const {
@@ -4547,8 +5119,8 @@ const PdfExportButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: "no-data"
   }) : null, ' ', children);
 });
-PdfExportButton.className = CLASSNAME$2;
-PdfExportButton.displayName = COMPONENT_NAME$2;
+PdfExportButton.className = CLASSNAME$3;
+PdfExportButton.displayName = COMPONENT_NAME$3;
 
 /**
  * Component style.
@@ -4647,10 +5219,10 @@ const StyledPieChartContainer = styled.div`
   }
 `;
 
-const _excluded$1 = ["aria-label", "aria-labelledby", "caping", "caption", "className", "data", "datagridFilter", "isResetable", "labelVariant", "dimension", "group", "isDimensionArray", "localeText", "onFilter", "others", "setLabels", "size", "text", "middleText", "subtext", "theme", "title", "variant"];
-const COMPONENT_NAME$1 = 'PieChart';
-const CLASSNAME$1 = 'redsift-piechart';
-const DEFAULT_PROPS$1 = {
+const _excluded$2 = ["aria-label", "aria-labelledby", "caping", "caption", "className", "data", "datagridFilter", "isResetable", "labelVariant", "dimension", "group", "isDimensionArray", "localeText", "onFilter", "others", "setLabels", "size", "text", "middleText", "subtext", "theme", "title", "variant"];
+const COMPONENT_NAME$2 = 'PieChart';
+const CLASSNAME$2 = 'redsift-piechart';
+const DEFAULT_PROPS$2 = {
   isResetable: true,
   labelVariant: PieChartLabelVariant.internal,
   localeText: {
@@ -4661,7 +5233,7 @@ const DEFAULT_PROPS$1 = {
   theme: PieChartTheme.default,
   variant: PieChartVariant.plain
 };
-const sizeToDimension$1 = size => {
+const sizeToDimension$2 = size => {
   switch (size) {
     case PieChartSize.small:
       return {
@@ -4745,7 +5317,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
 
   // Get overriden labels and texts.
   const {
@@ -4753,10 +5325,10 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     emptyChartSubtitle,
     emptyChartResetLabel,
     resetLabel
-  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$1.localeText), localeText);
+  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$2.localeText), localeText);
 
   // Get charts dimensions based on the selected size.
-  const chartDimensions = sizeToDimension$1(size);
+  const chartDimensions = sizeToDimension$2(size);
   const externalRadiusPadding = 8;
   const innerRadius = sizeToInnerRadius(size);
 
@@ -4954,9 +5526,9 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     id: `id${id}__caption`
   }, caption) : null);
 });
-PieChart.className = CLASSNAME$1;
-PieChart.defaultProps = DEFAULT_PROPS$1;
-PieChart.displayName = COMPONENT_NAME$1;
+PieChart.className = CLASSNAME$2;
+PieChart.defaultProps = DEFAULT_PROPS$2;
+PieChart.displayName = COMPONENT_NAME$2;
 
 /**
  * Component size.
@@ -5055,10 +5627,10 @@ const StyledTimeSeriesBarChartContainer = styled.div`
   }
 `;
 
-const _excluded = ["areXLabelsRotated", "caption", "className", "columnToFilter", "data", "dateTimeFieldName", "dateTimeFormat", "dateTimeGroup", "dimension", "isResetable", "localeText", "onFilter", "size", "theme", "title", "stackedCategory", "xAxisLabel", "yAxisLabel"];
-const COMPONENT_NAME = 'TimeSeriesBarChart';
-const CLASSNAME = 'redsift-timeseries-barchart';
-const DEFAULT_PROPS = {
+const _excluded$1 = ["areXLabelsRotated", "caption", "className", "columnToFilter", "data", "dateTimeFieldName", "dateTimeFormat", "dateTimeGroup", "dimension", "isResetable", "localeText", "onFilter", "size", "theme", "title", "stackedCategory", "xAxisLabel", "yAxisLabel"];
+const COMPONENT_NAME$1 = 'TimeSeriesBarChart';
+const CLASSNAME$1 = 'redsift-timeseries-barchart';
+const DEFAULT_PROPS$1 = {
   dateTimeFormat: '%Y-%m-%d %H:%M:%S',
   dateTimeGroup: 'month',
   isResetable: true,
@@ -5069,7 +5641,7 @@ const DEFAULT_PROPS = {
 };
 const getStartDate = dates => new Date(Math.min(...dates.map(Number)));
 const getEndDate = dates => new Date(Math.max(...dates.map(Number)));
-const sizeToDimension = size => {
+const sizeToDimension$1 = size => {
   switch (size) {
     case TimeSeriesBarChartSize.small:
       return {
@@ -5156,20 +5728,20 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       columnToFilter,
       data,
       dateTimeFieldName,
-      dateTimeFormat = DEFAULT_PROPS.dateTimeFormat,
-      dateTimeGroup = DEFAULT_PROPS.dateTimeGroup,
+      dateTimeFormat = DEFAULT_PROPS$1.dateTimeFormat,
+      dateTimeGroup = DEFAULT_PROPS$1.dateTimeGroup,
       dimension,
       isResetable,
       localeText,
       onFilter,
-      size = DEFAULT_PROPS.size,
+      size = DEFAULT_PROPS$1.size,
       theme = props.stackedCategory ? TimeSeriesBarChartTheme.default : TimeSeriesBarChartTheme.monochrome,
       title,
       stackedCategory,
       xAxisLabel,
       yAxisLabel
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
 
   // Get overriden labels and texts.
   const {
@@ -5177,10 +5749,10 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     emptyChartSubtitle,
     emptyChartResetLabel,
     resetLabel
-  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS.localeText), localeText);
+  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$1.localeText), localeText);
 
   // Get charts dimensions based on the selected size.
-  const chartDimensions = sizeToDimension(size);
+  const chartDimensions = sizeToDimension$1(size);
 
   // Get ndx from context or initialize it.
   const {
@@ -5399,9 +5971,783 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     id: `id${id}__caption`
   }, caption) : null);
 });
-TimeSeriesBarChart.className = CLASSNAME;
-TimeSeriesBarChart.defaultProps = DEFAULT_PROPS;
-TimeSeriesBarChart.displayName = COMPONENT_NAME;
+TimeSeriesBarChart.className = CLASSNAME$1;
+TimeSeriesBarChart.defaultProps = DEFAULT_PROPS$1;
+TimeSeriesBarChart.displayName = COMPONENT_NAME$1;
+
+/**
+ * Component size.
+ */
+const ScatterPlotSize = {
+  xlarge: 'xlarge',
+  large: 'large',
+  medium: 'medium',
+  small: 'small'
+};
+/**
+ * Component's labels variant.
+ */
+const ScatterPlotLabelVariant = {
+  none: 'none',
+  label: 'label',
+  labelValue: 'labelValue',
+  labelPercent: 'labelPercent'
+};
+/**
+ * Component theme.
+ */
+const ScatterPlotTheme = ColorTheme;
+
+/**
+ * Component style.
+ */
+const StyledScatterPlot = styled.div`
+  margin: 8px;
+  padding: 8px;
+  color: var(--redsift-color-neutral-black);
+
+  .annotation-note-bg {
+    fill-opacity: 0.8;
+  }
+
+  .annotation-note-label,
+  .annotation-note-title {
+    fill: var(--redsift-color-neutral-black);
+  }
+
+  .redsift-scatter-plot__chart {
+    display: flex;
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-size: 12px;
+    justify-content: center;
+    margin: 8px 0;
+  }
+
+  svg > g {
+    margin: 8px;
+  }
+
+  g.row {
+    text {
+      cursor: pointer;
+    }
+
+    rect {
+      fill-opacity: 0.9;
+      cursor: pointer;
+    }
+
+    rect.deselected {
+      stroke: none;
+      fill: var(--redsift-color-neutral-lightgrey);
+    }
+  }
+
+  g.row.focused,
+  g.row:hover {
+    rect {
+      fill-opacity: 0.7;
+    }
+  }
+
+  g.row.focused rect.deselected {
+    fill-opacity: 0.3;
+  }
+
+  svg:hover,
+  svg:focus {
+    outline: none;
+  }
+
+  svg:focus-visible {
+    outline: auto;
+  }
+
+  .axis {
+    line.grid-line {
+      fill: none;
+      stroke: #ccc;
+      shape-rendering: crispEdges;
+    }
+
+    text {
+      font-family: var(--redsift-typography-font-family-source-code-pro);
+      font-size: 10px;
+    }
+  }
+`;
+const StyledScatterPlotTitle = styled(Flexbox)`
+  font-family: var(--redsift-typography-h4-font-family);
+  font-size: var(--redsift-typography-h4-font-size);
+  font-weight: var(--redsift-typography-h4-font-weight);
+  line-height: var(--redsift-typography-h4-line-height);
+`;
+const StyledScatterPlotCaption = styled.p`
+  font-family: var(--redsift-typography-caption-font-family);
+  font-size: var(--redsift-typography-caption-font-size);
+  font-weight: var(--redsift-typography-caption-font-weight);
+  line-height: var(--redsift-typography-caption-line-height);
+`;
+const StyledScatterPlotContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-family: var(--redsift-typography-font-family-source-code-pro);
+  font-size: 11px;
+  justify-content: center;
+  margin: 8px 0;
+  position: relative;
+
+  .redsift-scatter-plot-container__chart {
+    position: relative;
+    ${_ref => {
+  let {
+    $isEmpty
+  } = _ref;
+  return $isEmpty ? css`
+            display: none;
+          ` : '';
+}};
+  }
+`;
+const StyledScatterPlotLabel = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 262px;
+  font-size: var(--redsift-typography-caption-font-size);
+  cursor: pointer;
+  opacity: ${_ref2 => {
+  let {
+    $isSelected
+  } = _ref2;
+  return $isSelected ? 1 : 0.3;
+}};
+
+  > div {
+    height: 16px;
+    width: 16px;
+    min-width: 16px;
+    background-color: ${_ref3 => {
+  let {
+    $color
+  } = _ref3;
+  return $color;
+}};
+  }
+`;
+
+const getMinMax = (data, dimension) => {
+  const xValues = data.map(d => dimension(d)[0]);
+  const yValues = data.map(d => dimension(d)[1]);
+  return {
+    minX: Math.min(...xValues),
+    maxX: Math.max(...xValues),
+    minY: Math.min(...yValues),
+    maxY: Math.max(...yValues)
+  };
+};
+
+const _excluded = ["annotations", "caption", "className", "data", "datagridFilter", "dimension", "isResetable", "labelVariant", "localeText", "size", "theme", "title"];
+const COMPONENT_NAME = 'ScatterPlot';
+const CLASSNAME = 'redsift-scatter-plot';
+const DEFAULT_PROPS = {
+  isResetable: true,
+  localeText: {
+    resetLabel: 'Reset'
+  },
+  size: ScatterPlotSize.large,
+  theme: ScatterPlotTheme.default,
+  labelVariant: ScatterPlotLabelVariant.label
+};
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case ScatterPlotSize.small:
+      return {
+        width: 300,
+        height: 200,
+        dotSize: 6
+      };
+    case ScatterPlotSize.medium:
+    default:
+      return {
+        width: 450,
+        height: 300,
+        dotSize: 9
+      };
+    case ScatterPlotSize.large:
+      return {
+        width: 600,
+        height: 450,
+        dotSize: 12
+      };
+    case ScatterPlotSize.xlarge:
+      return {
+        width: 900,
+        height: 600,
+        dotSize: 15
+      };
+  }
+};
+const getCategory = dimension => d => dimension(d)[2];
+const countBy = (arr, getProp) => {
+  const counts = arr.reduce((prev, curr) => (prev[getProp(curr)] = ++prev[getProp(curr)] || 1, prev), {});
+  return Object.keys(counts).map(key => ({
+    key: key,
+    value: counts[key]
+  })).sort((a, b) => b.value - a.value);
+};
+const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
+  const containerRef = ref || useRef();
+  const chartRef = useRef();
+  const scatterPlotRef = useRef();
+  const tooltip = useRef([]);
+  const brushedRange = useRef();
+  const brushedXDomain = useRef();
+  const brushedYDomain = useRef();
+  const id = useId();
+  const {
+      annotations,
+      caption,
+      className,
+      data,
+      datagridFilter,
+      dimension,
+      isResetable,
+      labelVariant,
+      localeText,
+      size,
+      theme,
+      title
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [selectedFields, setSelectedFields] = useState(Array.isArray(annotations) ? annotations.map(annotation => annotation.key) : annotations === null || annotations === void 0 ? void 0 : annotations.defaultSelectedFields);
+  const selectedFieldsRef = useRef(selectedFields);
+
+  // Get overriden labels and texts.
+  const {
+    emptyChartTitle,
+    emptyChartSubtitle,
+    emptyChartResetLabel,
+    resetLabel
+  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS.localeText), localeText);
+
+  // Get charts dimensions based on the selected size.
+  const chartDimensions = sizeToDimension(size);
+
+  // Get ndx from context or initialize it.
+  const {
+    ndx = crossfilter(data),
+    dispatch,
+    data: contextData
+  } = useContext(DashboardContext);
+  const filteredData = useRef([...ndx.all()]);
+  const hasCategories = filteredData.current.length === 0 ? false : dimension(filteredData.current[0]).length === 3;
+  const categories = useRef(filteredData.current.reduce((acc, curr) => {
+    if (acc.indexOf(getCategory(dimension)(curr)) === -1) {
+      acc.push(getCategory(dimension)(curr));
+    }
+    return acc;
+  }, []));
+  const selectedCategoriesRef = useRef([]);
+
+  // Set color scheme.
+  const d3colors = () => {
+    if (categories.current.length) {
+      if (typeof theme === 'object') {
+        return getColorScale(theme);
+      }
+      return d3.scaleOrdinal().domain(categories.current).range(scheme[theme]).unknown(monochrome);
+    }
+    return getColorScale(ScatterPlotTheme.monochrome);
+  };
+
+  // useEffect called only once to initialize the chart.
+  useEffect(() => {
+    if (chartRef.current) {
+      // Compute dimension and group.
+      const {
+        minX,
+        maxX,
+        minY,
+        maxY
+      } = getMinMax(filteredData.current, dimension);
+      const {
+        width,
+        height,
+        dotSize
+      } = chartDimensions;
+      selectedFieldsRef.current = selectedFields;
+      const seriesSvgAnnotation = () => {
+        // the underlying component that we are wrapping
+        const d3Annot = d3Annotation.annotation();
+        let xScale = d3.scaleLinear();
+        let yScale = d3.scaleLinear();
+        const join = fc.dataJoin('g', 'annotation');
+        const series = selection => {
+          selection.each((data, index, group) => {
+            const projectedData = data.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+              x: xScale(dimension(d)[0]),
+              y: yScale(dimension(d)[1])
+            }));
+            d3Annot.annotations(projectedData);
+            join(d3.select(group[index]), projectedData).call(d3Annot);
+          });
+        };
+        series.xScale = function () {
+          if (!arguments.length) {
+            return xScale;
+          }
+          xScale = arguments.length <= 0 ? undefined : arguments[0];
+          return series;
+        };
+        series.yScale = function () {
+          if (!arguments.length) {
+            return yScale;
+          }
+          yScale = arguments.length <= 0 ? undefined : arguments[0];
+          return series;
+        };
+        fc.rebindAll(series, d3Annot);
+        return series;
+      };
+      const createAnnotationData = d => {
+        const isLeft = dimension(d)[0] < maxX - (maxX - minX) / 2;
+        const isTop = dimension(d)[1] >= maxY - (maxY - minY) / 2;
+        const hasNoFieldsToDisplay = !selectedFieldsRef.current || selectedFieldsRef.current.length === 0;
+        return {
+          note: hasNoFieldsToDisplay ? {} : {
+            label: Object.entries(d).filter(_ref => {
+              let [key] = _ref;
+              return selectedFieldsRef.current.includes(key);
+            }).map(_ref2 => {
+              var _ref3, _ref3$find;
+              let [key, value] = _ref2;
+              return `${(_ref3 = Array.isArray(annotations) ? annotations : annotations === null || annotations === void 0 ? void 0 : annotations.selectableFields) === null || _ref3 === void 0 ? void 0 : (_ref3$find = _ref3.find(_ref4 => {
+                let {
+                  key: k
+                } = _ref4;
+                return k === key;
+              })) === null || _ref3$find === void 0 ? void 0 : _ref3$find.value}: ${value}`;
+            }).join('\n'),
+            bgPadding: 5,
+            wrapSplitter: /\n/
+          },
+          x: dimension(d)[0],
+          y: dimension(d)[1],
+          dx: hasNoFieldsToDisplay ? 0 : isLeft ? 20 : -20,
+          dy: hasNoFieldsToDisplay ? 0 : isTop ? 20 : -20
+        };
+      };
+      const annotationSeries = seriesSvgAnnotation().type(d3Annotation.annotationCallout);
+      const xScale = d3.scaleLinear().domain([minX, maxX]);
+      const yScale = d3.scaleLinear().domain([minY, maxY]);
+      const xScaleCopy = xScale.copy();
+      const yScaleCopy = yScale.copy();
+      const pointer = fc.pointer().on('point', _ref5 => {
+        let [point] = _ref5;
+        // https://roadtolarissa.com/scan-sorted/
+        if (!point) return;
+        const coord = {
+          x: xScale.invert(point.x),
+          y: yScale.invert(point.y)
+        };
+        const minPoint = d3.least(ndx.allFiltered(), d => {
+          var dx = dimension(d)[0] - coord.x;
+          var dy = dimension(d)[1] - coord.y;
+          return dx * dx + dy * dy;
+        });
+        if (minPoint) {
+          // @ts-ignore
+          tooltip.current[0] = createAnnotationData(minPoint);
+        }
+        // @ts-ignore
+        d3.select('d3fc-svg').node().requestRedraw();
+      });
+      const pointSeries = fc.seriesWebglPoint().equals((a, b) => a === b).size(dotSize).crossValue(d => dimension(d)[0]).mainValue(d => dimension(d)[1]).decorate((program, data) => {
+        fc.webglFillColor().value(d => {
+          const {
+            r,
+            g,
+            b
+          } = d3.color(d3colors()(dimension(d)[2]));
+          return [(d.selected === false ? Math.round(r * (1 - 0.75) + 255 * 0.75) : r) / 255, (d.selected === false ? Math.round(g * (1 - 0.75) + 255 * 0.75) : g) / 255, (d.selected === false ? Math.round(b * (1 - 0.75) + 255 * 0.75) : b) / 255, 1];
+        }).data(data)(program);
+      });
+      const brush = fc.brush().on('start', () => {
+        brushedRange.current = undefined;
+        brushedXDomain.current = undefined;
+        brushedYDomain.current = undefined;
+        el.datum({
+          data: ndx.allFiltered().map(d => {
+            return _objectSpread2(_objectSpread2({}, d), {}, {
+              selected: selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))
+            });
+          }),
+          annotations: tooltip.current,
+          brushedRange: brushedRange.current
+        }).call(scatterPlot);
+        if (datagridFilter) {
+          dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+            type: DashboardReducerActionType.ResetFilter,
+            filter: {
+              id: `scatter-plot-${id}-min-x`,
+              columnField: datagridFilter.x,
+              operatorValue: '>='
+            }
+          });
+          dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+            type: DashboardReducerActionType.ResetFilter,
+            filter: {
+              id: `scatter-plot-${id}-max-x`,
+              columnField: datagridFilter.x,
+              operatorValue: '<='
+            }
+          });
+          dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+            type: DashboardReducerActionType.ResetFilter,
+            filter: {
+              id: `scatter-plot-${id}-min-y`,
+              columnField: datagridFilter.y,
+              operatorValue: '>='
+            }
+          });
+          dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+            type: DashboardReducerActionType.ResetFilter,
+            filter: {
+              id: `scatter-plot-${id}-max-y`,
+              columnField: datagridFilter.y,
+              operatorValue: '<='
+            }
+          });
+        }
+      }).on('end', e => {
+        if (e.selection) {
+          brushedRange.current = e.selection;
+          brushedXDomain.current = e.xDomain;
+          brushedYDomain.current = e.yDomain;
+          tooltip.current = [];
+          el.datum({
+            data: ndx.allFiltered().map(d => {
+              return _objectSpread2(_objectSpread2({}, d), {}, {
+                selected: dimension(d)[0] >= brushedXDomain.current[0] && dimension(d)[0] <= brushedXDomain.current[1] && dimension(d)[1] >= brushedYDomain.current[0] && dimension(d)[1] <= brushedYDomain.current[1] && (selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d)))
+              });
+            }),
+            annotations: tooltip.current,
+            brushedRange: brushedRange.current
+          }).call(scatterPlot);
+          if (datagridFilter) {
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+              type: DashboardReducerActionType.AppendFilterTableBatch,
+              filter: [{
+                id: `scatter-plot-${id}-min-x`,
+                columnField: datagridFilter.x,
+                operatorValue: '>=',
+                value: e.xDomain[0]
+              }, {
+                id: `scatter-plot-${id}-max-x`,
+                columnField: datagridFilter.x,
+                operatorValue: '<=',
+                value: e.xDomain[1]
+              }, {
+                id: `scatter-plot-${id}-min-y`,
+                columnField: datagridFilter.y,
+                operatorValue: '>=',
+                value: e.yDomain[0]
+              }, {
+                id: `scatter-plot-${id}-max-y`,
+                columnField: datagridFilter.y,
+                operatorValue: '<=',
+                value: e.yDomain[1]
+              }]
+            });
+          }
+        } else if (brushedRange) {
+          brushedRange.current = undefined;
+          brushedXDomain.current = undefined;
+          brushedYDomain.current = undefined;
+          el.datum({
+            data: ndx.allFiltered().map(d => {
+              return _objectSpread2(_objectSpread2({}, d), {}, {
+                selected: selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))
+              });
+            }),
+            annotations: tooltip.current,
+            brushedRange: brushedRange.current
+          }).call(scatterPlot);
+          if (datagridFilter) {
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+              type: DashboardReducerActionType.ResetFilter,
+              filter: {
+                id: `scatter-plot-${id}-min-x`,
+                columnField: datagridFilter.x,
+                operatorValue: '>='
+              }
+            });
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+              type: DashboardReducerActionType.ResetFilter,
+              filter: {
+                id: `scatter-plot-${id}-max-x`,
+                columnField: datagridFilter.x,
+                operatorValue: '<='
+              }
+            });
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+              type: DashboardReducerActionType.ResetFilter,
+              filter: {
+                id: `scatter-plot-${id}-min-y`,
+                columnField: datagridFilter.y,
+                operatorValue: '>='
+              }
+            });
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+              type: DashboardReducerActionType.ResetFilter,
+              filter: {
+                id: `scatter-plot-${id}-max-y`,
+                columnField: datagridFilter.y,
+                operatorValue: '<='
+              }
+            });
+          }
+        }
+      });
+      const scatterPlot = fc.chartCartesian(xScale, yScale).webglPlotArea(fc.seriesWebglMulti().series([pointSeries]).mapping(d => d.data)).svgPlotArea(fc.seriesSvgMulti().series([annotationSeries, brush]).mapping((data, index, series) => {
+        switch (series[index]) {
+          case annotationSeries:
+            return data.annotations;
+          case brush:
+            return data.brushedRange;
+        }
+      })).yOrient('left').decorate(sel => sel.enter().select('d3fc-svg.plot-area').call(pointer));
+      const el = d3.select(chartRef.current).datum({
+        data: ndx.allFiltered(),
+        annotations: tooltip.current,
+        brushedRange: brushedRange.current
+      }).call(scatterPlot);
+      el.style('height', `${height}px`);
+      el.style('width', `${width}px`);
+      const zoom = d3.zoom().filter(event => {
+        if (event.type === 'mousedown' && event.which !== 2) {
+          return false;
+        }
+        return true;
+      }).scaleExtent([1, 500]).translateExtent([[0, 0], [width, height]]).on('zoom', _ref6 => {
+        let {
+          transform
+        } = _ref6;
+        xScale.domain(transform.rescaleX(xScaleCopy).domain());
+        yScale.domain(transform.rescaleY(yScaleCopy).domain());
+        brushedRange.current = undefined;
+        brushedXDomain.current = undefined;
+        brushedYDomain.current = undefined;
+        el.datum({
+          data: ndx.allFiltered().map(d => {
+            return _objectSpread2(_objectSpread2({}, d), {}, {
+              selected: selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))
+            });
+          }),
+          annotations: tooltip.current,
+          brushedRange: brushedRange.current
+        }).call(scatterPlot);
+      });
+      el.select('d3fc-svg.plot-area').on('measure.range', _ref7 => {
+        let {
+          detail
+        } = _ref7;
+        xScaleCopy.range([0, detail.width]);
+        yScaleCopy.range([detail.height, 0]);
+      }).call(zoom).on('dblclick.zoom', () => {
+        el.select('d3fc-svg.plot-area').transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+      });
+      ndx.onChange(() => {
+        filteredData.current = ndx.allFiltered().map(d => {
+          return _objectSpread2(_objectSpread2({}, d), {}, {
+            selected: brushedRange.current ? dimension(d)[0] >= brushedXDomain.current[0] && dimension(d)[0] <= brushedXDomain.current[1] && dimension(d)[1] >= brushedYDomain.current[0] && dimension(d)[1] <= brushedYDomain.current[1] && (selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))) : selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))
+          });
+        });
+        d3.select(chartRef.current).datum({
+          data: filteredData.current,
+          annotations: tooltip.current,
+          brushedRange: brushedRange.current
+        }).call(scatterPlot);
+      });
+      scatterPlotRef.current = scatterPlot;
+    }
+  }, [data, contextData, selectedFields]);
+  return /*#__PURE__*/React.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
+    className: classNames(ScatterPlot.className, className),
+    ref: containerRef,
+    onMouseLeave: () => {
+      tooltip.current = [];
+      d3.select(chartRef.current).datum({
+        data: filteredData.current.map(d => {
+          return _objectSpread2(_objectSpread2({}, d), {}, {
+            selected: brushedRange.current ? dimension(d)[0] >= brushedXDomain.current[0] && dimension(d)[0] <= brushedXDomain.current[1] && dimension(d)[1] >= brushedYDomain.current[0] && dimension(d)[1] <= brushedYDomain.current[1] && (selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))) : selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))
+          });
+        }),
+        annotations: tooltip.current,
+        brushedRange: brushedRange.current
+      }).call(scatterPlotRef.current);
+    }
+  }), /*#__PURE__*/React.createElement(StyledScatterPlotTitle, {
+    className: `${ScatterPlot.className}__title`,
+    alignItems: "center"
+  }, title ? /*#__PURE__*/React.createElement("div", {
+    id: `id${id}__title`
+  }, title) : null, isResetable ? /*#__PURE__*/React.createElement(Button, {
+    variant: "unstyled",
+    onPress: () => {
+      brushedRange.current = undefined;
+      brushedXDomain.current = undefined;
+      brushedYDomain.current = undefined;
+      if (filteredData.current) {
+        filteredData.current = filteredData.current.map(d => {
+          return _objectSpread2(_objectSpread2({}, d), {}, {
+            selected: undefined
+          });
+        });
+      }
+      if (chartRef.current && scatterPlotRef.current) {
+        d3.select(chartRef.current).datum({
+          data: filteredData.current,
+          annotations: tooltip.current,
+          brushedRange: brushedRange.current
+        }).call(scatterPlotRef.current);
+      }
+      if (datagridFilter) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `scatter-plot-${id}-min-x`,
+            columnField: datagridFilter.x,
+            operatorValue: '>='
+          }
+        });
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `scatter-plot-${id}-max-x`,
+            columnField: datagridFilter.x,
+            operatorValue: '<='
+          }
+        });
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `scatter-plot-${id}-min-y`,
+            columnField: datagridFilter.y,
+            operatorValue: '>='
+          }
+        });
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `scatter-plot-${id}-max-y`,
+            columnField: datagridFilter.y,
+            operatorValue: '<='
+          }
+        });
+      }
+    }
+  }, resetLabel) : null), /*#__PURE__*/React.createElement(StyledScatterPlotContainer, {
+    className: `${ScatterPlot.className}__container`,
+    $isEmpty: filteredData.current.length === 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${ScatterPlot.className}-container__chart`,
+    ref: chartRef
+  }), filteredData.current.length === 0 ? /*#__PURE__*/React.createElement(ChartEmptyState, {
+    title: emptyChartTitle,
+    subtitle: emptyChartSubtitle,
+    resetLabel: emptyChartResetLabel,
+    onReset: () => {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.ResetFilters
+      });
+    }
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, labelVariant !== ScatterPlotLabelVariant.none && filteredData.current && categories.current && hasCategories ? /*#__PURE__*/React.createElement("ul", null, countBy(filteredData.current, getCategory(dimension)).map((_ref8, index) => {
+    let {
+      key,
+      value
+    } = _ref8;
+    return /*#__PURE__*/React.createElement(StyledScatterPlotLabel, {
+      key: `pie-external-label _${index}`,
+      $color: d3colors()(key),
+      $isSelected: selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(key),
+      onMouseDown: () => {
+        if (selectedCategoriesRef.current.includes(key)) {
+          selectedCategoriesRef.current = selectedCategoriesRef.current.filter(k => k !== key);
+        } else {
+          selectedCategoriesRef.current = [...selectedCategoriesRef.current, key];
+        }
+        tooltip.current = [];
+        filteredData.current = filteredData.current.map(d => {
+          return _objectSpread2(_objectSpread2({}, d), {}, {
+            selected: brushedRange.current ? dimension(d)[0] >= brushedXDomain.current[0] && dimension(d)[0] <= brushedXDomain.current[1] && dimension(d)[1] >= brushedYDomain.current[0] && dimension(d)[1] <= brushedYDomain.current[1] && (selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))) : selectedCategoriesRef.current.length === 0 || selectedCategoriesRef.current.includes(getCategory(dimension)(d))
+          });
+        });
+        if (datagridFilter && datagridFilter.category) {
+          dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+            type: DashboardReducerActionType.FilterTable,
+            filter: {
+              id: `scatter-plot-${id}-category`,
+              columnField: datagridFilter.category,
+              operatorValue: 'isAnyOf',
+              value: selectedCategoriesRef.current
+            }
+          });
+        }
+      },
+      onMouseUp: () => {
+        d3.select(chartRef.current).datum({
+          data: filteredData.current,
+          annotations: tooltip.current,
+          brushedRange: brushedRange.current
+        }).call(scatterPlotRef.current);
+      }
+    }, /*#__PURE__*/React.createElement("div", null), labelVariant === ScatterPlotLabelVariant.labelValue ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Number$1, {
+      as: "b",
+      maximumFractionDigits: 2,
+      value: value,
+      variant: "inherit"
+    }), /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, key)) : labelVariant === ScatterPlotLabelVariant.labelPercent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Number$1, {
+      as: "b",
+      maximumFractionDigits: 2,
+      type: "percent",
+      value: value / d3.sum(countBy(filteredData.current, getCategory(dimension)), d => d.value),
+      variant: "inherit"
+    }), /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, key)) : /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, key));
+  })) : null)), !Array.isArray(annotations) && filteredData.current && annotations && annotations.selectableFields.length > 0 ? /*#__PURE__*/React.createElement(CheckboxGroup, {
+    "aria-label": "Fields to display when hovering a dot",
+    onChange: setSelectedFields,
+    value: selectedFields,
+    orientation: "horizontal"
+  }, annotations.selectableFields.map(_ref9 => {
+    let {
+      key,
+      value
+    } = _ref9;
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      key: key,
+      value: key
+    }, value);
+  })) : null, caption ? /*#__PURE__*/React.createElement(StyledScatterPlotCaption, {
+    className: `${ScatterPlot.className}__caption`,
+    id: `id${id}__caption`
+  }, caption) : null);
+});
+ScatterPlot.className = CLASSNAME;
+ScatterPlot.defaultProps = DEFAULT_PROPS;
+ScatterPlot.displayName = COMPONENT_NAME;
 
-export { COUNT, ChartEmptyState, Dashboard, DashboardContext, DashboardReducer, DashboardReducerActionType, DataGrid, HorizontalBarChart, HorizontalBarChartSize, HorizontalBarChartTheme, PdfExportButton, PieChart, SUM, TimeSeriesBarChart, TimeSeriesBarChartSize, TimeSeriesBarChartTheme, groupReduceSum, initialState };
+export { COUNT, ChartEmptyState, Dashboard, DashboardContext, DashboardReducer, DashboardReducerActionType, DataGrid, HorizontalBarChart, HorizontalBarChartSize, HorizontalBarChartTheme, PdfExportButton, PieChart, SUM, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotSize, ScatterPlotTheme, TimeSeriesBarChart, TimeSeriesBarChartSize, TimeSeriesBarChartTheme, groupReduceSum, initialState };
 //# sourceMappingURL=index.js.map