@egovernments/digit-ui-module-hcmmicroplanning/dist/index.modern.js

HCM-Microplanning

import { useTourState, Tutorial, Help, Button, PopUp, HeaderBar, ButtonSelector, Toast, Table, SVG, DownloadIcon, Modal as Modal$1, LoaderWithGap, CardSectionHeader, InfoIconOutline, Loader as Loader$1, Card as Card$1, StatusTable, Row, CardSubHeader, LabelFieldPair, CardLabel as CardLabel$1, TextInput as TextInput$1, Header as Header$1, InboxSearchComposerV2, AppContainer, PrivateRoute, BreadCrumb, WorksMgmtIcon, EmployeeModuleCard, TourProvider } from '@egovernments/digit-ui-react-components';
import React, { createContext, useContext, useReducer, Fragment as Fragment$1, useEffect, useRef, useState, useMemo, useCallback, memo } from 'react';
import { useLocation, useHistory, Link, Switch, useRouteMatch } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import * as Icons from '@egovernments/digit-ui-svg-components';
import { ArrowForward, Close, FileDownload, TickMarkBackgroundFilled, FileUpload, File as File$1, Trash, FilterAlt, Layers, NorthArrow, ArrowBack } from '@egovernments/digit-ui-svg-components';
import { ActionBar, Dropdown, InfoCard, InfoButton, Loader, TextInput, RadioButtons, Button as Button$1, CheckBox, Card, CardLabel, MultiSelectDropdown, Header, Stepper, Banner, Toast as Toast$1 } from '@egovernments/digit-ui-components';
import gjv from 'geojson-validation';
import Ajv from 'ajv';
import { v4 } from 'uuid';
import ExcelJS from 'exceljs';
import shp from 'shpjs';
import JSZip from 'jszip';
import { FileUploader } from 'react-drag-drop-files';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import chroma from 'chroma-js';
import 'react-router-dom/cjs/react-router-dom.min';
import '@egovernments/digit-ui-libraries';
import 'xlsx';
import axios from 'axios';
import 'react-dom';
import { useMutation, useQuery as useQuery$1 } from 'react-query';

const MyContext = createContext();
const initialState = {};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SETINITDATA":
      return {
        ...state,
        ...action.state
      };
    default:
      return state;
  }
};
const useMyContext = () => {
  return useContext(MyContext);
};
const ProviderContext = ({
  children
}) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return /*#__PURE__*/React.createElement(MyContext.Provider, {
    value: {
      state,
      dispatch
    }
  }, children);
};

const EXCEL = "Excel";
const GEOJSON = "GeoJSON";
const SHAPEFILE = "Shapefile";
const commonColumn = "boundaryCode";
const ACCEPT_HEADERS = {
  GeoJSON: "application/geo+json",
  Shapefile: "application/shapefile",
  Excel: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
};
const MapChoroplethGradientColors = [{
  percent: 0,
  color: "#edd1cf"
}, {
  percent: 100,
  color: "#b52626"
}];
const PRIMARY_THEME_COLOR = "#C84C0E";
const BOUNDARY_DATA_SHEET = "MICROPLAN_BOUNDARY_DATA_SHEET";
const FACILITY_DATA_SHEET = "MICROPLAN_FACILITY_DATA_SHEET";
const FILE_STORE = "microplan";
const SHEET_COLUMN_WIDTH = 40;
const SCHEMA_PROPERTIES_PREFIX = "DISPLAY";
const UPLOADED_DATA_ACTIVE_STATUS = "MICROPLAN_ACTIVE";

const MicroplanningHeader = () => {
  const {
    tourState,
    setTourState
  } = useTourState();
  const {
    state
  } = useMyContext();
  const {
    t
  } = useTranslation();
  const {
    pathname
  } = useLocation();
  const startTour = () => {
    if (state !== null && state !== void 0 && state.tourStateData) setTourState(state.tourStateData);
  };
  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Tutorial, {
    tutorial: tourState,
    updateTutorial: setTourState,
    theme: {
      zIndex: 500,
      primaryColor: PRIMARY_THEME_COLOR
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "wbh-header"
  }, /*#__PURE__*/React.createElement(Help, {
    startTour: startTour,
    labelClassName: "help-label"
  })));
};

const Guidelines = ({
  path
}) => {
  const {
    t
  } = useTranslation();
  const history = useHistory();
  const {
    id = ""
  } = Digit.Hooks.useQueryParams();
  const onNextClick = () => {
    history.push(`/${window.contextPath}/employee/microplanning/create-microplan?id=${id}`);
  };
  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Link, {
    to: `/${window.contextPath}/employee/microplanning/create-microplan?id=${id}`
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      padding: "2rem",
      "font-weight": "700",
      "font-size": "2rem",
      color: "rgb(0,0,0)"
    }
  }, t("CREATE_MICROPLAN_GUIDELINES"))), /*#__PURE__*/React.createElement(ActionBar, {
    className: `guideline-actionbar-content`
  }, /*#__PURE__*/React.createElement(Button, {
    type: "button",
    className: "custom-button",
    label: t("GUIDELINES_NEXT"),
    onButtonClick: onNextClick,
    isSuffix: true,
    variation: "primary",
    textStyles: {
      padding: 0,
      margin: 0
    }
  }, /*#__PURE__*/React.createElement(ArrowForward, {
    className: "icon",
    width: "1.5rem",
    height: "1.5rem",
    fill: "rgb(255,255,255)"
  }))));
};

var timeLineOptions = [
	{
		id: 0,
		name: "MICROPLAN_DETAILS",
		component: "MicroplanDetails",
		checkForCompleteness: true
	},
	{
		id: 1,
		name: "UPLOAD_DATA",
		component: "Upload",
		checkForCompleteness: true
	},
	{
		id: 2,
		name: "HYPOTHESIS",
		component: "Hypothesis",
		checkForCompleteness: true
	},
	{
		id: 3,
		name: "FORMULA_CONFIGURATION",
		component: "RuleEngine",
		checkForCompleteness: true
	},
	{
		id: 4,
		name: "MAPPING",
		component: "Mapping",
		checkForCompleteness: false
	},
	{
		id: 5,
		name: "MICROPLAN_GENERATION",
		component: "MicroplanPreview",
		checkForCompleteness: false
	}
];

const Modal = ({
  headerBarMain,
  headerBarEnd,
  popupStyles,
  children: _children = {},
  actionCancelLabel,
  actionCancelOnSubmit,
  actionSaveLabel,
  actionSaveOnSubmit,
  error,
  setError,
  formId,
  isDisabled,
  hideSubmit,
  style: _style = {},
  footerLeftButtonstyle: _footerLeftButtonstyle = {},
  footerRightButtonstyle: _footerRightButtonstyle = {},
  footerLeftButtonBody,
  footerRightButtonBody,
  popupModuleMianStyles,
  headerBarMainStyle,
  isOBPSFlow: _isOBPSFlow = false,
  popupModuleActionBarStyles: _popupModuleActionBarStyles = {}
}) => {
  const mobileView = Digit.Utils.browser.isMobile();
  useEffect(() => {
    document.body.style.overflowY = "hidden";
    return () => {
      document.body.style.overflowY = "auto";
    };
  }, []);
  return /*#__PURE__*/React.createElement(PopUp, null, /*#__PURE__*/React.createElement("div", {
    className: "popup-module",
    style: popupStyles
  }, /*#__PURE__*/React.createElement(HeaderBar, {
    main: headerBarMain,
    end: headerBarEnd,
    style: headerBarMainStyle ? headerBarMainStyle : {}
  }), /*#__PURE__*/React.createElement("div", {
    className: "popup-module-main",
    style: popupModuleMianStyles ? popupModuleMianStyles : {}
  }, _children, /*#__PURE__*/React.createElement("div", {
    className: "popup-module-action-bar",
    style: moduleActionBarStyle(_isOBPSFlow, _popupModuleActionBarStyles)
  }, actionCancelLabel || footerLeftButtonBody ? /*#__PURE__*/React.createElement(ButtonSelector, {
    textStyles: {
      margin: "0px"
    },
    ButtonBody: footerLeftButtonBody,
    theme: "border",
    label: actionCancelLabel,
    onSubmit: actionCancelOnSubmit,
    style: Object.keys(_style).length > 0 ? _style : _footerLeftButtonstyle
  }) : null, !hideSubmit ? /*#__PURE__*/React.createElement(ButtonSelector, {
    textStyles: {
      margin: "0px"
    },
    ButtonBody: footerRightButtonBody,
    label: actionSaveLabel,
    onSubmit: actionSaveOnSubmit,
    formId: formId,
    isDisabled: isDisabled,
    style: Object.keys(_style).length > 0 ? _style : _footerRightButtonstyle
  }) : null))), error && /*#__PURE__*/React.createElement(Toast, {
    label: error,
    onClose: () => setError(null),
    type: "error"
  }));
};
const moduleActionBarStyle = (isOBPSFlow, popupModuleActionBarStyles) => {
  return isOBPSFlow ? !mobileView ? {
    marginRight: "18px"
  } : {
    position: "absolute",
    bottom: "5%",
    right: "10%",
    left: window.location.href.includes("employee") ? "0%" : "7%"
  } : popupModuleActionBarStyles;
};
const ModalWrapper = ({
  closeModal,
  LeftButtonHandler,
  RightButtonHandler,
  footerLeftButtonBody,
  footerRightButtonBody,
  header,
  bodyText,
  body,
  popupStyles,
  headerBarMainStyle,
  popupModuleActionBarStyles,
  hideSubmit,
  closeButton: _closeButton = false,
  actionCancelLabel
}) => {
  return /*#__PURE__*/React.createElement(Modal, {
    headerBarMain: header,
    headerBarEnd: _closeButton ? /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "microplan-close-button",
      onClick: closeModal
    }, " ", /*#__PURE__*/React.createElement(Close, {
      width: "1.5rem",
      height: "1.5rem",
      fill: "#000000"
    })) : "",
    actionCancelOnSubmit: LeftButtonHandler,
    actionSaveOnSubmit: RightButtonHandler,
    formId: "microplanning",
    popupStyles: {
      width: "33.375rem",
      borderRadius: "0.25rem",
      ...(popupStyles ? popupStyles : {})
    },
    headerBarMainStyle: {
      margin: 0,
      width: "33.375rem",
      overflow: "hidden",
      ...(headerBarMainStyle ? headerBarMainStyle : {})
    },
    popupModuleMianStyles: {
      margin: 0,
      padding: 0
    },
    popupModuleActionBarStyles: popupModuleActionBarStyles ? popupModuleActionBarStyles : {
      justifyContent: "space-between",
      padding: "1rem"
    },
    style: {},
    hideSubmit: hideSubmit ? hideSubmit : false,
    footerLeftButtonstyle: {
      padding: 0,
      alignSelf: "flex-start",
      height: "fit-content",
      textStyles: {
        fontWeight: "600"
      },
      backgroundColor: "rgba(255, 255, 255, 1)",
      color: PRIMARY_THEME_COLOR,
      minWidth: "15.063rem",
      border: `0.063rem solid ${PRIMARY_THEME_COLOR}`
    },
    footerRightButtonstyle: {
      padding: 0,
      alignSelf: "flex-end",
      height: "fit-content",
      textStyles: {
        fontWeight: "500"
      },
      backgroundColor: PRIMARY_THEME_COLOR,
      color: "rgba(255, 255, 255, 1)",
      minWidth: "15.063rem",
      boxShadow: "0px -2px 0px 0px rgba(11, 12, 12, 1) inset"
    },
    footerLeftButtonBody: footerLeftButtonBody,
    footerRightButtonBody: footerRightButtonBody,
    actionCancelLabel: actionCancelLabel
  }, bodyText && /*#__PURE__*/React.createElement("div", {
    className: "modal-body"
  }, /*#__PURE__*/React.createElement("p", {
    className: "modal-main-body-p"
  }, bodyText)), body ? body : "");
};

const ajv = new Ajv({
  allErrors: true
});
ajv.addKeyword("isRequired");
ajv.addKeyword("isLocationDataColumns");
ajv.addKeyword("isRuleConfigureInputs");
ajv.addKeyword("isFilterPropertyOfMapSection");
ajv.addKeyword("isVisualizationPropertyOfMapSection");
ajv.addKeyword("toShowInMicroplanPreview");
gjv.define("Position", position => {
  let errors = [];
  if (position[0] < -180 || position[0] > 180) {
    errors.push("Location Coordinates Error: the x must be between -180 and 180");
  }
  if (position[1] < -90 || position[1] > 90) {
    errors.push("Location Coordinates Error: the y must be between -90 and 90");
  }
  return errors;
});
const geojsonValidations = (data, schemaData, t) => {
  const valid = geojsonStructureValidation(data);
  return valid.valid ? {
    valid: true
  } : {
    valid: false,
    message: valid.message || ["ERROR_INVALID_GEOJSON"]
  };
};
const geojsonStructureValidation = data => {
  let valid = true;
  const trace = {};
  for (let i = 0; i < data["features"].length; i++) {
    const check = gjv.valid(data["features"][i]);
    valid = valid && check;
    const errors = gjv.isFeature(data["features"][i], true);
    if (errors.some(str => str.includes("Location Coordinates Error:"))) return {
      valid: false,
      message: ["ERROR_INCORRECT_LOCATION_COORDINATES"]
    };
    if (!check) trace[i] = [errors];
  }
  return {
    valid,
    trace
  };
};
const geometryValidation = data => {
  let firstType;
  for (const feature of data.features) {
    if (!feature.geometry || !feature.geometry.type) {
      return false;
    }
    if (!firstType) {
      firstType = feature.geometry.type;
    } else {
      if (feature.geometry.type !== firstType) {
        return false;
      }
    }
  }
  return true;
};
const geojsonPropertiesValidation = (data, schemaData, name, t) => {
  const translate = () => {
    const required = Object.entries((schemaData === null || schemaData === void 0 ? void 0 : schemaData.Properties) || {}).reduce((acc, [key, value]) => {
      if (value !== null && value !== void 0 && value.isRequired) {
        acc.push(key);
      }
      return acc;
    }, []);
    return {
      required,
      properties: schemaData.Properties
    };
  };
  const {
    required,
    properties
  } = translate();
  const schema = {
    type: "object",
    properties: {
      type: {
        const: "FeatureCollection"
      }
    },
    patternProperties: {
      "^features$": {
        type: "array",
        items: {
          type: "object",
          patternProperties: {
            "^properties$": {
              type: "object",
              patternProperties: properties,
              required: required,
              additionalProperties: true
            }
          }
        }
      }
    },
    additionalProperties: true
  };
  const validateGeojson = ajv.compile(schema);
  const valid = validateGeojson(data);
  const errors = {};
  let hasDataErrors = "false";
  const missingColumnsList = new Set();
  let errorMessages = [];
  if (!valid) {
    for (let i = 0; i < validateGeojson.errors.length; i++) {
      var _errors$name, _errors$name2, _errors$name3, _errors$name3$instanc, _errors$name4, _errors$name4$instanc;
      let tempErrorStore = "";
      let instancePathTypeGlobal = validateGeojson.errors[i].instancePath.split("/");
      switch (validateGeojson.errors[i].keyword) {
        case "additionalProperties":
          {
            tempErrorStore = "ERROR_ADDITIONAL_PROPERTIES";
            hasDataErrors = "true";
            break;
          }
        case "type":
          {
            var _validateGeojson$erro;
            const instancePathType = validateGeojson.errors[i].instancePath.split("/");
            const neededType = (_validateGeojson$erro = validateGeojson.errors[i].params) === null || _validateGeojson$erro === void 0 ? void 0 : _validateGeojson$erro.type;
            instancePathTypeGlobal = instancePathType;
            tempErrorStore = neededType === "number" ? "ERROR_MUST_BE_A_NUMBER" : "ERROR_MUST_BE_A_STRING";
            hasDataErrors = "true";
          }
          break;
        case "const":
          {
            if (validateGeojson.errors[i].params.allowedValue === "FeatureCollection") tempErrorStore = "ERROR_FEATURECOLLECTION";
            hasDataErrors = "true";
            break;
          }
        case "required":
          {
            const missing = validateGeojson.errors[i].params.missingProperty;
            const instancePathType = validateGeojson.errors[i].instancePath.split("/");
            instancePathTypeGlobal = [...instancePathType, missing];
            tempErrorStore = "ERROR_MANDATORY_FIELDS_CANT_BE_EMPTY";
            missingColumnsList.add(missing);
            hasDataErrors = "true";
            break;
          }
        case "pattern":
          tempErrorStore = "ERROR_VALUE_NOT_ALLOWED";
          hasDataErrors = "true";
          break;
        case "minProperties":
          {
            hasDataErrors = "minProperties";
            break;
          }
        case "enum":
          {
            var _validateGeojson$erro2, _validateGeojson$erro3, _validateGeojson$erro4;
            const instancePathType = validateGeojson.errors[i].instancePath.split("/");
            instancePathTypeGlobal = instancePathType;
            tempErrorStore = {
              error: "ERROR_UPLOAD_DATA_ENUM",
              values: {
                allowedValues: (_validateGeojson$erro2 = validateGeojson.errors[i]) === null || _validateGeojson$erro2 === void 0 ? void 0 : (_validateGeojson$erro3 = _validateGeojson$erro2.params) === null || _validateGeojson$erro3 === void 0 ? void 0 : (_validateGeojson$erro4 = _validateGeojson$erro3.allowedValues) === null || _validateGeojson$erro4 === void 0 ? void 0 : _validateGeojson$erro4.map(item => t(item)).join(", ")
              }
            };
            hasDataErrors = "true";
            break;
          }
        default:
          hasDataErrors = "unknown";
          break;
      }
      if (tempErrorStore) errors[name] = {
        ...(errors[name] ? errors[name] : {}),
        [instancePathTypeGlobal[2]]: {
          ...(errors !== null && errors !== void 0 && (_errors$name = errors[name]) !== null && _errors$name !== void 0 && _errors$name[instancePathTypeGlobal[2]] ? errors === null || errors === void 0 ? void 0 : (_errors$name2 = errors[name]) === null || _errors$name2 === void 0 ? void 0 : _errors$name2[instancePathTypeGlobal[2]] : {}),
          [instancePathTypeGlobal[4]]: [...new Set(...(errors !== null && errors !== void 0 && (_errors$name3 = errors[name]) !== null && _errors$name3 !== void 0 && (_errors$name3$instanc = _errors$name3[instancePathTypeGlobal[2]]) !== null && _errors$name3$instanc !== void 0 && _errors$name3$instanc[instancePathTypeGlobal[4]] ? errors === null || errors === void 0 ? void 0 : (_errors$name4 = errors[name]) === null || _errors$name4 === void 0 ? void 0 : (_errors$name4$instanc = _errors$name4[instancePathTypeGlobal[2]]) === null || _errors$name4$instanc === void 0 ? void 0 : _errors$name4$instanc[instancePathTypeGlobal[4]] : [])), tempErrorStore]
        }
      };
      switch (hasDataErrors) {
        case "true":
          errorMessages = {
            ...errorMessages,
            dataError: "ERROR_REFER_UPLOAD_PREVIEW_TO_SEE_THE_ERRORS"
          };
          break;
        case "unknown":
          errorMessages = {
            ...errorMessages,
            unkown: "ERROR_UNKNOWN"
          };
          break;
        case "missing_properties":
          errorMessages = {
            ...errorMessages,
            missingProperty: t("ERROR_MISSING_PROPERTY", {
              properties: [...missingColumnsList].map(item => t(item)).join(", ")
            })
          };
          break;
      }
    }
    ajv.removeSchema();
    return {
      valid: !hasDataErrors,
      message: errorMessages ? [...new Set(Object.values(errorMessages))] : [],
      errors,
      validationError: validateGeojson.errors
    };
  }
  ajv.removeSchema();
  if (!geometryValidation(data)) return {
    valid: false,
    message: t("ERROR_MULTIPLE_GEOMETRY_TYPES")
  };
  return {
    valid: true
  };
};

const SCROLL_OFFSET = 100;
const SpatialDataPropertyMapping = ({
  uploadedData,
  resourceMapping,
  setResourceMapping,
  schema,
  setToast,
  hierarchy,
  close,
  t
}) => {
  if (!uploadedData) return /*#__PURE__*/React.createElement("div", {
    className: "spatial-data-property-mapping"
  }, " ", t("NO_DATA_TO_DO_MAPPING"));
  const itemRefs = useRef([]);
  const [expandedIndex, setExpandedIndex] = useState(null);
  const [renderCycle, setRenderCycle] = useState(0);
  const scrollContainerRef = useRef(null);
  useEffect(() => {
    if (expandedIndex !== null) {
      setRenderCycle(0);
    }
  }, [expandedIndex]);
  useEffect(() => {
    if (renderCycle < 3) {
      setRenderCycle(prev => prev + 1);
    } else if (expandedIndex !== null && itemRefs.current[expandedIndex]) {
      try {
        const parentElement = itemRefs.current[expandedIndex];
        const childElement = itemRefs.current[expandedIndex].children[1];
        if (parentElement) {
          const scrollContainer = scrollContainerRef.current;
          const parentRect = parentElement.getBoundingClientRect();
          const containerRect = scrollContainer.getBoundingClientRect();
          const offset = parentRect.top - containerRect.top;
          scrollContainer.scrollTo({
            top: scrollContainer.scrollTop + offset - SCROLL_OFFSET,
            behavior: "smooth"
          });
        }
        if (childElement) {
          childElement.focus();
        }
      } catch (error) {
        console.error("Error scrolling to element:", error);
      }
    }
  }, [renderCycle, expandedIndex]);
  useEffect(() => {
    if (expandedIndex !== null) {
      const observer = new MutationObserver(() => {
        setRenderCycle(prev => prev + 1);
      });
      if (itemRefs.current[expandedIndex]) {
        observer.observe(itemRefs.current[expandedIndex], {
          childList: true,
          subtree: true
        });
      }
      return () => observer.disconnect();
    }
  }, [expandedIndex]);
  const [userColumns, setUserColumns] = useState([]);
  const [templateColumns, setTemplateColumns] = useState([]);
  useEffect(() => {
    if (!schema || !schema["schema"] || !schema.schema["Properties"]) return setToast({
      state: "error",
      message: t("ERROR_VALIDATION_SCHEMA_ABSENT")
    });
    const columns = Object.keys(schema.schema["Properties"]);
    if (columns) {
      const newTemplateColumns = schema && !schema.doHierarchyCheckInUploadedData ? columns : [...hierarchy, ...columns];
      setTemplateColumns(newTemplateColumns);
    }
  }, [schema]);
  useEffect(() => {
    var _uploadedData$feature;
    const userUploadedColumns = new Set();
    uploadedData === null || uploadedData === void 0 ? void 0 : (_uploadedData$feature = uploadedData["features"]) === null || _uploadedData$feature === void 0 ? void 0 : _uploadedData$feature.forEach(item => {
      Object.keys(item["properties"]).forEach(key => userUploadedColumns.add(key));
    });
    for (const item of userUploadedColumns) {
      if (item.length < 2) {
        setToast({
          state: "error",
          message: t("ERROR_FIELD_LENGTH")
        });
        close();
      }
    }
    setUserColumns(preUserColumns => [...preUserColumns, ...userUploadedColumns]);
  }, [uploadedData]);
  const DropDownUserColumnSelect = ({
    id,
    index
  }) => {
    const [selectedOption, setSelectedOption] = useState("");
    useEffect(() => {
      const obj = resourceMapping.find(item => item["mappedTo"] === id);
      if (obj) setSelectedOption({
        code: obj["mappedFrom"]
      });else setSelectedOption();
    }, [id, resourceMapping]);
    const handleSelectChange = event => {
      const newValue = event.code;
      setSelectedOption(event);
      setResourceMapping(previous => {
        const revisedData = previous.filter(item => !(item["mappedTo"] === id || item["mappedFrom"] === newValue));
        return [...revisedData, {
          mappedTo: id,
          mappedFrom: newValue
        }];
      });
    };
    const toggleExpand = index => {
      setExpandedIndex(index === expandedIndex ? null : index);
    };
    return /*#__PURE__*/React.createElement("div", {
      ref: el => {
        itemRefs.current[index] = el;
      },
      onClick: () => toggleExpand(index),
      onKeyDown: () => toggleExpand(index)
    }, /*#__PURE__*/React.createElement(Dropdown, {
      variant: "select-dropdown",
      t: t,
      isMandatory: false,
      option: userColumns === null || userColumns === void 0 ? void 0 : userColumns.map(item => ({
        code: item
      })),
      selected: selectedOption,
      optionKey: "code",
      select: handleSelectChange,
      style: {
        width: "100%",
        backgroundColor: "rgb(0,0,0,0)"
      },
      showToolTip: true
    }));
  };
  const tableColumns = useMemo(() => [{
    Header: t("COLUMNS_IN_TEMPLATE"),
    accessor: "COLUMNS_IN_TEMPLATE"
  }, {
    Header: t("COLUMNS_IN_USER_UPLOAD"),
    accessor: "COLUMNS_IN_USER_UPLOAD",
    Cell: ({
      cell: {
        value
      },
      row: {
        index
      }
    }) => useMemo(() => /*#__PURE__*/React.createElement(DropDownUserColumnSelect, {
      key: value,
      id: value,
      index: index
    }), [value, index])
  }], [userColumns, setResourceMapping, resourceMapping, t, itemRefs]);
  const data = useMemo(() => templateColumns.map(item => ({
    COLUMNS_IN_TEMPLATE: t(item),
    COLUMNS_IN_USER_UPLOAD: item
  })), [templateColumns]);
  return /*#__PURE__*/React.createElement("div", {
    className: "spatial-data-property-mapping",
    ref: scrollContainerRef
  }, /*#__PURE__*/React.createElement(Table, {
    customTableWrapperClassName: "",
    t: t,
    disableSort: true,
    autoSort: false,
    manualPagination: false,
    isPaginationRequired: true,
    data: data,
    columns: tableColumns,
    getCellProps: cellInfo => {
      return {
        style: {}
      };
    },
    getHeaderProps: cellInfo => {
      return {
        style: {}
      };
    }
  }));
};

const JsonPreviewInExcelForm = props => {
  var _props$errorLocationO, _props$errorLocationO2, _sheetsData$currentSh, _sheetsData$currentSh2, _sheetsData$currentSh3;
  const {
    t
  } = useTranslation();
  const sheetsData = props === null || props === void 0 ? void 0 : props.sheetsData;
  const [currentSheetName, setCurrentSheetName] = useState(Object.keys(sheetsData).length > 0 ? Object.keys(sheetsData)[0] : undefined);
  return /*#__PURE__*/React.createElement("div", {
    className: "preview-data "
  }, /*#__PURE__*/React.createElement("div", {
    className: "operational-buttons",
    style: {
      ...(props === null || props === void 0 ? void 0 : props.btnStyle)
    }
  }, /*#__PURE__*/React.createElement(Button, {
    label: t("BUTTON_BACK"),
    variation: "secondary",
    icon: /*#__PURE__*/React.createElement(SVG.ArrowBack, {
      height: "2rem",
      width: "2rem",
      fill: PRIMARY_THEME_COLOR
    }),
    type: "button",
    onButtonClick: () => props === null || props === void 0 ? void 0 : props.onBack()
  }), /*#__PURE__*/React.createElement(Button, {
    label: t("BUTTON_DOWNLOAD"),
    variation: "secondary",
    icon: /*#__PURE__*/React.createElement(DownloadIcon, {
      height: "1.25rem",
      width: "1.25rem",
      fill: PRIMARY_THEME_COLOR
    }),
    type: "button",
    onButtonClick: () => props === null || props === void 0 ? void 0 : props.onDownload()
  })), /*#__PURE__*/React.createElement("div", {
    className: "excel-wrapper"
  }, (props === null || props === void 0 ? void 0 : (_props$errorLocationO = props.errorLocationObject) === null || _props$errorLocationO === void 0 ? void 0 : _props$errorLocationO[currentSheetName]) && /*#__PURE__*/React.createElement("p", {
    className: "error-user-directions"
  }, t("USER_DIRECTIONS_FOR_ERROR_MESSAGE")), /*#__PURE__*/React.createElement("div", {
    key: sheetsData === null || sheetsData === void 0 ? void 0 : sheetsData[currentSheetName],
    className: "sheet-wrapper",
    style: props !== null && props !== void 0 && (_props$errorLocationO2 = props.errorLocationObject) !== null && _props$errorLocationO2 !== void 0 && _props$errorLocationO2[currentSheetName] ? {
      height: "72.5vh"
    } : {}
  }, /*#__PURE__*/React.createElement("table", {
    className: "excel-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, sheetsData === null || sheetsData === void 0 ? void 0 : (_sheetsData$currentSh = sheetsData[currentSheetName]) === null || _sheetsData$currentSh === void 0 ? void 0 : (_sheetsData$currentSh2 = _sheetsData$currentSh[0]) === null || _sheetsData$currentSh2 === void 0 ? void 0 : _sheetsData$currentSh2.filter(header => header).map(header => /*#__PURE__*/React.createElement("th", {
    key: header
  }, t(header))))), /*#__PURE__*/React.createElement("tbody", null, sheetsData === null || sheetsData === void 0 ? void 0 : (_sheetsData$currentSh3 = sheetsData[currentSheetName]) === null || _sheetsData$currentSh3 === void 0 ? void 0 : _sheetsData$currentSh3.slice(1).map((rowData, rowIndex) => {
    var _Object$values, _sheetsData$currentSh4;
    return /*#__PURE__*/React.createElement("tr", {
      key: rowIndex
    }, (_Object$values = Object.values(sheetsData === null || sheetsData === void 0 ? void 0 : (_sheetsData$currentSh4 = sheetsData[currentSheetName]) === null || _sheetsData$currentSh4 === void 0 ? void 0 : _sheetsData$currentSh4[0])) === null || _Object$values === void 0 ? void 0 : _Object$values.map((_, cellIndex) => {
      try {
        var _sheetsData$currentSh5, _sheetsData$currentSh6, _props$errorLocationO3, _props$errorLocationO4, _props$errorLocationO5, _props$errorLocationO6, _props$errorLocationO7, _props$errorLocationO8, _props$errorLocationO9;
        const headerName = sheetsData === null || sheetsData === void 0 ? void 0 : (_sheetsData$currentSh5 = sheetsData[currentSheetName]) === null || _sheetsData$currentSh5 === void 0 ? void 0 : (_sheetsData$currentSh6 = _sheetsData$currentSh5[0]) === null || _sheetsData$currentSh6 === void 0 ? void 0 : _sheetsData$currentSh6[cellIndex];
        const error = headerName ? props === null || props === void 0 ? void 0 : (_props$errorLocationO3 = props.errorLocationObject) === null || _props$errorLocationO3 === void 0 ? void 0 : (_props$errorLocationO4 = _props$errorLocationO3[currentSheetName]) === null || _props$errorLocationO4 === void 0 ? void 0 : (_props$errorLocationO5 = _props$errorLocationO4[rowIndex]) === null || _props$errorLocationO5 === void 0 ? void 0 : _props$errorLocationO5[headerName] : undefined;
        let convertedError;
        if (typeof (error === null || error === void 0 ? void 0 : error[0]) === "object") {
          let {
            error: actualError,
            ...otherProperties
          } = error[0];
          convertedError = t(actualError, otherProperties === null || otherProperties === void 0 ? void 0 : otherProperties.values);
        } else {
          convertedError = !!(error !== null && error !== void 0 && error[0]) && t(error === null || error === void 0 ? void 0 : error[0]);
        }
        const rowHasError = typeof (props === null || props === void 0 ? void 0 : (_props$errorLocationO6 = props.errorLocationObject) === null || _props$errorLocationO6 === void 0 ? void 0 : (_props$errorLocationO7 = _props$errorLocationO6[currentSheetName]) === null || _props$errorLocationO7 === void 0 ? void 0 : _props$errorLocationO7[rowIndex]) === "object" ? Object.keys(props === null || props === void 0 ? void 0 : (_props$errorLocationO8 = props.errorLocationObject) === null || _props$errorLocationO8 === void 0 ? void 0 : (_props$errorLocationO9 = _props$errorLocationO8[currentSheetName]) === null || _props$errorLocationO9 === void 0 ? void 0 : _props$errorLocationO9[rowIndex]).length !== 0 : undefined;
        return /*#__PURE__*/React.createElement("td", {
          key: cellIndex,
          style: {
            ...(rowData[cellIndex] || rowData[cellIndex] === 0 ? !isNaN(rowData[cellIndex]) && isFinite(rowData[cellIndex]) ? {
              textAlign: "end"
            } : {} : {}),
            ...(convertedError ? {
              backgroundColor: "rgb(250,148,148)"
            } : {})
          },
          title: convertedError ? convertedError : undefined
        }, cellIndex === 0 && rowHasError && /*#__PURE__*/React.createElement("div", {
          className: "edited-row-marker"
        }), rowData[cellIndex] || rowData[cellIndex] === 0 ? typeof rowData[cellIndex] !== "object" ? rowData[cellIndex] : "" : "");
      } catch (error) {
        console.error("Error while showing data upload previwe", error.message);
      }
    }));
  })))), /*#__PURE__*/React.createElement("div", {
    className: "excel-tab-list"
  }, Object.entries(sheetsData).map(([sheetName, sheetData], index) => {
    var _props$errorLocationO10;
    return /*#__PURE__*/React.createElement("button", {
      type: "button",
      key: sheetName,
      className: `tab ${sheetName === currentSheetName ? "active" : ""}`,
      onClick: () => {
        setCurrentSheetName(sheetName);
      },
      style: {
        ...(props !== null && props !== void 0 && (_props$errorLocationO10 = props.errorLocationObject) !== null && _props$errorLocationO10 !== void 0 && _props$errorLocationO10[sheetName] ? {
          backgroundColor: "rgb(250,148,148)",
          color: "black"
        } : {})
      }
    }, sheetName);
  }))));
};

var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

function createCommonjsModule(fn, module) {
	return module = { exports: {} }, fn(module, module.exports), module.exports;
}

var b = "function" === typeof Symbol && Symbol.for,
  c = b ? Symbol.for("react.element") : 60103,
  d = b ? Symbol.for("react.portal") : 60106,
  e = b ? Symbol.for("react.fragment") : 60107,
  f = b ? Symbol.for("react.strict_mode") : 60108,
  g = b ? Symbol.for("react.profiler") : 60114,
  h = b ? Symbol.for("react.provider") : 60109,
  k = b ? Symbol.for("react.context") : 60110,
  l = b ? Symbol.for("react.async_mode") : 60111,
  m = b ? Symbol.for("react.concurrent_mode") : 60111,
  n = b ? Symbol.for("react.forward_ref") : 60112,
  p = b ? Symbol.for("react.suspense") : 60113,
  q = b ? Symbol.for("react.suspense_list") : 60120,
  r = b ? Symbol.for("react.memo") : 60115,
  t = b ? Symbol.for("react.lazy") : 60116,
  v = b ? Symbol.for("react.block") : 60121,
  w = b ? Symbol.for("react.fundamental") : 60117,
  x = b ? Symbol.for("react.responder") : 60118,
  y = b ? Symbol.for("react.scope") : 60119;
function z(a) {
  if ("object" === typeof a && null !== a) {
    var u = a.$$typeof;
    switch (u) {
      case c:
        switch (a = a.type, a) {
          case l:
          case m:
          case e:
          case g:
          case f:
          case p:
            return a;
          default:
            switch (a = a && a.$$typeof, a) {
              case k:
              case n:
              case t:
              case r:
              case h:
                return a;
              default:
                return u;
            }
        }
      case d:
        return u;
    }
  }
}
function A(a) {
  return z(a) === m;
}
var AsyncMode = l;
var ConcurrentMode = m;
var ContextConsumer = k;
var ContextProvider = h;
var Element = c;
var ForwardRef = n;
var Fragment = e;
var Lazy = t;
var Memo = r;
var Portal = d;
var Profiler = g;
var StrictMode = f;
var Suspense = p;
var isAsyncMode = function (a) {
  return A(a) || z(a) === l;
};
var isConcurrentMode = A;
var isContextConsumer = function (a) {
  return z(a) === k;
};
var isContextProvider = function (a) {
  return z(a) === h;
};
var isElement = function (a) {
  return "object" === typeof a && null !== a && a.$$typeof === c;
};
var isForwardRef = function (a) {
  return z(a) === n;
};
var isFragment = function (a) {
  return z(a) === e;
};
var isLazy = function (a) {
  return z(a) === t;
};
var isMemo = function (a) {
  return z(a) === r;
};
var isPortal = function (a) {
  return z(a) === d;
};
var isProfiler = function (a) {
  return z(a) === g;
};
var isStrictMode = function (a) {
  return z(a) === f;
};
var isSuspense = function (a) {
  return z(a) === p;
};
var isValidElementType = function (a) {
  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
};
var typeOf = z;
var reactIs_production_min = {
  AsyncMode: AsyncMode,
  ConcurrentMode: ConcurrentMode,
  ContextConsumer: ContextConsumer,
  ContextProvider: ContextProvider,
  Element: Element,
  ForwardRef: ForwardRef,
  Fragment: Fragment,
  Lazy: Lazy,
  Memo: Memo,
  Portal: Portal,
  Profiler: Profiler,
  StrictMode: StrictMode,
  Suspense: Suspense,
  isAsyncMode: isAsyncMode,
  isConcurrentMode: isConcurrentMode,
  isContextConsumer: isContextConsumer,
  isContextProvider: isContextProvider,
  isElement: isElement,
  isForwardRef: isForwardRef,
  isFragment: isFragment,
  isLazy: isLazy,
  isMemo: isMemo,
  isPortal: isPortal,
  isProfiler: isProfiler,
  isStrictMode: isStrictMode,
  isSuspense: isSuspense,
  isValidElementType: isValidElementType,
  typeOf: typeOf
};

var reactIs_development = createCommonjsModule(function (module, exports) {

  if (process.env.NODE_ENV !== "production") {
    (function () {
      var hasSymbol = typeof Symbol === 'function' && Symbol.for;
      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
      var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
      var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
      function isValidElementType(type) {
        return typeof type === 'string' || typeof type === 'function' || type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
      }
      function typeOf(object) {
        if (typeof object === 'object' && object !== null) {
          var $$typeof = object.$$typeof;
          switch ($$typeof) {
            case REACT_ELEMENT_TYPE:
              var type = object.type;
              switch (type) {
                case REACT_ASYNC_MODE_TYPE:
                case REACT_CONCURRENT_MODE_TYPE:
                case REACT_FRAGMENT_TYPE:
                case REACT_PROFILER_TYPE:
                case REACT_STRICT_MODE_TYPE:
                case REACT_SUSPENSE_TYPE:
                  return type;
                default:
                  var $$typeofType = type && type.$$typeof;
                  switch ($$typeofType) {
                    case REACT_CONTEXT_TYPE:
                    case REACT_FORWARD_REF_TYPE:
                    case REACT_LAZY_TYPE:
                    case REACT_MEMO_TYPE:
                    case REACT_PROVIDER_TYPE:
                      return $$typeofType;
                    default:
                      return $$typeof;
                  }
              }
            case REACT_PORTAL_TYPE:
              return $$typeof;
          }
        }
        return undefined;
      }
      var AsyncMode = REACT_ASYNC_MODE_TYPE;
      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
      var ContextConsumer = REACT_CONTEXT_TYPE;
      var ContextProvider = REACT_PROVIDER_TYPE;
      var Element = REACT_ELEMENT_TYPE;
      var ForwardRef = REACT_FORWARD_REF_TYPE;
      var Fragment = REACT_FRAGMENT_TYPE;
      var Lazy = REACT_LAZY_TYPE;
      var Memo = REACT_MEMO_TYPE;
      var Portal = REACT_PORTAL_TYPE;
      var Profiler = REACT_PROFILER_TYPE;
      var StrictMode = REACT_STRICT_MODE_TYPE;
      var Suspense = REACT_SUSPENSE_TYPE;
      var hasWarnedAboutDeprecatedIsAsyncMode = false;
      function isAsyncMode(object) {
        {
          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
            hasWarnedAboutDeprecatedIsAsyncMode = true;
            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
          }
        }
        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
      }
      function isConcurrentMode(object) {
        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
      }
      function isContextConsumer(object) {
        return typeOf(object) === REACT_CONTEXT_TYPE;
      }
      function isContextProvider(object) {
        return typeOf(object) === REACT_PROVIDER_TYPE;
      }
      function isElement(object) {
        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
      }
      function isForwardRef(object) {
        return typeOf(object) === REACT_FORWARD_REF_TYPE;
      }
      function isFragment(object) {
        return typeOf(object) === REACT_FRAGMENT_TYPE;
      }
      function isLazy(object) {
        return typeOf(object) === REACT_LAZY_TYPE;
      }
      function isMemo(object) {
        return typeOf(object) === REACT_MEMO_TYPE;
      }
      function isPortal(object) {
        return typeOf(object) === REACT_PORTAL_TYPE;
      }
      function isProfiler(object) {
        return typeOf(object) === REACT_PROFILER_TYPE;
      }
      function isStrictMode(object) {
        return typeOf(object) === REACT_STRICT_MODE_TYPE;
      }
      function isSuspense(object) {
        return typeOf(object) === REACT_SUSPENSE_TYPE;
      }
      exports.AsyncMode = AsyncMode;
      exports.ConcurrentMode = ConcurrentMode;
      exports.ContextConsumer = ContextConsumer;
      exports.ContextProvider = ContextProvider;
      exports.Element = Element;
      exports.ForwardRef = ForwardRef;
      exports.Fragment = Fragment;
      exports.Lazy = Lazy;
      exports.Memo = Memo;
      exports.Portal = Portal;
      exports.Profiler = Profiler;
      exports.StrictMode = StrictMode;
      exports.Suspense = Suspense;
      exports.isAsyncMode = isAsyncMode;
      exports.isConcurrentMode = isConcurrentMode;
      exports.isContextConsumer = isContextConsumer;
      exports.isContextProvider = isContextProvider;
      exports.isElement = isElement;
      exports.isForwardRef = isForwardRef;
      exports.isFragment = isFragment;
      exports.isLazy = isLazy;
      exports.isMemo = isMemo;
      exports.isPortal = isPortal;
      exports.isProfiler = isProfiler;
      exports.isStrictMode = isStrictMode;
      exports.isSuspense = isSuspense;
      exports.isValidElementType = isValidElementType;
      exports.typeOf = typeOf;
    })();
  }
});

var reactIs = createCommonjsModule(function (module) {

  if (process.env.NODE_ENV === 'production') {
    module.exports = reactIs_production_min;
  } else {
    module.exports = reactIs_development;
  }
});

var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
  if (val === null || val === undefined) {
    throw new TypeError('Object.assign cannot be called with null or undefined');
  }
  return Object(val);
}
function shouldUseNative() {
  try {
    if (!Object.assign) {
      return false;
    }
    var test1 = new String('abc');
    test1[5] = 'de';
    if (Object.getOwnPropertyNames(test1)[0] === '5') {
      return false;
    }
    var test2 = {};
    for (var i = 0; i < 10; i++) {
      test2['_' + String.fromCharCode(i)] = i;
    }
    var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
      return test2[n];
    });
    if (order2.join('') !== '0123456789') {
      return false;
    }
    var test3 = {};
    'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
      test3[letter] = letter;
    });
    if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
      return false;
    }
    return true;
  } catch (err) {
    return false;
  }
}
var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
  var from;
  var to = toObject(target);
  var symbols;
  for (var s = 1; s < arguments.length; s++) {
    from = Object(arguments[s]);
    for (var key in from) {
      if (hasOwnProperty.call(from, key)) {
        to[key] = from[key];
      }
    }
    if (getOwnPropertySymbols) {
      symbols = getOwnPropertySymbols(from);
      for (var i = 0; i < symbols.length; i++) {
        if (propIsEnumerable.call(from, symbols[i])) {
          to[symbols[i]] = from[symbols[i]];
        }
      }
    }
  }
  return to;
};

var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
var ReactPropTypesSecret_1 = ReactPropTypesSecret;

var has = Function.call.bind(Object.prototype.hasOwnProperty);

var printWarning = function () {};
if (process.env.NODE_ENV !== 'production') {
  var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
  var loggedTypeFailures = {};
  var has$1 = has;
  printWarning = function (text) {
    var message = 'Warning: ' + text;
    if (typeof console !== 'undefined') {
      console.error(message);
    }
    try {
      throw new Error(message);
    } catch (x) {}
  };
}
function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
  if (process.env.NODE_ENV !== 'production') {
    for (var typeSpecName in typeSpecs) {
      if (has$1(typeSpecs, typeSpecName)) {
        var error;
        try {
          if (typeof typeSpecs[typeSpecName] !== 'function') {
            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
            err.name = 'Invariant Violation';
            throw err;
          }
          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
        } catch (ex) {
          error = ex;
        }
        if (error && !(error instanceof Error)) {
          printWarning((componentName || 'React class') + ': type specification of ' + location + ' `' + typeSpecName + '` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).');
        }
        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
          loggedTypeFailures[error.message] = true;
          var stack = getStack ? getStack() : '';
          printWarning('Failed ' + location + ' type: ' + error.message + (stack != null ? stack : ''));
        }
      }
    }
  }
}
checkPropTypes.resetWarningCache = function () {
  if (process.env.NODE_ENV !== 'production') {
    loggedTypeFailures = {};
  }
};
var checkPropTypes_1 = checkPropTypes;

var printWarning$1 = function () {};
if (process.env.NODE_ENV !== 'production') {
  printWarning$1 = function (text) {
    var message = 'Warning: ' + text;
    if (typeof console !== 'undefined') {
      console.error(message);
    }
    try {
      throw new Error(message);
    } catch (x) {}
  };
}
function emptyFunctionThatReturnsNull() {
  return null;
}
var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
  var FAUX_ITERATOR_SYMBOL = '@@iterator';
  function getIteratorFn(maybeIterable) {
    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
    if (typeof iteratorFn === 'function') {
      return iteratorFn;
    }
  }
  var ANONYMOUS = '<<anonymous>>';
  var ReactPropTypes = {
    array: createPrimitiveTypeChecker('array'),
    bigint: createPrimitiveTypeChecker('bigint'),
    bool: createPrimitiveTypeChecker('boolean'),
    func: createPrimitiveTypeChecker('function'),
    number: createPrimitiveTypeChecker('number'),
    object: createPrimitiveTypeChecker('object'),
    string: createPrimitiveTypeChecker('string'),
    symbol: createPrimitiveTypeChecker('symbol'),
    any: createAnyTypeChecker(),
    arrayOf: createArrayOfTypeChecker,
    element: createElementTypeChecker(),
    elementType: createElementTypeTypeChecker(),
    instanceOf: createInstanceTypeChecker,
    node: createNodeChecker(),
    objectOf: createObjectOfTypeChecker,
    oneOf: createEnumTypeChecker,
    oneOfType: createUnionTypeChecker,
    shape: createShapeTypeChecker,
    exact: createStrictShapeTypeChecker
  };
  function is(x, y) {
    if (x === y) {
      return x !== 0 || 1 / x === 1 / y;
    } else {
      return x !== x && y !== y;
    }
  }
  function PropTypeError(message