sag_components 2.0.0-beta174 → 2.0.0-beta176

package/dist/index.esm.js

@@ -1,5 +1,6 @@
 import React$1, { useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle } from 'react';
 import styled, { keyframes, css, styled as styled$1 } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -449,6 +450,120 @@ const Calendar = () => /*#__PURE__*/React$1.createElement("svg", {
   fill: "#568202"
 }));
 
+// eslint-disable-next-line react/prop-types
+const ErrorIcon = _ref => {
+  let {
+    color = '#FF3949',
+    width = '18',
+    height = '18'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM7 3.5C7.30469 3.5 7.5625 3.75781 7.5625 4.0625V6.6875C7.5625 7.01562 7.30469 7.25 7 7.25C6.67188 7.25 6.4375 7.01562 6.4375 6.6875V4.0625C6.4375 3.75781 6.67188 3.5 7 3.5ZM7.75 8.75C7.75 9.17188 7.39844 9.5 7 9.5C6.57812 9.5 6.25 9.17188 6.25 8.75C6.25 8.35156 6.57812 8 7 8C7.39844 8 7.75 8.35156 7.75 8.75Z",
+    fill: color
+  }));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var VIcon = function (_a) {
+  var _b = _a.width,
+    width = _b === void 0 ? "12" : _b,
+    _c = _a.height,
+    height = _c === void 0 ? "8" : _c,
+    _d = _a.color,
+    color = _d === void 0 ? "#D0D0D0" : _d;
+  return jsxs("svg", __assign({
+    width: width,
+    height: height,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, {
+    children: [jsx("g", __assign({
+      filter: "url(#filter0_d_3431_32168)"
+    }, {
+      children: jsx("path", {
+        d: "M15.8754 4.12241C16.0415 4.28562 16.0415 4.55413 15.8754 4.71734L8.58808 11.8776C8.42197 12.0408 8.14869 12.0408 7.98259 11.8776L4.12458 8.08687C3.95847 7.92366 3.95847 7.65515 4.12458 7.49194C4.29069 7.32873 4.56397 7.32873 4.73007 7.49194L8.28533 10.9852L15.2699 4.12241C15.436 3.9592 15.7093 3.9592 15.8754 4.12241Z",
+        fill: color
+      })
+    })), jsx("defs", {
+      children: jsxs("filter", __assign({
+        id: "filter0_d_3431_32168",
+        x: "-2",
+        y: "0",
+        width: "24",
+        height: "24",
+        filterUnits: "userSpaceOnUse",
+        "color-interpolation-filters": "sRGB"
+      }, {
+        children: [jsx("feFlood", {
+          "flood-opacity": "0",
+          result: "BackgroundImageFix"
+        }), jsx("feColorMatrix", {
+          "in": "SourceAlpha",
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }), jsx("feOffset", {
+          dy: "4"
+        }), jsx("feGaussianBlur", {
+          stdDeviation: "2"
+        }), jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), jsx("feColorMatrix", {
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        }), jsx("feBlend", {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_3431_32168"
+        }), jsx("feBlend", {
+          mode: "normal",
+          "in": "SourceGraphic",
+          in2: "effect1_dropShadow_3431_32168",
+          result: "shape"
+        })]
+      }))
+    })]
+  }));
+};
+
 const ChervronRightIcon = _ref => {
   let {
     width = "8",
@@ -530,7 +645,8 @@ const Button$1 = props => {
     reselect: ReselectIcon,
     plus: Plus,
     left: ChervronLeftIcon,
-    right: ChervronRightIcon
+    right: ChervronRightIcon,
+    vicon: VIcon
   };
   const getIcon = icon => {
     if (!icon || icon === "none") return null;
@@ -34201,25 +34317,6 @@ const InsightsCarousel = _ref => {
   })))));
 };
 
-// eslint-disable-next-line react/prop-types
-const ErrorIcon = _ref => {
-  let {
-    color = '#FF3949',
-    width = '18',
-    height = '18'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 14 13",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM7 3.5C7.30469 3.5 7.5625 3.75781 7.5625 4.0625V6.6875C7.5625 7.01562 7.30469 7.25 7 7.25C6.67188 7.25 6.4375 7.01562 6.4375 6.6875V4.0625C6.4375 3.75781 6.67188 3.5 7 3.5ZM7.75 8.75C7.75 9.17188 7.39844 9.5 7 9.5C6.57812 9.5 6.25 9.17188 6.25 8.75C6.25 8.35156 6.57812 8 7 8C7.39844 8 7.75 8.35156 7.75 8.75Z",
-    fill: color
-  }));
-};
-
 // eslint-disable-next-line react/prop-types
 const SucceededIcon = _ref => {
   let {
@@ -35616,9 +35713,12 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${({
-  disabled
-}) => disabled ? 0.5 : 1};
+  opacity: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 0.5 : 1;
+}};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -35626,15 +35726,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
+  background: ${_ref2 => {
+  let {
+    checked,
+    disabled
+  } = _ref2;
+  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -35653,9 +35757,10 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -35665,10 +35770,11 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -54284,7 +54390,7 @@ const tagTemplates = {
   received: {
     backgroundColor: '#B9D5D54D',
     borderColor: '#B9D5D5',
-    textColor: '#000000',
+    textColor: '#084141',
     text: 'Received'
   },
   approved: {
@@ -54293,16 +54399,16 @@ const tagTemplates = {
     textColor: '#074310',
     text: 'Approved'
   },
-  canceled: {
+  cancelled: {
     backgroundColor: '#EBA6AF4D',
     borderColor: '#EBA6AF',
     textColor: '#44070F',
-    text: 'Canceled'
+    text: 'Cancelled'
   }
 };
 const Tag = props => {
   const {
-    type = 'pending',
+    type,
     size = 'small',
     backgroundColor,
     borderColor,
@@ -54310,15 +54416,15 @@ const Tag = props => {
     borderRadius = "62px",
     text
   } = props;
-  const template = tagTemplates[type];
+  const template = type ? tagTemplates[type] : null;
   const height = size === 'small' ? '21px' : size === 'medium' ? '32px' : '35px';
   return /*#__PURE__*/React$1.createElement(StatusCell, {
-    backgroundColor: backgroundColor || template.backgroundColor,
-    borderColor: borderColor || template.borderColor,
-    color: textColor || template.textColor,
+    backgroundColor: backgroundColor || template?.backgroundColor,
+    borderColor: borderColor || template?.borderColor,
+    color: textColor || template?.textColor,
     height: height,
     borderRadius: borderRadius
-  }, /*#__PURE__*/React$1.createElement("span", null, text || template.text));
+  }, /*#__PURE__*/React$1.createElement("span", null, text || template?.text));
 };
 
 export { AdvancedThresholds, Analytics, AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Budgets, Build, Button$1 as Button, Campaigns, CheckBox, CollapseData, CollapseHeader, ContainerTable, Coupons, CustomerSegments, Dashboard, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, GroupBuilder, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, ItemsStores, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, PreTestWhatIf, QuickFilter, QuickFilterCards, RangePicker, RangePop, ReportTable, RulesEngine, SampleRunEngine, SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, Tag, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };