@mseva/upyog-ui-module-chb 1.1.4 → 1.1.6

package/dist/index.modern.js

@@ -45272,1198 +45272,1355 @@ const NewADSStepperForm = () => {
   }));
 };
 
-var tabbable_1 = createCommonjsModule(function (module, exports) {
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = findTabbableDescendants;
-  var DISPLAY_NONE = "none";
-  var DISPLAY_CONTENTS = "contents";
-  var tabbableNode = /^(input|select|textarea|button|object|iframe)$/;
-  function isNotOverflowing(element, style) {
-    return style.getPropertyValue("overflow") !== "visible" || element.scrollWidth <= 0 && element.scrollHeight <= 0;
-  }
-  function hidesContents(element) {
-    var zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;
-    if (zeroSize && !element.innerHTML) return true;
-    try {
-      var style = window.getComputedStyle(element);
-      var displayValue = style.getPropertyValue("display");
-      return zeroSize ? displayValue !== DISPLAY_CONTENTS && isNotOverflowing(element, style) : displayValue === DISPLAY_NONE;
-    } catch (exception) {
-      console.warn("Failed to inspect element style");
-      return false;
-    }
-  }
-  function visible(element) {
-    var parentElement = element;
-    var rootNode = element.getRootNode && element.getRootNode();
-    while (parentElement) {
-      if (parentElement === document.body) break;
-      if (rootNode && parentElement === rootNode) parentElement = rootNode.host.parentNode;
-      if (hidesContents(parentElement)) return false;
-      parentElement = parentElement.parentNode;
+const CHBCitizenSecond = ({
+  onGoBack,
+  goNext,
+  currentStepData,
+  t
+}) => {
+  const tenantId = window.location.href.includes("employee") ? Digit.ULBService.getCurrentPermanentCity() : localStorage.getItem("CITIZEN.CITY");
+  const isCitizen = window.location.href.includes("citizen");
+  const [getHallDetails, setHallDetails] = useState([]);
+  const [getHallCodes, setHallCodes] = useState([]);
+  const [getSlots, setSlots] = useState([]);
+  const [loader, setLoader] = useState(false);
+  const [showInfo, setShowInfo] = useState(false);
+  const [error, setError] = useState(null);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: {
+      errors
+    },
+    getValues,
+    watch
+  } = useForm({
+    defaultValues: {
+      shouldUnregister: false,
+      halls: [{
+        startDate: "",
+        endDate: "",
+        startTime: "",
+        endTime: ""
+      }]
     }
-    return true;
-  }
-  function focusable(element, isTabIndexNotNaN) {
-    var nodeName = element.nodeName.toLowerCase();
-    var res = tabbableNode.test(nodeName) && !element.disabled || (nodeName === "a" ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
-    return res && visible(element);
-  }
-  function tabbable(element) {
-    var tabIndex = element.getAttribute("tabindex");
-    if (tabIndex === null) tabIndex = undefined;
-    var isTabIndexNaN = isNaN(tabIndex);
-    return (isTabIndexNaN || tabIndex >= 0) && focusable(element, !isTabIndexNaN);
-  }
-  function findTabbableDescendants(element) {
-    var descendants = [].slice.call(element.querySelectorAll("*"), 0).reduce(function (finished, el) {
-      return finished.concat(!el.shadowRoot ? [el] : findTabbableDescendants(el.shadowRoot));
-    }, []);
-    return descendants.filter(tabbable);
-  }
-  module.exports = exports["default"];
-});
-unwrapExports(tabbable_1);
-
-var focusManager = createCommonjsModule(function (module, exports) {
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
   });
-  exports.resetState = resetState;
-  exports.log = log;
-  exports.handleBlur = handleBlur;
-  exports.handleFocus = handleFocus;
-  exports.markForFocusLater = markForFocusLater;
-  exports.returnFocus = returnFocus;
-  exports.popWithoutFocus = popWithoutFocus;
-  exports.setupScopedFocus = setupScopedFocus;
-  exports.teardownScopedFocus = teardownScopedFocus;
-  var _tabbable2 = _interopRequireDefault(tabbable_1);
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
+  const {
+    data: CHBLocations = [],
+    isLoading: CHBLocationLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
+    name: "Location"
+  }]);
+  const {
+    data: CHBDetails = [],
+    isLoading: CHBLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
+    name: "CommunityHalls"
+  }]);
+  const {
+    data: CHBPurpose = [],
+    isLoading: CHBPurposeLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
+    name: "Purpose"
+  }]);
+  const {
+    data: SpecialCategory = [],
+    isLoading: CHBSpecialCategoryLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
+    name: "SpecialCategory"
+  }]);
+  const {
+    data: CHBHallCode = [],
+    isLoading: CHBHallCodeLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
+    name: "HallCode"
+  }]);
+  const {
+    data: CHBReason = [],
+    isLoading: CHBReasonLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
+    name: "DiscountReason"
+  }]);
+  const {
+    data: CHBCalculationType = [],
+    isLoading: CHBCalcLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
+    name: "CalculationType"
+  }]);
+  const fiterHalls = selected => {
+    var _CHBDetails$CHB, _CHBDetails$CHB$Commu, _CHBHallCode$CHB;
+    const filteredHalls = (CHBDetails === null || CHBDetails === void 0 ? void 0 : (_CHBDetails$CHB = CHBDetails.CHB) === null || _CHBDetails$CHB === void 0 ? void 0 : (_CHBDetails$CHB$Commu = _CHBDetails$CHB.CommunityHalls) === null || _CHBDetails$CHB$Commu === void 0 ? void 0 : _CHBDetails$CHB$Commu.filter(hall => hall.locationCode === (selected === null || selected === void 0 ? void 0 : selected.code))) || [];
+    setHallDetails(filteredHalls);
+    const hallInfo = CHBHallCode === null || CHBHallCode === void 0 ? void 0 : (_CHBHallCode$CHB = CHBHallCode.CHB) === null || _CHBHallCode$CHB === void 0 ? void 0 : _CHBHallCode$CHB.HallCode;
+    const getHallCodesData = hallInfo === null || hallInfo === void 0 ? void 0 : hallInfo.filter(item => (item === null || item === void 0 ? void 0 : item.communityHallId) == (selected === null || selected === void 0 ? void 0 : selected.communityHallId));
+    setHallCodes(getHallCodesData);
+  };
+  const slotsSearch = async data => {
+    var _getValues, _getValues2;
+    setLoader(true);
+    const payload = {
+      tenantId: tenantId,
+      communityHallCode: data.communityHallId,
+      hallCode: data === null || data === void 0 ? void 0 : data.HallCode,
+      bookingStartDate: (_getValues = getValues()) === null || _getValues === void 0 ? void 0 : _getValues.startDate,
+      bookingEndDate: (_getValues2 = getValues()) === null || _getValues2 === void 0 ? void 0 : _getValues2.endDate,
+      isTimerRequired: false
     };
-  }
-  var focusLaterElements = [];
-  var modalElement = null;
-  var needToFocus = false;
-  function resetState() {
-    focusLaterElements = [];
-  }
-  function log() {
-    if (process.env.NODE_ENV !== "production") {
-      console.log("focusManager ----------");
-      focusLaterElements.forEach(function (f) {
-        var check = f || {};
-        console.log(check.nodeName, check.className, check.id);
+    try {
+      const response = await Digit.CHBServices.slot_search({
+        filters: payload
       });
-      console.log("end focusManager ----------");
+      setLoader(false);
+      setSlots(response === null || response === void 0 ? void 0 : response.hallSlotAvailabiltityDetails);
+      return response;
+    } catch (error) {
+      setLoader(false);
     }
-  }
-  function handleBlur() {
-    needToFocus = true;
-  }
-  function handleFocus() {
-    if (needToFocus) {
-      needToFocus = false;
-      if (!modalElement) {
-        return;
-      }
-      setTimeout(function () {
-        if (modalElement.contains(document.activeElement)) {
-          return;
+  };
+  const onSubmit = data => {
+    var _Digit$UserService$ge, _data$reason, _data$slots, _CHBCalculationType$C, _match$getHallDetails, _match$getHallDetails2, _getHallDetails$2, _getHallDetails$3, _data$siteId, _data$purpose, _data$specialCategory;
+    const userInfo = ((_Digit$UserService$ge = Digit.UserService.getUser()) === null || _Digit$UserService$ge === void 0 ? void 0 : _Digit$UserService$ge.info) || {};
+    const now = Date.now();
+    const additionalDetails = {
+      ...((data === null || data === void 0 ? void 0 : (_data$reason = data.reason) === null || _data$reason === void 0 ? void 0 : _data$reason.reasonName) && {
+        reason: data.reason.reasonName
+      }),
+      ...((data === null || data === void 0 ? void 0 : data.discountAmount) && {
+        discountAmount: data.discountAmount
+      })
+    };
+    const bookingSlotDetails = data === null || data === void 0 ? void 0 : (_data$slots = data.slots) === null || _data$slots === void 0 ? void 0 : _data$slots.map(slot => {
+      var _CHBHallCode$CHB2, _CHBHallCode$CHB2$Hal;
+      const hallInfo = CHBHallCode === null || CHBHallCode === void 0 ? void 0 : (_CHBHallCode$CHB2 = CHBHallCode.CHB) === null || _CHBHallCode$CHB2 === void 0 ? void 0 : (_CHBHallCode$CHB2$Hal = _CHBHallCode$CHB2.HallCode) === null || _CHBHallCode$CHB2$Hal === void 0 ? void 0 : _CHBHallCode$CHB2$Hal.find(h => h.HallCode === slot.hallCode);
+      const formattedDate = slot !== null && slot !== void 0 && slot.bookingDate ? format(parse(slot.bookingDate, "dd-MM-yyyy", new Date()), "yyyy-MM-dd") : null;
+      return {
+        bookingDate: formattedDate,
+        bookingEndDate: formattedDate,
+        bookingFromTime: (slot === null || slot === void 0 ? void 0 : slot.fromTime) || "00:00",
+        bookingToTime: (slot === null || slot === void 0 ? void 0 : slot.toTime) || "23:59",
+        hallCode: slot === null || slot === void 0 ? void 0 : slot.hallCode,
+        status: "INITIATE",
+        capacity: (hallInfo === null || hallInfo === void 0 ? void 0 : hallInfo.capacity) || null
+      };
+    });
+    const match = (_CHBCalculationType$C = CHBCalculationType.CHB.CalculationType) === null || _CHBCalculationType$C === void 0 ? void 0 : _CHBCalculationType$C.find(item => {
+      var _getHallDetails$;
+      return Object.keys(item).includes(getHallDetails === null || getHallDetails === void 0 ? void 0 : (_getHallDetails$ = getHallDetails[0]) === null || _getHallDetails$ === void 0 ? void 0 : _getHallDetails$.communityHallId);
+    });
+    const amount = (match === null || match === void 0 ? void 0 : (_match$getHallDetails = match[getHallDetails === null || getHallDetails === void 0 ? void 0 : (_getHallDetails$2 = getHallDetails[0]) === null || _getHallDetails$2 === void 0 ? void 0 : _getHallDetails$2.communityHallId]) === null || _match$getHallDetails === void 0 ? void 0 : (_match$getHallDetails2 = _match$getHallDetails[0]) === null || _match$getHallDetails2 === void 0 ? void 0 : _match$getHallDetails2.amount) || null;
+    const slotCount = Array.isArray(bookingSlotDetails) ? bookingSlotDetails.length : 0;
+    const numericAmount = Number(amount) || 0;
+    const finalAmount = numericAmount * slotCount;
+    const payload = {
+      hallsBookingApplication: {
+        tenantId,
+        ...(additionalDetails && {
+          additionalDetails
+        }),
+        bookingStatus: "INITIATED",
+        applicationDate: now,
+        communityHallCode: (getHallDetails === null || getHallDetails === void 0 ? void 0 : (_getHallDetails$3 = getHallDetails[0]) === null || _getHallDetails$3 === void 0 ? void 0 : _getHallDetails$3.communityHallId) || "",
+        communityHallName: data === null || data === void 0 ? void 0 : (_data$siteId = data.siteId) === null || _data$siteId === void 0 ? void 0 : _data$siteId.name,
+        purpose: {
+          purpose: data === null || data === void 0 ? void 0 : (_data$purpose = data.purpose) === null || _data$purpose === void 0 ? void 0 : _data$purpose.code
+        },
+        amount: finalAmount,
+        specialCategory: {
+          category: data === null || data === void 0 ? void 0 : (_data$specialCategory = data.specialCategory) === null || _data$specialCategory === void 0 ? void 0 : _data$specialCategory.code
+        },
+        purposeDescription: data === null || data === void 0 ? void 0 : data.purposeDescription,
+        bookingSlotDetails,
+        owners: [{
+          name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name,
+          mobileNumber: userInfo === null || userInfo === void 0 ? void 0 : userInfo.mobileNumber,
+          emailId: userInfo === null || userInfo === void 0 ? void 0 : userInfo.emailId,
+          type: userInfo === null || userInfo === void 0 ? void 0 : userInfo.type
+        }],
+        workflow: {
+          action: "INITIATE",
+          businessService: "CommunityHallBooking",
+          moduleName: "CommunityHallModule"
         }
-        var el = (0, _tabbable2.default)(modalElement)[0] || modalElement;
-        el.focus();
-      }, 0);
-    }
-  }
-  function markForFocusLater() {
-    focusLaterElements.push(document.activeElement);
-  }
-  function returnFocus() {
-    var preventScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    var toFocus = null;
-    try {
-      if (focusLaterElements.length !== 0) {
-        toFocus = focusLaterElements.pop();
-        toFocus.focus({
-          preventScroll: preventScroll
-        });
       }
-      return;
-    } catch (e) {
-      console.warn(["You tried to return focus to", toFocus, "but it is not in the DOM anymore"].join(" "));
+    };
+    console.log("finalpayload", payload);
+    goNext(payload);
+  };
+  useEffect(() => {
+    var _currentStepData$owne;
+    const formattedData = currentStepData === null || currentStepData === void 0 ? void 0 : (_currentStepData$owne = currentStepData.ownerDetails) === null || _currentStepData$owne === void 0 ? void 0 : _currentStepData$owne.hallsBookingApplication;
+    if (formattedData) {
+      var _CHBHallCode$CHB3, _CHBReason$CHB, _formattedData$bookin3, _formattedData$bookin4, _formattedData$bookin5, _formattedData$additi2;
+      const communityHallsOptions = CHBLocations.CHB.CommunityHalls || [];
+      const purposeOptions = CHBPurpose.CHB.Purpose || [];
+      const specialCategoryOptions = SpecialCategory.CHB.SpecialCategory || [];
+      const hallCodeOptions = CHBHallCode === null || CHBHallCode === void 0 ? void 0 : (_CHBHallCode$CHB3 = CHBHallCode.CHB) === null || _CHBHallCode$CHB3 === void 0 ? void 0 : _CHBHallCode$CHB3.HallCode;
+      const discReasonOptions = CHBReason === null || CHBReason === void 0 ? void 0 : (_CHBReason$CHB = CHBReason.CHB) === null || _CHBReason$CHB === void 0 ? void 0 : _CHBReason$CHB.DiscountReason;
+      const selectedCommHall = communityHallsOptions === null || communityHallsOptions === void 0 ? void 0 : communityHallsOptions.find(item => (item === null || item === void 0 ? void 0 : item.communityHallId) == (formattedData === null || formattedData === void 0 ? void 0 : formattedData.communityHallCode));
+      const selectedPurpose = purposeOptions === null || purposeOptions === void 0 ? void 0 : purposeOptions.find(item => {
+        var _formattedData$purpos;
+        return (item === null || item === void 0 ? void 0 : item.code) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$purpos = formattedData.purpose) === null || _formattedData$purpos === void 0 ? void 0 : _formattedData$purpos.purpose);
+      });
+      const selectedSpecialCat = specialCategoryOptions === null || specialCategoryOptions === void 0 ? void 0 : specialCategoryOptions.find(item => {
+        var _formattedData$specia;
+        return (item === null || item === void 0 ? void 0 : item.code) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$specia = formattedData.specialCategory) === null || _formattedData$specia === void 0 ? void 0 : _formattedData$specia.category);
+      });
+      const selectHallCode = hallCodeOptions === null || hallCodeOptions === void 0 ? void 0 : hallCodeOptions.find(item => {
+        var _formattedData$bookin, _formattedData$bookin2;
+        return (item === null || item === void 0 ? void 0 : item.HallCode) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$bookin = formattedData.bookingSlotDetails) === null || _formattedData$bookin === void 0 ? void 0 : (_formattedData$bookin2 = _formattedData$bookin[0]) === null || _formattedData$bookin2 === void 0 ? void 0 : _formattedData$bookin2.hallCode);
+      });
+      const selectReason = discReasonOptions === null || discReasonOptions === void 0 ? void 0 : discReasonOptions.find(item => {
+        var _formattedData$additi;
+        return (item === null || item === void 0 ? void 0 : item.reasonName) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$additi = formattedData.additionalDetails) === null || _formattedData$additi === void 0 ? void 0 : _formattedData$additi.reason);
+      });
+      setValue("siteId", selectedCommHall || null);
+      setValue("hallCode", selectHallCode || null);
+      setValue("startDate", formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$bookin3 = formattedData.bookingSlotDetails) === null || _formattedData$bookin3 === void 0 ? void 0 : (_formattedData$bookin4 = _formattedData$bookin3[0]) === null || _formattedData$bookin4 === void 0 ? void 0 : _formattedData$bookin4.bookingDate);
+      setValue("endDate", formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$bookin5 = formattedData.bookingSlotDetails.at(-1)) === null || _formattedData$bookin5 === void 0 ? void 0 : _formattedData$bookin5.bookingEndDate);
+      setShowInfo(true);
+      fiterHalls(selectedCommHall);
+      slotsSearch(selectHallCode).then(response => {
+        const slotsData = (response === null || response === void 0 ? void 0 : response.hallSlotAvailabiltityDetails) || [];
+        setSlots(slotsData);
+        setValue("slots", slotsData);
+      });
+      setValue("purpose", selectedPurpose || null);
+      setValue("specialCategory", selectedSpecialCat || null);
+      setValue("purposeDescription", formattedData.purposeDescription || "");
+      setValue("discountAmount", (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$additi2 = formattedData.additionalDetails) === null || _formattedData$additi2 === void 0 ? void 0 : _formattedData$additi2.discountAmount) || "");
+      setValue("reason", selectReason || null);
     }
-  }
-  function popWithoutFocus() {
-    focusLaterElements.length > 0 && focusLaterElements.pop();
-  }
-  function setupScopedFocus(element) {
-    modalElement = element;
-    if (window.addEventListener) {
-      window.addEventListener("blur", handleBlur, false);
-      document.addEventListener("focus", handleFocus, true);
-    } else {
-      window.attachEvent("onBlur", handleBlur);
-      document.attachEvent("onFocus", handleFocus);
+  }, [currentStepData, setValue]);
+  const startDate = watch("startDate");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_HALL_NAME"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
     }
-  }
-  function teardownScopedFocus() {
-    modalElement = null;
-    if (window.addEventListener) {
-      window.removeEventListener("blur", handleBlur);
-      document.removeEventListener("focus", handleFocus);
-    } else {
-      window.detachEvent("onBlur", handleBlur);
-      document.detachEvent("onFocus", handleFocus);
+  }, "*")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "siteId",
+    rules: {
+      required: t("HALL_NAME_REQ")
+    },
+    render: props => {
+      var _CHBLocations$CHB;
+      return /*#__PURE__*/React.createElement(Dropdown, {
+        style: {
+          marginBottom: 0
+        },
+        className: "form-field",
+        select: e => {
+          props.onChange(e);
+          fiterHalls(e);
+          setValue("hallCode", null);
+          setValue("startDate", "");
+          setValue("endDate", "");
+          setSlots([]);
+          setShowInfo(false);
+        },
+        selected: props.value,
+        option: CHBLocations === null || CHBLocations === void 0 ? void 0 : (_CHBLocations$CHB = CHBLocations.CHB) === null || _CHBLocations$CHB === void 0 ? void 0 : _CHBLocations$CHB.CommunityHalls,
+        optionKey: "name"
+      });
     }
-  }
-});
-unwrapExports(focusManager);
-
-var scopeTab_1 = createCommonjsModule(function (module, exports) {
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = scopeTab;
-  var _tabbable2 = _interopRequireDefault(tabbable_1);
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-  function getActiveElement() {
-    var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-    return el.activeElement.shadowRoot ? getActiveElement(el.activeElement.shadowRoot) : el.activeElement;
-  }
-  function scopeTab(node, event) {
-    var tabbable = (0, _tabbable2.default)(node);
-    if (!tabbable.length) {
-      event.preventDefault();
-      return;
+  }), errors.siteId && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
     }
-    var target = void 0;
-    var shiftKey = event.shiftKey;
-    var head = tabbable[0];
-    var tail = tabbable[tabbable.length - 1];
-    var activeElement = getActiveElement();
-    if (node === activeElement) {
-      if (!shiftKey) return;
-      target = tail;
+  }, errors.siteId.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
+    style: {
+      marginTop: "20px"
     }
-    if (tail === activeElement && !shiftKey) {
-      target = head;
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_DATE"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
     }
-    if (head === activeElement && shiftKey) {
-      target = tail;
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "50%"
+    },
+    className: "field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "startDate",
+    rules: {
+      required: t("START_DATE_REQ")
+    },
+    render: props => /*#__PURE__*/React.createElement(TextInput, {
+      style: {
+        marginBottom: 0
+      },
+      type: "date",
+      className: "form-field",
+      value: props.value,
+      min: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split("T")[0],
+      onChange: e => {
+        props.onChange(e.target.value);
+      },
+      onBlur: e => {
+        props.onBlur(e);
+      }
+    })
+  }), errors.startDate && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
     }
-    if (target) {
-      event.preventDefault();
-      target.focus();
-      return;
+  }, errors.startDate.message))), /*#__PURE__*/React.createElement(LabelFieldPair, {
+    style: {
+      marginTop: "20px"
     }
-    var checkSafari = /(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);
-    var isSafariDesktop = checkSafari != null && checkSafari[1] != "Chrome" && /\biPod\b|\biPad\b/g.exec(navigator.userAgent) == null;
-    if (!isSafariDesktop) return;
-    var x = tabbable.indexOf(activeElement);
-    if (x > -1) {
-      x += shiftKey ? -1 : 1;
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_END_DATE"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
     }
-    target = tabbable[x];
-    if (typeof target === "undefined") {
-      event.preventDefault();
-      target = shiftKey ? tail : head;
-      target.focus();
-      return;
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "50%"
+    },
+    className: "field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "endDate",
+    render: props => /*#__PURE__*/React.createElement(TextInput, {
+      style: {
+        marginBottom: 0
+      },
+      type: "date",
+      className: "form-field",
+      value: props.value,
+      min: startDate ? new Date(new Date(startDate).getTime() + 24 * 60 * 60 * 1000).toISOString().split("T")[0] : new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split("T")[0],
+      max: startDate ? new Date(new Date(startDate).getTime() + 6 * 24 * 60 * 60 * 1000).toISOString().split("T")[0] : null,
+      onChange: e => {
+        props.onChange(e.target.value);
+      },
+      onBlur: e => {
+        props.onBlur(e);
+      },
+      disabled: !startDate
+    })
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "20px"
     }
-    event.preventDefault();
-    target.focus();
-  }
-  module.exports = exports["default"];
-});
-unwrapExports(scopeTab_1);
-
-var __DEV__ = process.env.NODE_ENV !== 'production';
-var warning = function () {};
-if (__DEV__) {
-  var printWarning$2 = function printWarning(format, args) {
-    var len = arguments.length;
-    args = new Array(len > 1 ? len - 1 : 0);
-    for (var key = 1; key < len; key++) {
-      args[key - 1] = arguments[key];
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("HALL_CODE"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
     }
-    var argIndex = 0;
-    var message = 'Warning: ' + format.replace(/%s/g, function () {
-      return args[argIndex++];
-    });
-    if (typeof console !== 'undefined') {
-      console.error(message);
-    }
-    try {
-      throw new Error(message);
-    } catch (x) {}
-  };
-  warning = function (condition, format, args) {
-    var len = arguments.length;
-    args = new Array(len > 2 ? len - 2 : 0);
-    for (var key = 2; key < len; key++) {
-      args[key - 2] = arguments[key];
-    }
-    if (format === undefined) {
-      throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
+  }, "*")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "hallCode",
+    rules: {
+      required: t("HALL_CODE_REQ")
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      style: {
+        marginBottom: 0
+      },
+      className: "form-field",
+      select: e => {
+        props.onChange(e);
+        slotsSearch(e);
+        setShowInfo(true);
+      },
+      selected: props.value,
+      option: getHallCodes,
+      optionKey: "HallCode"
+    })
+  }), errors.hallCode && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
     }
-    if (!condition) {
-      printWarning$2.apply(null, [format].concat(args));
+  }, errors.hallCode.message)), (getSlots === null || getSlots === void 0 ? void 0 : getSlots.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "20px",
+      marginBottom: "20px"
     }
-  };
-}
-var warning_1 = warning;
-
-var exenv = createCommonjsModule(function (module) {
-  (function () {
-
-    var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-    var ExecutionEnvironment = {
-      canUseDOM: canUseDOM,
-      canUseWorkers: typeof Worker !== 'undefined',
-      canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
-      canUseViewport: canUseDOM && !!window.screen
-    };
-    if ( module.exports) {
-      module.exports = ExecutionEnvironment;
-    } else {
-      window.ExecutionEnvironment = ExecutionEnvironment;
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("AVAILABLE_SLOTS"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
     }
-  })();
-});
-
-var safeHTMLElement = createCommonjsModule(function (module, exports) {
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.canUseDOM = exports.SafeNodeList = exports.SafeHTMLCollection = undefined;
-  var _exenv2 = _interopRequireDefault(exenv);
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-  var EE = _exenv2.default;
-  var SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {};
-  var SafeHTMLCollection = exports.SafeHTMLCollection = EE.canUseDOM ? window.HTMLCollection : {};
-  var SafeNodeList = exports.SafeNodeList = EE.canUseDOM ? window.NodeList : {};
-  var canUseDOM = exports.canUseDOM = EE.canUseDOM;
-  exports.default = SafeHTMLElement;
-});
-unwrapExports(safeHTMLElement);
-
-var ariaAppHider = createCommonjsModule(function (module, exports) {
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.resetState = resetState;
-  exports.log = log;
-  exports.assertNodeList = assertNodeList;
-  exports.setElement = setElement;
-  exports.validateElement = validateElement;
-  exports.hide = hide;
-  exports.show = show;
-  exports.documentNotReadyOrSSRTesting = documentNotReadyOrSSRTesting;
-  var _warning2 = _interopRequireDefault(warning_1);
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-  var globalElement = null;
-  function resetState() {
-    if (globalElement) {
-      if (globalElement.removeAttribute) {
-        globalElement.removeAttribute("aria-hidden");
-      } else if (globalElement.length != null) {
-        globalElement.forEach(function (element) {
-          return element.removeAttribute("aria-hidden");
-        });
-      } else {
-        document.querySelectorAll(globalElement).forEach(function (element) {
-          return element.removeAttribute("aria-hidden");
-        });
+  }, "*")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "slots",
+    rules: {
+      validate: value => {
+        if (!value || value.length === 0) {
+          return t("PLEASE_SELECT_AT_LEAST_ONE_SLOT");
+        }
+        return true;
       }
-    }
-    globalElement = null;
-  }
-  function log() {
-    if (process.env.NODE_ENV !== "production") {
-      var check = globalElement || {};
-      console.log("ariaAppHider ----------");
-      console.log(check.nodeName, check.className, check.id);
-      console.log("end ariaAppHider ----------");
-    }
-  }
-  function assertNodeList(nodeList, selector) {
-    if (!nodeList || !nodeList.length) {
-      throw new Error("react-modal: No elements were found for selector " + selector + ".");
-    }
-  }
-  function setElement(element) {
-    var useElement = element;
-    if (typeof useElement === "string" && safeHTMLElement.canUseDOM) {
-      var el = document.querySelectorAll(useElement);
-      assertNodeList(el, useElement);
-      useElement = el;
-    }
-    globalElement = useElement || globalElement;
-    return globalElement;
-  }
-  function validateElement(appElement) {
-    var el = appElement || globalElement;
-    if (el) {
-      return Array.isArray(el) || el instanceof HTMLCollection || el instanceof NodeList ? el : [el];
-    } else {
-      (0, _warning2.default)(false, ["react-modal: App element is not defined.", "Please use `Modal.setAppElement(el)` or set `appElement={el}`.", "This is needed so screen readers don't see main content", "when modal is opened. It is not recommended, but you can opt-out", "by setting `ariaHideApp={false}`."].join(" "));
-      return [];
-    }
-  }
-  function hide(appElement) {
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
-    try {
-      for (var _iterator = validateElement(appElement)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var el = _step.value;
-        el.setAttribute("aria-hidden", "true");
+    },
+    render: field => /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+        gap: "16px",
+        marginTop: "20px",
+        width: "50%"
       }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return) {
-          _iterator.return();
+    }, getSlots === null || getSlots === void 0 ? void 0 : getSlots.map((slot, idx) => {
+      var _field$value, _slot$slotStaus;
+      const slotKey = `${slot.hallCode}-${slot.bookingDate}-${slot.fromTime || ""}-${slot.toTime || ""}`;
+      const isChecked = (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.some(s => s.hallCode === slot.hallCode && s.bookingDate === slot.bookingDate && s.fromTime === slot.fromTime && s.toTime === slot.toTime);
+      const isAvailable = ((_slot$slotStaus = slot.slotStaus) === null || _slot$slotStaus === void 0 ? void 0 : _slot$slotStaus.toLowerCase()) === "available";
+      return /*#__PURE__*/React.createElement("label", {
+        key: slotKey,
+        style: {
+          border: "1px solid #ccc",
+          borderRadius: "8px",
+          padding: "12px",
+          backgroundColor: isAvailable ? "#e6ffed" : "#ffe6e6",
+          cursor: isAvailable ? "pointer" : "not-allowed",
+          opacity: isAvailable ? 1 : 0.6,
+          flexDirection: "column",
+          gap: "6px"
         }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        checked: isChecked,
+        disabled: !isAvailable,
+        onChange: e => {
+          if (!isAvailable) return;
+          let updatedSlots = [...(field.value || [])];
+          if (e.target.checked) {
+            updatedSlots.push(slot);
+            const sortedSlots = [...getSlots].sort((a, b) => new Date(a.bookingDate) - new Date(b.bookingDate) || (a.fromTime || "00:00").localeCompare(b.fromTime || "00:00"));
+            const allSelectedKeys = updatedSlots.map(s => `${s.hallCode}-${s.bookingDate}-${s.fromTime}-${s.toTime}`);
+            const firstIndex = sortedSlots.findIndex(s => `${s.hallCode}-${s.bookingDate}-${s.fromTime}-${s.toTime}` === allSelectedKeys[0]);
+            const lastIndex = sortedSlots.findIndex(s => `${s.hallCode}-${s.bookingDate}-${s.fromTime}-${s.toTime}` === allSelectedKeys[allSelectedKeys.length - 1]);
+            const minIndex = Math.min(firstIndex, lastIndex);
+            const maxIndex = Math.max(firstIndex, lastIndex);
+            const continuousSlots = sortedSlots.slice(minIndex, maxIndex + 1).filter(s => {
+              var _s$slotStaus;
+              return ((_s$slotStaus = s.slotStaus) === null || _s$slotStaus === void 0 ? void 0 : _s$slotStaus.toLowerCase()) === "available";
+            });
+            field.onChange(continuousSlots);
+          } else {
+            updatedSlots = updatedSlots.filter(s => !(s.hallCode === slot.hallCode && s.bookingDate === slot.bookingDate && s.fromTime === slot.fromTime && s.toTime === slot.toTime));
+            field.onChange(updatedSlots);
+          }
         }
-      }
-    }
-  }
-  function show(appElement) {
-    var _iteratorNormalCompletion2 = true;
-    var _didIteratorError2 = false;
-    var _iteratorError2 = undefined;
-    try {
-      for (var _iterator2 = validateElement(appElement)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-        var el = _step2.value;
-        el.removeAttribute("aria-hidden");
-      }
-    } catch (err) {
-      _didIteratorError2 = true;
-      _iteratorError2 = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion2 && _iterator2.return) {
-          _iterator2.return();
+      }), /*#__PURE__*/React.createElement("span", {
+        style: {
+          marginLeft: "10px"
         }
-      } finally {
-        if (_didIteratorError2) {
-          throw _iteratorError2;
+      }, slot.bookingDate, " (", slot.hallCode, ") \u2013", " ", /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: slot.slotStaus === "AVAILABLE" ? "green" : "red",
+          fontWeight: "bold"
         }
-      }
+      }, slot.slotStaus ? slot.slotStaus.charAt(0).toUpperCase() + slot.slotStaus.slice(1).toLowerCase() : "")));
+    }))
+  }), errors.slots && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
     }
+  }, errors.slots.message)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: showInfo ? "block" : "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "20px",
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_PURPOSE"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
+    }
+  }, "*")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "purpose",
+    defaultValue: null,
+    rules: {
+      required: t("CHB_PURPOSE_REQUIRED")
+    },
+    render: props => {
+      var _CHBPurpose$CHB;
+      return /*#__PURE__*/React.createElement(Dropdown, {
+        style: {
+          marginBottom: 0
+        },
+        className: "form-field",
+        select: props.onChange,
+        selected: props.value,
+        option: CHBPurpose === null || CHBPurpose === void 0 ? void 0 : (_CHBPurpose$CHB = CHBPurpose.CHB) === null || _CHBPurpose$CHB === void 0 ? void 0 : _CHBPurpose$CHB.Purpose,
+        optionKey: "name"
+      });
+    }
+  }), errors.purpose && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
+    }
+  }, errors.purpose.message)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_SPECIAL_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
+    }
+  }, "*")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "specialCategory",
+    defaultValue: null,
+    rules: {
+      required: t("CHB_SPECIAL_CATEGORY_REQUIRED")
+    },
+    render: props => {
+      var _SpecialCategory$CHB;
+      return /*#__PURE__*/React.createElement(Dropdown, {
+        style: {
+          marginBottom: 0
+        },
+        className: "form-field",
+        select: props.onChange,
+        selected: props.value,
+        option: SpecialCategory === null || SpecialCategory === void 0 ? void 0 : (_SpecialCategory$CHB = SpecialCategory.CHB) === null || _SpecialCategory$CHB === void 0 ? void 0 : _SpecialCategory$CHB.SpecialCategory,
+        optionKey: "name"
+      });
+    }
+  }), errors.specialCategory && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
+    }
+  }, errors.specialCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    className: "card-label-smaller"
+  }, t("CHB_PURPOSE_DESCRIPTION"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
+    }
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: "field",
+    style: {
+      width: "50%"
+    }
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "purposeDescription",
+    defaultValue: "",
+    rules: {
+      required: t("CHB_PURPOSE_DESCRIPTION_REQUIRED"),
+      minLength: {
+        value: 5,
+        message: t("CHB_PURPOSE_DESCRIPTION_REQUIRED_MIN")
+      }
+    },
+    render: props => /*#__PURE__*/React.createElement(TextArea, {
+      style: {
+        marginBottom: 0,
+        marginTop: 0
+      },
+      type: "textarea",
+      value: props.value,
+      onChange: e => {
+        props.onChange(e.target.value);
+      },
+      onBlur: e => {
+        props.onBlur(e);
+      }
+    })
+  }), errors.purposeDescription && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
+    }
+  }, errors.purposeDescription.message))), !isCitizen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "20px",
+      width: "50%"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CHB_DISCOUNT_AMOUNT")}`), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "discountAmount",
+    render: props => {
+      var _errors$name;
+      return /*#__PURE__*/React.createElement(TextInput, {
+        type: "number",
+        style: {
+          marginBottom: 0,
+          width: "100%"
+        },
+        value: props.value,
+        error: errors === null || errors === void 0 ? void 0 : (_errors$name = errors.name) === null || _errors$name === void 0 ? void 0 : _errors$name.message,
+        onChange: e => {
+          props.onChange(e.target.value);
+        },
+        onBlur: e => {
+          props.onBlur(e);
+        },
+        t: t
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_DISCOUNT_REASON"), " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "red"
+    }
+  }, "*")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "reason",
+    defaultValue: null,
+    render: props => {
+      var _CHBReason$CHB2;
+      return /*#__PURE__*/React.createElement(Dropdown, {
+        style: {
+          marginBottom: 0
+        },
+        className: "form-field",
+        select: props.onChange,
+        selected: props.value,
+        option: CHBReason === null || CHBReason === void 0 ? void 0 : (_CHBReason$CHB2 = CHBReason.CHB) === null || _CHBReason$CHB2 === void 0 ? void 0 : _CHBReason$CHB2.DiscountReason,
+        optionKey: "reasonName"
+      });
+    }
+  }))))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: "Next",
+    submit: "submit"
+  }))), (CHBCalcLoading || CHBReasonLoading || CHBLocationLoading || CHBLoading || CHBPurposeLoading || CHBSpecialCategoryLoading || CHBHallCodeLoading || loader) && /*#__PURE__*/React.createElement(Loader, {
+    page: true
+  }));
+};
+
+const NewADSStepFormOne = ({
+  config,
+  onGoNext,
+  onBackClick
+}) => {
+  const dispatch = useDispatch();
+  const {
+    t
+  } = useTranslation();
+  const [showToast, setShowToast] = useState(false);
+  const [error, setError] = useState("");
+  const currentStepData = useSelector(function (state) {
+    return state.chb.CHBApplicationFormReducer.formData;
+  });
+  function goNext(data) {
+    console.log("data aa rea", data);
+    dispatch(UPDATE_CHBApplication_FORM(config.key, data));
+    onGoNext();
   }
-  function documentNotReadyOrSSRTesting() {
-    globalElement = null;
+  function onGoBack(data) {
+    onBackClick(config.key, data);
   }
-});
-unwrapExports(ariaAppHider);
+  const closeToast = () => {
+    setShowToast(false);
+    setError("");
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CHBCitizenSecond, {
+    onGoBack: onGoBack,
+    goNext: goNext,
+    currentStepData: currentStepData,
+    t: t
+  }), showToast && /*#__PURE__*/React.createElement(Toast, {
+    isDleteBtn: true,
+    error: true,
+    label: error,
+    onClose: closeToast
+  }));
+};
 
-var classList = createCommonjsModule(function (module, exports) {
+var tabbable_1 = createCommonjsModule(function (module, exports) {
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.resetState = resetState;
-  exports.log = log;
-  var htmlClassList = {};
-  var docBodyClassList = {};
-  function removeClass(at, cls) {
-    at.classList.remove(cls);
+  exports.default = findTabbableDescendants;
+  var DISPLAY_NONE = "none";
+  var DISPLAY_CONTENTS = "contents";
+  var tabbableNode = /^(input|select|textarea|button|object|iframe)$/;
+  function isNotOverflowing(element, style) {
+    return style.getPropertyValue("overflow") !== "visible" || element.scrollWidth <= 0 && element.scrollHeight <= 0;
   }
-  function resetState() {
-    var htmlElement = document.getElementsByTagName("html")[0];
-    for (var cls in htmlClassList) {
-      removeClass(htmlElement, htmlClassList[cls]);
+  function hidesContents(element) {
+    var zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;
+    if (zeroSize && !element.innerHTML) return true;
+    try {
+      var style = window.getComputedStyle(element);
+      var displayValue = style.getPropertyValue("display");
+      return zeroSize ? displayValue !== DISPLAY_CONTENTS && isNotOverflowing(element, style) : displayValue === DISPLAY_NONE;
+    } catch (exception) {
+      console.warn("Failed to inspect element style");
+      return false;
     }
-    var body = document.body;
-    for (var _cls in docBodyClassList) {
-      removeClass(body, docBodyClassList[_cls]);
+  }
+  function visible(element) {
+    var parentElement = element;
+    var rootNode = element.getRootNode && element.getRootNode();
+    while (parentElement) {
+      if (parentElement === document.body) break;
+      if (rootNode && parentElement === rootNode) parentElement = rootNode.host.parentNode;
+      if (hidesContents(parentElement)) return false;
+      parentElement = parentElement.parentNode;
     }
-    htmlClassList = {};
-    docBodyClassList = {};
+    return true;
   }
-  function log() {
-    if (process.env.NODE_ENV !== "production") {
-      var classes = document.getElementsByTagName("html")[0].className;
-      var buffer = "Show tracked classes:\n\n";
-      buffer += "<html /> (" + classes + "):\n  ";
-      for (var x in htmlClassList) {
-        buffer += "  " + x + " " + htmlClassList[x] + "\n  ";
-      }
-      classes = document.body.className;
-      buffer += "\n\ndoc.body (" + classes + "):\n  ";
-      for (var _x in docBodyClassList) {
-        buffer += "  " + _x + " " + docBodyClassList[_x] + "\n  ";
-      }
-      buffer += "\n";
-      console.log(buffer);
-    }
-  }
-  var incrementReference = function incrementReference(poll, className) {
-    if (!poll[className]) {
-      poll[className] = 0;
-    }
-    poll[className] += 1;
-    return className;
-  };
-  var decrementReference = function decrementReference(poll, className) {
-    if (poll[className]) {
-      poll[className] -= 1;
-    }
-    return className;
-  };
-  var trackClass = function trackClass(classListRef, poll, classes) {
-    classes.forEach(function (className) {
-      incrementReference(poll, className);
-      classListRef.add(className);
-    });
-  };
-  var untrackClass = function untrackClass(classListRef, poll, classes) {
-    classes.forEach(function (className) {
-      decrementReference(poll, className);
-      poll[className] === 0 && classListRef.remove(className);
-    });
-  };
-  var add = exports.add = function add(element, classString) {
-    return trackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" "));
-  };
-  var remove = exports.remove = function remove(element, classString) {
-    return untrackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" "));
-  };
-});
-unwrapExports(classList);
-
-var portalOpenInstances_1 = createCommonjsModule(function (module, exports) {
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.log = log;
-  exports.resetState = resetState;
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
+  function focusable(element, isTabIndexNotNaN) {
+    var nodeName = element.nodeName.toLowerCase();
+    var res = tabbableNode.test(nodeName) && !element.disabled || (nodeName === "a" ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
+    return res && visible(element);
   }
-  var PortalOpenInstances = function PortalOpenInstances() {
-    var _this = this;
-    _classCallCheck(this, PortalOpenInstances);
-    this.register = function (openInstance) {
-      if (_this.openInstances.indexOf(openInstance) !== -1) {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn("React-Modal: Cannot register modal instance that's already open");
-        }
-        return;
-      }
-      _this.openInstances.push(openInstance);
-      _this.emit("register");
-    };
-    this.deregister = function (openInstance) {
-      var index = _this.openInstances.indexOf(openInstance);
-      if (index === -1) {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn("React-Modal: Unable to deregister " + openInstance + " as " + "it was never registered");
-        }
-        return;
-      }
-      _this.openInstances.splice(index, 1);
-      _this.emit("deregister");
-    };
-    this.subscribe = function (callback) {
-      _this.subscribers.push(callback);
-    };
-    this.emit = function (eventType) {
-      _this.subscribers.forEach(function (subscriber) {
-        return subscriber(eventType, _this.openInstances.slice());
-      });
-    };
-    this.openInstances = [];
-    this.subscribers = [];
-  };
-  var portalOpenInstances = new PortalOpenInstances();
-  function log() {
-    console.log("portalOpenInstances ----------");
-    console.log(portalOpenInstances.openInstances.length);
-    portalOpenInstances.openInstances.forEach(function (p) {
-      return console.log(p);
-    });
-    console.log("end portalOpenInstances ----------");
+  function tabbable(element) {
+    var tabIndex = element.getAttribute("tabindex");
+    if (tabIndex === null) tabIndex = undefined;
+    var isTabIndexNaN = isNaN(tabIndex);
+    return (isTabIndexNaN || tabIndex >= 0) && focusable(element, !isTabIndexNaN);
   }
-  function resetState() {
-    portalOpenInstances = new PortalOpenInstances();
+  function findTabbableDescendants(element) {
+    var descendants = [].slice.call(element.querySelectorAll("*"), 0).reduce(function (finished, el) {
+      return finished.concat(!el.shadowRoot ? [el] : findTabbableDescendants(el.shadowRoot));
+    }, []);
+    return descendants.filter(tabbable);
   }
-  exports.default = portalOpenInstances;
+  module.exports = exports["default"];
 });
-unwrapExports(portalOpenInstances_1);
+unwrapExports(tabbable_1);
 
-var bodyTrap_1 = createCommonjsModule(function (module, exports) {
+var focusManager = createCommonjsModule(function (module, exports) {
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
   exports.resetState = resetState;
   exports.log = log;
-  var _portalOpenInstances2 = _interopRequireDefault(portalOpenInstances_1);
+  exports.handleBlur = handleBlur;
+  exports.handleFocus = handleFocus;
+  exports.markForFocusLater = markForFocusLater;
+  exports.returnFocus = returnFocus;
+  exports.popWithoutFocus = popWithoutFocus;
+  exports.setupScopedFocus = setupScopedFocus;
+  exports.teardownScopedFocus = teardownScopedFocus;
+  var _tabbable2 = _interopRequireDefault(tabbable_1);
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
       default: obj
     };
   }
-  var before = void 0,
-    after = void 0,
-    instances = [];
+  var focusLaterElements = [];
+  var modalElement = null;
+  var needToFocus = false;
   function resetState() {
-    var _arr = [before, after];
-    for (var _i = 0; _i < _arr.length; _i++) {
-      var item = _arr[_i];
-      if (!item) continue;
-      item.parentNode && item.parentNode.removeChild(item);
-    }
-    before = after = null;
-    instances = [];
+    focusLaterElements = [];
   }
   function log() {
-    console.log("bodyTrap ----------");
-    console.log(instances.length);
-    var _arr2 = [before, after];
-    for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
-      var item = _arr2[_i2];
-      var check = item || {};
-      console.log(check.nodeName, check.className, check.id);
+    if (process.env.NODE_ENV !== "production") {
+      console.log("focusManager ----------");
+      focusLaterElements.forEach(function (f) {
+        var check = f || {};
+        console.log(check.nodeName, check.className, check.id);
+      });
+      console.log("end focusManager ----------");
     }
-    console.log("edn bodyTrap ----------");
   }
-  function focusContent() {
-    if (instances.length === 0) {
-      if (process.env.NODE_ENV !== "production") {
-        console.warn("React-Modal: Open instances > 0 expected");
+  function handleBlur() {
+    needToFocus = true;
+  }
+  function handleFocus() {
+    if (needToFocus) {
+      needToFocus = false;
+      if (!modalElement) {
+        return;
+      }
+      setTimeout(function () {
+        if (modalElement.contains(document.activeElement)) {
+          return;
+        }
+        var el = (0, _tabbable2.default)(modalElement)[0] || modalElement;
+        el.focus();
+      }, 0);
+    }
+  }
+  function markForFocusLater() {
+    focusLaterElements.push(document.activeElement);
+  }
+  function returnFocus() {
+    var preventScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var toFocus = null;
+    try {
+      if (focusLaterElements.length !== 0) {
+        toFocus = focusLaterElements.pop();
+        toFocus.focus({
+          preventScroll: preventScroll
+        });
       }
       return;
+    } catch (e) {
+      console.warn(["You tried to return focus to", toFocus, "but it is not in the DOM anymore"].join(" "));
     }
-    instances[instances.length - 1].focusContent();
   }
-  function bodyTrap(eventType, openInstances) {
-    if (!before && !after) {
-      before = document.createElement("div");
-      before.setAttribute("data-react-modal-body-trap", "");
-      before.style.position = "absolute";
-      before.style.opacity = "0";
-      before.setAttribute("tabindex", "0");
-      before.addEventListener("focus", focusContent);
-      after = before.cloneNode();
-      after.addEventListener("focus", focusContent);
+  function popWithoutFocus() {
+    focusLaterElements.length > 0 && focusLaterElements.pop();
+  }
+  function setupScopedFocus(element) {
+    modalElement = element;
+    if (window.addEventListener) {
+      window.addEventListener("blur", handleBlur, false);
+      document.addEventListener("focus", handleFocus, true);
+    } else {
+      window.attachEvent("onBlur", handleBlur);
+      document.attachEvent("onFocus", handleFocus);
     }
-    instances = openInstances;
-    if (instances.length > 0) {
-      if (document.body.firstChild !== before) {
-        document.body.insertBefore(before, document.body.firstChild);
-      }
-      if (document.body.lastChild !== after) {
-        document.body.appendChild(after);
-      }
+  }
+  function teardownScopedFocus() {
+    modalElement = null;
+    if (window.addEventListener) {
+      window.removeEventListener("blur", handleBlur);
+      document.removeEventListener("focus", handleFocus);
     } else {
-      if (before.parentElement) {
-        before.parentElement.removeChild(before);
-      }
-      if (after.parentElement) {
-        after.parentElement.removeChild(after);
-      }
+      window.detachEvent("onBlur", handleBlur);
+      document.detachEvent("onFocus", handleFocus);
     }
   }
-  _portalOpenInstances2.default.subscribe(bodyTrap);
 });
-unwrapExports(bodyTrap_1);
+unwrapExports(focusManager);
 
-var ModalPortal_1 = createCommonjsModule(function (module, exports) {
+var scopeTab_1 = createCommonjsModule(function (module, exports) {
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  var _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  exports.default = scopeTab;
+  var _tabbable2 = _interopRequireDefault(tabbable_1);
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+  function getActiveElement() {
+    var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+    return el.activeElement.shadowRoot ? getActiveElement(el.activeElement.shadowRoot) : el.activeElement;
+  }
+  function scopeTab(node, event) {
+    var tabbable = (0, _tabbable2.default)(node);
+    if (!tabbable.length) {
+      event.preventDefault();
+      return;
     }
-    return target;
-  };
-  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    var target = void 0;
+    var shiftKey = event.shiftKey;
+    var head = tabbable[0];
+    var tail = tabbable[tabbable.length - 1];
+    var activeElement = getActiveElement();
+    if (node === activeElement) {
+      if (!shiftKey) return;
+      target = tail;
+    }
+    if (tail === activeElement && !shiftKey) {
+      target = head;
+    }
+    if (head === activeElement && shiftKey) {
+      target = tail;
+    }
+    if (target) {
+      event.preventDefault();
+      target.focus();
+      return;
+    }
+    var checkSafari = /(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);
+    var isSafariDesktop = checkSafari != null && checkSafari[1] != "Chrome" && /\biPod\b|\biPad\b/g.exec(navigator.userAgent) == null;
+    if (!isSafariDesktop) return;
+    var x = tabbable.indexOf(activeElement);
+    if (x > -1) {
+      x += shiftKey ? -1 : 1;
+    }
+    target = tabbable[x];
+    if (typeof target === "undefined") {
+      event.preventDefault();
+      target = shiftKey ? tail : head;
+      target.focus();
+      return;
+    }
+    event.preventDefault();
+    target.focus();
+  }
+  module.exports = exports["default"];
+});
+unwrapExports(scopeTab_1);
+
+var __DEV__ = process.env.NODE_ENV !== 'production';
+var warning = function () {};
+if (__DEV__) {
+  var printWarning$2 = function printWarning(format, args) {
+    var len = arguments.length;
+    args = new Array(len > 1 ? len - 1 : 0);
+    for (var key = 1; key < len; key++) {
+      args[key - 1] = arguments[key];
+    }
+    var argIndex = 0;
+    var message = 'Warning: ' + format.replace(/%s/g, function () {
+      return args[argIndex++];
+    });
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      throw new Error(message);
+    } catch (x) {}
   };
-  var _createClass = function () {
-    function defineProperties(target, props) {
-      for (var i = 0; i < props.length; i++) {
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-      }
+  warning = function (condition, format, args) {
+    var len = arguments.length;
+    args = new Array(len > 2 ? len - 2 : 0);
+    for (var key = 2; key < len; key++) {
+      args[key - 2] = arguments[key];
     }
-    return function (Constructor, protoProps, staticProps) {
-      if (protoProps) defineProperties(Constructor.prototype, protoProps);
-      if (staticProps) defineProperties(Constructor, staticProps);
-      return Constructor;
+    if (format === undefined) {
+      throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
+    }
+    if (!condition) {
+      printWarning$2.apply(null, [format].concat(args));
+    }
+  };
+}
+var warning_1 = warning;
+
+var exenv = createCommonjsModule(function (module) {
+  (function () {
+
+    var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+    var ExecutionEnvironment = {
+      canUseDOM: canUseDOM,
+      canUseWorkers: typeof Worker !== 'undefined',
+      canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
+      canUseViewport: canUseDOM && !!window.screen
     };
-  }();
-  var _propTypes2 = _interopRequireDefault(propTypes);
-  var focusManager$1 = _interopRequireWildcard(focusManager);
-  var _scopeTab2 = _interopRequireDefault(scopeTab_1);
-  var ariaAppHider$1 = _interopRequireWildcard(ariaAppHider);
-  var classList$1 = _interopRequireWildcard(classList);
-  var _safeHTMLElement2 = _interopRequireDefault(safeHTMLElement);
-  var _portalOpenInstances2 = _interopRequireDefault(portalOpenInstances_1);
-  function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-      return obj;
+    if ( module.exports) {
+      module.exports = ExecutionEnvironment;
     } else {
-      var newObj = {};
-      if (obj != null) {
-        for (var key in obj) {
-          if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
-        }
-      }
-      newObj.default = obj;
-      return newObj;
+      window.ExecutionEnvironment = ExecutionEnvironment;
     }
+  })();
+});
+
+var safeHTMLElement = createCommonjsModule(function (module, exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.canUseDOM = exports.SafeNodeList = exports.SafeHTMLCollection = undefined;
+  var _exenv2 = _interopRequireDefault(exenv);
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
   }
+  var EE = _exenv2.default;
+  var SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {};
+  var SafeHTMLCollection = exports.SafeHTMLCollection = EE.canUseDOM ? window.HTMLCollection : {};
+  var SafeNodeList = exports.SafeNodeList = EE.canUseDOM ? window.NodeList : {};
+  var canUseDOM = exports.canUseDOM = EE.canUseDOM;
+  exports.default = SafeHTMLElement;
+});
+unwrapExports(safeHTMLElement);
+
+var ariaAppHider = createCommonjsModule(function (module, exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.resetState = resetState;
+  exports.log = log;
+  exports.assertNodeList = assertNodeList;
+  exports.setElement = setElement;
+  exports.validateElement = validateElement;
+  exports.hide = hide;
+  exports.show = show;
+  exports.documentNotReadyOrSSRTesting = documentNotReadyOrSSRTesting;
+  var _warning2 = _interopRequireDefault(warning_1);
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
       default: obj
     };
   }
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
+  var globalElement = null;
+  function resetState() {
+    if (globalElement) {
+      if (globalElement.removeAttribute) {
+        globalElement.removeAttribute("aria-hidden");
+      } else if (globalElement.length != null) {
+        globalElement.forEach(function (element) {
+          return element.removeAttribute("aria-hidden");
+        });
+      } else {
+        document.querySelectorAll(globalElement).forEach(function (element) {
+          return element.removeAttribute("aria-hidden");
+        });
+      }
     }
+    globalElement = null;
   }
-  function _possibleConstructorReturn(self, call) {
-    if (!self) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  function log() {
+    if (process.env.NODE_ENV !== "production") {
+      var check = globalElement || {};
+      console.log("ariaAppHider ----------");
+      console.log(check.nodeName, check.className, check.id);
+      console.log("end ariaAppHider ----------");
     }
-    return call && (typeof call === "object" || typeof call === "function") ? call : self;
   }
-  function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  function assertNodeList(nodeList, selector) {
+    if (!nodeList || !nodeList.length) {
+      throw new Error("react-modal: No elements were found for selector " + selector + ".");
     }
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
   }
-  var CLASS_NAMES = {
-    overlay: "ReactModal__Overlay",
-    content: "ReactModal__Content"
-  };
-  var isTabKey = function isTabKey(event) {
-    return event.code === "Tab" || event.keyCode === 9;
-  };
-  var isEscKey = function isEscKey(event) {
-    return event.code === "Escape" || event.keyCode === 27;
-  };
-  var ariaHiddenInstances = 0;
-  var ModalPortal = function (_Component) {
-    _inherits(ModalPortal, _Component);
-    function ModalPortal(props) {
-      _classCallCheck(this, ModalPortal);
-      var _this = _possibleConstructorReturn(this, (ModalPortal.__proto__ || Object.getPrototypeOf(ModalPortal)).call(this, props));
-      _this.setOverlayRef = function (overlay) {
-        _this.overlay = overlay;
-        _this.props.overlayRef && _this.props.overlayRef(overlay);
-      };
-      _this.setContentRef = function (content) {
-        _this.content = content;
-        _this.props.contentRef && _this.props.contentRef(content);
-      };
-      _this.afterClose = function () {
-        var _this$props = _this.props,
-          appElement = _this$props.appElement,
-          ariaHideApp = _this$props.ariaHideApp,
-          htmlOpenClassName = _this$props.htmlOpenClassName,
-          bodyOpenClassName = _this$props.bodyOpenClassName,
-          parentSelector = _this$props.parentSelector;
-        var parentDocument = parentSelector && parentSelector().ownerDocument || document;
-        bodyOpenClassName && classList$1.remove(parentDocument.body, bodyOpenClassName);
-        htmlOpenClassName && classList$1.remove(parentDocument.getElementsByTagName("html")[0], htmlOpenClassName);
-        if (ariaHideApp && ariaHiddenInstances > 0) {
-          ariaHiddenInstances -= 1;
-          if (ariaHiddenInstances === 0) {
-            ariaAppHider$1.show(appElement);
-          }
-        }
-        if (_this.props.shouldFocusAfterRender) {
-          if (_this.props.shouldReturnFocusAfterClose) {
-            focusManager$1.returnFocus(_this.props.preventScroll);
-            focusManager$1.teardownScopedFocus();
-          } else {
-            focusManager$1.popWithoutFocus();
-          }
-        }
-        if (_this.props.onAfterClose) {
-          _this.props.onAfterClose();
-        }
-        _portalOpenInstances2.default.deregister(_this);
-      };
-      _this.open = function () {
-        _this.beforeOpen();
-        if (_this.state.afterOpen && _this.state.beforeClose) {
-          clearTimeout(_this.closeTimer);
-          _this.setState({
-            beforeClose: false
-          });
-        } else {
-          if (_this.props.shouldFocusAfterRender) {
-            focusManager$1.setupScopedFocus(_this.node);
-            focusManager$1.markForFocusLater();
-          }
-          _this.setState({
-            isOpen: true
-          }, function () {
-            _this.openAnimationFrame = requestAnimationFrame(function () {
-              _this.setState({
-                afterOpen: true
-              });
-              if (_this.props.isOpen && _this.props.onAfterOpen) {
-                _this.props.onAfterOpen({
-                  overlayEl: _this.overlay,
-                  contentEl: _this.content
-                });
-              }
-            });
-          });
-        }
-      };
-      _this.close = function () {
-        if (_this.props.closeTimeoutMS > 0) {
-          _this.closeWithTimeout();
-        } else {
-          _this.closeWithoutTimeout();
-        }
-      };
-      _this.focusContent = function () {
-        return _this.content && !_this.contentHasFocus() && _this.content.focus({
-          preventScroll: true
-        });
-      };
-      _this.closeWithTimeout = function () {
-        var closesAt = Date.now() + _this.props.closeTimeoutMS;
-        _this.setState({
-          beforeClose: true,
-          closesAt: closesAt
-        }, function () {
-          _this.closeTimer = setTimeout(_this.closeWithoutTimeout, _this.state.closesAt - Date.now());
-        });
-      };
-      _this.closeWithoutTimeout = function () {
-        _this.setState({
-          beforeClose: false,
-          isOpen: false,
-          afterOpen: false,
-          closesAt: null
-        }, _this.afterClose);
-      };
-      _this.handleKeyDown = function (event) {
-        if (isTabKey(event)) {
-          (0, _scopeTab2.default)(_this.content, event);
-        }
-        if (_this.props.shouldCloseOnEsc && isEscKey(event)) {
-          event.stopPropagation();
-          _this.requestClose(event);
-        }
-      };
-      _this.handleOverlayOnClick = function (event) {
-        if (_this.shouldClose === null) {
-          _this.shouldClose = true;
-        }
-        if (_this.shouldClose && _this.props.shouldCloseOnOverlayClick) {
-          if (_this.ownerHandlesClose()) {
-            _this.requestClose(event);
-          } else {
-            _this.focusContent();
-          }
-        }
-        _this.shouldClose = null;
-      };
-      _this.handleContentOnMouseUp = function () {
-        _this.shouldClose = false;
-      };
-      _this.handleOverlayOnMouseDown = function (event) {
-        if (!_this.props.shouldCloseOnOverlayClick && event.target == _this.overlay) {
-          event.preventDefault();
-        }
-      };
-      _this.handleContentOnClick = function () {
-        _this.shouldClose = false;
-      };
-      _this.handleContentOnMouseDown = function () {
-        _this.shouldClose = false;
-      };
-      _this.requestClose = function (event) {
-        return _this.ownerHandlesClose() && _this.props.onRequestClose(event);
-      };
-      _this.ownerHandlesClose = function () {
-        return _this.props.onRequestClose;
-      };
-      _this.shouldBeClosed = function () {
-        return !_this.state.isOpen && !_this.state.beforeClose;
-      };
-      _this.contentHasFocus = function () {
-        return document.activeElement === _this.content || _this.content.contains(document.activeElement);
-      };
-      _this.buildClassName = function (which, additional) {
-        var classNames = (typeof additional === "undefined" ? "undefined" : _typeof(additional)) === "object" ? additional : {
-          base: CLASS_NAMES[which],
-          afterOpen: CLASS_NAMES[which] + "--after-open",
-          beforeClose: CLASS_NAMES[which] + "--before-close"
-        };
-        var className = classNames.base;
-        if (_this.state.afterOpen) {
-          className = className + " " + classNames.afterOpen;
-        }
-        if (_this.state.beforeClose) {
-          className = className + " " + classNames.beforeClose;
-        }
-        return typeof additional === "string" && additional ? className + " " + additional : className;
-      };
-      _this.attributesFromObject = function (prefix, items) {
-        return Object.keys(items).reduce(function (acc, name) {
-          acc[prefix + "-" + name] = items[name];
-          return acc;
-        }, {});
-      };
-      _this.state = {
-        afterOpen: false,
-        beforeClose: false
-      };
-      _this.shouldClose = null;
-      _this.moveFromContentToOverlay = null;
-      return _this;
+  function setElement(element) {
+    var useElement = element;
+    if (typeof useElement === "string" && safeHTMLElement.canUseDOM) {
+      var el = document.querySelectorAll(useElement);
+      assertNodeList(el, useElement);
+      useElement = el;
     }
-    _createClass(ModalPortal, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        if (this.props.isOpen) {
-          this.open();
-        }
+    globalElement = useElement || globalElement;
+    return globalElement;
+  }
+  function validateElement(appElement) {
+    var el = appElement || globalElement;
+    if (el) {
+      return Array.isArray(el) || el instanceof HTMLCollection || el instanceof NodeList ? el : [el];
+    } else {
+      (0, _warning2.default)(false, ["react-modal: App element is not defined.", "Please use `Modal.setAppElement(el)` or set `appElement={el}`.", "This is needed so screen readers don't see main content", "when modal is opened. It is not recommended, but you can opt-out", "by setting `ariaHideApp={false}`."].join(" "));
+      return [];
+    }
+  }
+  function hide(appElement) {
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+    try {
+      for (var _iterator = validateElement(appElement)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var el = _step.value;
+        el.setAttribute("aria-hidden", "true");
       }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps, prevState) {
-        if (process.env.NODE_ENV !== "production") {
-          if (prevProps.bodyOpenClassName !== this.props.bodyOpenClassName) {
-            console.warn('React-Modal: "bodyOpenClassName" prop has been modified. ' + "This may cause unexpected behavior when multiple modals are open.");
-          }
-          if (prevProps.htmlOpenClassName !== this.props.htmlOpenClassName) {
-            console.warn('React-Modal: "htmlOpenClassName" prop has been modified. ' + "This may cause unexpected behavior when multiple modals are open.");
-          }
-        }
-        if (this.props.isOpen && !prevProps.isOpen) {
-          this.open();
-        } else if (!this.props.isOpen && prevProps.isOpen) {
-          this.close();
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return) {
+          _iterator.return();
         }
-        if (this.props.shouldFocusAfterRender && this.state.isOpen && !prevState.isOpen) {
-          this.focusContent();
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
         }
       }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        if (this.state.isOpen) {
-          this.afterClose();
-        }
-        clearTimeout(this.closeTimer);
-        cancelAnimationFrame(this.openAnimationFrame);
+    }
+  }
+  function show(appElement) {
+    var _iteratorNormalCompletion2 = true;
+    var _didIteratorError2 = false;
+    var _iteratorError2 = undefined;
+    try {
+      for (var _iterator2 = validateElement(appElement)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+        var el = _step2.value;
+        el.removeAttribute("aria-hidden");
       }
-    }, {
-      key: "beforeOpen",
-      value: function beforeOpen() {
-        var _props = this.props,
-          appElement = _props.appElement,
-          ariaHideApp = _props.ariaHideApp,
-          htmlOpenClassName = _props.htmlOpenClassName,
-          bodyOpenClassName = _props.bodyOpenClassName,
-          parentSelector = _props.parentSelector;
-        var parentDocument = parentSelector && parentSelector().ownerDocument || document;
-        bodyOpenClassName && classList$1.add(parentDocument.body, bodyOpenClassName);
-        htmlOpenClassName && classList$1.add(parentDocument.getElementsByTagName("html")[0], htmlOpenClassName);
-        if (ariaHideApp) {
-          ariaHiddenInstances += 1;
-          ariaAppHider$1.hide(appElement);
+    } catch (err) {
+      _didIteratorError2 = true;
+      _iteratorError2 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion2 && _iterator2.return) {
+          _iterator2.return();
         }
-        _portalOpenInstances2.default.register(this);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _props2 = this.props,
-          id = _props2.id,
-          className = _props2.className,
-          overlayClassName = _props2.overlayClassName,
-          defaultStyles = _props2.defaultStyles,
-          children = _props2.children;
-        var contentStyles = className ? {} : defaultStyles.content;
-        var overlayStyles = overlayClassName ? {} : defaultStyles.overlay;
-        if (this.shouldBeClosed()) {
-          return null;
+      } finally {
+        if (_didIteratorError2) {
+          throw _iteratorError2;
         }
-        var overlayProps = {
-          ref: this.setOverlayRef,
-          className: this.buildClassName("overlay", overlayClassName),
-          style: _extends({}, overlayStyles, this.props.style.overlay),
-          onClick: this.handleOverlayOnClick,
-          onMouseDown: this.handleOverlayOnMouseDown
-        };
-        var contentProps = _extends({
-          id: id,
-          ref: this.setContentRef,
-          style: _extends({}, contentStyles, this.props.style.content),
-          className: this.buildClassName("content", className),
-          tabIndex: "-1",
-          onKeyDown: this.handleKeyDown,
-          onMouseDown: this.handleContentOnMouseDown,
-          onMouseUp: this.handleContentOnMouseUp,
-          onClick: this.handleContentOnClick,
-          role: this.props.role,
-          "aria-label": this.props.contentLabel
-        }, this.attributesFromObject("aria", _extends({
-          modal: true
-        }, this.props.aria)), this.attributesFromObject("data", this.props.data || {}), {
-          "data-testid": this.props.testId
-        });
-        var contentElement = this.props.contentElement(contentProps, children);
-        return this.props.overlayElement(overlayProps, contentElement);
       }
-    }]);
-    return ModalPortal;
-  }(React.Component);
-  ModalPortal.defaultProps = {
-    style: {
-      overlay: {},
-      content: {}
-    },
-    defaultStyles: {}
-  };
-  ModalPortal.propTypes = {
-    isOpen: _propTypes2.default.bool.isRequired,
-    defaultStyles: _propTypes2.default.shape({
-      content: _propTypes2.default.object,
-      overlay: _propTypes2.default.object
-    }),
-    style: _propTypes2.default.shape({
-      content: _propTypes2.default.object,
-      overlay: _propTypes2.default.object
-    }),
-    className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-    overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-    parentSelector: _propTypes2.default.func,
-    bodyOpenClassName: _propTypes2.default.string,
-    htmlOpenClassName: _propTypes2.default.string,
-    ariaHideApp: _propTypes2.default.bool,
-    appElement: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_safeHTMLElement2.default), _propTypes2.default.instanceOf(safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]),
-    onAfterOpen: _propTypes2.default.func,
-    onAfterClose: _propTypes2.default.func,
-    onRequestClose: _propTypes2.default.func,
-    closeTimeoutMS: _propTypes2.default.number,
-    shouldFocusAfterRender: _propTypes2.default.bool,
-    shouldCloseOnOverlayClick: _propTypes2.default.bool,
-    shouldReturnFocusAfterClose: _propTypes2.default.bool,
-    preventScroll: _propTypes2.default.bool,
-    role: _propTypes2.default.string,
-    contentLabel: _propTypes2.default.string,
-    aria: _propTypes2.default.object,
-    data: _propTypes2.default.object,
-    children: _propTypes2.default.node,
-    shouldCloseOnEsc: _propTypes2.default.bool,
-    overlayRef: _propTypes2.default.func,
-    contentRef: _propTypes2.default.func,
-    id: _propTypes2.default.string,
-    overlayElement: _propTypes2.default.func,
-    contentElement: _propTypes2.default.func,
-    testId: _propTypes2.default.string
-  };
-  exports.default = ModalPortal;
-  module.exports = exports["default"];
-});
-unwrapExports(ModalPortal_1);
-
-function componentWillMount() {
-  var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
-  if (state !== null && state !== undefined) {
-    this.setState(state);
-  }
-}
-function componentWillReceiveProps(nextProps) {
-  function updater(prevState) {
-    var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
-    return state !== null && state !== undefined ? state : null;
-  }
-  this.setState(updater.bind(this));
-}
-function componentWillUpdate(nextProps, nextState) {
-  try {
-    var prevProps = this.props;
-    var prevState = this.state;
-    this.props = nextProps;
-    this.state = nextState;
-    this.__reactInternalSnapshotFlag = true;
-    this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(prevProps, prevState);
-  } finally {
-    this.props = prevProps;
-    this.state = prevState;
-  }
-}
-componentWillMount.__suppressDeprecationWarning = true;
-componentWillReceiveProps.__suppressDeprecationWarning = true;
-componentWillUpdate.__suppressDeprecationWarning = true;
-function polyfill(Component) {
-  var prototype = Component.prototype;
-  if (!prototype || !prototype.isReactComponent) {
-    throw new Error('Can only polyfill class components');
-  }
-  if (typeof Component.getDerivedStateFromProps !== 'function' && typeof prototype.getSnapshotBeforeUpdate !== 'function') {
-    return Component;
-  }
-  var foundWillMountName = null;
-  var foundWillReceivePropsName = null;
-  var foundWillUpdateName = null;
-  if (typeof prototype.componentWillMount === 'function') {
-    foundWillMountName = 'componentWillMount';
-  } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
-    foundWillMountName = 'UNSAFE_componentWillMount';
-  }
-  if (typeof prototype.componentWillReceiveProps === 'function') {
-    foundWillReceivePropsName = 'componentWillReceiveProps';
-  } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
-    foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
-  }
-  if (typeof prototype.componentWillUpdate === 'function') {
-    foundWillUpdateName = 'componentWillUpdate';
-  } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
-    foundWillUpdateName = 'UNSAFE_componentWillUpdate';
-  }
-  if (foundWillMountName !== null || foundWillReceivePropsName !== null || foundWillUpdateName !== null) {
-    var componentName = Component.displayName || Component.name;
-    var newApiName = typeof Component.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' : 'getSnapshotBeforeUpdate()';
-    throw Error('Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' + componentName + ' uses ' + newApiName + ' but also contains the following legacy lifecycles:' + (foundWillMountName !== null ? '\n  ' + foundWillMountName : '') + (foundWillReceivePropsName !== null ? '\n  ' + foundWillReceivePropsName : '') + (foundWillUpdateName !== null ? '\n  ' + foundWillUpdateName : '') + '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' + 'https://fb.me/react-async-component-lifecycle-hooks');
-  }
-  if (typeof Component.getDerivedStateFromProps === 'function') {
-    prototype.componentWillMount = componentWillMount;
-    prototype.componentWillReceiveProps = componentWillReceiveProps;
-  }
-  if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
-    if (typeof prototype.componentDidUpdate !== 'function') {
-      throw new Error('Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype');
     }
-    prototype.componentWillUpdate = componentWillUpdate;
-    var componentDidUpdate = prototype.componentDidUpdate;
-    prototype.componentDidUpdate = function componentDidUpdatePolyfill(prevProps, prevState, maybeSnapshot) {
-      var snapshot = this.__reactInternalSnapshotFlag ? this.__reactInternalSnapshot : maybeSnapshot;
-      componentDidUpdate.call(this, prevProps, prevState, snapshot);
-    };
   }
-  return Component;
-}
-
-var reactLifecyclesCompat_es = {
-  __proto__: null,
-  polyfill: polyfill
-};
+  function documentNotReadyOrSSRTesting() {
+    globalElement = null;
+  }
+});
+unwrapExports(ariaAppHider);
 
-var Modal_1 = createCommonjsModule(function (module, exports) {
+var classList = createCommonjsModule(function (module, exports) {
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.bodyOpenClassName = exports.portalClassName = undefined;
-  var _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  exports.resetState = resetState;
+  exports.log = log;
+  var htmlClassList = {};
+  var docBodyClassList = {};
+  function removeClass(at, cls) {
+    at.classList.remove(cls);
+  }
+  function resetState() {
+    var htmlElement = document.getElementsByTagName("html")[0];
+    for (var cls in htmlClassList) {
+      removeClass(htmlElement, htmlClassList[cls]);
     }
-    return target;
-  };
-  var _createClass = function () {
-    function defineProperties(target, props) {
-      for (var i = 0; i < props.length; i++) {
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-      }
+    var body = document.body;
+    for (var _cls in docBodyClassList) {
+      removeClass(body, docBodyClassList[_cls]);
     }
-    return function (Constructor, protoProps, staticProps) {
-      if (protoProps) defineProperties(Constructor.prototype, protoProps);
-      if (staticProps) defineProperties(Constructor, staticProps);
-      return Constructor;
-    };
-  }();
-  var _react2 = _interopRequireDefault(React);
-  var _reactDom2 = _interopRequireDefault(reactDom);
-  var _propTypes2 = _interopRequireDefault(propTypes);
-  var _ModalPortal2 = _interopRequireDefault(ModalPortal_1);
-  var ariaAppHider$1 = _interopRequireWildcard(ariaAppHider);
-  var _safeHTMLElement2 = _interopRequireDefault(safeHTMLElement);
-  function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-      return obj;
-    } else {
-      var newObj = {};
-      if (obj != null) {
-        for (var key in obj) {
-          if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
-        }
+    htmlClassList = {};
+    docBodyClassList = {};
+  }
+  function log() {
+    if (process.env.NODE_ENV !== "production") {
+      var classes = document.getElementsByTagName("html")[0].className;
+      var buffer = "Show tracked classes:\n\n";
+      buffer += "<html /> (" + classes + "):\n  ";
+      for (var x in htmlClassList) {
+        buffer += "  " + x + " " + htmlClassList[x] + "\n  ";
       }
-      newObj.default = obj;
-      return newObj;
+      classes = document.body.className;
+      buffer += "\n\ndoc.body (" + classes + "):\n  ";
+      for (var _x in docBodyClassList) {
+        buffer += "  " + _x + " " + docBodyClassList[_x] + "\n  ";
+      }
+      buffer += "\n";
+      console.log(buffer);
     }
   }
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
+  var incrementReference = function incrementReference(poll, className) {
+    if (!poll[className]) {
+      poll[className] = 0;
+    }
+    poll[className] += 1;
+    return className;
+  };
+  var decrementReference = function decrementReference(poll, className) {
+    if (poll[className]) {
+      poll[className] -= 1;
+    }
+    return className;
+  };
+  var trackClass = function trackClass(classListRef, poll, classes) {
+    classes.forEach(function (className) {
+      incrementReference(poll, className);
+      classListRef.add(className);
+    });
+  };
+  var untrackClass = function untrackClass(classListRef, poll, classes) {
+    classes.forEach(function (className) {
+      decrementReference(poll, className);
+      poll[className] === 0 && classListRef.remove(className);
+    });
+  };
+  var add = exports.add = function add(element, classString) {
+    return trackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" "));
+  };
+  var remove = exports.remove = function remove(element, classString) {
+    return untrackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" "));
+  };
+});
+unwrapExports(classList);
+
+var portalOpenInstances_1 = createCommonjsModule(function (module, exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.log = log;
+  exports.resetState = resetState;
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+  var PortalOpenInstances = function PortalOpenInstances() {
+    var _this = this;
+    _classCallCheck(this, PortalOpenInstances);
+    this.register = function (openInstance) {
+      if (_this.openInstances.indexOf(openInstance) !== -1) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn("React-Modal: Cannot register modal instance that's already open");
+        }
+        return;
+      }
+      _this.openInstances.push(openInstance);
+      _this.emit("register");
+    };
+    this.deregister = function (openInstance) {
+      var index = _this.openInstances.indexOf(openInstance);
+      if (index === -1) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn("React-Modal: Unable to deregister " + openInstance + " as " + "it was never registered");
+        }
+        return;
+      }
+      _this.openInstances.splice(index, 1);
+      _this.emit("deregister");
+    };
+    this.subscribe = function (callback) {
+      _this.subscribers.push(callback);
+    };
+    this.emit = function (eventType) {
+      _this.subscribers.forEach(function (subscriber) {
+        return subscriber(eventType, _this.openInstances.slice());
+      });
+    };
+    this.openInstances = [];
+    this.subscribers = [];
+  };
+  var portalOpenInstances = new PortalOpenInstances();
+  function log() {
+    console.log("portalOpenInstances ----------");
+    console.log(portalOpenInstances.openInstances.length);
+    portalOpenInstances.openInstances.forEach(function (p) {
+      return console.log(p);
+    });
+    console.log("end portalOpenInstances ----------");
+  }
+  function resetState() {
+    portalOpenInstances = new PortalOpenInstances();
+  }
+  exports.default = portalOpenInstances;
+});
+unwrapExports(portalOpenInstances_1);
+
+var bodyTrap_1 = createCommonjsModule(function (module, exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.resetState = resetState;
+  exports.log = log;
+  var _portalOpenInstances2 = _interopRequireDefault(portalOpenInstances_1);
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+  var before = void 0,
+    after = void 0,
+    instances = [];
+  function resetState() {
+    var _arr = [before, after];
+    for (var _i = 0; _i < _arr.length; _i++) {
+      var item = _arr[_i];
+      if (!item) continue;
+      item.parentNode && item.parentNode.removeChild(item);
+    }
+    before = after = null;
+    instances = [];
+  }
+  function log() {
+    console.log("bodyTrap ----------");
+    console.log(instances.length);
+    var _arr2 = [before, after];
+    for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
+      var item = _arr2[_i2];
+      var check = item || {};
+      console.log(check.nodeName, check.className, check.id);
+    }
+    console.log("edn bodyTrap ----------");
+  }
+  function focusContent() {
+    if (instances.length === 0) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("React-Modal: Open instances > 0 expected");
+      }
+      return;
+    }
+    instances[instances.length - 1].focusContent();
+  }
+  function bodyTrap(eventType, openInstances) {
+    if (!before && !after) {
+      before = document.createElement("div");
+      before.setAttribute("data-react-modal-body-trap", "");
+      before.style.position = "absolute";
+      before.style.opacity = "0";
+      before.setAttribute("tabindex", "0");
+      before.addEventListener("focus", focusContent);
+      after = before.cloneNode();
+      after.addEventListener("focus", focusContent);
+    }
+    instances = openInstances;
+    if (instances.length > 0) {
+      if (document.body.firstChild !== before) {
+        document.body.insertBefore(before, document.body.firstChild);
+      }
+      if (document.body.lastChild !== after) {
+        document.body.appendChild(after);
+      }
+    } else {
+      if (before.parentElement) {
+        before.parentElement.removeChild(before);
+      }
+      if (after.parentElement) {
+        after.parentElement.removeChild(after);
+      }
+    }
+  }
+  _portalOpenInstances2.default.subscribe(bodyTrap);
+});
+unwrapExports(bodyTrap_1);
+
+var ModalPortal_1 = createCommonjsModule(function (module, exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  };
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+  var _propTypes2 = _interopRequireDefault(propTypes);
+  var focusManager$1 = _interopRequireWildcard(focusManager);
+  var _scopeTab2 = _interopRequireDefault(scopeTab_1);
+  var ariaAppHider$1 = _interopRequireWildcard(ariaAppHider);
+  var classList$1 = _interopRequireWildcard(classList);
+  var _safeHTMLElement2 = _interopRequireDefault(safeHTMLElement);
+  var _portalOpenInstances2 = _interopRequireDefault(portalOpenInstances_1);
+  function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+      return obj;
+    } else {
+      var newObj = {};
+      if (obj != null) {
+        for (var key in obj) {
+          if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
+        }
+      }
+      newObj.default = obj;
+      return newObj;
+    }
+  }
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
       default: obj
     };
   }
@@ -46492,1168 +46649,952 @@ var Modal_1 = createCommonjsModule(function (module, exports) {
     });
     if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
   }
-  var portalClassName = exports.portalClassName = "ReactModalPortal";
-  var bodyOpenClassName = exports.bodyOpenClassName = "ReactModal__Body--open";
-  var isReact16 = safeHTMLElement.canUseDOM && _reactDom2.default.createPortal !== undefined;
-  var createHTMLElement = function createHTMLElement(name) {
-    return document.createElement(name);
+  var CLASS_NAMES = {
+    overlay: "ReactModal__Overlay",
+    content: "ReactModal__Content"
   };
-  var getCreatePortal = function getCreatePortal() {
-    return isReact16 ? _reactDom2.default.createPortal : _reactDom2.default.unstable_renderSubtreeIntoContainer;
+  var isTabKey = function isTabKey(event) {
+    return event.code === "Tab" || event.keyCode === 9;
   };
-  function getParentElement(parentSelector) {
-    return parentSelector();
-  }
-  var Modal = function (_Component) {
-    _inherits(Modal, _Component);
-    function Modal() {
-      var _ref;
-      var _temp, _this, _ret;
-      _classCallCheck(this, Modal);
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args))), _this), _this.removePortal = function () {
-        !isReact16 && _reactDom2.default.unmountComponentAtNode(_this.node);
-        var parent = getParentElement(_this.props.parentSelector);
-        if (parent && parent.contains(_this.node)) {
-          parent.removeChild(_this.node);
+  var isEscKey = function isEscKey(event) {
+    return event.code === "Escape" || event.keyCode === 27;
+  };
+  var ariaHiddenInstances = 0;
+  var ModalPortal = function (_Component) {
+    _inherits(ModalPortal, _Component);
+    function ModalPortal(props) {
+      _classCallCheck(this, ModalPortal);
+      var _this = _possibleConstructorReturn(this, (ModalPortal.__proto__ || Object.getPrototypeOf(ModalPortal)).call(this, props));
+      _this.setOverlayRef = function (overlay) {
+        _this.overlay = overlay;
+        _this.props.overlayRef && _this.props.overlayRef(overlay);
+      };
+      _this.setContentRef = function (content) {
+        _this.content = content;
+        _this.props.contentRef && _this.props.contentRef(content);
+      };
+      _this.afterClose = function () {
+        var _this$props = _this.props,
+          appElement = _this$props.appElement,
+          ariaHideApp = _this$props.ariaHideApp,
+          htmlOpenClassName = _this$props.htmlOpenClassName,
+          bodyOpenClassName = _this$props.bodyOpenClassName,
+          parentSelector = _this$props.parentSelector;
+        var parentDocument = parentSelector && parentSelector().ownerDocument || document;
+        bodyOpenClassName && classList$1.remove(parentDocument.body, bodyOpenClassName);
+        htmlOpenClassName && classList$1.remove(parentDocument.getElementsByTagName("html")[0], htmlOpenClassName);
+        if (ariaHideApp && ariaHiddenInstances > 0) {
+          ariaHiddenInstances -= 1;
+          if (ariaHiddenInstances === 0) {
+            ariaAppHider$1.show(appElement);
+          }
+        }
+        if (_this.props.shouldFocusAfterRender) {
+          if (_this.props.shouldReturnFocusAfterClose) {
+            focusManager$1.returnFocus(_this.props.preventScroll);
+            focusManager$1.teardownScopedFocus();
+          } else {
+            focusManager$1.popWithoutFocus();
+          }
+        }
+        if (_this.props.onAfterClose) {
+          _this.props.onAfterClose();
+        }
+        _portalOpenInstances2.default.deregister(_this);
+      };
+      _this.open = function () {
+        _this.beforeOpen();
+        if (_this.state.afterOpen && _this.state.beforeClose) {
+          clearTimeout(_this.closeTimer);
+          _this.setState({
+            beforeClose: false
+          });
         } else {
-          console.warn('React-Modal: "parentSelector" prop did not returned any DOM ' + "element. Make sure that the parent element is unmounted to " + "avoid any memory leaks.");
+          if (_this.props.shouldFocusAfterRender) {
+            focusManager$1.setupScopedFocus(_this.node);
+            focusManager$1.markForFocusLater();
+          }
+          _this.setState({
+            isOpen: true
+          }, function () {
+            _this.openAnimationFrame = requestAnimationFrame(function () {
+              _this.setState({
+                afterOpen: true
+              });
+              if (_this.props.isOpen && _this.props.onAfterOpen) {
+                _this.props.onAfterOpen({
+                  overlayEl: _this.overlay,
+                  contentEl: _this.content
+                });
+              }
+            });
+          });
         }
-      }, _this.portalRef = function (ref) {
-        _this.portal = ref;
-      }, _this.renderPortal = function (props) {
-        var createPortal = getCreatePortal();
-        var portal = createPortal(_this, _react2.default.createElement(_ModalPortal2.default, _extends({
-          defaultStyles: Modal.defaultStyles
-        }, props)), _this.node);
-        _this.portalRef(portal);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
+      };
+      _this.close = function () {
+        if (_this.props.closeTimeoutMS > 0) {
+          _this.closeWithTimeout();
+        } else {
+          _this.closeWithoutTimeout();
+        }
+      };
+      _this.focusContent = function () {
+        return _this.content && !_this.contentHasFocus() && _this.content.focus({
+          preventScroll: true
+        });
+      };
+      _this.closeWithTimeout = function () {
+        var closesAt = Date.now() + _this.props.closeTimeoutMS;
+        _this.setState({
+          beforeClose: true,
+          closesAt: closesAt
+        }, function () {
+          _this.closeTimer = setTimeout(_this.closeWithoutTimeout, _this.state.closesAt - Date.now());
+        });
+      };
+      _this.closeWithoutTimeout = function () {
+        _this.setState({
+          beforeClose: false,
+          isOpen: false,
+          afterOpen: false,
+          closesAt: null
+        }, _this.afterClose);
+      };
+      _this.handleKeyDown = function (event) {
+        if (isTabKey(event)) {
+          (0, _scopeTab2.default)(_this.content, event);
+        }
+        if (_this.props.shouldCloseOnEsc && isEscKey(event)) {
+          event.stopPropagation();
+          _this.requestClose(event);
+        }
+      };
+      _this.handleOverlayOnClick = function (event) {
+        if (_this.shouldClose === null) {
+          _this.shouldClose = true;
+        }
+        if (_this.shouldClose && _this.props.shouldCloseOnOverlayClick) {
+          if (_this.ownerHandlesClose()) {
+            _this.requestClose(event);
+          } else {
+            _this.focusContent();
+          }
+        }
+        _this.shouldClose = null;
+      };
+      _this.handleContentOnMouseUp = function () {
+        _this.shouldClose = false;
+      };
+      _this.handleOverlayOnMouseDown = function (event) {
+        if (!_this.props.shouldCloseOnOverlayClick && event.target == _this.overlay) {
+          event.preventDefault();
+        }
+      };
+      _this.handleContentOnClick = function () {
+        _this.shouldClose = false;
+      };
+      _this.handleContentOnMouseDown = function () {
+        _this.shouldClose = false;
+      };
+      _this.requestClose = function (event) {
+        return _this.ownerHandlesClose() && _this.props.onRequestClose(event);
+      };
+      _this.ownerHandlesClose = function () {
+        return _this.props.onRequestClose;
+      };
+      _this.shouldBeClosed = function () {
+        return !_this.state.isOpen && !_this.state.beforeClose;
+      };
+      _this.contentHasFocus = function () {
+        return document.activeElement === _this.content || _this.content.contains(document.activeElement);
+      };
+      _this.buildClassName = function (which, additional) {
+        var classNames = (typeof additional === "undefined" ? "undefined" : _typeof(additional)) === "object" ? additional : {
+          base: CLASS_NAMES[which],
+          afterOpen: CLASS_NAMES[which] + "--after-open",
+          beforeClose: CLASS_NAMES[which] + "--before-close"
+        };
+        var className = classNames.base;
+        if (_this.state.afterOpen) {
+          className = className + " " + classNames.afterOpen;
+        }
+        if (_this.state.beforeClose) {
+          className = className + " " + classNames.beforeClose;
+        }
+        return typeof additional === "string" && additional ? className + " " + additional : className;
+      };
+      _this.attributesFromObject = function (prefix, items) {
+        return Object.keys(items).reduce(function (acc, name) {
+          acc[prefix + "-" + name] = items[name];
+          return acc;
+        }, {});
+      };
+      _this.state = {
+        afterOpen: false,
+        beforeClose: false
+      };
+      _this.shouldClose = null;
+      _this.moveFromContentToOverlay = null;
+      return _this;
     }
-    _createClass(Modal, [{
+    _createClass(ModalPortal, [{
       key: "componentDidMount",
       value: function componentDidMount() {
-        if (!safeHTMLElement.canUseDOM) return;
-        if (!isReact16) {
-          this.node = createHTMLElement("div");
+        if (this.props.isOpen) {
+          this.open();
         }
-        this.node.className = this.props.portalClassName;
-        var parent = getParentElement(this.props.parentSelector);
-        parent.appendChild(this.node);
-        !isReact16 && this.renderPortal(this.props);
-      }
-    }, {
-      key: "getSnapshotBeforeUpdate",
-      value: function getSnapshotBeforeUpdate(prevProps) {
-        var prevParent = getParentElement(prevProps.parentSelector);
-        var nextParent = getParentElement(this.props.parentSelector);
-        return {
-          prevParent: prevParent,
-          nextParent: nextParent
-        };
       }
     }, {
       key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps, _, snapshot) {
-        if (!safeHTMLElement.canUseDOM) return;
-        var _props = this.props,
-          isOpen = _props.isOpen,
-          portalClassName = _props.portalClassName;
-        if (prevProps.portalClassName !== portalClassName) {
-          this.node.className = portalClassName;
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (process.env.NODE_ENV !== "production") {
+          if (prevProps.bodyOpenClassName !== this.props.bodyOpenClassName) {
+            console.warn('React-Modal: "bodyOpenClassName" prop has been modified. ' + "This may cause unexpected behavior when multiple modals are open.");
+          }
+          if (prevProps.htmlOpenClassName !== this.props.htmlOpenClassName) {
+            console.warn('React-Modal: "htmlOpenClassName" prop has been modified. ' + "This may cause unexpected behavior when multiple modals are open.");
+          }
         }
-        var prevParent = snapshot.prevParent,
-          nextParent = snapshot.nextParent;
-        if (nextParent !== prevParent) {
-          prevParent.removeChild(this.node);
-          nextParent.appendChild(this.node);
+        if (this.props.isOpen && !prevProps.isOpen) {
+          this.open();
+        } else if (!this.props.isOpen && prevProps.isOpen) {
+          this.close();
+        }
+        if (this.props.shouldFocusAfterRender && this.state.isOpen && !prevState.isOpen) {
+          this.focusContent();
         }
-        if (!prevProps.isOpen && !isOpen) return;
-        !isReact16 && this.renderPortal(this.props);
       }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
-        if (!safeHTMLElement.canUseDOM || !this.node || !this.portal) return;
-        var state = this.portal.state;
-        var now = Date.now();
-        var closesAt = state.isOpen && this.props.closeTimeoutMS && (state.closesAt || now + this.props.closeTimeoutMS);
-        if (closesAt) {
-          if (!state.beforeClose) {
-            this.portal.closeWithTimeout();
-          }
-          setTimeout(this.removePortal, closesAt - now);
-        } else {
-          this.removePortal();
+        if (this.state.isOpen) {
+          this.afterClose();
+        }
+        clearTimeout(this.closeTimer);
+        cancelAnimationFrame(this.openAnimationFrame);
+      }
+    }, {
+      key: "beforeOpen",
+      value: function beforeOpen() {
+        var _props = this.props,
+          appElement = _props.appElement,
+          ariaHideApp = _props.ariaHideApp,
+          htmlOpenClassName = _props.htmlOpenClassName,
+          bodyOpenClassName = _props.bodyOpenClassName,
+          parentSelector = _props.parentSelector;
+        var parentDocument = parentSelector && parentSelector().ownerDocument || document;
+        bodyOpenClassName && classList$1.add(parentDocument.body, bodyOpenClassName);
+        htmlOpenClassName && classList$1.add(parentDocument.getElementsByTagName("html")[0], htmlOpenClassName);
+        if (ariaHideApp) {
+          ariaHiddenInstances += 1;
+          ariaAppHider$1.hide(appElement);
         }
+        _portalOpenInstances2.default.register(this);
       }
     }, {
       key: "render",
       value: function render() {
-        if (!safeHTMLElement.canUseDOM || !isReact16) {
+        var _props2 = this.props,
+          id = _props2.id,
+          className = _props2.className,
+          overlayClassName = _props2.overlayClassName,
+          defaultStyles = _props2.defaultStyles,
+          children = _props2.children;
+        var contentStyles = className ? {} : defaultStyles.content;
+        var overlayStyles = overlayClassName ? {} : defaultStyles.overlay;
+        if (this.shouldBeClosed()) {
           return null;
         }
-        if (!this.node && isReact16) {
-          this.node = createHTMLElement("div");
-        }
-        var createPortal = getCreatePortal();
-        return createPortal(_react2.default.createElement(_ModalPortal2.default, _extends({
-          ref: this.portalRef,
-          defaultStyles: Modal.defaultStyles
-        }, this.props)), this.node);
-      }
-    }], [{
-      key: "setAppElement",
-      value: function setAppElement(element) {
-        ariaAppHider$1.setElement(element);
+        var overlayProps = {
+          ref: this.setOverlayRef,
+          className: this.buildClassName("overlay", overlayClassName),
+          style: _extends({}, overlayStyles, this.props.style.overlay),
+          onClick: this.handleOverlayOnClick,
+          onMouseDown: this.handleOverlayOnMouseDown
+        };
+        var contentProps = _extends({
+          id: id,
+          ref: this.setContentRef,
+          style: _extends({}, contentStyles, this.props.style.content),
+          className: this.buildClassName("content", className),
+          tabIndex: "-1",
+          onKeyDown: this.handleKeyDown,
+          onMouseDown: this.handleContentOnMouseDown,
+          onMouseUp: this.handleContentOnMouseUp,
+          onClick: this.handleContentOnClick,
+          role: this.props.role,
+          "aria-label": this.props.contentLabel
+        }, this.attributesFromObject("aria", _extends({
+          modal: true
+        }, this.props.aria)), this.attributesFromObject("data", this.props.data || {}), {
+          "data-testid": this.props.testId
+        });
+        var contentElement = this.props.contentElement(contentProps, children);
+        return this.props.overlayElement(overlayProps, contentElement);
       }
     }]);
-    return Modal;
+    return ModalPortal;
   }(React.Component);
-  Modal.propTypes = {
+  ModalPortal.defaultProps = {
+    style: {
+      overlay: {},
+      content: {}
+    },
+    defaultStyles: {}
+  };
+  ModalPortal.propTypes = {
     isOpen: _propTypes2.default.bool.isRequired,
+    defaultStyles: _propTypes2.default.shape({
+      content: _propTypes2.default.object,
+      overlay: _propTypes2.default.object
+    }),
     style: _propTypes2.default.shape({
       content: _propTypes2.default.object,
       overlay: _propTypes2.default.object
     }),
-    portalClassName: _propTypes2.default.string,
+    className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+    overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+    parentSelector: _propTypes2.default.func,
     bodyOpenClassName: _propTypes2.default.string,
     htmlOpenClassName: _propTypes2.default.string,
-    className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
-      base: _propTypes2.default.string.isRequired,
-      afterOpen: _propTypes2.default.string.isRequired,
-      beforeClose: _propTypes2.default.string.isRequired
-    })]),
-    overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
-      base: _propTypes2.default.string.isRequired,
-      afterOpen: _propTypes2.default.string.isRequired,
-      beforeClose: _propTypes2.default.string.isRequired
-    })]),
+    ariaHideApp: _propTypes2.default.bool,
     appElement: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_safeHTMLElement2.default), _propTypes2.default.instanceOf(safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]),
     onAfterOpen: _propTypes2.default.func,
+    onAfterClose: _propTypes2.default.func,
     onRequestClose: _propTypes2.default.func,
     closeTimeoutMS: _propTypes2.default.number,
-    ariaHideApp: _propTypes2.default.bool,
     shouldFocusAfterRender: _propTypes2.default.bool,
     shouldCloseOnOverlayClick: _propTypes2.default.bool,
     shouldReturnFocusAfterClose: _propTypes2.default.bool,
     preventScroll: _propTypes2.default.bool,
-    parentSelector: _propTypes2.default.func,
-    aria: _propTypes2.default.object,
-    data: _propTypes2.default.object,
     role: _propTypes2.default.string,
     contentLabel: _propTypes2.default.string,
+    aria: _propTypes2.default.object,
+    data: _propTypes2.default.object,
+    children: _propTypes2.default.node,
     shouldCloseOnEsc: _propTypes2.default.bool,
     overlayRef: _propTypes2.default.func,
     contentRef: _propTypes2.default.func,
     id: _propTypes2.default.string,
     overlayElement: _propTypes2.default.func,
-    contentElement: _propTypes2.default.func
-  };
-  Modal.defaultProps = {
-    isOpen: false,
-    portalClassName: portalClassName,
-    bodyOpenClassName: bodyOpenClassName,
-    role: "dialog",
-    ariaHideApp: true,
-    closeTimeoutMS: 0,
-    shouldFocusAfterRender: true,
-    shouldCloseOnEsc: true,
-    shouldCloseOnOverlayClick: true,
-    shouldReturnFocusAfterClose: true,
-    preventScroll: false,
-    parentSelector: function parentSelector() {
-      return document.body;
-    },
-    overlayElement: function overlayElement(props, contentEl) {
-      return _react2.default.createElement("div", props, contentEl);
-    },
-    contentElement: function contentElement(props, children) {
-      return _react2.default.createElement("div", props, children);
-    }
+    contentElement: _propTypes2.default.func,
+    testId: _propTypes2.default.string
   };
-  Modal.defaultStyles = {
-    overlay: {
-      position: "fixed",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: "rgba(255, 255, 255, 0.75)"
-    },
-    content: {
-      position: "absolute",
-      top: "40px",
-      left: "40px",
-      right: "40px",
-      bottom: "40px",
-      border: "1px solid #ccc",
-      background: "#fff",
-      overflow: "auto",
-      WebkitOverflowScrolling: "touch",
-      borderRadius: "4px",
-      outline: "none",
-      padding: "20px"
+  exports.default = ModalPortal;
+  module.exports = exports["default"];
+});
+unwrapExports(ModalPortal_1);
+
+function componentWillMount() {
+  var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
+  if (state !== null && state !== undefined) {
+    this.setState(state);
+  }
+}
+function componentWillReceiveProps(nextProps) {
+  function updater(prevState) {
+    var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
+    return state !== null && state !== undefined ? state : null;
+  }
+  this.setState(updater.bind(this));
+}
+function componentWillUpdate(nextProps, nextState) {
+  try {
+    var prevProps = this.props;
+    var prevState = this.state;
+    this.props = nextProps;
+    this.state = nextState;
+    this.__reactInternalSnapshotFlag = true;
+    this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(prevProps, prevState);
+  } finally {
+    this.props = prevProps;
+    this.state = prevState;
+  }
+}
+componentWillMount.__suppressDeprecationWarning = true;
+componentWillReceiveProps.__suppressDeprecationWarning = true;
+componentWillUpdate.__suppressDeprecationWarning = true;
+function polyfill(Component) {
+  var prototype = Component.prototype;
+  if (!prototype || !prototype.isReactComponent) {
+    throw new Error('Can only polyfill class components');
+  }
+  if (typeof Component.getDerivedStateFromProps !== 'function' && typeof prototype.getSnapshotBeforeUpdate !== 'function') {
+    return Component;
+  }
+  var foundWillMountName = null;
+  var foundWillReceivePropsName = null;
+  var foundWillUpdateName = null;
+  if (typeof prototype.componentWillMount === 'function') {
+    foundWillMountName = 'componentWillMount';
+  } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
+    foundWillMountName = 'UNSAFE_componentWillMount';
+  }
+  if (typeof prototype.componentWillReceiveProps === 'function') {
+    foundWillReceivePropsName = 'componentWillReceiveProps';
+  } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
+    foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
+  }
+  if (typeof prototype.componentWillUpdate === 'function') {
+    foundWillUpdateName = 'componentWillUpdate';
+  } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
+    foundWillUpdateName = 'UNSAFE_componentWillUpdate';
+  }
+  if (foundWillMountName !== null || foundWillReceivePropsName !== null || foundWillUpdateName !== null) {
+    var componentName = Component.displayName || Component.name;
+    var newApiName = typeof Component.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' : 'getSnapshotBeforeUpdate()';
+    throw Error('Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' + componentName + ' uses ' + newApiName + ' but also contains the following legacy lifecycles:' + (foundWillMountName !== null ? '\n  ' + foundWillMountName : '') + (foundWillReceivePropsName !== null ? '\n  ' + foundWillReceivePropsName : '') + (foundWillUpdateName !== null ? '\n  ' + foundWillUpdateName : '') + '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' + 'https://fb.me/react-async-component-lifecycle-hooks');
+  }
+  if (typeof Component.getDerivedStateFromProps === 'function') {
+    prototype.componentWillMount = componentWillMount;
+    prototype.componentWillReceiveProps = componentWillReceiveProps;
+  }
+  if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
+    if (typeof prototype.componentDidUpdate !== 'function') {
+      throw new Error('Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype');
     }
-  };
-  (0, reactLifecyclesCompat_es.polyfill)(Modal);
-  if (process.env.NODE_ENV !== "production") {
-    Modal.setCreateHTMLElement = function (fn) {
-      return createHTMLElement = fn;
+    prototype.componentWillUpdate = componentWillUpdate;
+    var componentDidUpdate = prototype.componentDidUpdate;
+    prototype.componentDidUpdate = function componentDidUpdatePolyfill(prevProps, prevState, maybeSnapshot) {
+      var snapshot = this.__reactInternalSnapshotFlag ? this.__reactInternalSnapshot : maybeSnapshot;
+      componentDidUpdate.call(this, prevProps, prevState, snapshot);
     };
   }
-  exports.default = Modal;
-});
-unwrapExports(Modal_1);
+  return Component;
+}
 
-var lib = createCommonjsModule(function (module, exports) {
+var reactLifecyclesCompat_es = {
+  __proto__: null,
+  polyfill: polyfill
+};
+
+var Modal_1 = createCommonjsModule(function (module, exports) {
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  var _Modal2 = _interopRequireDefault(Modal_1);
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-  exports.default = _Modal2.default;
-  module.exports = exports["default"];
-});
-var Modal = unwrapExports(lib);
-
-const CitizenConsent = ({
-  showTermsPopupOwner,
-  setShowTermsPopupOwner,
-  otpVerifiedTimestamp
-}) => {
-  var _user$info, _user$info2;
-  const {
-    t
-  } = useTranslation();
-  const user = Digit.UserService.getUser();
-  const ownername = user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : _user$info.name;
-  const ownermobileNumber = user === null || user === void 0 ? void 0 : user.info.mobileNumber;
-  const ownerEmail = user === null || user === void 0 ? void 0 : (_user$info2 = user.info) === null || _user$info2 === void 0 ? void 0 : _user$info2.emailId;
-  const {
-    id
-  } = useParams();
-  const tenantId = localStorage.getItem("CITIZEN.CITY");
-  const [loader, setLoader] = useState(false);
-  const {
-    data,
-    isLoading
-  } = Digit.Hooks.obps.useBPADetailsPage(tenantId, {
-    applicationNo: id
-  });
-  const [isUploading, setIsUploading] = useState(false);
-  const [isFileUploaded, setIsFileUploaded] = useState(false);
-  const isCitizenDeclared = sessionStorage.getItem("CitizenConsentdocFilestoreidCHB");
-  const DateOnly = new Date();
-  const selfdeclarationform = `
-  <div style="font-family:'Times New Roman', Times, serif; color:#000; font-size:16px; line-height:1.18; margin-top:-100px; padding:0;">
-
-    <h2 style="text-align:center; font-size:20px; margin:0 0 6px 0; font-weight:700; text-transform:uppercase;">
-      OWNER'S DECLARATION
-    </h2>
-
-    <div style="margin-top:-52px;">
-      <p style="margin-bottom:-32px;"><strong>To,</strong></p>
-      <p style="margin-bottom:-32px;"><strong>Local Urban Bodies</strong></p>
-    </div>
-
-    <p style="margin-top:-20px;"><strong>Dear Sir/Madam,</strong></p>
-
-    <p style="margin-top:-52px;margin-bottom:-32px; text-align:justify;">
-  I/We further declare that I am/We are aware of all the actions taken have been authorized by me/us.
-    </p>
-
-    <ol style="margin-top:-52px;margin-bottom:-32px; padding:0;">
-      <li style="margin-top:-5px;margin-bottom:-25px;">1. That I am/We are sole owner(s) of the site.</li>
-      <li style="margin-top:-5px;margin-bottom:-25px;">2. That there is no dispute regarding the site and if any dispute arises, then I/We shall be solely responsible for the same.</li>
-      <li style="margin-top:-5px;margin-bottom:-25px;">3. That construction of the building will be undertaken as per the approved building plans and structural design given by the Structural Engineer.</li>
-      <li style="margin-top:-5px;margin-bottom:-25px;">4. That above stated facts are true and the requisite documents have been uploaded with this building plan and nothing has been concealed thereof.</li>
-    </ol>
-
-    <!-- Signature / details table -->
-    <table style="width:100%; border-collapse:collapse; margin-top:6px; font-size:14px;">
-      <tr>
-        <td style="width:48%; vertical-align:top; padding:6px; border:1px dotted #000;">
-          <div style="font-weight:700; margin-bottom:4px;">Date:</div>
-          <div style="min-height:60px;">${DateOnly || "<Date of Sign>"}</div>
-        </td>
-
-        <td style="width:52%; vertical-align:top; border:1px dotted #000;">
-          <table style="width:100%; border-collapse:collapse;">
-            <tr>
-              <td style="padding:6px; border-bottom:1px dotted #000; width:40%; font-weight:700;">Name of Owner:</td>
-              <td style="padding:6px; border-bottom:1px dotted #000;">${ownername}</td>
-            </tr>
-            <tr>
-            <td style="padding:6px; border-bottom:1px dotted #000; font-weight:700;">e-Mail:</td>
-            <td style="padding:6px; border-bottom:1px dotted #000;">${ownerEmail}</td>
-            </tr>
-            <tr>
-              <td style="padding:6px; border-bottom:1px dotted #000; font-weight:700;">Mobile:</td>
-              <td style="padding:6px; border-bottom:1px dotted #000;">${ownermobileNumber}</td>
-            </tr>
-            <tr>
-              <td style="padding:6px; font-weight:700;">Signature:</td>
-              <td style="padding:6px;">Verified through OTP</b></td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
-  </div>
-`;
-  const closeModal = () => {
-    setShowTermsPopupOwner(false);
-  };
-  const uploadSelfDeclaration = async () => {
-    setLoader(true);
-    const Chb = [{
-      applicationNo: "CHB-0001",
-      tenantId: "pb.amritsar",
-      approvalDate: "2025-10-28",
-      TimeStamp: "2025-10-28T12:30:00Z"
-    }];
-    try {
-      var _result$filestoreIds$;
-      setIsUploading(true);
-      let result = await Digit.PaymentService.generatePdf(Digit.ULBService.getStateId(), {
-        Chb: Chb
-      }, "communityhallowner");
-      console.log(result, "RESULT");
-      setLoader(false);
-      if ((result === null || result === void 0 ? void 0 : (_result$filestoreIds$ = result.filestoreIds[0]) === null || _result$filestoreIds$ === void 0 ? void 0 : _result$filestoreIds$.length) > 0) {
-        alert("File Uploaded Successfully");
-        sessionStorage.setItem("CitizenConsentdocFilestoreidCHB", result === null || result === void 0 ? void 0 : result.filestoreIds[0]);
-        setIsFileUploaded(true);
-      } else {
-        alert("File Upload Failed");
+  exports.bodyOpenClassName = exports.portalClassName = undefined;
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
-    } catch (error) {
-      alert("Error Uploading PDF:", error);
-      setLoader(false);
-    } finally {
-      setLoader(false);
-      setIsUploading(false);
-    }
-  };
-  const modalStyles = {
-    modal: {
-      width: "100%",
-      height: "100%",
-      top: "0",
-      position: "relative",
-      backgroundColor: "rgba(0, 0, 0, 0.7)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    modalOverlay: {
-      position: "fixed",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      backgroundColor: "rgba(0, 0, 0, 0.7)"
-    },
-    modalContent: {
-      backgroundColor: "#FFFFFF",
-      padding: "2rem",
-      borderRadius: "0.5rem",
-      maxWidth: "800px",
-      margin: "auto",
-      fontFamily: "Roboto, serif",
-      overflowX: "hidden",
-      textAlign: "justify",
-      boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
-      maxHeight: "80vh",
-      overflowY: "auto",
-      lineHeight: "2"
-    },
-    heading: {
-      textAlign: "center",
-      fontWeight: "bold",
-      marginBottom: "10px"
-    },
-    subheading: {
-      textAlign: "center",
-      fontWeight: "bold",
-      marginBottom: "20px"
-    },
-    rightAlignedText: {
-      textAlign: "right",
-      whiteSpace: "pre-wrap",
-      wordWrap: "break-word",
-      fontFamily: "Roboto, serif",
-      lineHeight: "2"
     }
+    return target;
   };
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
-    isOpen: showTermsPopupOwner,
-    onRequestClose: closeModal,
-    contentLabel: "Self-Declaration",
-    style: {
-      modal: modalStyles.modal,
-      overlay: modalStyles.modalOverlay,
-      content: modalStyles.modalContent
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      whiteSpace: "pre-wrap",
-      wordWrap: "break-word",
-      textAlign: "justify",
-      fontFamily: "Roboto, serif"
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+  var _react2 = _interopRequireDefault(React);
+  var _reactDom2 = _interopRequireDefault(reactDom);
+  var _propTypes2 = _interopRequireDefault(propTypes);
+  var _ModalPortal2 = _interopRequireDefault(ModalPortal_1);
+  var ariaAppHider$1 = _interopRequireWildcard(ariaAppHider);
+  var _safeHTMLElement2 = _interopRequireDefault(safeHTMLElement);
+  function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+      return obj;
+    } else {
+      var newObj = {};
+      if (obj != null) {
+        for (var key in obj) {
+          if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
+        }
+      }
+      newObj.default = obj;
+      return newObj;
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: selfdeclarationform
+  }
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "flex-end"
+  }
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
-  }, /*#__PURE__*/React.createElement(SubmitBar, {
-    label: t("BPA_CLOSE"),
-    onSubmit: closeModal
-  })), /*#__PURE__*/React.createElement("br", null), !isCitizenDeclared && /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "flex-end"
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
     }
-  }, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(SubmitBar, {
-    label: t("BPA_UPLOAD"),
-    onSubmit: uploadSelfDeclaration,
-    disabled: isUploading || isFileUploaded
-  })))), loader && /*#__PURE__*/React.createElement(Loader, {
-    page: true
-  }));
-};
-
-const CHBCitizenSecond = ({
-  onGoBack,
-  goNext,
-  currentStepData,
-  t
-}) => {
-  const tenantId = window.location.href.includes("employee") ? Digit.ULBService.getCurrentPermanentCity() : localStorage.getItem("CITIZEN.CITY");
-  const isCitizen = window.location.href.includes("citizen");
-  const [getHallDetails, setHallDetails] = useState([]);
-  const [getHallCodes, setHallCodes] = useState([]);
-  const [getSlots, setSlots] = useState([]);
-  const [loader, setLoader] = useState(false);
-  const [showInfo, setShowInfo] = useState(false);
-  const [uploadedFile, setUploadedFile] = useState(null);
-  const [file, setFile] = useState(null);
-  const [error, setError] = useState(null);
-  const [showTermsPopup, setShowTermsPopup] = useState(false);
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    reset,
-    formState: {
-      errors
-    },
-    getValues,
-    watch
-  } = useForm({
-    defaultValues: {
-      shouldUnregister: false,
-      halls: [{
-        startDate: "",
-        endDate: "",
-        startTime: "",
-        endTime: ""
-      }]
-    }
-  });
-  const {
-    data: CHBLocations = [],
-    isLoading: CHBLocationLoading
-  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
-    name: "Location"
-  }]);
-  const {
-    data: CHBDetails = [],
-    isLoading: CHBLoading
-  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
-    name: "CommunityHalls"
-  }]);
-  const {
-    data: CHBPurpose = [],
-    isLoading: CHBPurposeLoading
-  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
-    name: "Purpose"
-  }]);
-  const {
-    data: SpecialCategory = [],
-    isLoading: CHBSpecialCategoryLoading
-  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
-    name: "SpecialCategory"
-  }]);
-  const {
-    data: CHBHallCode = [],
-    isLoading: CHBHallCodeLoading
-  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
-    name: "HallCode"
-  }]);
-  const {
-    data: CHBReason = [],
-    isLoading: CHBReasonLoading
-  } = Digit.Hooks.useCustomMDMS(tenantId, "CHB", [{
-    name: "DiscountReason"
-  }]);
-  const fiterHalls = selected => {
-    var _CHBDetails$CHB, _CHBDetails$CHB$Commu, _CHBHallCode$CHB;
-    const filteredHalls = (CHBDetails === null || CHBDetails === void 0 ? void 0 : (_CHBDetails$CHB = CHBDetails.CHB) === null || _CHBDetails$CHB === void 0 ? void 0 : (_CHBDetails$CHB$Commu = _CHBDetails$CHB.CommunityHalls) === null || _CHBDetails$CHB$Commu === void 0 ? void 0 : _CHBDetails$CHB$Commu.filter(hall => hall.locationCode === (selected === null || selected === void 0 ? void 0 : selected.code))) || [];
-    setHallDetails(filteredHalls);
-    const hallInfo = CHBHallCode === null || CHBHallCode === void 0 ? void 0 : (_CHBHallCode$CHB = CHBHallCode.CHB) === null || _CHBHallCode$CHB === void 0 ? void 0 : _CHBHallCode$CHB.HallCode;
-    const getHallCodesData = hallInfo === null || hallInfo === void 0 ? void 0 : hallInfo.filter(item => (item === null || item === void 0 ? void 0 : item.communityHallId) == (selected === null || selected === void 0 ? void 0 : selected.communityHallId));
-    setHallCodes(getHallCodesData);
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+  var portalClassName = exports.portalClassName = "ReactModalPortal";
+  var bodyOpenClassName = exports.bodyOpenClassName = "ReactModal__Body--open";
+  var isReact16 = safeHTMLElement.canUseDOM && _reactDom2.default.createPortal !== undefined;
+  var createHTMLElement = function createHTMLElement(name) {
+    return document.createElement(name);
   };
-  const slotsSearch = async data => {
-    var _getValues, _getValues2;
-    setLoader(true);
-    console.log("data", data);
-    console.log("getValues", getValues());
-    const payload = {
-      tenantId: tenantId,
-      communityHallCode: data.communityHallId,
-      hallCode: data === null || data === void 0 ? void 0 : data.HallCode,
-      bookingStartDate: (_getValues = getValues()) === null || _getValues === void 0 ? void 0 : _getValues.startDate,
-      bookingEndDate: (_getValues2 = getValues()) === null || _getValues2 === void 0 ? void 0 : _getValues2.endDate,
-      isTimerRequired: false
-    };
-    try {
-      const response = await Digit.CHBServices.slot_search({
-        filters: payload
-      });
-      setLoader(false);
-      setSlots(response === null || response === void 0 ? void 0 : response.hallSlotAvailabiltityDetails);
-      return response;
-    } catch (error) {
-      setLoader(false);
-    }
+  var getCreatePortal = function getCreatePortal() {
+    return isReact16 ? _reactDom2.default.createPortal : _reactDom2.default.unstable_renderSubtreeIntoContainer;
   };
-  const onSubmit = data => {
-    var _Digit$UserService$ge, _data$reason, _data$slots, _getHallDetails$, _data$siteId, _data$purpose, _data$specialCategory;
-    console.log("data==??", data);
-    console.log("uploadedFile==??", uploadedFile);
-    const userInfo = ((_Digit$UserService$ge = Digit.UserService.getUser()) === null || _Digit$UserService$ge === void 0 ? void 0 : _Digit$UserService$ge.info) || {};
-    const now = Date.now();
-    const isCitizenDeclared = sessionStorage.getItem("CitizenConsentdocFilestoreidCHB");
-    if (!isCitizenDeclared) {
-      alert("Please upload Self Certificate");
-      return;
+  function getParentElement(parentSelector) {
+    return parentSelector();
+  }
+  var Modal = function (_Component) {
+    _inherits(Modal, _Component);
+    function Modal() {
+      var _ref;
+      var _temp, _this, _ret;
+      _classCallCheck(this, Modal);
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args))), _this), _this.removePortal = function () {
+        !isReact16 && _reactDom2.default.unmountComponentAtNode(_this.node);
+        var parent = getParentElement(_this.props.parentSelector);
+        if (parent && parent.contains(_this.node)) {
+          parent.removeChild(_this.node);
+        } else {
+          console.warn('React-Modal: "parentSelector" prop did not returned any DOM ' + "element. Make sure that the parent element is unmounted to " + "avoid any memory leaks.");
+        }
+      }, _this.portalRef = function (ref) {
+        _this.portal = ref;
+      }, _this.renderPortal = function (props) {
+        var createPortal = getCreatePortal();
+        var portal = createPortal(_this, _react2.default.createElement(_ModalPortal2.default, _extends({
+          defaultStyles: Modal.defaultStyles
+        }, props)), _this.node);
+        _this.portalRef(portal);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
     }
-    const additionalDetails = {
-      disImage: isCitizenDeclared,
-      ...((data === null || data === void 0 ? void 0 : (_data$reason = data.reason) === null || _data$reason === void 0 ? void 0 : _data$reason.reasonName) && {
-        reason: data.reason.reasonName
-      }),
-      ...((data === null || data === void 0 ? void 0 : data.discountAmount) && {
-        discountAmount: data.discountAmount
-      })
-    };
-    const bookingSlotDetails = data === null || data === void 0 ? void 0 : (_data$slots = data.slots) === null || _data$slots === void 0 ? void 0 : _data$slots.map(slot => {
-      var _CHBHallCode$CHB2, _CHBHallCode$CHB2$Hal;
-      const hallInfo = CHBHallCode === null || CHBHallCode === void 0 ? void 0 : (_CHBHallCode$CHB2 = CHBHallCode.CHB) === null || _CHBHallCode$CHB2 === void 0 ? void 0 : (_CHBHallCode$CHB2$Hal = _CHBHallCode$CHB2.HallCode) === null || _CHBHallCode$CHB2$Hal === void 0 ? void 0 : _CHBHallCode$CHB2$Hal.find(h => h.HallCode === slot.hallCode);
-      const formattedDate = slot !== null && slot !== void 0 && slot.bookingDate ? format(parse(slot.bookingDate, "dd-MM-yyyy", new Date()), "yyyy-MM-dd") : null;
-      return {
-        bookingDate: formattedDate,
-        bookingEndDate: formattedDate,
-        bookingFromTime: (slot === null || slot === void 0 ? void 0 : slot.fromTime) || "00:00",
-        bookingToTime: (slot === null || slot === void 0 ? void 0 : slot.toTime) || "23:59",
-        hallCode: slot === null || slot === void 0 ? void 0 : slot.hallCode,
-        status: "INITIATE",
-        capacity: (hallInfo === null || hallInfo === void 0 ? void 0 : hallInfo.capacity) || null
-      };
-    });
-    const payload = {
-      hallsBookingApplication: {
-        tenantId,
-        ...(additionalDetails && {
-          additionalDetails
-        }),
-        bookingStatus: "INITIATED",
-        applicationDate: now,
-        communityHallCode: (getHallDetails === null || getHallDetails === void 0 ? void 0 : (_getHallDetails$ = getHallDetails[0]) === null || _getHallDetails$ === void 0 ? void 0 : _getHallDetails$.communityHallId) || "",
-        communityHallName: data === null || data === void 0 ? void 0 : (_data$siteId = data.siteId) === null || _data$siteId === void 0 ? void 0 : _data$siteId.name,
-        purpose: {
-          purpose: data === null || data === void 0 ? void 0 : (_data$purpose = data.purpose) === null || _data$purpose === void 0 ? void 0 : _data$purpose.code
-        },
-        specialCategory: {
-          category: data === null || data === void 0 ? void 0 : (_data$specialCategory = data.specialCategory) === null || _data$specialCategory === void 0 ? void 0 : _data$specialCategory.code
-        },
-        purposeDescription: data === null || data === void 0 ? void 0 : data.purposeDescription,
-        bookingSlotDetails,
-        owners: [{
-          name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name,
-          mobileNumber: userInfo === null || userInfo === void 0 ? void 0 : userInfo.mobileNumber,
-          emailId: userInfo === null || userInfo === void 0 ? void 0 : userInfo.emailId,
-          type: userInfo === null || userInfo === void 0 ? void 0 : userInfo.type
-        }],
-        workflow: {
-          action: "INITIATE",
-          businessService: "CommunityHallBooking",
-          moduleName: "CommunityHallModule"
+    _createClass(Modal, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        if (!safeHTMLElement.canUseDOM) return;
+        if (!isReact16) {
+          this.node = createHTMLElement("div");
         }
+        this.node.className = this.props.portalClassName;
+        var parent = getParentElement(this.props.parentSelector);
+        parent.appendChild(this.node);
+        !isReact16 && this.renderPortal(this.props);
       }
-    };
-    goNext(payload);
-  };
-  useEffect(() => {
-    var _currentStepData$owne;
-    const formattedData = currentStepData === null || currentStepData === void 0 ? void 0 : (_currentStepData$owne = currentStepData.ownerDetails) === null || _currentStepData$owne === void 0 ? void 0 : _currentStepData$owne.hallsBookingApplication;
-    if (formattedData) {
-      var _CHBHallCode$CHB3, _CHBReason$CHB, _formattedData$bookin3, _formattedData$bookin4, _formattedData$bookin5, _formattedData$additi2;
-      const communityHallsOptions = CHBLocations.CHB.CommunityHalls || [];
-      const purposeOptions = CHBPurpose.CHB.Purpose || [];
-      const specialCategoryOptions = SpecialCategory.CHB.SpecialCategory || [];
-      const hallCodeOptions = CHBHallCode === null || CHBHallCode === void 0 ? void 0 : (_CHBHallCode$CHB3 = CHBHallCode.CHB) === null || _CHBHallCode$CHB3 === void 0 ? void 0 : _CHBHallCode$CHB3.HallCode;
-      const discReasonOptions = CHBReason === null || CHBReason === void 0 ? void 0 : (_CHBReason$CHB = CHBReason.CHB) === null || _CHBReason$CHB === void 0 ? void 0 : _CHBReason$CHB.DiscountReason;
-      console.log("discReasonOptions", discReasonOptions);
-      const selectedCommHall = communityHallsOptions === null || communityHallsOptions === void 0 ? void 0 : communityHallsOptions.find(item => (item === null || item === void 0 ? void 0 : item.communityHallId) == (formattedData === null || formattedData === void 0 ? void 0 : formattedData.communityHallCode));
-      const selectedPurpose = purposeOptions === null || purposeOptions === void 0 ? void 0 : purposeOptions.find(item => {
-        var _formattedData$purpos;
-        return (item === null || item === void 0 ? void 0 : item.code) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$purpos = formattedData.purpose) === null || _formattedData$purpos === void 0 ? void 0 : _formattedData$purpos.purpose);
-      });
-      const selectedSpecialCat = specialCategoryOptions === null || specialCategoryOptions === void 0 ? void 0 : specialCategoryOptions.find(item => {
-        var _formattedData$specia;
-        return (item === null || item === void 0 ? void 0 : item.code) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$specia = formattedData.specialCategory) === null || _formattedData$specia === void 0 ? void 0 : _formattedData$specia.category);
-      });
-      const selectHallCode = hallCodeOptions === null || hallCodeOptions === void 0 ? void 0 : hallCodeOptions.find(item => {
-        var _formattedData$bookin, _formattedData$bookin2;
-        return (item === null || item === void 0 ? void 0 : item.HallCode) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$bookin = formattedData.bookingSlotDetails) === null || _formattedData$bookin === void 0 ? void 0 : (_formattedData$bookin2 = _formattedData$bookin[0]) === null || _formattedData$bookin2 === void 0 ? void 0 : _formattedData$bookin2.hallCode);
-      });
-      const selectReason = discReasonOptions === null || discReasonOptions === void 0 ? void 0 : discReasonOptions.find(item => {
-        var _formattedData$additi;
-        return (item === null || item === void 0 ? void 0 : item.reasonName) == (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$additi = formattedData.additionalDetails) === null || _formattedData$additi === void 0 ? void 0 : _formattedData$additi.reason);
-      });
-      console.log("formattedData", formattedData);
-      setValue("siteId", selectedCommHall || null);
-      setValue("hallCode", selectHallCode || null);
-      setValue("startDate", formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$bookin3 = formattedData.bookingSlotDetails) === null || _formattedData$bookin3 === void 0 ? void 0 : (_formattedData$bookin4 = _formattedData$bookin3[0]) === null || _formattedData$bookin4 === void 0 ? void 0 : _formattedData$bookin4.bookingDate);
-      setValue("endDate", formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$bookin5 = formattedData.bookingSlotDetails.at(-1)) === null || _formattedData$bookin5 === void 0 ? void 0 : _formattedData$bookin5.bookingEndDate);
-      setShowInfo(true);
-      fiterHalls(selectedCommHall);
-      slotsSearch(selectHallCode).then(response => {
-        console.log("response", response);
-        const slotsData = (response === null || response === void 0 ? void 0 : response.hallSlotAvailabiltityDetails) || [];
-        setSlots(slotsData);
-        setValue("slots", slotsData);
-      });
-      setValue("purpose", selectedPurpose || null);
-      setValue("specialCategory", selectedSpecialCat || null);
-      setValue("purposeDescription", formattedData.purposeDescription || "");
-      setValue("discountAmount", (formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$additi2 = formattedData.additionalDetails) === null || _formattedData$additi2 === void 0 ? void 0 : _formattedData$additi2.discountAmount) || "");
-      setValue("reason", selectReason || null);
-    }
-  }, [currentStepData, setValue]);
-  useEffect(() => {
-    console.log("getSlots", getSlots);
-  }, [getSlots]);
-  useEffect(() => {
-    (async () => {
-      setError(null);
-      if (file) {
-        if (file.size >= 5242880) {
-          setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
-        } else {
-          setLoader(true);
-          try {
-            var _response$data, _response$data$files;
-            setUploadedFile(null);
-            const response = await Digit.UploadServices.Filestorage("CHB", file, Digit.ULBService.getStateId());
-            if ((response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$files = _response$data.files) === null || _response$data$files === void 0 ? void 0 : _response$data$files.length) > 0) {
-              var _response$data2, _response$data2$files;
-              setUploadedFile(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : (_response$data2$files = _response$data2.files[0]) === null || _response$data2$files === void 0 ? void 0 : _response$data2$files.fileStoreId);
-            } else {
-              setError(t("CS_FILE_UPLOAD_ERROR"));
-            }
-            setLoader(false);
-          } catch (err) {
-            setLoader(false);
-            setError(t("CS_FILE_UPLOAD_ERROR"));
+    }, {
+      key: "getSnapshotBeforeUpdate",
+      value: function getSnapshotBeforeUpdate(prevProps) {
+        var prevParent = getParentElement(prevProps.parentSelector);
+        var nextParent = getParentElement(this.props.parentSelector);
+        return {
+          prevParent: prevParent,
+          nextParent: nextParent
+        };
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps, _, snapshot) {
+        if (!safeHTMLElement.canUseDOM) return;
+        var _props = this.props,
+          isOpen = _props.isOpen,
+          portalClassName = _props.portalClassName;
+        if (prevProps.portalClassName !== portalClassName) {
+          this.node.className = portalClassName;
+        }
+        var prevParent = snapshot.prevParent,
+          nextParent = snapshot.nextParent;
+        if (nextParent !== prevParent) {
+          prevParent.removeChild(this.node);
+          nextParent.appendChild(this.node);
+        }
+        if (!prevProps.isOpen && !isOpen) return;
+        !isReact16 && this.renderPortal(this.props);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        if (!safeHTMLElement.canUseDOM || !this.node || !this.portal) return;
+        var state = this.portal.state;
+        var now = Date.now();
+        var closesAt = state.isOpen && this.props.closeTimeoutMS && (state.closesAt || now + this.props.closeTimeoutMS);
+        if (closesAt) {
+          if (!state.beforeClose) {
+            this.portal.closeWithTimeout();
           }
+          setTimeout(this.removePortal, closesAt - now);
+        } else {
+          this.removePortal();
         }
       }
-    })();
-  }, [file]);
-  const startDate = watch("startDate");
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_HALL_NAME"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "siteId",
-    rules: {
-      required: t("HALL_NAME_REQ")
+    }, {
+      key: "render",
+      value: function render() {
+        if (!safeHTMLElement.canUseDOM || !isReact16) {
+          return null;
+        }
+        if (!this.node && isReact16) {
+          this.node = createHTMLElement("div");
+        }
+        var createPortal = getCreatePortal();
+        return createPortal(_react2.default.createElement(_ModalPortal2.default, _extends({
+          ref: this.portalRef,
+          defaultStyles: Modal.defaultStyles
+        }, this.props)), this.node);
+      }
+    }], [{
+      key: "setAppElement",
+      value: function setAppElement(element) {
+        ariaAppHider$1.setElement(element);
+      }
+    }]);
+    return Modal;
+  }(React.Component);
+  Modal.propTypes = {
+    isOpen: _propTypes2.default.bool.isRequired,
+    style: _propTypes2.default.shape({
+      content: _propTypes2.default.object,
+      overlay: _propTypes2.default.object
+    }),
+    portalClassName: _propTypes2.default.string,
+    bodyOpenClassName: _propTypes2.default.string,
+    htmlOpenClassName: _propTypes2.default.string,
+    className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
+      base: _propTypes2.default.string.isRequired,
+      afterOpen: _propTypes2.default.string.isRequired,
+      beforeClose: _propTypes2.default.string.isRequired
+    })]),
+    overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
+      base: _propTypes2.default.string.isRequired,
+      afterOpen: _propTypes2.default.string.isRequired,
+      beforeClose: _propTypes2.default.string.isRequired
+    })]),
+    appElement: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_safeHTMLElement2.default), _propTypes2.default.instanceOf(safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]),
+    onAfterOpen: _propTypes2.default.func,
+    onRequestClose: _propTypes2.default.func,
+    closeTimeoutMS: _propTypes2.default.number,
+    ariaHideApp: _propTypes2.default.bool,
+    shouldFocusAfterRender: _propTypes2.default.bool,
+    shouldCloseOnOverlayClick: _propTypes2.default.bool,
+    shouldReturnFocusAfterClose: _propTypes2.default.bool,
+    preventScroll: _propTypes2.default.bool,
+    parentSelector: _propTypes2.default.func,
+    aria: _propTypes2.default.object,
+    data: _propTypes2.default.object,
+    role: _propTypes2.default.string,
+    contentLabel: _propTypes2.default.string,
+    shouldCloseOnEsc: _propTypes2.default.bool,
+    overlayRef: _propTypes2.default.func,
+    contentRef: _propTypes2.default.func,
+    id: _propTypes2.default.string,
+    overlayElement: _propTypes2.default.func,
+    contentElement: _propTypes2.default.func
+  };
+  Modal.defaultProps = {
+    isOpen: false,
+    portalClassName: portalClassName,
+    bodyOpenClassName: bodyOpenClassName,
+    role: "dialog",
+    ariaHideApp: true,
+    closeTimeoutMS: 0,
+    shouldFocusAfterRender: true,
+    shouldCloseOnEsc: true,
+    shouldCloseOnOverlayClick: true,
+    shouldReturnFocusAfterClose: true,
+    preventScroll: false,
+    parentSelector: function parentSelector() {
+      return document.body;
     },
-    render: props => {
-      var _CHBLocations$CHB;
-      return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
-        className: "form-field",
-        select: e => {
-          props.onChange(e);
-          fiterHalls(e);
-          setValue("hallCode", null);
-          setValue("startDate", "");
-          setSlots([]);
-          setShowInfo(false);
-        },
-        selected: props.value,
-        option: CHBLocations === null || CHBLocations === void 0 ? void 0 : (_CHBLocations$CHB = CHBLocations.CHB) === null || _CHBLocations$CHB === void 0 ? void 0 : _CHBLocations$CHB.CommunityHalls,
-        optionKey: "name"
-      });
-    }
-  }), errors.siteId && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.siteId.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_DATE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "50%"
+    overlayElement: function overlayElement(props, contentEl) {
+      return _react2.default.createElement("div", props, contentEl);
     },
-    className: "field"
-  }, /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "startDate",
-    rules: {
-      required: t("START_DATE_REQ")
+    contentElement: function contentElement(props, children) {
+      return _react2.default.createElement("div", props, children);
+    }
+  };
+  Modal.defaultStyles = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.75)"
     },
-    render: props => /*#__PURE__*/React.createElement(TextInput, {
-      style: {
-        marginBottom: 0
-      },
-      type: "date",
-      className: "form-field",
-      value: props.value,
-      min: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split("T")[0],
-      onChange: e => {
-        props.onChange(e.target.value);
-      },
-      onBlur: e => {
-        props.onBlur(e);
+    content: {
+      position: "absolute",
+      top: "40px",
+      left: "40px",
+      right: "40px",
+      bottom: "40px",
+      border: "1px solid #ccc",
+      background: "#fff",
+      overflow: "auto",
+      WebkitOverflowScrolling: "touch",
+      borderRadius: "4px",
+      outline: "none",
+      padding: "20px"
+    }
+  };
+  (0, reactLifecyclesCompat_es.polyfill)(Modal);
+  if (process.env.NODE_ENV !== "production") {
+    Modal.setCreateHTMLElement = function (fn) {
+      return createHTMLElement = fn;
+    };
+  }
+  exports.default = Modal;
+});
+unwrapExports(Modal_1);
+
+var lib = createCommonjsModule(function (module, exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  var _Modal2 = _interopRequireDefault(Modal_1);
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+  exports.default = _Modal2.default;
+  module.exports = exports["default"];
+});
+var Modal = unwrapExports(lib);
+
+const CitizenConsent = ({
+  showTermsPopupOwner,
+  setShowTermsPopupOwner,
+  otpVerifiedTimestamp,
+  getModalData
+}) => {
+  var _user$info, _user$info2;
+  const {
+    t
+  } = useTranslation();
+  const user = Digit.UserService.getUser();
+  const ownername = user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : _user$info.name;
+  const ownermobileNumber = user === null || user === void 0 ? void 0 : user.info.mobileNumber;
+  const ownerEmail = user === null || user === void 0 ? void 0 : (_user$info2 = user.info) === null || _user$info2 === void 0 ? void 0 : _user$info2.emailId;
+  const {
+    id
+  } = useParams();
+  const tenantId = window.location.href.includes("citizen") ? window.localStorage.getItem("CITIZEN.CITY") : window.localStorage.getItem("Employee.tenant-id");
+  const [loader, setLoader] = useState(false);
+  console.log("getModalData", getModalData);
+  const {
+    data,
+    isLoading
+  } = Digit.Hooks.obps.useBPADetailsPage(tenantId, {
+    applicationNo: id
+  });
+  const [isUploading, setIsUploading] = useState(false);
+  const [isFileUploaded, setIsFileUploaded] = useState(false);
+  const isCitizenDeclared = sessionStorage.getItem("CitizenConsentdocFilestoreidCHB");
+  const DateOnly = new Date();
+  const selfdeclarationform = `
+  <div style="font-family:'Times New Roman', Times, serif; color:#000; font-size:16px; line-height:1.18; margin-top:-100px; padding:0;">
+
+    <h2 style="text-align:center; font-size:20px; margin:0 0 6px 0; font-weight:700; text-transform:uppercase;">
+      OWNER'S DECLARATION
+    </h2>
+
+    <div style="margin-top:-52px;">
+      <p style="margin-bottom:-32px;"><strong>To,</strong></p>
+      <p style="margin-bottom:-32px;"><strong>Local Urban Bodies</strong></p>
+    </div>
+
+    <p style="margin-top:-20px;"><strong>Dear Sir/Madam,</strong></p>
+
+    <p style="margin-top:-52px;margin-bottom:-32px; text-align:justify;">
+  I/We further declare that I am/We are aware of all the actions taken have been authorized by me/us.
+    </p>
+
+    <ol style="margin-top:-52px;margin-bottom:-32px; padding:0;">
+      <li style="margin-top:-5px;margin-bottom:-25px;">1. That I am/We are sole owner(s) of the site.</li>
+      <li style="margin-top:-5px;margin-bottom:-25px;">2. That there is no dispute regarding the site and if any dispute arises, then I/We shall be solely responsible for the same.</li>
+      <li style="margin-top:-5px;margin-bottom:-25px;">3. That construction of the building will be undertaken as per the approved building plans and structural design given by the Structural Engineer.</li>
+      <li style="margin-top:-5px;margin-bottom:-25px;">4. That above stated facts are true and the requisite documents have been uploaded with this building plan and nothing has been concealed thereof.</li>
+    </ol>
+
+    <!-- Signature / details table -->
+    <table style="width:100%; border-collapse:collapse; margin-top:6px; font-size:14px;">
+      <tr>
+        <td style="width:48%; vertical-align:top; padding:6px; border:1px dotted #000;">
+          <div style="font-weight:700; margin-bottom:4px;">Date:</div>
+          <div style="min-height:60px;">${DateOnly || "<Date of Sign>"}</div>
+        </td>
+
+        <td style="width:52%; vertical-align:top; border:1px dotted #000;">
+          <table style="width:100%; border-collapse:collapse;">
+            <tr>
+              <td style="padding:6px; border-bottom:1px dotted #000; width:40%; font-weight:700;">Name of Owner:</td>
+              <td style="padding:6px; border-bottom:1px dotted #000;">${ownername}</td>
+            </tr>
+            <tr>
+            <td style="padding:6px; border-bottom:1px dotted #000; font-weight:700;">e-Mail:</td>
+            <td style="padding:6px; border-bottom:1px dotted #000;">${ownerEmail}</td>
+            </tr>
+            <tr>
+              <td style="padding:6px; border-bottom:1px dotted #000; font-weight:700;">Mobile:</td>
+              <td style="padding:6px; border-bottom:1px dotted #000;">${ownermobileNumber}</td>
+            </tr>
+            <tr>
+              <td style="padding:6px; font-weight:700;">Signature:</td>
+              <td style="padding:6px;">Verified through OTP</b></td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </div>
+`;
+  const closeModal = () => {
+    setShowTermsPopupOwner(false);
+  };
+  const uploadSelfDeclaration = async () => {
+    setLoader(true);
+    const Chb = [{
+      ...getModalData,
+      applicationNo: "CHB-0001",
+      tenantId: tenantId
+    }];
+    try {
+      var _result$filestoreIds$;
+      setIsUploading(true);
+      let result = await Digit.PaymentService.generatePdf(Digit.ULBService.getStateId(), {
+        Chb: Chb
+      }, "communityhallowner");
+      console.log(result, "RESULT");
+      setLoader(false);
+      if ((result === null || result === void 0 ? void 0 : (_result$filestoreIds$ = result.filestoreIds[0]) === null || _result$filestoreIds$ === void 0 ? void 0 : _result$filestoreIds$.length) > 0) {
+        alert("File Uploaded Successfully");
+        sessionStorage.setItem("CitizenConsentdocFilestoreidCHB", result === null || result === void 0 ? void 0 : result.filestoreIds[0]);
+        setIsFileUploaded(true);
+      } else {
+        alert("File Upload Failed");
       }
-    })
-  }), errors.startDate && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.startDate.message))), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_END_DATE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "50%"
-    },
-    className: "field"
-  }, /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "endDate",
-    render: props => /*#__PURE__*/React.createElement(TextInput, {
-      style: {
-        marginBottom: 0
-      },
-      type: "date",
-      className: "form-field",
-      value: props.value,
-      min: startDate ? new Date(new Date(startDate).getTime() + 24 * 60 * 60 * 1000).toISOString().split("T")[0] : new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split("T")[0],
-      onChange: e => {
-        props.onChange(e.target.value);
-      },
-      onBlur: e => {
-        props.onBlur(e);
-      },
-      disabled: !startDate
-    })
-  }))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("HALL_CODE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
+    } catch (error) {
+      alert("Error Uploading PDF:", error);
+      setLoader(false);
+    } finally {
+      setLoader(false);
+      setIsUploading(false);
     }
-  }, "*")), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "hallCode",
-    rules: {
-      required: t("HALL_CODE_REQ")
+  };
+  const modalStyles = {
+    modal: {
+      width: "100%",
+      height: "100%",
+      top: "0",
+      position: "relative",
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
     },
-    render: props => /*#__PURE__*/React.createElement(Dropdown, {
-      style: {
-        marginBottom: 0
-      },
-      className: "form-field",
-      select: e => {
-        console.log("e", e);
-        props.onChange(e);
-        slotsSearch(e);
-        setShowInfo(true);
-      },
-      selected: props.value,
-      option: getHallCodes,
-      optionKey: "HallCode"
-    })
-  }), errors.hallCode && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.hallCode.message)), (getSlots === null || getSlots === void 0 ? void 0 : getSlots.length) > 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "20px",
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("AVAILABLE_SLOTS"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "slots",
-    rules: {
-      validate: value => {
-        if (!value || value.length === 0) {
-          return t("PLEASE_SELECT_AT_LEAST_ONE_SLOT");
-        }
-        return true;
-      }
+    modalOverlay: {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.7)"
     },
-    render: field => /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-        gap: "16px",
-        marginTop: "20px",
-        width: "50%"
-      }
-    }, getSlots === null || getSlots === void 0 ? void 0 : getSlots.map((slot, idx) => {
-      var _field$value, _slot$slotStaus;
-      const slotKey = `${slot.hallCode}-${slot.bookingDate}-${slot.fromTime || ""}-${slot.toTime || ""}`;
-      const isChecked = (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.some(s => s.hallCode === slot.hallCode && s.bookingDate === slot.bookingDate && s.fromTime === slot.fromTime && s.toTime === slot.toTime);
-      const isAvailable = ((_slot$slotStaus = slot.slotStaus) === null || _slot$slotStaus === void 0 ? void 0 : _slot$slotStaus.toLowerCase()) === "available";
-      return /*#__PURE__*/React.createElement("label", {
-        key: slotKey,
-        style: {
-          border: "1px solid #ccc",
-          borderRadius: "8px",
-          padding: "12px",
-          backgroundColor: isAvailable ? "#e6ffed" : "#ffe6e6",
-          cursor: isAvailable ? "pointer" : "not-allowed",
-          opacity: isAvailable ? 1 : 0.6,
-          flexDirection: "column",
-          gap: "6px"
-        }
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "checkbox",
-        checked: isChecked,
-        disabled: !isAvailable,
-        onChange: e => {
-          if (!isAvailable) return;
-          if (e.target.checked) {
-            field.onChange([...(field.value || []), slot]);
-          } else {
-            field.onChange((field.value || []).filter(s => !(s.hallCode === slot.hallCode && s.bookingDate === slot.bookingDate && s.fromTime === slot.fromTime && s.toTime === slot.toTime)));
-          }
-        }
-      }), /*#__PURE__*/React.createElement("span", {
-        style: {
-          marginLeft: "10px"
-        }
-      }, slot.bookingDate, " (", slot.hallCode, ") \u2013", " ", /*#__PURE__*/React.createElement("span", {
-        style: {
-          color: slot.slotStaus === "AVAILABLE" ? "green" : "red",
-          fontWeight: "bold"
-        }
-      }, slot.slotStaus ? slot.slotStaus.charAt(0).toUpperCase() + slot.slotStaus.slice(1).toLowerCase() : "")));
-    }))
-  }), errors.slots && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.slots.message)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: showInfo ? "block" : "none"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "20px",
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_PURPOSE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "purpose",
-    defaultValue: null,
-    rules: {
-      required: t("CHB_PURPOSE_REQUIRED")
+    modalContent: {
+      backgroundColor: "#FFFFFF",
+      padding: "2rem",
+      borderRadius: "0.5rem",
+      maxWidth: "800px",
+      margin: "auto",
+      fontFamily: "Roboto, serif",
+      overflowX: "hidden",
+      textAlign: "justify",
+      boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
+      maxHeight: "80vh",
+      overflowY: "auto",
+      lineHeight: "2"
     },
-    render: props => {
-      var _CHBPurpose$CHB;
-      return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
-        className: "form-field",
-        select: props.onChange,
-        selected: props.value,
-        option: CHBPurpose === null || CHBPurpose === void 0 ? void 0 : (_CHBPurpose$CHB = CHBPurpose.CHB) === null || _CHBPurpose$CHB === void 0 ? void 0 : _CHBPurpose$CHB.Purpose,
-        optionKey: "name"
-      });
-    }
-  }), errors.purpose && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.purpose.message)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_SPECIAL_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "specialCategory",
-    defaultValue: null,
-    rules: {
-      required: t("CHB_SPECIAL_CATEGORY_REQUIRED")
+    heading: {
+      textAlign: "center",
+      fontWeight: "bold",
+      marginBottom: "10px"
     },
-    render: props => {
-      var _SpecialCategory$CHB;
-      return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
-        className: "form-field",
-        select: props.onChange,
-        selected: props.value,
-        option: SpecialCategory === null || SpecialCategory === void 0 ? void 0 : (_SpecialCategory$CHB = SpecialCategory.CHB) === null || _SpecialCategory$CHB === void 0 ? void 0 : _SpecialCategory$CHB.SpecialCategory,
-        optionKey: "name"
-      });
-    }
-  }), errors.specialCategory && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.specialCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
+    subheading: {
+      textAlign: "center",
+      fontWeight: "bold",
       marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
-    className: "card-label-smaller"
-  }, t("CHB_PURPOSE_DESCRIPTION"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      width: "50%"
-    }
-  }, /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "purposeDescription",
-    defaultValue: "",
-    rules: {
-      required: t("CHB_PURPOSE_DESCRIPTION_REQUIRED"),
-      minLength: {
-        value: 5,
-        message: t("CHB_PURPOSE_DESCRIPTION_REQUIRED_MIN")
-      }
     },
-    render: props => /*#__PURE__*/React.createElement(TextArea, {
-      style: {
-        marginBottom: 0,
-        marginTop: 0
-      },
-      type: "textarea",
-      value: props.value,
-      onChange: e => {
-        props.onChange(e.target.value);
-      },
-      onBlur: e => {
-        props.onBlur(e);
-      }
-    })
-  }), errors.purposeDescription && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.purposeDescription.message))), !isCitizen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "20px",
-      width: "50%"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CHB_DISCOUNT_AMOUNT")}`), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "discountAmount",
-    render: props => {
-      var _errors$name;
-      return /*#__PURE__*/React.createElement(TextInput, {
-        type: "number",
-        style: {
-          marginBottom: 0,
-          width: "100%"
-        },
-        value: props.value,
-        error: errors === null || errors === void 0 ? void 0 : (_errors$name = errors.name) === null || _errors$name === void 0 ? void 0 : _errors$name.message,
-        onChange: e => {
-          props.onChange(e.target.value);
-        },
-        onBlur: e => {
-          props.onBlur(e);
-        },
-        t: t
-      });
+    rightAlignedText: {
+      textAlign: "right",
+      whiteSpace: "pre-wrap",
+      wordWrap: "break-word",
+      fontFamily: "Roboto, serif",
+      lineHeight: "2"
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+    isOpen: showTermsPopupOwner,
+    onRequestClose: closeModal,
+    contentLabel: "Self-Declaration",
     style: {
-      marginBottom: "20px"
+      modal: modalStyles.modal,
+      overlay: modalStyles.modalOverlay,
+      content: modalStyles.modalContent
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_DISCOUNT_REASON"), " ", /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "red"
+      whiteSpace: "pre-wrap",
+      wordWrap: "break-word",
+      textAlign: "justify",
+      fontFamily: "Roboto, serif"
     }
-  }, "*")), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "reason",
-    defaultValue: null,
-    render: props => {
-      var _CHBReason$CHB2;
-      return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
-        className: "form-field",
-        select: props.onChange,
-        selected: props.value,
-        option: CHBReason === null || CHBReason === void 0 ? void 0 : (_CHBReason$CHB2 = CHBReason.CHB) === null || _CHBReason$CHB2 === void 0 ? void 0 : _CHBReason$CHB2.DiscountReason,
-        optionKey: "reasonName"
-      });
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: selfdeclarationform
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      alignItems: "center",
-      gap: "10px",
-      cursor: "pointer"
-    }
-  }, /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "termsAccepted",
-    rules: {
-      required: t("PLEASE_ACCEPT_TERMS_CONDITIONS")
-    },
-    render: props => /*#__PURE__*/React.createElement("input", {
-      id: "termsAccepted",
-      type: "checkbox",
-      checked: props.value || false,
-      onChange: e => {
-        props.onChange(e.target.checked);
-        console.log("cal", e.target.checked);
-        if (e.target.checked) setShowTermsPopup(true);
-      },
-      style: {
-        width: "18px",
-        height: "18px",
-        cursor: "pointer"
-      }
-    })
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "termsAccepted",
-    style: {
-      cursor: "pointer",
-      color: "#007bff",
-      textDecoration: "underline",
-      margin: 0
+      justifyContent: "flex-end"
     }
-  }, t("CHB_SELF_LABEL"))), errors.termsAccepted && /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("BPA_CLOSE"),
+    onSubmit: closeModal
+  })), /*#__PURE__*/React.createElement("br", null), !isCitizenDeclared && /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "red"
+      display: "flex",
+      justifyContent: "flex-end"
     }
-  }, errors.termsAccepted.message))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
-    label: "Next",
-    submit: "submit"
-  }))), showTermsPopup && /*#__PURE__*/React.createElement(CitizenConsent, {
-    showTermsPopupOwner: showTermsPopup,
-    setShowTermsPopupOwner: setShowTermsPopup,
-    tenantId: tenantId
-  }), (CHBReasonLoading || CHBLocationLoading || CHBLoading || CHBPurposeLoading || CHBSpecialCategoryLoading || CHBHallCodeLoading || loader) && /*#__PURE__*/React.createElement(Loader, {
+  }, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("BPA_UPLOAD"),
+    onSubmit: uploadSelfDeclaration,
+    disabled: isUploading || isFileUploaded
+  })))), loader && /*#__PURE__*/React.createElement(Loader, {
     page: true
   }));
 };
 
-const NewADSStepFormOne = ({
-  config,
-  onGoNext,
-  onBackClick
-}) => {
-  const dispatch = useDispatch();
-  const {
-    t
-  } = useTranslation();
-  const [showToast, setShowToast] = useState(false);
-  const [error, setError] = useState("");
-  const currentStepData = useSelector(function (state) {
-    return state.chb.CHBApplicationFormReducer.formData;
-  });
-  function goNext(data) {
-    console.log("data aa rea", data);
-    dispatch(UPDATE_CHBApplication_FORM(config.key, data));
-    onGoNext();
-  }
-  function onGoBack(data) {
-    onBackClick(config.key, data);
-  }
-  const closeToast = () => {
-    setShowToast(false);
-    setError("");
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CHBCitizenSecond, {
-    onGoBack: onGoBack,
-    goNext: goNext,
-    currentStepData: currentStepData,
-    t: t
-  }), showToast && /*#__PURE__*/React.createElement(Toast, {
-    isDleteBtn: true,
-    error: true,
-    label: error,
-    onClose: closeToast
-  }));
-};
-
 const CHBCitizenDetailsNew = ({
   t,
   goNext,
@@ -47666,13 +47607,16 @@ const CHBCitizenDetailsNew = ({
   const stateId = Digit.ULBService.getStateId();
   const user = Digit.UserService.getUser();
   const [loader, setLoader] = useState(false);
+  const [showTermsPopup, setShowTermsPopup] = useState(false);
+  const [getModalData, setModalData] = useState();
   const {
     control,
     handleSubmit,
     setValue,
     formState: {
       errors
-    }
+    },
+    getValues
   } = useForm({
     defaultValues: {
       name: isCitizen && (user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : _user$info.name) || "",
@@ -47683,12 +47627,16 @@ const CHBCitizenDetailsNew = ({
   });
   const onSubmit = async data => {
     var _currentStepData$venu, _currentStepData$venu2;
-    setLoader(true);
+    const isCitizenDeclared = sessionStorage.getItem("CitizenConsentdocFilestoreidCHB");
     if (currentStepData !== null && currentStepData !== void 0 && (_currentStepData$venu = currentStepData.venueDetails) !== null && _currentStepData$venu !== void 0 && (_currentStepData$venu2 = _currentStepData$venu[0]) !== null && _currentStepData$venu2 !== void 0 && _currentStepData$venu2.bookingNo) {
       goNext(currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.venueDetails);
     } else {
       var _currentStepData$owne, _user$info4;
       const baseApplication = (currentStepData === null || currentStepData === void 0 ? void 0 : (_currentStepData$owne = currentStepData.ownerDetails) === null || _currentStepData$owne === void 0 ? void 0 : _currentStepData$owne.hallsBookingApplication) || {};
+      if (!isCitizenDeclared) {
+        alert("Please upload Self Certificate");
+        return;
+      }
       const applicantDetail = {
         tenantId: tenantId,
         applicantName: data === null || data === void 0 ? void 0 : data.name,
@@ -47696,6 +47644,10 @@ const CHBCitizenDetailsNew = ({
         applicantEmailId: data === null || data === void 0 ? void 0 : data.emailId,
         type: user === null || user === void 0 ? void 0 : (_user$info4 = user.info) === null || _user$info4 === void 0 ? void 0 : _user$info4.type
       };
+      const additionalDetails = {
+        ...(baseApplication === null || baseApplication === void 0 ? void 0 : baseApplication.additionalDetails),
+        disImage: isCitizenDeclared
+      };
       const owners = [{
         name: data === null || data === void 0 ? void 0 : data.name,
         mobileNumber: data === null || data === void 0 ? void 0 : data.mobileNumber,
@@ -47710,9 +47662,12 @@ const CHBCitizenDetailsNew = ({
           ...baseApplication,
           applicantDetail,
           address,
-          owners
+          owners,
+          additionalDetails
         }
       };
+      console.log("checkpayload", payload);
+      setLoader(true);
       try {
         const response = await Digit.CHBServices.create(payload);
         setLoader(false);
@@ -47733,6 +47688,29 @@ const CHBCitizenDetailsNew = ({
       setValue("name", formattedData === null || formattedData === void 0 ? void 0 : (_formattedData$applic3 = formattedData.applicantDetail) === null || _formattedData$applic3 === void 0 ? void 0 : _formattedData$applic3.applicantName);
     }
   }, [currentStepData, setValue]);
+  const handleModalData = e => {
+    var _currentStepData$owne2, _getValues, _getValues2, _getValues3, _getValues4, _mapData$purpose, _mapData$bookingSlotD, _mapData$bookingSlotD2, _mapData$bookingSlotD3, _mapData$bookingSlotD4, _mapData$bookingSlotD5;
+    console.log("currentStepData", currentStepData);
+    console.log("getvalues", getValues());
+    const mapData = currentStepData === null || currentStepData === void 0 ? void 0 : (_currentStepData$owne2 = currentStepData.ownerDetails) === null || _currentStepData$owne2 === void 0 ? void 0 : _currentStepData$owne2.hallsBookingApplication;
+    const payload = {
+      address: (_getValues = getValues()) === null || _getValues === void 0 ? void 0 : _getValues.address,
+      emailId: (_getValues2 = getValues()) === null || _getValues2 === void 0 ? void 0 : _getValues2.emailId,
+      mobileNumber: (_getValues3 = getValues()) === null || _getValues3 === void 0 ? void 0 : _getValues3.mobileNumber,
+      name: (_getValues4 = getValues()) === null || _getValues4 === void 0 ? void 0 : _getValues4.name,
+      communityHallName: mapData === null || mapData === void 0 ? void 0 : mapData.communityHallName,
+      purpose: mapData === null || mapData === void 0 ? void 0 : (_mapData$purpose = mapData.purpose) === null || _mapData$purpose === void 0 ? void 0 : _mapData$purpose.purpose,
+      days: mapData === null || mapData === void 0 ? void 0 : (_mapData$bookingSlotD = mapData.bookingSlotDetails) === null || _mapData$bookingSlotD === void 0 ? void 0 : _mapData$bookingSlotD.length,
+      bookingDate: mapData === null || mapData === void 0 ? void 0 : (_mapData$bookingSlotD2 = mapData.bookingSlotDetails) === null || _mapData$bookingSlotD2 === void 0 ? void 0 : (_mapData$bookingSlotD3 = _mapData$bookingSlotD2[0]) === null || _mapData$bookingSlotD3 === void 0 ? void 0 : _mapData$bookingSlotD3.bookingDate,
+      bookingEndDate: mapData === null || mapData === void 0 ? void 0 : (_mapData$bookingSlotD4 = mapData.bookingSlotDetails) === null || _mapData$bookingSlotD4 === void 0 ? void 0 : (_mapData$bookingSlotD5 = _mapData$bookingSlotD4.at(-1)) === null || _mapData$bookingSlotD5 === void 0 ? void 0 : _mapData$bookingSlotD5.bookingEndDate,
+      ulbName: mapData === null || mapData === void 0 ? void 0 : mapData.tenantId,
+      security: 5000,
+      rent: mapData === null || mapData === void 0 ? void 0 : mapData.amount
+    };
+    console.log("payload", payload);
+    setModalData(payload);
+    if (e.target.checked) setShowTermsPopup(true);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement("div", {
@@ -47880,7 +47858,46 @@ const CHBCitizenDetailsNew = ({
     style: {
       color: "red"
     }
-  }, errors.address.message))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
+  }, errors.address.message)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "termsAccepted",
+    rules: {
+      required: t("PLEASE_ACCEPT_TERMS_CONDITIONS")
+    },
+    render: props => /*#__PURE__*/React.createElement("input", {
+      id: "termsAccepted",
+      type: "checkbox",
+      checked: props.value || false,
+      onChange: e => {
+        props.onChange(e.target.checked);
+        handleModalData(e);
+      },
+      style: {
+        width: "18px",
+        height: "18px",
+        cursor: "pointer"
+      }
+    })
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "termsAccepted",
+    style: {
+      cursor: "pointer",
+      color: "#007bff",
+      textDecoration: "underline",
+      margin: 0
+    }
+  }, t("CHB_SELF_LABEL"))), errors.termsAccepted && /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "red"
+    }
+  }, errors.termsAccepted.message)), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
     style: {
       background: " white",
       color: "black",
@@ -47892,7 +47909,12 @@ const CHBCitizenDetailsNew = ({
   }), /*#__PURE__*/React.createElement(SubmitBar, {
     label: "Next",
     submit: "submit"
-  }))), loader && /*#__PURE__*/React.createElement(Loader, {
+  }))), showTermsPopup && /*#__PURE__*/React.createElement(CitizenConsent, {
+    showTermsPopupOwner: showTermsPopup,
+    setShowTermsPopupOwner: setShowTermsPopup,
+    getModalData: getModalData,
+    tenantId: tenantId
+  }), loader && /*#__PURE__*/React.createElement(Loader, {
     page: true
   }));
 };