@redsift/dashboard 6.3.0 → 7.0.0-alpha.0

package/index.js

@@ -29,12 +29,21 @@ 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,
  * Color palette.
  */
 const ColorPalette = {
-  primary: 'primary',
-  secondary: 'secondary',
+  default: 'default',
+  success: 'success',
   error: 'error',
   warning: 'warning',
   info: 'info',
-  success: 'success'
+  question: 'question',
+  'no-data': 'no-data'
+};
+const ProductColorPalette = {
+  website: 'website',
+  ondmarc: 'ondmarc',
+  oninbox: 'oninbox',
+  ondomain: 'ondomain',
+  hardenize: 'hardenize',
+  tools: 'tools'
 };
 
 function ownKeys(object, enumerableOnly) {
@@ -3329,9 +3338,10 @@ function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
  * Component size.
  */
 const IconSize = {
-  large: 'large',
+  xsmall: 'xsmall',
+  small: 'small',
   medium: 'medium',
-  small: 'small'
+  large: 'large'
 };
 
 /**
@@ -3345,11 +3355,11 @@ const StyledIcon = styled.span`
   let {
     $color
   } = _ref;
-  return $color && Object.keys(ColorPalette).indexOf($color) !== -1 ? css`
-    color: var(--redsift-color-${$color}-main);
-  ` : css`
-    color: ${$color || css`var(--redsift-color-action-active)`};
-  `;
+  return $color && [...Object.keys(ColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-${$color}-primary);
+        ` : css`
+          color: ${$color || css`var(--redsift-color-neutral-darkgrey)`};
+        `;
 }}
 
   ${_ref2 => {
@@ -3359,21 +3369,21 @@ const StyledIcon = styled.span`
   switch ($size) {
     case IconSize.large:
       return css`
-          font-size: 35px;
-          height: 35px;
-          line-height: 35px;
-          width: 35px;
-      
+          font-size: 28px;
+          height: 28px;
+          line-height: 28px;
+          width: 28px;
+
           & .redsift-badge-standard {
             position: absolute;
-            right: -23px;
-            top: 0px;
+            right: -24px;
+            top: -4px;
           }
-        
+
           & .redsift-badge-dot {
             position: absolute;
-            right: -7px;
-            top: 4px;
+            right: -14px;
+            top: 2px;
           }
         `;
     case IconSize.small:
@@ -3382,19 +3392,38 @@ const StyledIcon = styled.span`
           height: 20px;
           line-height: 20px;
           width: 20px;
-      
+
           & .redsift-badge-standard {
             position: absolute;
             right: -24px;
             top: -8px;
           }
-        
+
           & .redsift-badge-dot {
             position: absolute;
-            right: -8px;
+            right: -14px;
             top: 1px;
           }
         `;
+    case IconSize.xsmall:
+      return css`
+          font-size: 16px;
+          height: 16px;
+          line-height: 16px;
+          width: 16px;
+
+          & .redsift-badge-standard {
+            position: absolute;
+            right: -24px;
+            top: -12px;
+          }
+
+          & .redsift-badge-dot {
+            position: absolute;
+            right: -14px;
+            top: -1px;
+          }
+        `;
     case IconSize.medium:
     default:
       return css`
@@ -3402,17 +3431,17 @@ const StyledIcon = styled.span`
           height: 24px;
           line-height: 24px;
           width: 24px;
-      
+
           & .redsift-badge-standard {
             position: absolute;
             right: -24px;
-            top: -6px;
+            top: -5px;
           }
-        
+
           & .redsift-badge-dot {
             position: absolute;
-            right: -8px;
-            top: 2px;
+            right: -14px;
+            top: 1px;
           }
         `;
   }
@@ -3430,7 +3459,6 @@ const DEFAULT_PROPS$6 = {
  * The Icon component.
  */
 const Icon = /*#__PURE__*/forwardRef((props, ref) => {
-  const iconRef = ref || useRef();
   const {
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel,
@@ -3448,7 +3476,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
     "aria-label": ariaLabel,
     className: classNames(Icon.className, className),
-    ref: iconRef
+    ref: ref
   }), /*#__PURE__*/React.createElement("svg", _extends({}, svgProps, {
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
     "aria-label": ariaLabel,
@@ -3474,139 +3502,64 @@ Icon.displayName = COMPONENT_NAME$6;
  * Component variant.
  */
 const ButtonVariant = {
-  contained: 'contained',
-  outlined: 'outlined',
-  text: 'text'
-};
-/**
- * Component size.
- */
-const ButtonSize = {
-  large: 'large',
-  medium: 'medium',
-  small: 'small'
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
 };
 
 /**
  * Component style.
  */
 const StyledButton = styled.button`
-  display: flex;
   align-items: center;
+  background: none;
+  border: none;
+  display: flex;
+  font-family: var(--redsift-typography-button-font-family);
+  font-size: var(--redsift-typography-button-font-size);
+  font-weight: var(--redsift-typography-button-font-weight);
   justify-content: center;
+  line-height: var(--redsift-typography-button-line-height);
   text-decoration: none;
+  text-transform: var(--redsift-typography-button-text-transform);
 
   ${_ref => {
   let {
     $variant,
     $color,
-    $size,
+    $isActive,
     $isDisabled
   } = _ref;
-  switch ($variant) {
-    case ButtonVariant.outlined:
-      return css`
-          border: 1px solid ${$isDisabled ? 'var(--redsift-color-action-disabled-background)' : `var(--redsift-color-${$color}-outlined-resting)`};
-          background-color: transparent;
-          &, .redsift-icon {
-            color: ${$isDisabled ? 'var(--redsift-color-action-disabled)' : `var(--redsift-color-${$color}-main)`};
+  return css`
+    padding: ${$variant === ButtonVariant.secondary ? '7px 15px' : '8px 16px'};
+
+    ${$variant === ButtonVariant.secondary ? css`
+          background-color: ${$isActive ? `var(--redsift-color-${$color}-active)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : 'var(--redsift-color-neutral-white)'};
+          &,
+          .redsift-icon {
+            color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
           }
-
-          padding: ${$size === ButtonSize.small ? '4px 8px' : $size === ButtonSize.medium ? '6px 16px' : '8px 24px'};
-        `;
-    case ButtonVariant.text:
-      return css`
-          border: none;
-          background-color: transparent;
-          &, .redsift-icon {
-            color: ${$isDisabled ? 'var(--redsift-color-action-disabled)' : `var(--redsift-color-${$color}-main)`};
+        ` : $variant === ButtonVariant.unstyled ? css`
+          background-color: ${$isActive ? `var(--redsift-color-${$color}-active)` : $isDisabled ? 'none' : 'none'};
+          &,
+          .redsift-icon {
+            color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
           }
-
-          padding: ${$size === ButtonSize.small ? '4px 4px' : $size === ButtonSize.medium ? '6px 8px' : '8px 8px'};
-        `;
-    case ButtonVariant.contained:
-    default:
-      return css`
-          border: none;
-          background-color: ${$isDisabled ? 'var(--redsift-color-action-disabled-background)' : `var(--redsift-color-${$color}-main)`};
-          &, .redsift-icon {
-            color: ${$isDisabled ? 'var(--redsift-color-action-disabled)' : `var(--redsift-color-${$color}-contrast)`};
+        ` : css`
+          background-color: ${$isActive ? `var(--redsift-color-${$color}-primary-active)` : $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${$color}-primary)`};
+          &,
+          .redsift-icon {
+            color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : 'var(--redsift-color-neutral-white)'};
           }
+        `}
 
-          padding: ${$size === ButtonSize.small ? '4px 8px' : $size === ButtonSize.medium ? '6px 16px' : '8px 24px'};
-        `;
-  }
-}}
-
-  font-family: ${_ref2 => {
-  let {
-    $size
-  } = _ref2;
-  return `var(--redsift-typography-button-${$size}-font-family)`;
-}};
-  font-weight: ${_ref3 => {
-  let {
-    $size
-  } = _ref3;
-  return `var(--redsift-typography-button-${$size}-font-weight)`;
-}};
-  font-size: ${_ref4 => {
-  let {
-    $size
-  } = _ref4;
-  return `var(--redsift-typography-button-${$size}-font-size)`;
-}};
-  line-height: ${_ref5 => {
-  let {
-    $size
-  } = _ref5;
-  return `var(--redsift-typography-button-${$size}-line-height)`;
-}};
-  text-transform: ${_ref6 => {
-  let {
-    $size
-  } = _ref6;
-  return `var(--redsift-typography-button-${$size}-text-transform)`;
+    ${$variant === ButtonVariant.secondary ? css`
+          border: 1px solid
+            ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
+        ` : ''}
+  `;
 }};
 
-  .redsift-icon {
-    ${_ref7 => {
-  let {
-    $size
-  } = _ref7;
-  return $size === ButtonSize.large ? `
-      height: 24px;
-      width: 24px;
-      font-size: 24px;
-      line-height: 24px;
-    ` : '';
-}}
-
-    ${_ref8 => {
-  let {
-    $size
-  } = _ref8;
-  return $size === ButtonSize.medium ? `
-      height: 20px;
-      width: 20px;
-      font-size: 20px;
-      line-height: 20px;
-    ` : '';
-}}
-
-    ${_ref9 => {
-  let {
-    $size
-  } = _ref9;
-  return $size === ButtonSize.small ? `
-      height: 18px;
-      width: 18px;
-      font-size: 18px;
-      line-height: 18px;
-    ` : '';
-}}
-  }
-
   .redsift-icon.left {
     margin-right: 8px;
   }
@@ -3619,66 +3572,81 @@ const StyledButton = styled.button`
   &:focus-visible {
     outline: none;
 
-    ${_ref10 => {
+    ${_ref2 => {
   let {
-    $isDisabled,
     $variant,
-    $color
-  } = _ref10;
-  return !$isDisabled ? css`
-      cursor: pointer;
-
-      ${$variant === ButtonVariant.contained ? css`
-        background-color: var(--redsift-color-${$color}-contained-hover);
-      ` : ''}
-
-      ${$variant === ButtonVariant.outlined ? css`
-        background-color: var(--redsift-color-${$color}-outlined-hover);
-      ` : ''}
-
-      ${$variant === ButtonVariant.text ? css`
-        background-color: var(--redsift-color-${$color}-outlined-hover);
-      ` : ''}
-    ` : '';
-}}
+    $color,
+    $isActive,
+    $isDisabled
+  } = _ref2;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+
+      ${$variant === ButtonVariant.secondary ? css`
+            background-color: ${$isActive ? `var(--redsift-color-${$color}-active-hover)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : `var(--redsift-color-${$color}-hover)`};
+            &,
+            .redsift-icon {
+              color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-secondary)`};
+            }
+          ` : $variant === ButtonVariant.unstyled ? css`
+            background-color: ${$isActive ? `var(--redsift-color-${$color}-active-hover)` : $isDisabled ? 'none' : `var(--redsift-color-${$color}-hover)`};
+            &,
+            .redsift-icon {
+              color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-secondary)`};
+            }
+          ` : css`
+            background-color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${$color}-secondary)`};
+            &,
+            .redsift-icon {
+              color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : 'var(--redsift-color-neutral-white)'};
+            }
+          `}
+
+      ${$variant === ButtonVariant.secondary ? css`
+            border: 1px solid
+              ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
+          ` : `
+        border: none;
+      `}
+    `;
+}};
   }
 
-  ${_ref11 => {
+  ${_ref3 => {
   let {
     $fullWidth
-  } = _ref11;
+  } = _ref3;
   return $fullWidth ? `
-    width: 100%;
-    flex-grow: 1;
+        width: 100%;
+        flex-grow: 1;
 
-    .redsift-icon.left {
-      margin-right: unset;
-    }
+        .redsift-icon.left {
+          margin-right: unset;
+        }
 
-    .redsift-icon.right {
-      margin-left: unset;
-    }
+        .redsift-icon.right {
+          margin-left: unset;
+        }
 
-    span {
-      margin-right: 8px;
-      margin-left: 8px;
-    }
-  ` : '';
+        span {
+          margin-right: 8px;
+          margin-left: 8px;
+        }
+      ` : '';
 }}
 `;
 
-const _excluded$5 = ["children", "className", "color", "disabled", "fullWidth", "isDisabled", "leftIcon", "onPress", "rightIcon", "size", "variant"];
+const _excluded$5 = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "leftIcon", "onPress", "rightIcon", "variant"];
 const COMPONENT_NAME$5 = 'RedSiftButton';
 const CLASSNAME$5 = 'redsift-button';
 const DEFAULT_PROPS$5 = {
-  color: ColorPalette.primary,
-  size: ButtonSize.large,
-  variant: ButtonVariant.contained
+  color: ColorPalette.default,
+  variant: ButtonVariant.primary
 };
 
 /**
  * The Button is a semantic button that looks like a button.
- * 
+ *
  * For a semantic link that looks like a button, please use the ButtonLink component.
  * For a semantic link that looks like a link, please use the Link component.
  * For a semantic button that looks like a link, please use the LinkButton component.
@@ -3696,20 +3664,20 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       disabled,
       fullWidth,
+      isActive,
       isDisabled,
       leftIcon,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPress,
       rightIcon,
-      size,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$5);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({}, forwardedProps, buttonProps, {
     $color: color,
     $fullWidth: fullWidth,
+    $isActive: isActive,
     $isDisabled: isDisabled || disabled,
-    $size: size,
     $variant: variant,
     "aria-disabled": isDisabled || disabled,
     className: classNames(Button.className, className),
@@ -3905,9 +3873,7 @@ const ChartEmptyState = /*#__PURE__*/forwardRef((props, ref) => {
   }, title), /*#__PURE__*/React.createElement("div", {
     className: `${ChartEmptyState.className}__subtitle`
   }, subtitle), onReset ? /*#__PURE__*/React.createElement(StyledResetButton, {
-    variant: "text",
-    size: "small",
-    color: "primary",
+    variant: "unstyled",
     leftIcon: mdiRefresh,
     onPress: onReset
   }, resetLabel) : null);
@@ -4044,7 +4010,7 @@ const HorizontalBarChartTheme = ColorTheme;
 const StyledHorizontalBarChart = styled.div`
   margin: 8px;
   padding: 8px;
-  color: var(--redsift-color-text-primary);
+  color: var(--redsift-color-neutral-black);
 
   .redsift-horizontal-barchart__chart {
     display: flex;
@@ -4070,7 +4036,7 @@ const StyledHorizontalBarChart = styled.div`
 
     rect.deselected {
       stroke: none;
-      fill: var(--redsift-color-text-disabled);
+      fill: var(--redsift-color-neutral-lightgrey);
     }
   }
 
@@ -4081,7 +4047,7 @@ const StyledHorizontalBarChart = styled.div`
     }
   }
 
-  g.pie-slice.focused rect.deselected {
+  g.row.focused rect.deselected {
     fill-opacity: 0.3;
   }
 
@@ -4147,7 +4113,7 @@ const StyledHorizontalBarChartContainer = styled.div`
 `;
 
 /**
- * .
+ * Hook to give to a chart the roles, events and attributes of a listbox.
  */
 const useChartAsListbox = _ref => {
   let {
@@ -4156,6 +4122,7 @@ const useChartAsListbox = _ref => {
     numberOfGroups,
     chartRef,
     chart,
+    labelling,
     orientation = 'horizontal'
   } = _ref;
   const currentIndexRef = useRef(0);
@@ -4236,7 +4203,15 @@ const useChartAsListbox = _ref => {
         // Add role, aria attributes and keyboard events to the group of options.
         chartRef.setAttribute('tabIndex', '0');
         chartRef.setAttribute('role', 'listbox');
-        chartRef.setAttribute('aria-labelledby', `id${id}__title`);
+        if (labelling.ariaLabel) {
+          chartRef.setAttribute('aria-label', labelling.ariaLabel);
+        } else if (labelling.ariaLabelledby) {
+          chartRef.setAttribute('aria-labelledby', labelling.ariaLabelledby);
+        } else if (labelling.hasTitle) {
+          chartRef.setAttribute('aria-labelledby', `id${id}__title`);
+        } else {
+          chartRef.setAttribute('aria-label', labelling.fallbackAriaLabel);
+        }
         chartRef.setAttribute('aria-multiselectable', 'true');
         chartRef.setAttribute('aria-orientation', orientation);
         chartRef.setAttribute('aria-activedescendant', `id${id}__option-0`);
@@ -4263,7 +4238,7 @@ const useChartAsListbox = _ref => {
   }, [chart]);
 };
 
-const _excluded$2 = ["areXLabelsRotated", "caping", "caption", "className", "data", "datagridFilter", "dimension", "group", "isDimensionArray", "isResetable", "localeText", "onFilter", "others", "setLabels", "size", "theme", "title"];
+const _excluded$2 = ["aria-label", "aria-labelledby", "areXLabelsRotated", "caping", "caption", "className", "data", "datagridFilter", "dimension", "group", "isDimensionArray", "isResetable", "localeText", "onFilter", "others", "setLabels", "size", "theme", "title"];
 const COMPONENT_NAME$2 = 'RedSiftHorizontalBarChart';
 const CLASSNAME$2 = 'redsift-horizontal-barchart';
 const DEFAULT_PROPS$2 = {
@@ -4273,8 +4248,7 @@ const DEFAULT_PROPS$2 = {
   },
   others: true,
   size: HorizontalBarChartSize.medium,
-  theme: HorizontalBarChartTheme.default,
-  title: 'Horizontal Bar Chart'
+  theme: HorizontalBarChartTheme.default
 };
 const sizeToDimension$2 = size => {
   switch (size) {
@@ -4304,6 +4278,8 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const [groups, setGroups] = useState();
   const [dimensions, setDimensions] = useState();
   const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
       areXLabelsRotated,
       caping,
       caption,
@@ -4453,18 +4429,23 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     numberOfGroups: numberOfGroups || 0,
     chartRef: chartRef.current,
     chart: chart,
+    labelling: {
+      ariaLabel,
+      ariaLabelledby,
+      hasTitle: !!title,
+      fallbackAriaLabel: 'Horizontal Bar Chart'
+    },
     orientation: 'vertical'
   });
   return /*#__PURE__*/React.createElement(StyledHorizontalBarChart, _extends({}, forwardedProps, {
     className: classNames(HorizontalBarChart.className, className),
     ref: containerRef
   }), /*#__PURE__*/React.createElement(StyledHorizontalBarChartTitle, {
-    className: `${HorizontalBarChart.className}__title`,
+    className: `${HorizontalBarChart.className}__title`
+  }, title ? /*#__PURE__*/React.createElement("div", {
     id: `id${id}__title`
-  }, title, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
-    variant: "text",
-    size: "small",
-    color: "primary",
+  }, title) : null, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
+    variant: "unstyled",
     onPress: () => {
       chart.filter(null);
       redrawAll();
@@ -7530,7 +7511,7 @@ Transform.prototype;
 const StyledPieChart = styled.div`
   margin: 8px;
   padding: 8px;
-  color: var(--redsift-color-text-primary);
+  color: var(--redsift-color-neutral-black);
 
   .redsift-piechart__title {
     display: flex;
@@ -7572,7 +7553,7 @@ const StyledPieChart = styled.div`
   g.pie-slice.deselected {
     path {
       fill-opacity: 0.5;
-      fill: var(--redsift-color-text-disabled);
+      fill: var(--redsift-color-neutral-lightgrey);
     }
   }
 
@@ -7621,7 +7602,7 @@ const StyledPieChartContainer = styled.div`
   }
 `;
 
-const _excluded$1 = ["caping", "caption", "className", "data", "datagridFilter", "isResetable", "labelVariant", "dimension", "group", "isDimensionArray", "localeText", "onFilter", "others", "setLabels", "size", "text", "middleText", "subtext", "theme", "title", "variant"];
+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 = 'RedSiftPieChart';
 const CLASSNAME$1 = 'redsift-piechart';
 const DEFAULT_PROPS$1 = {
@@ -7633,7 +7614,6 @@ const DEFAULT_PROPS$1 = {
   others: true,
   size: PieChartSize.medium,
   theme: PieChartTheme.default,
-  title: 'Pie Chart',
   variant: PieChartVariant.plain
 };
 const sizeToDimension$1 = size => {
@@ -7696,6 +7676,8 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const [groups, setGroups] = useState();
   const [dimensions, setDimensions] = useState();
   const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
       caping,
       caption,
       className,
@@ -7836,7 +7818,13 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     querySelector: 'g.pie-slice',
     numberOfGroups: numberOfGroups || 0,
     chartRef: chartRef.current,
-    chart: chart
+    chart: chart,
+    labelling: {
+      ariaLabel,
+      ariaLabelledby,
+      hasTitle: !!title,
+      fallbackAriaLabel: 'Pie Chart'
+    }
   });
   return /*#__PURE__*/React.createElement(StyledPieChart, _extends({}, forwardedProps, {
     id: id,
@@ -7845,12 +7833,11 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     $spaced: variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut,
     $showLabels: labelVariant === PieChartLabelVariant.internal
   }), /*#__PURE__*/React.createElement(StyledPieChartTitle, {
-    className: `${PieChart.className}__title`,
+    className: `${PieChart.className}__title`
+  }, title ? /*#__PURE__*/React.createElement("div", {
     id: `id${id}__title`
-  }, title, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
-    variant: "text",
-    size: "small",
-    color: "primary",
+  }, title) : null, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
+    variant: "unstyled",
     onPress: () => {
       chart.filter(null);
       redrawAll();
@@ -7924,7 +7911,7 @@ const TimeSeriesBarChartTheme = ColorTheme;
 const StyledTimeSeriesBarChart = styled.div`
   margin: 16px;
   padding: 16px;
-  color: var(--redsift-color-text-primary);
+  color: var(--redsift-color-neutral-black);
 
   .redsift-timeseries-barchart__chart {
     display: flex;
@@ -7954,7 +7941,7 @@ const StyledTimeSeriesBarChart = styled.div`
 
   g.stack rect.bar.deselected {
     fill-opacity: 0.5;
-    fill: var(--redsift-color-text-disabled);
+    fill: var(--redsift-color-neutral-midgrey);
   }
 
   .brush .custom-brush-handle {
@@ -7962,6 +7949,10 @@ const StyledTimeSeriesBarChart = styled.div`
     stroke: #666;
     cursor: ew-resize;
   }
+
+  text {
+    user-select: none;
+  }
 `;
 const StyledTimeSeriesBarChartTitle = styled.div`
   align-items: center;
@@ -8012,8 +8003,7 @@ const DEFAULT_PROPS = {
   localeText: {
     resetLabel: 'Reset'
   },
-  size: TimeSeriesBarChartSize.medium,
-  title: 'Time Series Bar Chart'
+  size: TimeSeriesBarChartSize.medium
 };
 const getStartDate = dates => new Date(Math.min(...dates.map(Number)));
 const getEndDate = dates => new Date(Math.max(...dates.map(Number)));
@@ -8296,12 +8286,11 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(TimeSeriesBarChart.className, className),
     ref: containerRef
   }), /*#__PURE__*/React.createElement(StyledTimeSeriesBarChartTitle, {
-    className: `${TimeSeriesBarChart.className}__title`,
+    className: `${TimeSeriesBarChart.className}__title`
+  }, title ? /*#__PURE__*/React.createElement("div", {
     id: `id${id}__title`
-  }, title, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
-    variant: "text",
-    size: "small",
-    color: "primary",
+  }, title) : null, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
+    variant: "unstyled",
     onPress: () => {
       chart.filter(null);
       redrawAll();