sag_components 1.0.596 → 1.0.598

package/dist/stories/components/TabMenu.js

@@ -15,12 +15,16 @@ const TabMenu = props => {
     tabs,
     color,
     showActions,
+    showFilterButton,
+    showViewOptionsButton,
+    showSearchInput,
     showLabel,
     inputWidth,
     onTabChange,
     panelIsOpen,
     activeColor,
-    onFilterButtonClick
+    onFilterButtonClick,
+    onSearchFieldTyping
   } = props;
   const [activeTab, setActiveTab] = (0, _react.useState)(0);
   const handleTabChange = index => {
@@ -47,19 +51,20 @@ const TabMenu = props => {
     role: "presentation"
   }))), showLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Label, null, /*#__PURE__*/_react.default.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/_react.default.createElement("span", {
     className: "separator"
-  }, "|")), showActions && /*#__PURE__*/_react.default.createElement(_TabMenu.ActionsWrapper, null, /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
+  }, "|")), showActions && /*#__PURE__*/_react.default.createElement(_TabMenu.ActionsWrapper, null, showFilterButton && /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
     id: "filterButton",
     iconName: "Filter",
     buttonText: "Filter",
     openState: panelIsOpen,
     activeColor: activeColor,
     onButtonClick: onFilterButtonClick
-  }), /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
-    id: "viewOptionsButton",
-    iconName: "Options",
-    buttonText: "View Options"
-  }), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
-    width: inputWidth
+  }), showViewOptionsButton && /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
+    id: "viewIndicatorButton",
+    iconName: "ViewIndicator",
+    buttonText: "View Indicator"
+  }), showSearchInput && /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    width: inputWidth,
+    onTyping: e => onSearchFieldTyping(e)
   })), /*#__PURE__*/_react.default.createElement(_TabMenu.Body, {
     id: "tabsBody"
   }, tabs[activeTab] && tabs[activeTab].content));
@@ -68,6 +73,9 @@ TabMenu.defaultProps = {
   color: '#229E38',
   showActions: true,
   showLabel: true,
+  showFilterButton: true,
+  showViewOptionsButton: true,
+  showSearchInput: true,
   inputWidth: '100%',
   tabs: [
   // { title: 'Tab 1', content: <ReportTable /> },
@@ -81,6 +89,7 @@ TabMenu.defaultProps = {
   onTabChange: () => {},
   panelIsOpen: false,
   activeColor: '#229E38',
-  onFilterButtonClick: () => {}
+  onFilterButtonClick: () => {},
+  onSearchFieldTyping: () => {}
 };
 var _default = exports.default = TabMenu;

package/dist/stories/components/TotalCostModal.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Modal = _interopRequireDefault(require("./Modal"));
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
+var _TextField = _interopRequireDefault(require("./TextField"));
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _reactHookForm = require("react-hook-form");
+var _Modal2 = require("./Modal.style");
+var TotalCostModal = function TotalCostModal(_ref) {
+  var title = _ref.title,
+    isModalOpen = _ref.isModalOpen,
+    setModalOpen = _ref.setModalOpen,
+    setResult = _ref.setResult;
+  var _useState = (0, _react.useState)([{
+      id: "title",
+      label: "Title",
+      type: "text"
+    }, {
+      id: "dotCut",
+      label: "Do Cut",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currency",
+      label: "Currency",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currencyType",
+      label: "Currency Type",
+      type: "select",
+      options: ["USD", "EUR", "ILS", "GBP", "JPY"]
+    }, {
+      id: "width",
+      label: "Width",
+      type: "text"
+    }, {
+      id: "height",
+      label: "Height",
+      type: "text"
+    }, {
+      id: "textColor",
+      label: "Text Color",
+      type: "text"
+    }, {
+      id: "noDataText",
+      label: "No Data Text",
+      type: "text"
+    }]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    params = _useState2[0],
+    setParams = _useState2[1];
+  var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    code = _useState4[0],
+    setCode = _useState4[1];
+  var _useForm = (0, _reactHookForm.useForm)(),
+    register = _useForm.register,
+    handleSubmit = _useForm.handleSubmit,
+    watch = _useForm.watch,
+    control = _useForm.control,
+    errors = _useForm.formState.errors;
+  var onSubmit = function onSubmit(data) {
+    return setResult(data);
+  };
+  return /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    isOpen: isModalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
+    value: code,
+    onChange: setCode
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid",
+      gridTemplateColumns: "auto auto auto"
+    }
+  }, params.map(function (item) {
+    if (item.type === "text") {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref2) {
+          var field = _ref2.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            allowedInput: "all",
+            height: "100%",
+            label: item.label,
+            multiline: true,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            width: "300px"
+          }));
+        }
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref3) {
+          var field = _ref3.field;
+          return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            limitTagsOnMultiSelect: 0,
+            onInputChange: function onInputChange(e) {
+              var _e$inputValue;
+              console.log("e", e);
+              field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
+            },
+            options: item.options,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            text: item.label,
+            width: "300px"
+          }));
+        }
+      });
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
+    type: "submit"
+  })));
+};
+var _default = exports.default = TotalCostModal;

package/dist/stories/components/icons/Calendar.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Calendar = void 0;
+var _react = _interopRequireDefault(require("react"));
+const Calendar = () => /*#__PURE__*/_react.default.createElement("svg", {
+  width: "11",
+  height: "12",
+  viewBox: "0 0 11 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H0.75V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V4.5ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
+  fill: "#568202"
+}));
+exports.Calendar = Calendar;
+var _default = exports.default = Calendar;

package/dist/stories/components/icons/CalendarInOpen.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CalendarInOpen = void 0;
+var _react = _interopRequireDefault(require("react"));
+const CalendarInOpen = () => /*#__PURE__*/_react.default.createElement("svg", {
+  width: "21",
+  height: "21",
+  viewBox: "0 0 21 21",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("rect", {
+  width: "21",
+  height: "21",
+  rx: "4",
+  fill: "#229E38",
+  fillOpacity: "0.1"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "M7.625 5C7.8125 5 8 5.1875 8 5.375V6.5H12.5V5.375C12.5 5.1875 12.6641 5 12.875 5C13.0625 5 13.25 5.1875 13.25 5.375V6.5H14C14.8203 6.5 15.5 7.17969 15.5 8V8.75V9.5V15.5C15.5 16.3438 14.8203 17 14 17H6.5C5.65625 17 5 16.3438 5 15.5V9.5V8.75V8C5 7.17969 5.65625 6.5 6.5 6.5H7.25V5.375C7.25 5.1875 7.41406 5 7.625 5ZM14.75 9.5H5.75V15.5C5.75 15.9219 6.07812 16.25 6.5 16.25H14C14.3984 16.25 14.75 15.9219 14.75 15.5V9.5ZM14 7.25H6.5C6.07812 7.25 5.75 7.60156 5.75 8V8.75H14.75V8C14.75 7.60156 14.3984 7.25 14 7.25Z",
+  fill: "#066768"
+}));
+exports.CalendarInOpen = CalendarInOpen;
+var _default = exports.default = CalendarInOpen;

package/dist/stories/components/icons/ChervronLeftIcon.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChervronLeftIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ChervronLeftIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  width: "7",
+  height: "13",
+  viewBox: "0 0 7 13",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
+  fill: "#777575"
+}));
+exports.ChervronLeftIcon = ChervronLeftIcon;
+var _default = exports.default = ChervronLeftIcon;

package/dist/stories/components/icons/ChervronRightIcon.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChervronRightIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ChervronRightIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  width: "8",
+  height: "13",
+  viewBox: "0 0 8 13",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
+  fill: "#777575"
+}));
+exports.ChervronRightIcon = ChervronRightIcon;
+var _default = exports.default = ChervronRightIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.596",
+  "version": "1.0.598",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -14,9 +14,9 @@
   "author": "SAG",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
+    "@babel/cli": "^7.24.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@storybook/addon-designs": "^7.0.9",
@@ -40,7 +40,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "sass": "^1.74.1",
@@ -50,11 +50,12 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.15",
-    "@mui/material": "^5.15.15",
+    "@mui/icons-material": "^5.15.16",
+    "@mui/material": "^5.15.16",
     "@mui/x-date-pickers": "^6.18.6",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
+    "moment": "^2.30.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
@@ -64,7 +65,7 @@
     "react-loading-skeleton": "^3.3.1",
     "recharts": "^2.9.2",
     "storybook": "^7.4.6",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.9"
   },
   "browserslist": {
     "production": [

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -1,284 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ExamplePopupContent = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
-const FieldsDataRow1 = [{
-  name: "FundationSource",
-  label: "Fundation Source",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Source",
-  dropdownOptions: [{
-    value: 1,
-    label: "Source 1"
-  }, {
-    value: 2,
-    label: "Source 2"
-  }, {
-    value: 3,
-    label: "Source 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Category",
-  label: "Category",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Category",
-  dropdownOptions: [{
-    value: 1,
-    label: "Category 1"
-  }, {
-    value: 2,
-    label: "Category 2"
-  }, {
-    value: 3,
-    label: "Category 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Supplier",
-  label: "Supplier",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Supplier",
-  dropdownOptions: [{
-    value: 1,
-    label: "Supplier 1"
-  }, {
-    value: 2,
-    label: "Supplier 2"
-  }, {
-    value: 3,
-    label: "Supplier 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "ContactName",
-  label: "Contact Name",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Name",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const FieldsDataRow2 = [{
-  name: "BrandName",
-  label: "Brand Name",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Brand",
-  dropdownOptions: [{
-    value: 1,
-    label: "Brand 1"
-  }, {
-    value: 2,
-    label: "Brand 2"
-  }, {
-    value: 3,
-    label: "Brand 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Budget",
-  label: "Budget",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Budget",
-  dropdownOptions: [{
-    value: 1,
-    label: "Budget 1"
-  }, {
-    value: 2,
-    label: "Budget 2"
-  }, {
-    value: 3,
-    label: "Budget 3"
-  }],
-  dropdownDefaultValue: {
-    value: 1,
-    label: "Budget 1"
-  }
-}, {
-  name: "CategoryManager",
-  label: "Category Manager",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Category Manager",
-  dropdownOptions: [{
-    value: 1,
-    label: "Category Manager 1"
-  }, {
-    value: 2,
-    label: "Category Manager 2"
-  }, {
-    value: 3,
-    label: "Category Manager 3"
-  }],
-  dropdownDefaultValue: {
-    value: 3,
-    label: "Category Manager 3"
-  }
-}, {
-  name: "ContactEmail",
-  label: "Contact Email",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Email",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const FieldsDataRow3 = [{
-  name: "Broker",
-  label: "Broker",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Broker",
-  dropdownOptions: [{
-    value: 1,
-    label: "Broker 1"
-  }, {
-    value: 2,
-    label: "Broker 2"
-  }, {
-    value: 3,
-    label: "Broker 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "SupplierOfferID",
-  label: "Supplier Offer ID",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Supplier Offer ID",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}, {
-  name: "VendorID",
-  label: "Vendor ID",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Vendor ID",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}, {
-  name: "ContactPhone",
-  label: "Contact Phone",
-  disabled: false,
-  required: true,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Phone",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const RowsData1 = [{
-  fieldsArray: FieldsDataRow1
-}, {
-  fieldsArray: FieldsDataRow2
-}, {
-  fieldsArray: FieldsDataRow3
-}];
-var _default = exports.default = {
-  title: "Campaign Tool/PopupContent",
-  component: _PopupContent.default,
-  tags: ["autodocs"],
-  argTypes: {
-    FieldsData: {
-      name: "FieldsData",
-      control: {
-        type: "object"
-      },
-      description: " object: to fill kpi columns and buttons "
-    },
-    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 / % )"
-    },
-    onClick: {
-      action: "onClick",
-      description: "onClick event - returns an object of check box {true/false} "
-    },
-    onChange: {
-      action: "onChange",
-      description: "onChange event  "
-    },
-    borderColor: {
-      name: "borderColor",
-      description: "Sets the border color",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
-const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
-ExamplePopupContent.args = {
-  rowsData: RowsData1,
-  borderColor: "#066768",
-  width: "100%",
-  height: "100%"
-};