sag_components 1.0.892 → 1.0.894

package/dist/stories/components/PerformanceAnalyticsOneColumn/PerformanceAnalyticsOneColumn.stories.js

@@ -1,231 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TotalCostSales = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PerformanceAnalyticsOneColumn = require("./PerformanceAnalyticsOneColumn");
-const totalsData1 = [{
-  title: 'Total Cost',
-  value: 360000,
-  dotCut: true,
-  currency: true,
-  currencyType: 'USD',
-  growthPercent: 15.2,
-  showGrowthPercentSign: true
-}, {
-  title: 'Incremental Sales',
-  value: 960000,
-  dotCut: true,
-  currency: true,
-  currencyType: 'USD',
-  growthPercent: 13.5,
-  showGrowthPercentSign: true
-}, {
-  title: 'Incremental Sales ROI',
-  value: 2.7,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: null,
-  showGrowthPercentSign: true
-}];
-const data1 = [{
-  retailer: 'Food Lion',
-  offerType: 'B2G3',
-  period: '15.01.24-31.01.24',
-  roiValue: 2.5,
-  // New / existing Shoppers
-  newShoppersValue: 16,
-  newShoppersPercentValue: 15.6,
-  existingShoppersValue: 66,
-  existingShoppersPercentValue: 84.4,
-  totalShoppers: 82
-}, {
-  retailer: 'Hannaford',
-  offerType: 'B2G3',
-  period: '02.01.24-15.01.24',
-  roiValue: 3.6,
-  // New / existing Shoppers
-  newShoppersValue: 14,
-  newShoppersPercentValue: 25.5,
-  existingShoppersValue: 35,
-  existingShoppersPercentValue: 75.5,
-  totalShoppers: 49
-}, {
-  retailer: 'The Giant Company',
-  offerType: '20% Off',
-  period: '15.01.24-31.01.24',
-  roiValue: 2.0,
-  // New / existing Shoppers
-  newShoppersValue: 44,
-  newShoppersPercentValue: 10.5,
-  existingShoppersValue: 33,
-  existingShoppersPercentValue: 88,
-  contributionIncrementalSalesValue: 89.5,
-  totalShoppers: 77
-}, {
-  retailer: 'Giant Food',
-  offerType: '20% Off',
-  period: '02.01.24-15.01.24',
-  roiValue: 2.5,
-  // New / existing Shoppers
-  newShoppersValue: 77,
-  newShoppersPercentValue: 8.6,
-  existingShoppersValue: 55,
-  existingShoppersPercentValue: 91.4,
-  totalShoppers: 122
-}, {
-  retailer: 'Stop&Shop',
-  offerType: '20% Off',
-  period: '02.01.24-15.01.24',
-  roiValue: 3.3,
-  // New / existing Shoppers
-  newShoppersValue: 11,
-  newShoppersPercentValue: 25.4,
-  existingShoppersValue: 33,
-  existingShoppersPercentValue: 74.6,
-  totalShoppers: 44
-}];
-const legendData1 = [{
-  iconColor: '#1F7677',
-  iconType: 'Square',
-  title: '% New Shoppers'
-}, {
-  iconColor: '#1F7677',
-  iconType: 'LegendUnionIcon',
-  title: '% New Shoppers'
-}, {
-  iconColor: '#90CE9C',
-  iconType: 'Square',
-  title: '# Existing Shoppers'
-}, {
-  iconColor: '#9CCB3B',
-  iconType: 'LegendUnionIcon',
-  title: '# Existing Shoppers'
-}];
-var _default = exports.default = {
-  title: 'SAG BI/PerformanceAnalyticsOneColumn',
-  component: _PerformanceAnalyticsOneColumn.PerformanceAnalyticsOneColumn,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figspec',
-      accessToken: 'figd_vSza21Sk6g-JWb5K_GAQhRJhmuRhS6k1Ju1KNGpC'
-    }
-  },
-  argTypes: {
-    totalsData: {
-      name: 'totalsData',
-      description: 'array [] of objects: to fill the totals on top of the component  '
-    },
-    data: {
-      name: 'data',
-      description: 'array [] of objects: to fill the barcharts  '
-    },
-    legendData: {
-      name: 'legendData',
-      description: 'array [] of objects: to fill the legend on bottom of the component  '
-    },
-    currencyType: {
-      name: 'currencyType',
-      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY', ''],
-      control: {
-        type: 'select'
-      }
-    },
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the control (in px / %)'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the control (in px / %)'
-    },
-    lineChartHeight: {
-      name: 'lineChartHeight',
-      control: {
-        type: 'number'
-      },
-      description: 'height of the control (in px)'
-    },
-    lineChartValueType: {
-      name: 'lineChartValueType',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - show/hide percent sign before value'
-    },
-    lineChartValueBold: {
-      name: 'lineChartValueBold',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - value bolded'
-    },
-    topBarSigning: {
-      name: 'topBarSigning',
-      control: {
-        type: 'inline-radio'
-      },
-      options: ['None', 'Dollar sign ($)', 'Euro sign (€)'],
-      description: 'What a value sign to add to the top bar value string'
-    },
-    topBarPercentSigning: {
-      name: 'topBarPercentSigning',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Add Percent sign aside top bars value'
-    },
-    noDataText: {
-      name: 'No Data text',
-      control: {
-        type: 'text'
-      },
-      description: 'text to display when no data found'
-    },
-    tooltipBarchartLabel1: {
-      name: 'tooltipBarchartLabel1',
-      control: {
-        type: 'text'
-      },
-      description: 'text in barchart tooltip - top'
-    },
-    tooltipBarchartLabel2: {
-      name: 'tooltipBarchartLabel2',
-      control: {
-        type: 'text'
-      },
-      description: 'text in barchart tooltip - bottom'
-    }
-  }
-};
-const TotalCostSales = exports.TotalCostSales = {
-  args: {
-    totalsData: totalsData1,
-    data: data1,
-    legendData: legendData1,
-    width: '100%',
-    height: '100%',
-    lineChartHeight: 50,
-    lineChartValueType: true,
-    lineChartValueBold: true,
-    colorBarchart1: '#90CE9C',
-    colorBarchart2: '#1F7677',
-    topBarPercentSigning: false,
-    topBarSigning: 'None',
-    currencyType: 'USD',
-    noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.',
-    tooltipBarchartLabel1: 'New Shoppers',
-    tooltipBarchartLabel2: 'Existing Shoppers'
-  }
-};

package/dist/stories/components/PerformanceAnalyticsOneColumn/PerformanceAnalyticsOneColumn.style.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TotalsDataContainer = exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonContainer = exports.LegendTitle = exports.LegendColorRectangle = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n  &.NoData {\n    align-self: center;\n    display: flex;\n    align-items: center;\n    width: 50%;\n    margin: 10% auto 0;\n  }\n  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.rootFont, props => props.textColor, props => props.width, props => props.height);
-const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  padding: 24px 40px;\n  background: white;\n  @media (max-width: 1536px) {\n    padding: 12px 32px;\n  }\n"])));
-const SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 10px 0 0 10px;\n"])));
-const TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
-const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n"])));
-const LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 10px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 8px;\n  }\n"])));
-const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
-const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n  margin: 0 6px 0 0;\n"])));
-const TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  width: fit-content;\n  margin: 0;\n"])));
-const TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  margin: 0;\n"])));
-const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), props => props.color);
-const ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
-const LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));

package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PerformanceAnalyticsTotals = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CommonFunctions = require("../../utils/CommonFunctions");
-var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals.style");
-/* PerformanceAnalyticsTotals */
-const PerformanceAnalyticsTotals = props => {
-  const {
-    textcolor,
-    width,
-    height,
-    totalsData
-  } = props;
-  const getGrowthPercent = (growthPercent, showGrowthPercentSign) => {
-    if (!growthPercent) {
-      return '';
-    }
-    const growthPercentSign = showGrowthPercentSign && growthPercent > 0 ? '+' : '';
-    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.GrowthPercent, {
-      id: "GrowthPercent"
-    }, "(", growthPercentSign, growthPercent, "%)");
-  };
-  const getTotalsData = () => /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TotalsDataContainer, {
-    id: "TotalsDataContainer"
-  }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map((item, i) => /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TitleAndValueContainer, {
-    id: "TitleAndValueContainer",
-    key: "".concat(item.title + i)
-  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Title, {
-    id: "Title",
-    width: width
-  }, item.title), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySignAndFormattedValueContainer, {
-    id: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.FormattedValue, {
-    id: "FormattedValue",
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySign, {
-    id: "CurrencySign"
-  }, item.currency ? (0, _CommonFunctions.getCurrencySign)(item.currencyType, item.value) : ''), item.dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), item.dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : '', item.growthPercent ? getGrowthPercent(item.growthPercent, item.showGrowthPercentSign) : '')))));
-  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.ControlsContainer, {
-    id: "ControlsContainer",
-    height: height,
-    width: width,
-    textcolor: textcolor
-  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Controls, {
-    id: "Controls",
-    height: height,
-    width: width
-  }, getTotalsData()) : '');
-};
-exports.PerformanceAnalyticsTotals = PerformanceAnalyticsTotals;
-var _default = exports.default = PerformanceAnalyticsTotals;
-PerformanceAnalyticsTotals.defaultProps = {
-  textcolor: '#212121',
-  width: '',
-  height: '',
-  totalsData: [{
-    title: '',
-    value: '',
-    dotCut: true,
-    currency: true,
-    currencyType: true,
-    growthPercent: true,
-    showGrowthPercentSign: true
-  }]
-};

package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.stories.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TotalCostSales = exports.NewExistingShoppers = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
-const totalsDataCostSales = [{
-  title: 'Total Cost',
-  value: 360000,
-  dotCut: true,
-  currency: true,
-  currencyType: 'USD',
-  growthPercent: 15.2,
-  showGrowthPercentSign: true
-}, {
-  title: 'Incremental Sales',
-  value: 960000,
-  dotCut: true,
-  currency: true,
-  currencyType: 'USD',
-  growthPercent: 13.5,
-  showGrowthPercentSign: true
-}, {
-  title: 'Incremental Sales ROI',
-  value: 2.7,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: null,
-  showGrowthPercentSign: true
-}];
-const totalsDataShoppers = [{
-  title: 'Total Shoppers',
-  value: 3500000,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: null,
-  showGrowthPercentSign: false
-}, {
-  title: 'New Shoppers',
-  value: 500500,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: 14.3,
-  showGrowthPercentSign: false
-}, {
-  title: 'Existing Shoppers',
-  value: 2900000,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: 85.7,
-  showGrowthPercentSign: false
-}];
-var _default = exports.default = {
-  title: 'SAG BI/PerformanceAnalyticsTotals',
-  component: _PerformanceAnalyticsTotals.PerformanceAnalyticsTotals,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figspec',
-      accessToken: 'figd_vSza21Sk6g-JWb5K_GAQhRJhmuRhS6k1Ju1KNGpC'
-    }
-  },
-  argTypes: {
-    totalsData: {
-      name: 'totalsData',
-      description: 'array [] of objects representing totals data to display in component '
-    },
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the control (in px / %)'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the control (in px / %)'
-    }
-  }
-};
-const TotalCostSales = exports.TotalCostSales = {
-  args: {
-    totalsData: totalsDataCostSales
-  }
-};
-const NewExistingShoppers = exports.NewExistingShoppers = {
-  args: {
-    totalsData: totalsDataShoppers
-  }
-};

package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.style.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TotalsDataContainer = exports.TitleAndValueContainer = exports.Title = exports.LegendFormatedValueContainer = exports.GrowthPercent = exports.FormattedValue = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.rootFont, props => props.textColor, props => props.width, props => props.height);
-const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
-const TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
-const Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  line-height: 27px;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
-const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
-const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
-const GrowthPercent = exports.GrowthPercent = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
-const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
-const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.875rem;\n"])));

package/dist/stories/components/Popup/Popup.js

@@ -1,172 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactHookForm = require("react-hook-form");
-var _MenuItemClosedIcon = require("../../icons/MenuItemClosedIcon");
-var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
-var _PopupContent = _interopRequireDefault(require("../PopupContent/PopupContent"));
-var _SagButton = _interopRequireDefault(require("../SagButton/SagButton"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _Popup = require("./Popup.style");
-const Popup = props => {
-  const {
-    title,
-    popupItemsData,
-    isPopupOpen,
-    width,
-    height,
-    borderColor,
-    subtitleTextColor,
-    onOverlayClick,
-    children,
-    onChange
-  } = props;
-  const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
-  const useFormMethods = (0, _reactHookForm.useForm)({
-    mode: 'onChange'
-  });
-  const divRef = (0, _react.useRef)(null);
-  const [divHeight, setDivHeight] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (divRef.current) {
-      const {
-        top,
-        bottom
-      } = divRef.current.getBoundingClientRect();
-      const height = bottom - top;
-      setDivHeight(height);
-    }
-  }, [height]);
-  (0, _react.useEffect)(() => {
-    setIsPopupOpen(isPopupOpen);
-  }, [isPopupOpen]);
-  const openPopup = () => {
-    setIsPopupOpen(true);
-  };
-  const closePopup = e => {
-    setIsPopupOpen(false);
-    onOverlayClick(e);
-  };
-  const AccordionItem = _ref => {
-    var _children$props, _children$props2;
-    let {
-      title,
-      rowsData,
-      children
-    } = _ref;
-    const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
-    const handleToggle = () => {
-      setIsItemOpen(!IsItemOpen);
-    };
-    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, {
-      id: "AccordionItemMainContainer",
-      borderColor: borderColor
-    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
-      id: "AccordionItemContainer",
-      onClick: handleToggle,
-      style: {
-        cursor: 'pointer'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
-      id: "AccordionItemIconContainer"
-    }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, null) : /*#__PURE__*/_react.default.createElement(_MenuItemClosedIcon.MenuItemClosedIcon, null)), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
-      id: "AccordionItemTitle",
-      subtitleTextColor: subtitleTextColor
-    }, title)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
-      id: "AccordionContentContainer"
-    }, title === 'Campaigns' ? children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[0] : title === 'Products' ? children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.children[1] : '', /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
-      id: "PopupContent",
-      width: "100%",
-      height: "100%",
-      rowsData: rowsData,
-      borderColor: borderColor,
-      onClick: () => {},
-      onChange: onChange
-    })));
-  };
-  const Accordion = _ref2 => {
-    let {
-      items,
-      children
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
-      id: "AccordionContainer",
-      maxHeight: divHeight ? (divHeight - 190).toString().concat('', 'px') : null
-    }, items.map((item, index) => {
-      var _item$rowsData;
-      return /*#__PURE__*/_react.default.createElement(AccordionItem, {
-        key: index,
-        title: item.title,
-        rowsData: ((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.length) > 0 ? item.rowsData : []
-      }, children);
-    }));
-  };
-  return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
-    id: "MainContainer"
-  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, useFormMethods, /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: useFormMethods.handleSubmit(submittedValues => console.log('submittedValues', submittedValues))
-  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
-    id: "ModalOverlay",
-    className: "modal-overlay",
-    onClick: e => closePopup(e)
-  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalContent, {
-    id: "ModalContent",
-    ref: divRef,
-    className: "modal-content",
-    height: height,
-    width: width,
-    onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, {
-    id: "TitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
-    id: "Close",
-    className: "close",
-    onClick: e => closePopup(e)
-  }, "\xD7")), /*#__PURE__*/_react.default.createElement(Accordion, {
-    items: popupItemsData
-  }, children), /*#__PURE__*/_react.default.createElement(_Popup.ButtonsContainer, {
-    id: "ButtonsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_Popup.InputCommit, {
-    value: "Save",
-    type: "submit",
-    style: {
-      backgroundColor: '#BCC6DA',
-      color: 'white',
-      transition: 'background-color 0.3s, color 0.3s'
-    },
-    borderColor: borderColor
-  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    text: "Save",
-    type: "primary",
-    size: "medium",
-    isSubmitButton: true
-  }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
-    textColor: "#212121",
-    backgroundColor: "#ffffff",
-    borderColor: borderColor,
-    onClickColor: "#B1B1B1",
-    radius: "8px",
-    text: "Cancel",
-    height: "40px",
-    width: "100px",
-    fontSize: "14px",
-    fontWeight: "500",
-    disabled: false,
-    onClick: e => closePopup(e)
-  })))))));
-};
-var _default = exports.default = Popup;
-Popup.defaultProps = {
-  isPopupOpen: true,
-  width: '800px',
-  height: '600px',
-  onSaveClick: () => {},
-  onCancelClick: () => {},
-  onOverlayClick: () => {}
-};