@redsift/dashboard 7.6.0 → 7.6.1

package/index.js

@@ -7,7 +7,7 @@ import { useGridApiRef, gridFilteredSortedRowEntriesSelector, gridVisibleColumnD
 import { DataGrid as DataGrid$1 } from '@redsift/table';
 import { config, rowChart, redrawAll, filterAll, pieChart, barChart, filters } from 'dc';
 import { saveAs } from 'file-saver';
-import { Font, StyleSheet, Document, Page, View, Image, Text, pdf } from '@react-pdf/renderer';
+import { Font, StyleSheet, Document, Page, View, Image, Text as Text$1, pdf } from '@react-pdf/renderer';
 import domToImage from 'dom-to-image';
 import 'd3-shape';
 
@@ -20,6 +20,15 @@ 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";
 
+/**
+ * Font.
+ */
+const FontFamily = {
+  raleway: 'raleway',
+  'source-code-pro': 'source-code-pro',
+  electrolize: 'electrolize'
+};
+
 /**
  * Color palette.
  */
@@ -40,6 +49,14 @@ const ProductColorPalette = {
   hardenize: 'hardenize',
   tools: 'tools'
 };
+const NeutralColorPalette = {
+  black: 'black',
+  darkgrey: 'darkgrey',
+  midgrey: 'midgrey',
+  lightgrey: 'lightgrey',
+  xlightgrey: 'xlightgrey',
+  white: 'white'
+};
 
 /**
  * Do not edit directly
@@ -225,6 +242,168 @@ function _defineProperty$1(obj, key, value) {
   return obj;
 }
 
+/*
+ * 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.
+ */ /*
+ * 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 $488c6ddbf4ef74c2$var$formatterCache = new Map();
+let $488c6ddbf4ef74c2$var$supportsSignDisplay = false;
+try {
+    // @ts-ignore
+    $488c6ddbf4ef74c2$var$supportsSignDisplay = new Intl.NumberFormat("de-DE", {
+        signDisplay: "exceptZero"
+    }).resolvedOptions().signDisplay === "exceptZero";
+// eslint-disable-next-line no-empty
+} catch (e) {}
+let $488c6ddbf4ef74c2$var$supportsUnit = false;
+try {
+    // @ts-ignore
+    $488c6ddbf4ef74c2$var$supportsUnit = new Intl.NumberFormat("de-DE", {
+        style: "unit",
+        unit: "degree"
+    }).resolvedOptions().style === "unit";
+// eslint-disable-next-line no-empty
+} catch (e1) {}
+// Polyfill for units since Safari doesn't support them yet. See https://bugs.webkit.org/show_bug.cgi?id=215438.
+// Currently only polyfilling the unit degree in narrow format for ColorSlider in our supported locales.
+// Values were determined by switching to each locale manually in Chrome.
+const $488c6ddbf4ef74c2$var$UNITS = {
+    degree: {
+        narrow: {
+            default: "\xb0",
+            "ja-JP": " 度",
+            "zh-TW": "度",
+            "sl-SI": " \xb0"
+        }
+    }
+};
+class $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5 {
+    /** Formats a number value as a string, according to the locale and options provided to the constructor. */ format(value) {
+        let res = "";
+        if (!$488c6ddbf4ef74c2$var$supportsSignDisplay && this.options.signDisplay != null) res = $488c6ddbf4ef74c2$export$711b50b3c525e0f2(this.numberFormatter, this.options.signDisplay, value);
+        else res = this.numberFormatter.format(value);
+        if (this.options.style === "unit" && !$488c6ddbf4ef74c2$var$supportsUnit) {
+            var _UNITS_unit;
+            let { unit: unit , unitDisplay: unitDisplay = "short" , locale: locale  } = this.resolvedOptions();
+            let values = (_UNITS_unit = $488c6ddbf4ef74c2$var$UNITS[unit]) === null || _UNITS_unit === void 0 ? void 0 : _UNITS_unit[unitDisplay];
+            res += values[locale] || values.default;
+        }
+        return res;
+    }
+    /** Formats a number to an array of parts such as separators, digits, punctuation, and more. */ formatToParts(value) {
+        // TODO: implement signDisplay for formatToParts
+        // @ts-ignore
+        return this.numberFormatter.formatToParts(value);
+    }
+    /** Formats a number range as a string. */ formatRange(start, end) {
+        // @ts-ignore
+        if (typeof this.numberFormatter.formatRange === "function") // @ts-ignore
+        return this.numberFormatter.formatRange(start, end);
+        if (end < start) throw new RangeError("End date must be >= start date");
+        // Very basic fallback for old browsers.
+        return `${this.format(start)} – ${this.format(end)}`;
+    }
+    /** Formats a number range as an array of parts. */ formatRangeToParts(start, end) {
+        // @ts-ignore
+        if (typeof this.numberFormatter.formatRangeToParts === "function") // @ts-ignore
+        return this.numberFormatter.formatRangeToParts(start, end);
+        if (end < start) throw new RangeError("End date must be >= start date");
+        let startParts = this.numberFormatter.formatToParts(start);
+        let endParts = this.numberFormatter.formatToParts(end);
+        return [
+            ...startParts.map((p)=>({
+                    ...p,
+                    source: "startRange"
+                })),
+            {
+                type: "literal",
+                value: " – ",
+                source: "shared"
+            },
+            ...endParts.map((p)=>({
+                    ...p,
+                    source: "endRange"
+                }))
+        ];
+    }
+    /** Returns the resolved formatting options based on the values passed to the constructor. */ resolvedOptions() {
+        let options = this.numberFormatter.resolvedOptions();
+        if (!$488c6ddbf4ef74c2$var$supportsSignDisplay && this.options.signDisplay != null) options = {
+            ...options,
+            signDisplay: this.options.signDisplay
+        };
+        if (!$488c6ddbf4ef74c2$var$supportsUnit && this.options.style === "unit") options = {
+            ...options,
+            style: "unit",
+            unit: this.options.unit,
+            unitDisplay: this.options.unitDisplay
+        };
+        return options;
+    }
+    constructor(locale, options = {}){
+        this.numberFormatter = $488c6ddbf4ef74c2$var$getCachedNumberFormatter(locale, options);
+        this.options = options;
+    }
+}
+function $488c6ddbf4ef74c2$var$getCachedNumberFormatter(locale, options = {}) {
+    let { numberingSystem: numberingSystem  } = options;
+    if (numberingSystem && locale.indexOf("-u-nu-") === -1) locale = `${locale}-u-nu-${numberingSystem}`;
+    if (options.style === "unit" && !$488c6ddbf4ef74c2$var$supportsUnit) {
+        var _UNITS_unit;
+        let { unit: unit , unitDisplay: unitDisplay = "short"  } = options;
+        if (!unit) throw new Error('unit option must be provided with style: "unit"');
+        if (!((_UNITS_unit = $488c6ddbf4ef74c2$var$UNITS[unit]) === null || _UNITS_unit === void 0 ? void 0 : _UNITS_unit[unitDisplay])) throw new Error(`Unsupported unit ${unit} with unitDisplay = ${unitDisplay}`);
+        options = {
+            ...options,
+            style: "decimal"
+        };
+    }
+    let cacheKey = locale + (options ? Object.entries(options).sort((a, b)=>a[0] < b[0] ? -1 : 1).join() : "");
+    if ($488c6ddbf4ef74c2$var$formatterCache.has(cacheKey)) return $488c6ddbf4ef74c2$var$formatterCache.get(cacheKey);
+    let numberFormatter = new Intl.NumberFormat(locale, options);
+    $488c6ddbf4ef74c2$var$formatterCache.set(cacheKey, numberFormatter);
+    return numberFormatter;
+}
+function $488c6ddbf4ef74c2$export$711b50b3c525e0f2(numberFormat, signDisplay, num) {
+    if (signDisplay === "auto") return numberFormat.format(num);
+    else if (signDisplay === "never") return numberFormat.format(Math.abs(num));
+    else {
+        let needsPositiveSign = false;
+        if (signDisplay === "always") needsPositiveSign = num > 0 || Object.is(num, 0);
+        else if (signDisplay === "exceptZero") {
+            if (Object.is(num, -0) || Object.is(num, 0)) num = Math.abs(num);
+            else needsPositiveSign = num > 0;
+        }
+        if (needsPositiveSign) {
+            let negative = numberFormat.format(-num);
+            let noSign = numberFormat.format(num);
+            // ignore RTL/LTR marker character
+            let minus = negative.replace(noSign, "").replace(/\u200e|\u061C/, "");
+            if ([
+                ...minus
+            ].length !== 1) console.warn("@react-aria/i18n polyfill for NumberFormat signDisplay: Unsupported case");
+            let positive = negative.replace(noSign, "!!!").replace(minus, "+").replace("!!!", noSign);
+            return positive;
+        } else return numberFormat.format(num);
+    }
+}
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -402,6 +581,28 @@ function $fca6afa0e843324b$export$f12b703ca79dfbb1(strings) {
     ]);
 }
 
+
+/*
+ * 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.
+ */ 
+
+
+function $a916eb452884faea$export$b7a616150fdb9f44(options = {}) {
+    let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
+    return (useMemo)(()=>new ($488c6ddbf4ef74c2$export$cc77c4ff7e8673c5)(locale, options), [
+        locale,
+        options
+    ]);
+}
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -2440,10 +2641,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$8 = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$8 = 'Icon';
-const CLASSNAME$8 = 'redsift-icon';
-const DEFAULT_PROPS$7 = {
+const _excluded$a = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$a = 'Icon';
+const CLASSNAME$a = 'redsift-icon';
+const DEFAULT_PROPS$9 = {
   size: IconSize.medium
 };
 
@@ -2461,7 +2662,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   return /*#__PURE__*/React.createElement(StyledIcon, _extends({}, forwardedProps, {
     $color: color,
     $size: size,
@@ -2483,9 +2684,9 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     fill: "currentColor"
   })), badge ? badge : null);
 });
-Icon.className = CLASSNAME$8;
-Icon.defaultProps = DEFAULT_PROPS$7;
-Icon.displayName = COMPONENT_NAME$8;
+Icon.className = CLASSNAME$a;
+Icon.defaultProps = DEFAULT_PROPS$9;
+Icon.displayName = COMPONENT_NAME$a;
 
 /**
  * Component variant.
@@ -2668,7 +2869,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$7 = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$9 = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -2680,9 +2881,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$7 = 'Spinner';
-const CLASSNAME$7 = 'redsift-shield';
-const DEFAULT_PROPS$6 = {
+const COMPONENT_NAME$9 = 'Spinner';
+const CLASSNAME$9 = 'redsift-shield';
+const DEFAULT_PROPS$8 = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -2723,7 +2924,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color: propsColor,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
   const {
     width,
     height
@@ -2745,14 +2946,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$7;
-Spinner.defaultProps = DEFAULT_PROPS$6;
-Spinner.displayName = COMPONENT_NAME$7;
+Spinner.className = CLASSNAME$9;
+Spinner.defaultProps = DEFAULT_PROPS$8;
+Spinner.displayName = COMPONENT_NAME$9;
 
-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 = {
+const _excluded$8 = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
+const COMPONENT_NAME$8 = 'Button';
+const CLASSNAME$8 = 'redsift-button';
+const DEFAULT_PROPS$7 = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -2789,7 +2990,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({}, forwardedProps, buttonProps, {
     $color: color,
     $fullWidth: fullWidth,
@@ -2813,9 +3014,277 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-Button.className = CLASSNAME$6;
-Button.defaultProps = DEFAULT_PROPS$5;
-Button.displayName = COMPONENT_NAME$6;
+Button.className = CLASSNAME$8;
+Button.defaultProps = DEFAULT_PROPS$7;
+Button.displayName = COMPONENT_NAME$8;
+
+/**
+ * Component variant.
+ */
+const TextVariant = {
+  subtitle: 'subtitle',
+  body: 'body',
+  body2: 'body2',
+  button: 'button',
+  caption: 'caption',
+  inherit: 'inherit'
+};
+const TextComponent = {
+  p: 'p',
+  b: 'b',
+  i: 'i',
+  u: 'u',
+  abbr: 'abbr',
+  cite: 'cite',
+  del: 'del',
+  em: 'em',
+  ins: 'ins',
+  kbd: 'kbd',
+  mark: 'mark',
+  s: 's',
+  samp: 'samp',
+  sub: 'sub',
+  sup: 'sup'
+};
+
+/**
+ * Component style.
+ */
+const StyledText = styled.span`
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color && [...Object.keys(ColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-${$color}-primary);
+        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-neutral-${$color});
+        ` : css`
+          color: ${$color || css`inherit`};
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $as
+  } = _ref2;
+  return css`
+    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em ? css`
+          font-style: italic;
+        ` : $as === TextComponent.sub ? css`
+          vertical-align: sub;
+        ` : $as === TextComponent.sup ? css`
+          vertical-align: super;
+        ` : ''}
+  `;
+}}
+
+  ${_ref3 => {
+  let {
+    $as,
+    $fontFamily,
+    $fontSize,
+    $lineHeight,
+    $variant
+  } = _ref3;
+  return !$variant ? css`
+          ${$fontFamily ? css`
+                font-family: var(
+                  --redsift-typography-font-family-${$fontFamily}
+                );
+              ` : ''}
+          ${$fontSize ? css`
+                font-size: ${$fontSize};
+              ` : ''}
+          ${$lineHeight ? css`
+                line-height: ${$lineHeight};
+              ` : ''}
+          ${$as === TextComponent.b ? css`
+                font-weight: var(--redsift-typography-font-weight-bold);
+              ` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
+                font-size: ${$fontSize ? $fontSize : '12px'};
+              ` : ''}
+        ` : $variant === TextVariant.inherit ? css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};
+          font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
+          font-weight: ${$as === TextComponent.b ? 'var(--redsift-typography-font-weight-bold)' : 'inherit'};
+          line-height: ${$lineHeight ? $lineHeight : css`inherit`};
+          text-transform: inherit;
+        ` : css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant}-font-family)`};
+          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
+          font-weight: var(--redsift-typography-${$variant}-font-weight);
+          line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};
+          text-transform: var(--redsift-typography-${$variant}-text-transform);
+        `;
+}}
+  
+  ${_ref4 => {
+  let {
+    $noWrap
+  } = _ref4;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
+}}
+`;
+
+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 = {
+  fontFamily: FontFamily.raleway
+};
+
+/**
+ * The Text component.
+ */
+const Text = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color,
+      fontFamily,
+      fontSize,
+      lineHeight,
+      noWrap,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+  return /*#__PURE__*/React.createElement(StyledText, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Text.className, className),
+    ref: ref,
+    $as: as,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $lineHeight: lineHeight,
+    $noWrap: noWrap,
+    $variant: variant
+  }), children);
+});
+Text.className = CLASSNAME$7;
+Text.defaultProps = DEFAULT_PROPS$6;
+Text.displayName = COMPONENT_NAME$7;
+
+/**
+ * Component style.
+ */
+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 = {
+  compactDisplay: 'short',
+  currencyDisplay: 'symbol',
+  currencySign: 'standard',
+  localeMatcher: 'best fit',
+  notation: 'standard',
+  signDisplay: 'auto',
+  type: 'decimal',
+  unitDisplay: 'short',
+  roundingMode: 'halfExpand',
+  roundingPriority: 'auto',
+  trailingZeroDisplay: 'auto'
+};
+
+/**
+ * The Number component.
+ */
+const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      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
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  const formatter = $a916eb452884faea$export$b7a616150fdb9f44(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    compactDisplay,
+    currency,
+    currencyDisplay,
+    currencySign,
+    localeMatcher
+  }, maximumFractionDigits !== undefined && {
+    maximumFractionDigits
+  }), maximumSignificantDigits !== undefined && {
+    maximumSignificantDigits
+  }), minimumFractionDigits !== undefined && {
+    minimumFractionDigits
+  }), minimumIntegerDigits !== undefined && {
+    minimumIntegerDigits
+  }), minimumSignificantDigits !== undefined && {
+    minimumSignificantDigits
+  }), {}, {
+    notation,
+    numberingSystem,
+    // @ts-ignore
+    roundingIncrement,
+    // @ts-ignore
+    roundingMode,
+    // @ts-ignore
+    roundingPriority,
+    signDisplay,
+    style: type,
+    // @ts-ignore
+    trailingZeroDisplay,
+    unit,
+    unitDisplay,
+    useGrouping
+  }));
+  return /*#__PURE__*/React.createElement(StyledNumber, _extends({
+    as: as
+  }, forwardedProps, {
+    $as: as,
+    className: classNames(Number$1.className, className),
+    ref: ref,
+    $color: color,
+    $lineHeight: lineHeight,
+    $fontSize: fontSize,
+    $noWrap: noWrap,
+    $variant: variant
+  }), formatter.format(value));
+});
+Number$1.className = CLASSNAME$6;
+Number$1.defaultProps = DEFAULT_PROPS$5;
+Number$1.displayName = COMPONENT_NAME$6;
 
 /**
  * Component style.
@@ -3782,7 +4251,7 @@ const PdfTableRow = _ref => {
           marginRight: 7
         },
         key: `cell-${rowIndex}-${index}`
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, /*#__PURE__*/React.createElement(Text$1, {
         style: styles.tableCellText
       }, '-'));
     }
@@ -3793,7 +4262,7 @@ const PdfTableRow = _ref => {
         marginRight: 7
       },
       key: `cell-${rowIndex}-${index}`
-    }, /*#__PURE__*/React.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text$1, {
       style: styles.tableCellText
     }, Array.isArray(rowData[field]) ? rowData[field].join(', ') : rowData[field]));
   }));
@@ -3834,7 +4303,7 @@ const PdfTable = _ref2 => {
         marginRight: 7
       },
       key: `heading-${field}`
-    }, /*#__PURE__*/React.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text$1, {
       style: styles.tableCellHeaderText
     }, headerName));
   })), /*#__PURE__*/React.createElement(View, null, data.map((row, index) => {
@@ -3850,7 +4319,7 @@ const PdfTable = _ref2 => {
     }
   })), data.length >= 1000 ? /*#__PURE__*/React.createElement(View, {
     style: styles.constraintsContainer
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text$1, {
     style: styles.constraints
   }, (localeText === null || localeText === void 0 ? void 0 : localeText.maxSizeDisclaimer) || 'Due to processing constraints this pdf is limited to the first 1000 rows of data.')) : null);
 };
@@ -3858,7 +4327,7 @@ const Pagination = _ref3 => {
   let {
     styles
   } = _ref3;
-  return /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text$1, {
     style: styles.pageNumber,
     render: _ref4 => {
       let {
@@ -3890,7 +4359,7 @@ const PdfDocument = _ref5 => {
     style: styles.logo
   })) : null, introduction ? /*#__PURE__*/React.createElement(View, {
     style: styles.introductionContainer
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text$1, {
     style: styles.introductionText
   }, introduction)) : null, dashboardImage ? /*#__PURE__*/React.createElement(View, {
     style: styles.dashboardImageContainer
@@ -7403,7 +7872,24 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React.createElement(StyledPieChartLabel, {
       key: `pie-external-label _${index}`,
       $color: d3colors(key)
-    }, /*#__PURE__*/React.createElement("div", null), labelVariant === PieChartLabelVariant.externalLabelValue ? /*#__PURE__*/React.createElement("b", null, value) : labelVariant === PieChartLabelVariant.externalLabelPercent ? /*#__PURE__*/React.createElement("b", null, `${(value * 100 / sum(chart.data(), d => d.value)).toFixed(2)}%`) : null, /*#__PURE__*/React.createElement("span", null, key));
+    }, /*#__PURE__*/React.createElement("div", null), labelVariant === PieChartLabelVariant.externalLabelValue ? /*#__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 === PieChartLabelVariant.externalLabelPercent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Number$1, {
+      as: "b",
+      maximumFractionDigits: 2,
+      type: "percent",
+      value: value / sum(chart.data(), d => d.value),
+      variant: "inherit"
+    }), /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, key)) : /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, key));
   })) : null)), caption ? /*#__PURE__*/React.createElement(StyledPieChartCaption, {
     className: `${PieChart.className}__caption`,
     id: `id${id}__caption`