@redsift/dashboard 7.3.0 → 7.4.0-alpha.0

package/CONTRIBUTING.md

@@ -32,7 +32,7 @@ The Design System is following a monorepo architecture, providing multiple packa
 
 - `@redsift/icons`
 
-  This package provides icons based on [Material Design Icon](https://materialdesignicons.com/) library.
+  This package provides icons based on [Material Design Icon](https://pictogrammers.com/library/mdi/) library.
 
 - `@redsift/design-system`
 
@@ -123,7 +123,7 @@ import { Comp } from '~/types';
 import { StyledBadge } from './styles';
 import { BadgeProps } from './types';
 
-const COMPONENT_NAME = 'RedSiftBadge';
+const COMPONENT_NAME = 'Badge';
 const CLASSNAME = 'redsift-badge';
 const DEFAULT_PROPS: Partial<BadgeProps> = {
   // default values

package/index.d.ts

@@ -54,6 +54,7 @@ type Comp<P, T = HTMLElement> = {
 };
 /** Get types of the values of a record. */
 type ValueOf<T extends Record<any, any>> = T[keyof T];
+
 /**
  * Color palette.
  */
@@ -77,6 +78,93 @@ declare const ProductColorPalette: {
 };
 type ProductColorPalette = ValueOf<typeof ProductColorPalette>;
 
+declare const AlignSelf: {
+    readonly auto: "auto";
+    readonly normal: "normal";
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly 'flex-start': "flex-start";
+    readonly 'flex-end': "flex-end";
+    readonly 'self-start': "self-start";
+    readonly 'self-end': "self-end";
+    readonly baseline: "baseline";
+    readonly stretch: "stretch";
+};
+type AlignSelf = ValueOf<typeof AlignSelf>;
+interface LayoutProps {
+    /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">MDN</a>. */
+    flex?: string;
+    /** When used in a flex layout, specifies how the element will grow to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">MDN</a>. */
+    flexGrow?: number;
+    /** When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">MDN</a>. */
+    flexShrink?: number;
+    /** When used in a flex layout, specifies the initial main size of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis">MDN</a>. */
+    flexBasis?: string;
+    /** Overrides the alignItems property of a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">MDN</a>. */
+    alignSelf?: AlignSelf;
+    /** Specifies how the element is justified inside a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self">MDN</a>. */
+    justifySelf?: string;
+    /** The layout order for the element within a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">MDN</a>. */
+    order?: number;
+    /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area">MDN</a>. */
+    gridArea?: string;
+    /** When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column">MDN</a>. */
+    gridColumn?: string;
+    /** When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row">MDN</a>. */
+    gridRow?: string;
+    /** When used in a grid layout, specifies the starting column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start">MDN</a>. */
+    gridColumnStart?: string;
+    /** When used in a grid layout, specifies the ending column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end">MDN</a>. */
+    gridColumnEnd?: string;
+    /** When used in a grid layout, specifies the starting row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start">MDN</a>. */
+    gridRowStart?: string;
+    /** When used in a grid layout, specifies the ending row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end">MDN</a>. */
+    gridRowEnd?: string;
+}
+interface SpacingProps {
+    /** The margin for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">MDN</a>. */
+    margin?: string;
+    /** The margin for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">MDN</a>. */
+    marginBottom?: string;
+    /** The margin for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">MDN</a>. */
+    marginLeft?: string;
+    /** The margin for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">MDN</a>. */
+    marginRight?: string;
+    /** The margin for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">MDN</a>. */
+    marginTop?: string;
+}
+interface SizingProps {
+    /** The height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">MDN</a>. */
+    height?: string | number;
+    /** The maximum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">MDN</a>. */
+    maxHeight?: string;
+    /** The maximum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">MDN</a>. */
+    maxWidth?: string;
+    /** The minimum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">MDN</a>. */
+    minHeight?: string;
+    /** The minimum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">MDN</a>. */
+    minWidth?: string;
+    /** The width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">MDN</a>. */
+    width?: string | number;
+}
+interface PositioningProps {
+    /** Specifies how the element is positioned. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN</a>. */
+    position?: string;
+    /** The top position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">MDN</a>. */
+    top?: string;
+    /** The bottom position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">MDN</a>. */
+    bottom?: string;
+    /** The left position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">MDN</a>. Consider using start instead for RTL support. */
+    left?: string;
+    /** The right position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right">MDN</a>. Consider using start instead for RTL support. */
+    right?: string;
+    /** The stacking order for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">MDN</a>. */
+    zIndex?: string;
+}
+interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {
+}
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -121,11 +209,11 @@ type ButtonVariant = ValueOf<typeof ButtonVariant>;
 /**
  * Component color.
  */
-type ButtonColor = typeof ColorPalette.default | typeof ColorPalette.error | ProductColorPalette;
+type ButtonColor = ColorPalette | ProductColorPalette;
 /**
  * Component props.
  */
-interface ButtonProps extends ComponentProps<'button'> {
+interface ButtonProps extends ComponentProps<'button'>, StylingProps {
     /** Color variant. The product colors are available but should only be used to display the Button in the color of another product. To display a Button with a color of the current product, use `default`. */
     color?: ButtonColor;
     /** Whether the component take the full width or not. */
@@ -134,6 +222,8 @@ interface ButtonProps extends ComponentProps<'button'> {
     isActive?: boolean;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
+    /** Whether the component is in a loading state or not. */
+    isLoading?: boolean;
     /**
      * Icon path data (`d` property of the `path` SVG element).<br />
      * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />

package/index.js

@@ -20,7 +20,6 @@ const SUM = groupReduceSum;
 // Material Design Icons v7.1.96
 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";
 
-/** Component Type. */
 /**
  * Color palette.
  */
@@ -44,7 +43,7 @@ const ProductColorPalette = {
 
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jan 2023 14:28:56 GMT
+ * Generated on Thu, 09 Feb 2023 16:05:01 GMT
  */
 
 const RedsiftColorDefaultPrimary = '#0079e1';
@@ -2118,9 +2117,171 @@ const IconSize = {
   xsmall: 'xsmall',
   small: 'small',
   medium: 'medium',
-  large: 'large'
+  large: 'large',
+  xlarge: 'xlarge'
 };
 
+const baseLayout = css`
+  ${_ref => {
+  let {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    alignSelf,
+    justifySelf,
+    order,
+    gridArea,
+    gridColumn,
+    gridRow,
+    gridColumnStart,
+    gridColumnEnd,
+    gridRowStart,
+    gridRowEnd
+  } = _ref;
+  return css`
+      ${flex ? `flex: ${flex};` : ''}
+      ${flexGrow ? `flex-grow: ${flexGrow};` : ''}
+      ${flexShrink ? `flex-shrink: ${flexShrink};` : ''}
+      ${flexBasis ? `flex-basis: ${flexBasis};` : ''}
+      ${alignSelf ? `align-self: ${alignSelf};` : ''}
+      ${justifySelf ? `justify-self: ${justifySelf};` : ''}
+      ${order ? `order: ${order};` : ''}
+      ${gridArea ? `grid-area: ${gridArea};` : ''}
+      ${gridColumn ? `grid-column: ${gridColumn};` : ''}
+      ${gridRow ? `grid-row: ${gridRow};` : ''}
+      ${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}
+      ${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}
+      ${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}
+      ${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}
+    `;
+}}
+`;
+const baseSpacing = css`
+  ${_ref2 => {
+  let {
+    margin,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop
+  } = _ref2;
+  return css`
+      ${margin ? `margin: ${margin};` : ''}
+      ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}
+      ${marginLeft ? `margin-left: ${marginLeft};` : ''}
+      ${marginRight ? `margin-right: ${marginRight};` : ''}
+      ${marginTop ? `margin-top: ${marginTop};` : ''}
+    `;
+}}
+`;
+const baseSizing = css`
+  ${_ref3 => {
+  let {
+    height,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    width
+  } = _ref3;
+  return css`
+      ${height ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
+      ${maxHeight ? `max-height: ${maxHeight};` : ''}
+      ${maxWidth ? `max-width: ${maxWidth};` : ''}
+      ${minHeight ? `min-height: ${minHeight};` : ''}
+      ${minWidth ? `min-width: ${minWidth};` : ''}
+      ${width ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
+    `;
+}}
+`;
+const basePositioning = css`
+  ${_ref4 => {
+  let {
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    zIndex
+  } = _ref4;
+  return css`
+      ${position ? `position: ${position};` : ''}
+      ${top ? `top: ${top};` : ''}
+      ${bottom ? `bottom: ${bottom};` : ''}
+      ${left ? `left: ${left};` : ''}
+      ${right ? `right: ${right};` : ''}
+      ${zIndex ? `z-index: ${zIndex};` : ''}
+    `;
+}}
+`;
+const baseFlexbox = css`
+  ${_ref5 => {
+  let {
+    alignContent,
+    alignItems,
+    flexDirection,
+    flexWrap,
+    gap,
+    justifyContent
+  } = _ref5;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${flexDirection ? `flex-direction: ${flexDirection};` : ''}
+      ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}
+      gap: ${gap};
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+    `;
+}}
+`;
+const baseGrid = css`
+  ${_ref6 => {
+  let {
+    alignContent,
+    alignItems,
+    gap,
+    gridAutoColumns,
+    gridAutoRows,
+    gridTemplateAreas,
+    gridTemplateColumns,
+    gridTemplateRows,
+    justifyContent,
+    justifyItems
+  } = _ref6;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${gap ? `gap: ${gap};` : ''}
+      ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}
+      ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}
+      ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}
+      ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}
+      ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+      ${justifyItems ? `justify-items: ${justifyItems};` : ''}
+    `;
+}}
+`;
+const baseStyling = css`
+  ${baseLayout}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
+`;
+css`
+  ${_ref7 => {
+  let {
+    display
+  } = _ref7;
+  return display ? `display: ${display};` : '';
+}}
+
+  ${baseStyling}
+  ${baseFlexbox}
+  ${baseGrid}
+`;
+
 /**
  * Component style.
  */
@@ -2148,6 +2309,25 @@ const StyledIcon = styled.span`
     $size
   } = _ref2;
   switch ($size) {
+    case IconSize.xlarge:
+      return css`
+          font-size: 40px;
+          height: 40px;
+          line-height: 40px;
+          width: 40px;
+
+          & .redsift-badge-standard {
+            position: absolute;
+            right: -24px;
+            top: -2px;
+          }
+
+          & .redsift-badge-dot {
+            position: absolute;
+            right: -14px;
+            top: 6px;
+          }
+        `;
     case IconSize.large:
       return css`
           font-size: 28px;
@@ -2227,10 +2407,11 @@ const StyledIcon = styled.span`
         `;
   }
 }}
+  ${baseStyling}
 `;
 
 const _excluded$8 = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$8 = 'RedSiftIcon';
+const COMPONENT_NAME$8 = 'Icon';
 const CLASSNAME$8 = 'redsift-icon';
 const DEFAULT_PROPS$7 = {
   size: IconSize.medium
@@ -2289,6 +2470,8 @@ const ButtonVariant = {
  * Component style.
  */
 const StyledButton = styled.button`
+  ${baseStyling}
+
   align-items: center;
   background: none;
   border: none;
@@ -2296,6 +2479,7 @@ const StyledButton = styled.button`
   font-family: var(--redsift-typography-button-font-family);
   font-size: var(--redsift-typography-button-font-size);
   font-weight: var(--redsift-typography-button-font-weight);
+  gap: 8px;
   justify-content: center;
   line-height: var(--redsift-typography-button-line-height);
   text-decoration: none;
@@ -2405,76 +2589,10 @@ const StyledButton = styled.button`
         .redsift-icon.right {
           margin-left: unset;
         }
-
-        span {
-          margin-right: 8px;
-          margin-left: 8px;
-        }
       ` : '';
 }}
 `;
 
-const _excluded$7 = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "leftIcon", "onPress", "rightIcon", "variant"];
-const COMPONENT_NAME$7 = 'RedSiftButton';
-const CLASSNAME$7 = 'redsift-button';
-const DEFAULT_PROPS$6 = {
-  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.
- */
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
-  const buttonRef = ref || useRef();
-  const {
-    buttonProps
-  } = $701a24aa0da5b062$export$ea18c227d4417cc3(_objectSpread2(_objectSpread2({}, props), {}, {
-    preventFocusOnPress: true
-  }), buttonRef);
-  const {
-      children,
-      className,
-      color,
-      disabled,
-      fullWidth,
-      isActive,
-      isDisabled,
-      leftIcon,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onPress,
-      rightIcon,
-      variant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
-  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, forwardedProps, buttonProps, {
-    $color: color,
-    $fullWidth: fullWidth,
-    $isActive: isActive,
-    $isDisabled: isDisabled || disabled,
-    $variant: variant,
-    "aria-disabled": isDisabled || disabled,
-    className: classNames(Button.className, className),
-    disabled: isDisabled || disabled,
-    ref: buttonRef
-  }), leftIcon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: leftIcon,
-    "aria-hidden": "true",
-    className: "left"
-  }) : null, children && /*#__PURE__*/React.createElement("span", null, children), rightIcon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: rightIcon,
-    "aria-hidden": "true",
-    className: "right"
-  }) : null);
-});
-Button.className = CLASSNAME$7;
-Button.defaultProps = DEFAULT_PROPS$6;
-Button.displayName = COMPONENT_NAME$7;
-
 var loading$1 = "Loading...";
 var enUS = {
 	loading: loading$1
@@ -2501,6 +2619,8 @@ const SpinnerSize = {
 };
 
 const StyledSpinner = styled.img`
+  ${baseStyling}
+
   display: inline;
   line-height: 0px;
   vertical-align: -0.125em;
@@ -2524,7 +2644,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$6 = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$7 = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -2536,9 +2656,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$6 = 'RedSiftSpinner';
-const CLASSNAME$6 = 'redsift-shield';
-const DEFAULT_PROPS$5 = {
+const COMPONENT_NAME$7 = 'Spinner';
+const CLASSNAME$7 = 'redsift-shield';
+const DEFAULT_PROPS$6 = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -2579,7 +2699,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
   const {
     width,
     height
@@ -2599,9 +2719,75 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$6;
-Spinner.defaultProps = DEFAULT_PROPS$5;
-Spinner.displayName = COMPONENT_NAME$6;
+Spinner.className = CLASSNAME$7;
+Spinner.defaultProps = DEFAULT_PROPS$6;
+Spinner.displayName = COMPONENT_NAME$7;
+
+const _excluded$6 = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
+const COMPONENT_NAME$6 = 'Button';
+const CLASSNAME$6 = 'redsift-button';
+const DEFAULT_PROPS$5 = {
+  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.
+ */
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const buttonRef = ref || useRef();
+  const {
+    buttonProps
+  } = $701a24aa0da5b062$export$ea18c227d4417cc3(_objectSpread2(_objectSpread2({}, props), {}, {
+    isDisabled: props.isLoading || props.isDisabled || props.disabled,
+    preventFocusOnPress: true
+  }), buttonRef);
+  const {
+      children,
+      className,
+      color,
+      disabled,
+      fullWidth,
+      isActive,
+      isDisabled,
+      isLoading,
+      leftIcon,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onPress,
+      rightIcon,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, forwardedProps, buttonProps, {
+    $color: color,
+    $fullWidth: fullWidth,
+    $isActive: isActive,
+    $isDisabled: isLoading || isDisabled || disabled,
+    $variant: variant,
+    "aria-disabled": isLoading || isDisabled || disabled,
+    className: classNames(Button.className, className),
+    disabled: isLoading || isDisabled || disabled,
+    ref: buttonRef
+  }), leftIcon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: leftIcon,
+    "aria-hidden": "true",
+    className: "left"
+  }) : null, isLoading ? /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    color: "no-data"
+  }) : null, children, rightIcon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: rightIcon,
+    "aria-hidden": "true",
+    className: "right"
+  }) : null);
+});
+Button.className = CLASSNAME$6;
+Button.defaultProps = DEFAULT_PROPS$5;
+Button.displayName = COMPONENT_NAME$6;
 
 /**
  * Component style.
@@ -2633,7 +2819,7 @@ const StyledResetButton = styled(Button)`
   margin-top: 8px;
 `;
 
-const COMPONENT_NAME$5 = 'RedSiftChartEmptyState';
+const COMPONENT_NAME$5 = 'ChartEmptyState';
 const CLASSNAME$5 = 'redsift-chart-empty-state';
 const DEFAULT_PROPS$4 = {
   title: 'No Data Available',
@@ -2836,7 +3022,7 @@ const DashboardReducer = (state, action) => {
 };
 
 const _excluded$5 = ["children", "className", "data"];
-const COMPONENT_NAME$4 = 'RedSiftDashboard';
+const COMPONENT_NAME$4 = 'Dashboard';
 const CLASSNAME$4 = 'redsift-dashboard-container';
 const DEFAULT_PROPS$3 = {};
 const Dashboard = /*#__PURE__*/forwardRef((props, ref) => {
@@ -3140,7 +3326,7 @@ const useChartAsListbox = _ref => {
 };
 
 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 = 'RedSiftHorizontalBarChart';
+const COMPONENT_NAME$3 = 'HorizontalBarChart';
 const CLASSNAME$3 = 'redsift-horizontal-barchart';
 const DEFAULT_PROPS$2 = {
   isResetable: true,
@@ -3694,7 +3880,7 @@ const PdfDocument = _ref5 => {
 };
 
 const _excluded$2 = ["children", "className", "componentRef", "fileName", "introduction", "localeText", "logo", "onClick", "primaryColor"];
-const COMPONENT_NAME$2 = 'RedSiftPdfExportButton';
+const COMPONENT_NAME$2 = 'PdfExportButton';
 const CLASSNAME$2 = 'redsift-pdf-export-button';
 const getDashboardImage = async componentRef => {
   var _componentRef$current, _componentRef$current2, _componentRef$current3, _componentRef$current4;
@@ -6909,7 +7095,7 @@ 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 = 'RedSiftPieChart';
+const COMPONENT_NAME$1 = 'PieChart';
 const CLASSNAME$1 = 'redsift-piechart';
 const DEFAULT_PROPS$1 = {
   isResetable: true,
@@ -7301,7 +7487,7 @@ 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 = 'RedSiftTimeSeriesBarChart';
+const COMPONENT_NAME = 'TimeSeriesBarChart';
 const CLASSNAME = 'redsift-timeseries-barchart';
 const DEFAULT_PROPS = {
   dateTimeFormat: '%Y-%m-%d %H:%M:%S',