@happychef/reservation-sidebar 1.0.0 → 2.0.0

package/dist/index.js

@@ -621,11 +621,11 @@ var require_moment = __commonJS({
         }
       }
       function toInt(argumentForCoercion) {
-        var coercedNumber = +argumentForCoercion, value = 0;
+        var coercedNumber = +argumentForCoercion, value2 = 0;
         if (coercedNumber !== 0 && isFinite(coercedNumber)) {
-          value = absFloor(coercedNumber);
+          value2 = absFloor(coercedNumber);
         }
-        return value;
+        return value2;
       }
       var tokens = {};
       function addParseToken(token2, callback) {
@@ -694,9 +694,9 @@ var require_moment = __commonJS({
         return isLeapYear(this.year());
       }
       function makeGetSet(unit, keepTime) {
-        return function(value) {
-          if (value != null) {
-            set$1(this, unit, value);
+        return function(value2) {
+          if (value2 != null) {
+            set$1(this, unit, value2);
             hooks.updateOffset(this, keepTime);
             return this;
           } else {
@@ -730,24 +730,24 @@ var require_moment = __commonJS({
             return NaN;
         }
       }
-      function set$1(mom, unit, value) {
+      function set$1(mom, unit, value2) {
         var d, isUTC, year, month, date;
-        if (!mom.isValid() || isNaN(value)) {
+        if (!mom.isValid() || isNaN(value2)) {
           return;
         }
         d = mom._d;
         isUTC = mom._isUTC;
         switch (unit) {
           case "Milliseconds":
-            return void (isUTC ? d.setUTCMilliseconds(value) : d.setMilliseconds(value));
+            return void (isUTC ? d.setUTCMilliseconds(value2) : d.setMilliseconds(value2));
           case "Seconds":
-            return void (isUTC ? d.setUTCSeconds(value) : d.setSeconds(value));
+            return void (isUTC ? d.setUTCSeconds(value2) : d.setSeconds(value2));
           case "Minutes":
-            return void (isUTC ? d.setUTCMinutes(value) : d.setMinutes(value));
+            return void (isUTC ? d.setUTCMinutes(value2) : d.setMinutes(value2));
           case "Hours":
-            return void (isUTC ? d.setUTCHours(value) : d.setHours(value));
+            return void (isUTC ? d.setUTCHours(value2) : d.setHours(value2));
           case "Date":
-            return void (isUTC ? d.setUTCDate(value) : d.setDate(value));
+            return void (isUTC ? d.setUTCDate(value2) : d.setDate(value2));
           // case 'Day': // Not real
           //    return void (isUTC ? d.setUTCDay(value) : d.setDay(value));
           // case 'Month': // Not used because we need to pass two variables
@@ -758,7 +758,7 @@ var require_moment = __commonJS({
           default:
             return;
         }
-        year = value;
+        year = value2;
         month = mom.month();
         date = mom.date();
         date = date === 29 && month === 1 && !isLeapYear(year) ? 28 : date;
@@ -771,7 +771,7 @@ var require_moment = __commonJS({
         }
         return this;
       }
-      function stringSet(units, value) {
+      function stringSet(units, value2) {
         if (typeof units === "object") {
           units = normalizeObjectUnits(units);
           var prioritized = getPrioritizedUnits(units), i, prioritizedLen = prioritized.length;
@@ -781,7 +781,7 @@ var require_moment = __commonJS({
         } else {
           units = normalizeUnits(units);
           if (isFunction(this[units])) {
-            return this[units](value);
+            return this[units](value2);
           }
         }
         return this;
@@ -930,28 +930,28 @@ var require_moment = __commonJS({
           }
         }
       }
-      function setMonth(mom, value) {
+      function setMonth(mom, value2) {
         if (!mom.isValid()) {
           return mom;
         }
-        if (typeof value === "string") {
-          if (/^\d+$/.test(value)) {
-            value = toInt(value);
+        if (typeof value2 === "string") {
+          if (/^\d+$/.test(value2)) {
+            value2 = toInt(value2);
           } else {
-            value = mom.localeData().monthsParse(value);
-            if (!isNumber(value)) {
+            value2 = mom.localeData().monthsParse(value2);
+            if (!isNumber(value2)) {
               return mom;
             }
           }
         }
-        var month = value, date = mom.date();
+        var month = value2, date = mom.date();
         date = date < 29 ? date : Math.min(date, daysInMonth(mom.year(), month));
         void (mom._isUTC ? mom._d.setUTCMonth(month, date) : mom._d.setMonth(month, date));
         return mom;
       }
-      function getSetMonth(value) {
-        if (value != null) {
-          setMonth(this, value);
+      function getSetMonth(value2) {
+        if (value2 != null) {
+          setMonth(this, value2);
           hooks.updateOffset(this, true);
           return this;
         } else {
@@ -3728,18 +3728,18 @@ var require_moment = __commonJS({
         data.years = mathAbs(data.years);
         return this;
       }
-      function addSubtract$1(duration, input, value, direction) {
-        var other = createDuration(input, value);
+      function addSubtract$1(duration, input, value2, direction) {
+        var other = createDuration(input, value2);
         duration._milliseconds += direction * other._milliseconds;
         duration._days += direction * other._days;
         duration._months += direction * other._months;
         return duration._bubble();
       }
-      function add$1(input, value) {
-        return addSubtract$1(this, input, value, 1);
+      function add$1(input, value2) {
+        return addSubtract$1(this, input, value2, 1);
       }
-      function subtract$1(input, value) {
-        return addSubtract$1(this, input, value, -1);
+      function subtract$1(input, value2) {
+        return addSubtract$1(this, input, value2, -1);
       }
       function absCeil(number) {
         if (number < 0) {
@@ -4163,7 +4163,7 @@ function styleInject(css, { insertAt } = {}) {
 // src/components/ReservationStepOne/css/reservationMode.css
 styleInject(".new-reservation-page .form-row .field-label {\n  display: block;\n  margin-bottom: 6px;\n  font-weight: 600;\n}\n.new-reservation-page .form-row .reservation-mode-buttons {\n  margin-top: 0;\n}\n.new-reservation-page .reservation-mode-buttons {\n  display: flex;\n  gap: 10px;\n  margin-top: 10px;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 1;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius);\n  background-color: var(--color-white);\n  cursor: pointer;\n  font-size: 1rem;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n  background-color: var(--color-blue);\n  color: var(--color-white);\n}\n.new-reservation-page .reservation-modes-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 -5px;\n  width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 0 0 calc(50% - 10px);\n  margin: 5px;\n  padding: 10px;\n  box-sizing: border-box;\n  text-align: center;\n  border: 1px solid #ccc;\n  background: #f7f7f7;\n  cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button:nth-child(3) {\n  flex: 0 0 100%;\n}\n.new-reservation-page .reservation-modes-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 -5px;\n  width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 0 0 calc(50% - 10px);\n  margin: 5px;\n  padding: 10px;\n  box-sizing: border-box;\n  text-align: center;\n  border: 1px solid #ccc;\n  background: #f7f7f7;\n  cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n  background-color: var(--color-blue);\n  color: var(--color-white);\n}\n.new-reservation-page .unlimited-mode-warning {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  margin: 15px 0;\n  padding: 12px 15px;\n  background-color: #fff3cd;\n  border: 1px solid #ffeaa7;\n  border-radius: var(--border-radius, 4px);\n  border-left: 4px solid #e67e22;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n.new-reservation-page .unlimited-mode-warning .warning-icon {\n  color: #e67e22;\n  font-size: 1.1rem;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n.new-reservation-page .unlimited-mode-warning .warning-text {\n  color: #856404;\n  margin: 0;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .unlimited-mode-warning {\n    margin: 10px 0;\n    padding: 10px 12px;\n    font-size: 0.85rem;\n  }\n  .new-reservation-page .unlimited-mode-warning .warning-icon {\n    font-size: 1rem;\n  }\n}\n.new-reservation-page .reservation-sidebar-component {\n  position: fixed;\n  top: 0;\n  right: -400px;\n  width: 400px;\n  height: 100%;\n  background-color: #fff;\n  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n  z-index: var(--z-index-sidebar-reservation);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n  right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n  padding: 20px;\n  padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n  color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n  margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n  margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  cursor: pointer;\n  z-index: var(--z-index-modal) !important;\n  transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n  background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n  position: relative;\n  top: 2px;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .reservation-sidebar-component {\n    width: 100%;\n  }\n}\n.new-reservation-page .sidebar-section-personeel {\n  margin-bottom: 10px;\n}\n");
 
-// src/components/ReservationStepOne/ReservationStepOne.tsx
+// src/components/ReservationStepOne/ReservationStepOne.js
 var ReservationStepOne = ({
   formData,
   errors,
@@ -4209,7 +4209,7 @@ var ReservationStepOne = ({
 };
 var ReservationStepOne_default = ReservationStepOne;
 
-// src/utils/translations.ts
+// src/utils/translations.js
 var getPreferredLanguage = () => {
   return localStorage.getItem("preferredLanguage") || "nl";
 };
@@ -4256,13 +4256,13 @@ var translations_default = {
 // src/components/FormField/formField.css
 styleInject(".new-reservation-page .form-group .magic-tooltip {\n  transition: transform 0.2s ease;\n  transform-origin: bottom right;\n}\n.new-reservation-page .form-group .magic-tooltip:hover {\n  transform: scale(1.05);\n}\n");
 
-// src/components/FormField/FormField.tsx
+// src/components/FormField/FormField.js
 var FormField = ({
   label,
   name,
   type = "text",
-  icon: Icon,
-  value,
+  icon,
+  value: value2,
   onChange,
   onBlur,
   error,
@@ -4270,16 +4270,16 @@ var FormField = ({
   halfWidth,
   options = [],
   selectPlaceholder,
-  rightIcon,
-  onRightIconClick,
+  rightIcon: rightIcon2,
+  onRightIconClick: onRightIconClick2,
   tooltipContent
 }) => {
   const t = getSection(translations_default, "formField");
   const selectPlaceholderText = selectPlaceholder || t.selectPlaceholder;
   const [showTooltip, setShowTooltip] = React4.useState(false);
-  const tooltipRef = React4.useRef(null);
-  const timerRef = React4.useRef(null);
-  const RightIconComponent = rightIcon;
+  const tooltipRef = React4.useRef < HTMLDivElement > null;
+  const timerRef = React4.useRef < NodeJS.Timeout | null > null;
+  const RightIconComponent = rightIcon2;
   React4.useEffect(() => {
     const handleClickOutside = (e) => {
       if (tooltipRef.current && !tooltipRef.current.contains(e.target)) {
@@ -4292,7 +4292,7 @@ var FormField = ({
   }, [showTooltip]);
   const baseControlProps = {
     name,
-    value,
+    value: value2,
     onChange,
     onBlur,
     "aria-label": label,
@@ -4316,7 +4316,7 @@ var FormField = ({
       "div",
       {
         className: "magic-wand-container",
-        onClick: onRightIconClick,
+        onClick: onRightIconClick2,
         onMouseEnter: () => {
           if (timerRef.current) clearTimeout(timerRef.current);
           setShowTooltip(true);
@@ -4347,13 +4347,13 @@ var FormField = ({
           style: {
             position: "absolute",
             bottom: "100%",
-            right: 0,
+            right,
             backgroundColor: "#fff",
             color: "#333",
             borderRadius: "8px",
             fontSize: "0.9rem",
             boxShadow: "0px 4px 10px rgba(0,0,0,0.15)",
-            zIndex: 10,
+            zIndex,
             marginBottom: "8px",
             minWidth: "220px",
             overflow: "hidden"
@@ -4365,13 +4365,13 @@ var FormField = ({
             className: "lottie-container",
             style: {
               position: "absolute",
-              top: 0,
+              top,
               right: "1px",
               width: "calc(100% + 30px)",
               height: "100%",
               marginRight: "-100px",
               pointerEvents: "none",
-              zIndex: 0
+              zIndex
             }
           },
           /* @__PURE__ */ React4__default.default.createElement(
@@ -4383,7 +4383,7 @@ var FormField = ({
             }
           )
         ),
-        /* @__PURE__ */ React4__default.default.createElement("div", { style: { position: "relative", zIndex: 1, padding: "12px 20px" } }, /* @__PURE__ */ React4__default.default.createElement(
+        /* @__PURE__ */ React4__default.default.createElement("div", { style: { position: "relative", zIndex, padding: "12px 20px" } }, /* @__PURE__ */ React4__default.default.createElement(
           "div",
           {
             style: {
@@ -4423,7 +4423,7 @@ var FormField = ({
 };
 var FormField_default = FormField;
 
-// src/components/ReservationStepTwo/ReservationStepTwo.tsx
+// src/components/ReservationStepTwo/ReservationStepTwo.js
 var import_moment = __toESM(require_moment());
 __toESM(require_nl());
 var useApi = () => {
@@ -4453,7 +4453,7 @@ var useApi = () => {
       const token = getJwtToken();
       return axios__default.default({
         method,
-        url: endpoint,
+        url,
         data,
         ...config,
         headers: {
@@ -4608,7 +4608,7 @@ var translations_default2 = {
 // src/components/ReservationStepTwo/reservationStepTwo.css
 styleInject(".new-reservation-page .name-fields {\n  display: flex;\n  gap: 20px;\n}\n.input-container .form-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  border: #ccc 1px solid;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  text-align: left;\n  border-radius: 5px;\n  font-size: 16px;\n}\n");
 
-// src/components/ReservationStepTwo/ReservationStepTwo.tsx
+// src/components/ReservationStepTwo/ReservationStepTwo.js
 var ReservationStepTwo = ({
   formData,
   errors,
@@ -4671,26 +4671,14 @@ var ReservationStepTwo = ({
   React4.useEffect(() => {
     tryAutofill();
   }, [formData.email, formData.phone]);
-  const applyAutofill = () => {
-    if (!pendingAutofill) return;
-    setFormData((prev) => ({
-      ...prev,
-      firstName: pendingAutofill.firstName,
-      lastName: pendingAutofill.lastName,
-      email: pendingAutofill.email,
-      phone: pendingAutofill.phone
-    }));
-    setHasAutofilled(true);
-    setPendingAutofill(null);
-  };
   const magicProps = React4.useMemo(() => {
     if (!pendingAutofill)
       return { email: {}, phone: {} };
     const emailActive = pendingAutofill.sources.includes("email") && (formData.email || "").trim().toLowerCase() === pendingAutofill.email.trim().toLowerCase();
     const phoneActive = pendingAutofill.sources.includes("phone") && (formData.phone || "").trim() === pendingAutofill.phone.trim();
     const common = {
-      rightIcon: fa.FaMagic,
-      onRightIconClick: applyAutofill
+      rightIcon,
+      onRightIconClick
     };
     return {
       email: emailActive ? {
@@ -4907,7 +4895,7 @@ var translations_default3 = {
 // src/components/ReservationSummary/reservationSummary.css
 styleInject(".new-reservation-page .reservation-sidebar-component .reservation-summary .modal-title {\n  margin-top: 0;\n  margin-bottom: 20px;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details {\n  list-style-type: none;\n  padding: 0;\n  margin: 0 0 20px 0;\n  width: 100%;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li {\n  margin-bottom: 10px;\n  font-size: 15px;\n  align-items: left;\n  text-align: left;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li strong {\n  font-weight: bold;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary {\n  align-items: left;\n}\n");
 
-// src/components/ReservationSummary/ReservationSummary.tsx
+// src/components/ReservationSummary/ReservationSummary.js
 var ReservationSummary = ({
   formData,
   onNewReservation
@@ -4954,7 +4942,7 @@ var translations_default4 = {
 // src/components/GiftcardSelection/giftcardSelection.css
 styleInject(".new-reservation-page .giftcard-selection {\n  margin-bottom: 20px;\n}\n.new-reservation-page .giftcard-options {\n  display: flex;\n  gap: 20px;\n  margin: 10px 0;\n}\n.new-reservation-page .giftcard-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.new-reservation-page .form-label {\n  font-weight: 500;\n  margin-bottom: 8px;\n  display: block;\n}\n.new-reservation-page .giftcard-option input[type=radio] {\n  margin: 0;\n  cursor: pointer;\n}\n.new-reservation-page .giftcard-option label {\n  cursor: pointer;\n}\n");
 
-// src/components/GiftcardSelection/GiftcardSelection.tsx
+// src/components/GiftcardSelection/GiftcardSelection.js
 var GiftcardSelection = ({
   restaurantData,
   formData,
@@ -4978,7 +4966,7 @@ var GiftcardSelection = ({
     setAvailableGiftcards([...cards]);
   }, [restaurantData]);
   if (!availableGiftcards.length) return null;
-  const options = availableGiftcards.map((card) => ({ value: card, label: card }));
+  const options = availableGiftcards.map((card) => ({ value, label: card }));
   const onChange = (e) => {
     handleChange({ target: { name: "giftcard", value: e.target.value } });
     resetFormDataFields(["date", "time"]);
@@ -5035,7 +5023,7 @@ var translations_default5 = {
 // src/components/ZitplaatsSelection/zitplaatsSelection.css
 styleInject(".new-reservation-page .zitplaats-selection {\n  margin-bottom: 15px;\n}\n.new-reservation-page .zitplaats-selection select {\n  width: 100%;\n  padding: 10px;\n  border-radius: 4px;\n  border: 1px solid #ccc;\n  background-color: white;\n}\n");
 
-// src/components/ZitplaatsSelection/ZitplaatsSelection.tsx
+// src/components/ZitplaatsSelection/ZitplaatsSelection.js
 var ZitplaatsSelection = ({
   restaurantData,
   formData,
@@ -5053,8 +5041,8 @@ var ZitplaatsSelection = ({
     setAvailableZitplaatsen([...set].sort());
   }, [restaurantData]);
   const handleZitplaatsChange = (e) => {
-    const { value } = e.target;
-    handleChange({ target: { name: "zitplaats", value } });
+    const { value: value2 } = e.target;
+    handleChange({ target: { name: "zitplaats", value: value2 } });
     resetFormDataFields(["date", "time", "selectedTableNumbers", "selectedTableIds"]);
   };
   const tableSettings = restaurantData?.["table-settings"] || {};
@@ -5106,9 +5094,9 @@ var translationsReservationSidebar_default = {
 };
 
 // src/styles/reservationSidebar.css
-styleInject(".new-reservation-page .reservation-sidebar-component {\n  position: fixed;\n  top: 0;\n  right: -400px;\n  width: 400px;\n  height: 100%;\n  background-color: #fff;\n  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n  z-index: var(--z-index-sidebar-reservation);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n  right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n  padding: 20px;\n  padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n  color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n  margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n  margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  cursor: pointer;\n  z-index: var(--z-index-modal) !important;\n  transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n  background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n  position: relative;\n  top: 2px;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .reservation-sidebar-component {\n    width: 100%;\n  }\n}\n.new-reservation-page .sidebar-section-personeel {\n  margin-bottom: 10px;\n}\n");
+styleInject(".reservation-sidebar-component {\n  position: fixed;\n  top: 0;\n  right: -400px;\n  width: 400px;\n  height: 100%;\n  background-color: #fff;\n  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n  z-index: var(--z-index-sidebar-reservation);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  transition: right 0.3s ease-in-out;\n}\n.admin-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.reservation-sidebar-component.open {\n  right: 0;\n}\n.reservation-sidebar-content {\n  padding: 20px;\n  padding-top: 60px;\n}\n.close-sidebar-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n.close-sidebar-button svg {\n  color: #000;\n}\n.sidebar-section-one,\n.sidebar-section-two {\n  margin-bottom: 20px;\n}\n.reservation-footer {\n  margin-top: auto;\n}\n.store-reservation-button {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n}\n.open-sidebar-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  cursor: pointer;\n  z-index: var(--z-index-modal) !important;\n  transition: all 0.3s ease;\n}\n.open-sidebar-button:hover {\n  background-color: var(--color-blue-hover-accent) !important;\n}\n.open-sidebar-button svg {\n  position: relative;\n  top: 2px;\n}\n@media screen and (max-width: 480px) {\n  .reservation-sidebar-component {\n    width: 100%;\n  }\n}\n.sidebar-section-personeel {\n  margin-bottom: 10px;\n}\n");
 
-// src/ReservationSidebar.tsx
+// src/ReservationSidebar.js
 var ReservationSidebar = ({
   isOpen,
   onClose,
@@ -5155,7 +5143,7 @@ var ReservationSidebar = ({
         const baseDomain = window.baseDomain || "";
         const [data, personeelData] = await Promise.all([
           api.get(`${baseDomain}api/auth-restaurant/`, {
-            noCache: true
+            noCache
           }),
           api.get(`${baseDomain}api/personeel`, { noCache: true })
         ]);
@@ -5182,7 +5170,7 @@ var ReservationSidebar = ({
   }, [isOpen, api]);
   const handleNewReservationClick = React4.useCallback(() => {
     setFormData({
-      guests: 1,
+      guests,
       date: "",
       time: "",
       firstName: "",
@@ -5194,8 +5182,8 @@ var ReservationSidebar = ({
       personeel: "",
       giftcard: "",
       zitplaats: "",
-      selectedTableNumbers: [],
-      selectedTableIds: [],
+      selectedTableNumbers,
+      selectedTableIds,
       reservationMode: "met_limieten"
     });
     onNewReservation();
@@ -5239,7 +5227,7 @@ var ReservationSidebar = ({
       type: "select",
       options: availablePersoneel.map((p) => {
         const full = `${p.voornaam} ${p.achternaam}`;
-        return { value: full, label: full };
+        return { value, label: full };
       }),
       value: formData.personeel,
       onChange: handleChange,
@@ -5282,7 +5270,7 @@ var ReservationSidebar = ({
 var ReservationSidebar_default = ReservationSidebar;
 
 // src/styles/newReservationAdmin.css
-styleInject(".new-reservation-page .account-manage-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.new-reservation-page .account-manage-container {\n  max-width: 800px;\n  margin: 0 auto;\n}\n.new-reservation-page .account-manage-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n.new-reservation-page .input-container {\n  position: relative;\n}\n.new-reservation-page .input-icon {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  transform: translateY(-50%);\n  color: #6c757d;\n  pointer-events: none;\n}\n.new-reservation-page .input-container input,\n.new-reservation-page .input-container textarea {\n  width: 100%;\n  padding: 10px 10px 10px 35px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  font-size: 1rem;\n  transition: border-color 0.3s ease;\n}\n.new-reservation-page .form-error {\n  color: #dc3545;\n  font-size: 0.9rem;\n  margin-top: 5px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.new-reservation-page .account-manage__button {\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: background-color 0.3s ease;\n}\n");
+styleInject(".account-manage-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.account-manage-container {\n  max-width: 800px;\n  margin: 0 auto;\n}\n.account-manage-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n.input-container {\n  position: relative;\n}\n.input-icon {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  transform: translateY(-50%);\n  color: #6c757d;\n  pointer-events: none;\n}\n.input-container input,\n.input-container textarea {\n  width: 100%;\n  padding: 10px 10px 10px 35px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  font-size: 1rem;\n  transition: border-color 0.3s ease;\n}\n.form-error {\n  color: #dc3545;\n  font-size: 0.9rem;\n  margin-top: 5px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.account-manage__button {\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: background-color 0.3s ease;\n}\n");
 /*! Bundled license information:
 
 moment/moment.js:

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import React4, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import Lottie from 'lottie-react';
-import { FaMagic, FaUser, FaEnvelope, FaPhone, FaInfoCircle, FaTimes } from 'react-icons/fa';
+import { FaUser, FaEnvelope, FaPhone, FaInfoCircle, FaTimes } from 'react-icons/fa';
 import axios from 'axios';
 import moment2 from 'moment-timezone';
 
@@ -612,11 +612,11 @@ var require_moment = __commonJS({
         }
       }
       function toInt(argumentForCoercion) {
-        var coercedNumber = +argumentForCoercion, value = 0;
+        var coercedNumber = +argumentForCoercion, value2 = 0;
         if (coercedNumber !== 0 && isFinite(coercedNumber)) {
-          value = absFloor(coercedNumber);
+          value2 = absFloor(coercedNumber);
         }
-        return value;
+        return value2;
       }
       var tokens = {};
       function addParseToken(token2, callback) {
@@ -685,9 +685,9 @@ var require_moment = __commonJS({
         return isLeapYear(this.year());
       }
       function makeGetSet(unit, keepTime) {
-        return function(value) {
-          if (value != null) {
-            set$1(this, unit, value);
+        return function(value2) {
+          if (value2 != null) {
+            set$1(this, unit, value2);
             hooks.updateOffset(this, keepTime);
             return this;
           } else {
@@ -721,24 +721,24 @@ var require_moment = __commonJS({
             return NaN;
         }
       }
-      function set$1(mom, unit, value) {
+      function set$1(mom, unit, value2) {
         var d, isUTC, year, month, date;
-        if (!mom.isValid() || isNaN(value)) {
+        if (!mom.isValid() || isNaN(value2)) {
           return;
         }
         d = mom._d;
         isUTC = mom._isUTC;
         switch (unit) {
           case "Milliseconds":
-            return void (isUTC ? d.setUTCMilliseconds(value) : d.setMilliseconds(value));
+            return void (isUTC ? d.setUTCMilliseconds(value2) : d.setMilliseconds(value2));
           case "Seconds":
-            return void (isUTC ? d.setUTCSeconds(value) : d.setSeconds(value));
+            return void (isUTC ? d.setUTCSeconds(value2) : d.setSeconds(value2));
           case "Minutes":
-            return void (isUTC ? d.setUTCMinutes(value) : d.setMinutes(value));
+            return void (isUTC ? d.setUTCMinutes(value2) : d.setMinutes(value2));
           case "Hours":
-            return void (isUTC ? d.setUTCHours(value) : d.setHours(value));
+            return void (isUTC ? d.setUTCHours(value2) : d.setHours(value2));
           case "Date":
-            return void (isUTC ? d.setUTCDate(value) : d.setDate(value));
+            return void (isUTC ? d.setUTCDate(value2) : d.setDate(value2));
           // case 'Day': // Not real
           //    return void (isUTC ? d.setUTCDay(value) : d.setDay(value));
           // case 'Month': // Not used because we need to pass two variables
@@ -749,7 +749,7 @@ var require_moment = __commonJS({
           default:
             return;
         }
-        year = value;
+        year = value2;
         month = mom.month();
         date = mom.date();
         date = date === 29 && month === 1 && !isLeapYear(year) ? 28 : date;
@@ -762,7 +762,7 @@ var require_moment = __commonJS({
         }
         return this;
       }
-      function stringSet(units, value) {
+      function stringSet(units, value2) {
         if (typeof units === "object") {
           units = normalizeObjectUnits(units);
           var prioritized = getPrioritizedUnits(units), i, prioritizedLen = prioritized.length;
@@ -772,7 +772,7 @@ var require_moment = __commonJS({
         } else {
           units = normalizeUnits(units);
           if (isFunction(this[units])) {
-            return this[units](value);
+            return this[units](value2);
           }
         }
         return this;
@@ -921,28 +921,28 @@ var require_moment = __commonJS({
           }
         }
       }
-      function setMonth(mom, value) {
+      function setMonth(mom, value2) {
         if (!mom.isValid()) {
           return mom;
         }
-        if (typeof value === "string") {
-          if (/^\d+$/.test(value)) {
-            value = toInt(value);
+        if (typeof value2 === "string") {
+          if (/^\d+$/.test(value2)) {
+            value2 = toInt(value2);
           } else {
-            value = mom.localeData().monthsParse(value);
-            if (!isNumber(value)) {
+            value2 = mom.localeData().monthsParse(value2);
+            if (!isNumber(value2)) {
               return mom;
             }
           }
         }
-        var month = value, date = mom.date();
+        var month = value2, date = mom.date();
         date = date < 29 ? date : Math.min(date, daysInMonth(mom.year(), month));
         void (mom._isUTC ? mom._d.setUTCMonth(month, date) : mom._d.setMonth(month, date));
         return mom;
       }
-      function getSetMonth(value) {
-        if (value != null) {
-          setMonth(this, value);
+      function getSetMonth(value2) {
+        if (value2 != null) {
+          setMonth(this, value2);
           hooks.updateOffset(this, true);
           return this;
         } else {
@@ -3719,18 +3719,18 @@ var require_moment = __commonJS({
         data.years = mathAbs(data.years);
         return this;
       }
-      function addSubtract$1(duration, input, value, direction) {
-        var other = createDuration(input, value);
+      function addSubtract$1(duration, input, value2, direction) {
+        var other = createDuration(input, value2);
         duration._milliseconds += direction * other._milliseconds;
         duration._days += direction * other._days;
         duration._months += direction * other._months;
         return duration._bubble();
       }
-      function add$1(input, value) {
-        return addSubtract$1(this, input, value, 1);
+      function add$1(input, value2) {
+        return addSubtract$1(this, input, value2, 1);
       }
-      function subtract$1(input, value) {
-        return addSubtract$1(this, input, value, -1);
+      function subtract$1(input, value2) {
+        return addSubtract$1(this, input, value2, -1);
       }
       function absCeil(number) {
         if (number < 0) {
@@ -4154,7 +4154,7 @@ function styleInject(css, { insertAt } = {}) {
 // src/components/ReservationStepOne/css/reservationMode.css
 styleInject(".new-reservation-page .form-row .field-label {\n  display: block;\n  margin-bottom: 6px;\n  font-weight: 600;\n}\n.new-reservation-page .form-row .reservation-mode-buttons {\n  margin-top: 0;\n}\n.new-reservation-page .reservation-mode-buttons {\n  display: flex;\n  gap: 10px;\n  margin-top: 10px;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 1;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius);\n  background-color: var(--color-white);\n  cursor: pointer;\n  font-size: 1rem;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n  background-color: var(--color-blue);\n  color: var(--color-white);\n}\n.new-reservation-page .reservation-modes-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 -5px;\n  width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 0 0 calc(50% - 10px);\n  margin: 5px;\n  padding: 10px;\n  box-sizing: border-box;\n  text-align: center;\n  border: 1px solid #ccc;\n  background: #f7f7f7;\n  cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button:nth-child(3) {\n  flex: 0 0 100%;\n}\n.new-reservation-page .reservation-modes-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 -5px;\n  width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 0 0 calc(50% - 10px);\n  margin: 5px;\n  padding: 10px;\n  box-sizing: border-box;\n  text-align: center;\n  border: 1px solid #ccc;\n  background: #f7f7f7;\n  cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n  background-color: var(--color-blue);\n  color: var(--color-white);\n}\n.new-reservation-page .unlimited-mode-warning {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  margin: 15px 0;\n  padding: 12px 15px;\n  background-color: #fff3cd;\n  border: 1px solid #ffeaa7;\n  border-radius: var(--border-radius, 4px);\n  border-left: 4px solid #e67e22;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n.new-reservation-page .unlimited-mode-warning .warning-icon {\n  color: #e67e22;\n  font-size: 1.1rem;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n.new-reservation-page .unlimited-mode-warning .warning-text {\n  color: #856404;\n  margin: 0;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .unlimited-mode-warning {\n    margin: 10px 0;\n    padding: 10px 12px;\n    font-size: 0.85rem;\n  }\n  .new-reservation-page .unlimited-mode-warning .warning-icon {\n    font-size: 1rem;\n  }\n}\n.new-reservation-page .reservation-sidebar-component {\n  position: fixed;\n  top: 0;\n  right: -400px;\n  width: 400px;\n  height: 100%;\n  background-color: #fff;\n  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n  z-index: var(--z-index-sidebar-reservation);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n  right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n  padding: 20px;\n  padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n  color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n  margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n  margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  cursor: pointer;\n  z-index: var(--z-index-modal) !important;\n  transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n  background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n  position: relative;\n  top: 2px;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .reservation-sidebar-component {\n    width: 100%;\n  }\n}\n.new-reservation-page .sidebar-section-personeel {\n  margin-bottom: 10px;\n}\n");
 
-// src/components/ReservationStepOne/ReservationStepOne.tsx
+// src/components/ReservationStepOne/ReservationStepOne.js
 var ReservationStepOne = ({
   formData,
   errors,
@@ -4200,7 +4200,7 @@ var ReservationStepOne = ({
 };
 var ReservationStepOne_default = ReservationStepOne;
 
-// src/utils/translations.ts
+// src/utils/translations.js
 var getPreferredLanguage = () => {
   return localStorage.getItem("preferredLanguage") || "nl";
 };
@@ -4247,13 +4247,13 @@ var translations_default = {
 // src/components/FormField/formField.css
 styleInject(".new-reservation-page .form-group .magic-tooltip {\n  transition: transform 0.2s ease;\n  transform-origin: bottom right;\n}\n.new-reservation-page .form-group .magic-tooltip:hover {\n  transform: scale(1.05);\n}\n");
 
-// src/components/FormField/FormField.tsx
+// src/components/FormField/FormField.js
 var FormField = ({
   label,
   name,
   type = "text",
-  icon: Icon,
-  value,
+  icon,
+  value: value2,
   onChange,
   onBlur,
   error,
@@ -4261,16 +4261,16 @@ var FormField = ({
   halfWidth,
   options = [],
   selectPlaceholder,
-  rightIcon,
-  onRightIconClick,
+  rightIcon: rightIcon2,
+  onRightIconClick: onRightIconClick2,
   tooltipContent
 }) => {
   const t = getSection(translations_default, "formField");
   const selectPlaceholderText = selectPlaceholder || t.selectPlaceholder;
   const [showTooltip, setShowTooltip] = useState(false);
-  const tooltipRef = useRef(null);
-  const timerRef = useRef(null);
-  const RightIconComponent = rightIcon;
+  const tooltipRef = useRef < HTMLDivElement > null;
+  const timerRef = useRef < NodeJS.Timeout | null > null;
+  const RightIconComponent = rightIcon2;
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (tooltipRef.current && !tooltipRef.current.contains(e.target)) {
@@ -4283,7 +4283,7 @@ var FormField = ({
   }, [showTooltip]);
   const baseControlProps = {
     name,
-    value,
+    value: value2,
     onChange,
     onBlur,
     "aria-label": label,
@@ -4307,7 +4307,7 @@ var FormField = ({
       "div",
       {
         className: "magic-wand-container",
-        onClick: onRightIconClick,
+        onClick: onRightIconClick2,
         onMouseEnter: () => {
           if (timerRef.current) clearTimeout(timerRef.current);
           setShowTooltip(true);
@@ -4338,13 +4338,13 @@ var FormField = ({
           style: {
             position: "absolute",
             bottom: "100%",
-            right: 0,
+            right,
             backgroundColor: "#fff",
             color: "#333",
             borderRadius: "8px",
             fontSize: "0.9rem",
             boxShadow: "0px 4px 10px rgba(0,0,0,0.15)",
-            zIndex: 10,
+            zIndex,
             marginBottom: "8px",
             minWidth: "220px",
             overflow: "hidden"
@@ -4356,13 +4356,13 @@ var FormField = ({
             className: "lottie-container",
             style: {
               position: "absolute",
-              top: 0,
+              top,
               right: "1px",
               width: "calc(100% + 30px)",
               height: "100%",
               marginRight: "-100px",
               pointerEvents: "none",
-              zIndex: 0
+              zIndex
             }
           },
           /* @__PURE__ */ React4.createElement(
@@ -4374,7 +4374,7 @@ var FormField = ({
             }
           )
         ),
-        /* @__PURE__ */ React4.createElement("div", { style: { position: "relative", zIndex: 1, padding: "12px 20px" } }, /* @__PURE__ */ React4.createElement(
+        /* @__PURE__ */ React4.createElement("div", { style: { position: "relative", zIndex, padding: "12px 20px" } }, /* @__PURE__ */ React4.createElement(
           "div",
           {
             style: {
@@ -4414,7 +4414,7 @@ var FormField = ({
 };
 var FormField_default = FormField;
 
-// src/components/ReservationStepTwo/ReservationStepTwo.tsx
+// src/components/ReservationStepTwo/ReservationStepTwo.js
 var import_moment = __toESM(require_moment());
 __toESM(require_nl());
 var useApi = () => {
@@ -4444,7 +4444,7 @@ var useApi = () => {
       const token = getJwtToken();
       return axios({
         method,
-        url: endpoint,
+        url,
         data,
         ...config,
         headers: {
@@ -4599,7 +4599,7 @@ var translations_default2 = {
 // src/components/ReservationStepTwo/reservationStepTwo.css
 styleInject(".new-reservation-page .name-fields {\n  display: flex;\n  gap: 20px;\n}\n.input-container .form-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  border: #ccc 1px solid;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  text-align: left;\n  border-radius: 5px;\n  font-size: 16px;\n}\n");
 
-// src/components/ReservationStepTwo/ReservationStepTwo.tsx
+// src/components/ReservationStepTwo/ReservationStepTwo.js
 var ReservationStepTwo = ({
   formData,
   errors,
@@ -4662,26 +4662,14 @@ var ReservationStepTwo = ({
   useEffect(() => {
     tryAutofill();
   }, [formData.email, formData.phone]);
-  const applyAutofill = () => {
-    if (!pendingAutofill) return;
-    setFormData((prev) => ({
-      ...prev,
-      firstName: pendingAutofill.firstName,
-      lastName: pendingAutofill.lastName,
-      email: pendingAutofill.email,
-      phone: pendingAutofill.phone
-    }));
-    setHasAutofilled(true);
-    setPendingAutofill(null);
-  };
   const magicProps = useMemo(() => {
     if (!pendingAutofill)
       return { email: {}, phone: {} };
     const emailActive = pendingAutofill.sources.includes("email") && (formData.email || "").trim().toLowerCase() === pendingAutofill.email.trim().toLowerCase();
     const phoneActive = pendingAutofill.sources.includes("phone") && (formData.phone || "").trim() === pendingAutofill.phone.trim();
     const common = {
-      rightIcon: FaMagic,
-      onRightIconClick: applyAutofill
+      rightIcon,
+      onRightIconClick
     };
     return {
       email: emailActive ? {
@@ -4898,7 +4886,7 @@ var translations_default3 = {
 // src/components/ReservationSummary/reservationSummary.css
 styleInject(".new-reservation-page .reservation-sidebar-component .reservation-summary .modal-title {\n  margin-top: 0;\n  margin-bottom: 20px;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details {\n  list-style-type: none;\n  padding: 0;\n  margin: 0 0 20px 0;\n  width: 100%;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li {\n  margin-bottom: 10px;\n  font-size: 15px;\n  align-items: left;\n  text-align: left;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li strong {\n  font-weight: bold;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary {\n  align-items: left;\n}\n");
 
-// src/components/ReservationSummary/ReservationSummary.tsx
+// src/components/ReservationSummary/ReservationSummary.js
 var ReservationSummary = ({
   formData,
   onNewReservation
@@ -4945,7 +4933,7 @@ var translations_default4 = {
 // src/components/GiftcardSelection/giftcardSelection.css
 styleInject(".new-reservation-page .giftcard-selection {\n  margin-bottom: 20px;\n}\n.new-reservation-page .giftcard-options {\n  display: flex;\n  gap: 20px;\n  margin: 10px 0;\n}\n.new-reservation-page .giftcard-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.new-reservation-page .form-label {\n  font-weight: 500;\n  margin-bottom: 8px;\n  display: block;\n}\n.new-reservation-page .giftcard-option input[type=radio] {\n  margin: 0;\n  cursor: pointer;\n}\n.new-reservation-page .giftcard-option label {\n  cursor: pointer;\n}\n");
 
-// src/components/GiftcardSelection/GiftcardSelection.tsx
+// src/components/GiftcardSelection/GiftcardSelection.js
 var GiftcardSelection = ({
   restaurantData,
   formData,
@@ -4969,7 +4957,7 @@ var GiftcardSelection = ({
     setAvailableGiftcards([...cards]);
   }, [restaurantData]);
   if (!availableGiftcards.length) return null;
-  const options = availableGiftcards.map((card) => ({ value: card, label: card }));
+  const options = availableGiftcards.map((card) => ({ value, label: card }));
   const onChange = (e) => {
     handleChange({ target: { name: "giftcard", value: e.target.value } });
     resetFormDataFields(["date", "time"]);
@@ -5026,7 +5014,7 @@ var translations_default5 = {
 // src/components/ZitplaatsSelection/zitplaatsSelection.css
 styleInject(".new-reservation-page .zitplaats-selection {\n  margin-bottom: 15px;\n}\n.new-reservation-page .zitplaats-selection select {\n  width: 100%;\n  padding: 10px;\n  border-radius: 4px;\n  border: 1px solid #ccc;\n  background-color: white;\n}\n");
 
-// src/components/ZitplaatsSelection/ZitplaatsSelection.tsx
+// src/components/ZitplaatsSelection/ZitplaatsSelection.js
 var ZitplaatsSelection = ({
   restaurantData,
   formData,
@@ -5044,8 +5032,8 @@ var ZitplaatsSelection = ({
     setAvailableZitplaatsen([...set].sort());
   }, [restaurantData]);
   const handleZitplaatsChange = (e) => {
-    const { value } = e.target;
-    handleChange({ target: { name: "zitplaats", value } });
+    const { value: value2 } = e.target;
+    handleChange({ target: { name: "zitplaats", value: value2 } });
     resetFormDataFields(["date", "time", "selectedTableNumbers", "selectedTableIds"]);
   };
   const tableSettings = restaurantData?.["table-settings"] || {};
@@ -5097,9 +5085,9 @@ var translationsReservationSidebar_default = {
 };
 
 // src/styles/reservationSidebar.css
-styleInject(".new-reservation-page .reservation-sidebar-component {\n  position: fixed;\n  top: 0;\n  right: -400px;\n  width: 400px;\n  height: 100%;\n  background-color: #fff;\n  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n  z-index: var(--z-index-sidebar-reservation);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n  right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n  padding: 20px;\n  padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n  color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n  margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n  margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  cursor: pointer;\n  z-index: var(--z-index-modal) !important;\n  transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n  background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n  position: relative;\n  top: 2px;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .reservation-sidebar-component {\n    width: 100%;\n  }\n}\n.new-reservation-page .sidebar-section-personeel {\n  margin-bottom: 10px;\n}\n");
+styleInject(".reservation-sidebar-component {\n  position: fixed;\n  top: 0;\n  right: -400px;\n  width: 400px;\n  height: 100%;\n  background-color: #fff;\n  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n  z-index: var(--z-index-sidebar-reservation);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  transition: right 0.3s ease-in-out;\n}\n.admin-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.reservation-sidebar-component.open {\n  right: 0;\n}\n.reservation-sidebar-content {\n  padding: 20px;\n  padding-top: 60px;\n}\n.close-sidebar-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n.close-sidebar-button svg {\n  color: #000;\n}\n.sidebar-section-one,\n.sidebar-section-two {\n  margin-bottom: 20px;\n}\n.reservation-footer {\n  margin-top: auto;\n}\n.store-reservation-button {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n}\n.open-sidebar-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  cursor: pointer;\n  z-index: var(--z-index-modal) !important;\n  transition: all 0.3s ease;\n}\n.open-sidebar-button:hover {\n  background-color: var(--color-blue-hover-accent) !important;\n}\n.open-sidebar-button svg {\n  position: relative;\n  top: 2px;\n}\n@media screen and (max-width: 480px) {\n  .reservation-sidebar-component {\n    width: 100%;\n  }\n}\n.sidebar-section-personeel {\n  margin-bottom: 10px;\n}\n");
 
-// src/ReservationSidebar.tsx
+// src/ReservationSidebar.js
 var ReservationSidebar = ({
   isOpen,
   onClose,
@@ -5146,7 +5134,7 @@ var ReservationSidebar = ({
         const baseDomain = window.baseDomain || "";
         const [data, personeelData] = await Promise.all([
           api.get(`${baseDomain}api/auth-restaurant/`, {
-            noCache: true
+            noCache
           }),
           api.get(`${baseDomain}api/personeel`, { noCache: true })
         ]);
@@ -5173,7 +5161,7 @@ var ReservationSidebar = ({
   }, [isOpen, api]);
   const handleNewReservationClick = useCallback(() => {
     setFormData({
-      guests: 1,
+      guests,
       date: "",
       time: "",
       firstName: "",
@@ -5185,8 +5173,8 @@ var ReservationSidebar = ({
       personeel: "",
       giftcard: "",
       zitplaats: "",
-      selectedTableNumbers: [],
-      selectedTableIds: [],
+      selectedTableNumbers,
+      selectedTableIds,
       reservationMode: "met_limieten"
     });
     onNewReservation();
@@ -5230,7 +5218,7 @@ var ReservationSidebar = ({
       type: "select",
       options: availablePersoneel.map((p) => {
         const full = `${p.voornaam} ${p.achternaam}`;
-        return { value: full, label: full };
+        return { value, label: full };
       }),
       value: formData.personeel,
       onChange: handleChange,
@@ -5273,7 +5261,7 @@ var ReservationSidebar = ({
 var ReservationSidebar_default = ReservationSidebar;
 
 // src/styles/newReservationAdmin.css
-styleInject(".new-reservation-page .account-manage-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.new-reservation-page .account-manage-container {\n  max-width: 800px;\n  margin: 0 auto;\n}\n.new-reservation-page .account-manage-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n.new-reservation-page .input-container {\n  position: relative;\n}\n.new-reservation-page .input-icon {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  transform: translateY(-50%);\n  color: #6c757d;\n  pointer-events: none;\n}\n.new-reservation-page .input-container input,\n.new-reservation-page .input-container textarea {\n  width: 100%;\n  padding: 10px 10px 10px 35px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  font-size: 1rem;\n  transition: border-color 0.3s ease;\n}\n.new-reservation-page .form-error {\n  color: #dc3545;\n  font-size: 0.9rem;\n  margin-top: 5px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.new-reservation-page .account-manage__button {\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: background-color 0.3s ease;\n}\n");
+styleInject(".account-manage-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.account-manage-container {\n  max-width: 800px;\n  margin: 0 auto;\n}\n.account-manage-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n.input-container {\n  position: relative;\n}\n.input-icon {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  transform: translateY(-50%);\n  color: #6c757d;\n  pointer-events: none;\n}\n.input-container input,\n.input-container textarea {\n  width: 100%;\n  padding: 10px 10px 10px 35px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  font-size: 1rem;\n  transition: border-color 0.3s ease;\n}\n.form-error {\n  color: #dc3545;\n  font-size: 0.9rem;\n  margin-top: 5px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.account-manage__button {\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: background-color 0.3s ease;\n}\n");
 /*! Bundled license information:
 
 moment/moment.js:

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@happychef/reservation-sidebar",
-  "version": "1.0.0",
-  "description": "A compound component for managing restaurant reservations",
+  "version": "2.0.0",
+  "description": "A compound component for managing restaurant reservations - JavaScript version with independent styles",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "files": [
+    
     "dist",
     "README.md"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     }
@@ -19,7 +18,6 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -42,10 +40,6 @@
     "react-icons": "^5.3.0"
   },
   "devDependencies": {
-    "@happychef/algorithm": "^1.0.1",
-    "@types/node": "^20.11.0",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.0.1",

package/dist/index.d.mts

@@ -1,199 +0,0 @@
-import React$1 from 'react';
-import { AxiosRequestConfig } from 'axios';
-
-interface FormData {
-    guests: number;
-    date: string;
-    time: string;
-    firstName: string;
-    lastName: string;
-    email: string;
-    phone: string;
-    extraInfo: string;
-    menu: string;
-    personeel: string;
-    giftcard: string;
-    zitplaats: string;
-    selectedTableNumbers: number[];
-    selectedTableIds: string[];
-    reservationMode: string;
-}
-interface FormErrors {
-    guests?: string;
-    date?: string;
-    time?: string;
-    firstName?: string;
-    lastName?: string;
-    email?: string;
-    phone?: string;
-    menu?: string;
-    personeel?: string;
-    [key: string]: string | undefined;
-}
-interface ReservationSidebarProps {
-    isOpen: boolean;
-    onClose: () => void;
-    formData: FormData;
-    errors: FormErrors;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    handleFinalSubmit: () => void;
-    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
-    isSubmitting: boolean;
-    reservationSubmitted: boolean;
-    onNewReservation: () => void;
-    apiBaseDomain?: string;
-}
-interface Timeblock {
-    id: string;
-    startTime: string;
-    endTime: string;
-    capacity: number;
-    [key: string]: any;
-}
-interface MenuData {
-    name: string;
-    startDate: string;
-    endDate: string;
-    startHour: string;
-    endHour: string;
-    daysOfWeek: string[];
-    [key: string]: any;
-}
-interface RestaurantData {
-    timeblocks?: Timeblock[];
-    menu?: MenuData[];
-    'general-settings'?: {
-        seatSelectionEnabled?: boolean;
-        [key: string]: any;
-    };
-    'table-settings'?: {
-        isInstalled?: boolean;
-        assignmentMode?: string;
-        [key: string]: any;
-    };
-    floors?: Floor[];
-    [key: string]: any;
-}
-interface Floor {
-    tables: Table[];
-    [key: string]: any;
-}
-interface Table {
-    zitplaats?: string;
-    number?: number;
-    id?: string;
-    [key: string]: any;
-}
-interface Personeel {
-    voornaam: string;
-    achternaam: string;
-    startDate: string;
-    endDate: string;
-    [key: string]: any;
-}
-interface SelectOption {
-    value: string;
-    label: string;
-}
-interface FormFieldProps {
-    label: string;
-    name: string;
-    type?: 'text' | 'email' | 'tel' | 'textarea' | 'select';
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    value: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    onBlur?: () => void;
-    error?: string;
-    placeholder?: string;
-    halfWidth?: boolean;
-    options?: SelectOption[];
-    selectPlaceholder?: string;
-    rightIcon?: React.ComponentType<{
-        className?: string;
-        style?: React.CSSProperties;
-    }>;
-    onRightIconClick?: () => void;
-    tooltipContent?: React.ReactNode;
-}
-interface GiftcardSelectionProps {
-    restaurantData: RestaurantData;
-    formData: FormData;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    resetFormDataFields: (fields: string[]) => void;
-}
-interface ZitplaatsSelectionProps {
-    restaurantData: RestaurantData;
-    formData: FormData;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    resetFormDataFields: (fields: string[]) => void;
-}
-interface ReservationStepOneProps {
-    formData: FormData;
-    errors: FormErrors;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
-    timeblocks: Timeblock[];
-    loadingTimeblocks: boolean;
-    timeblocksError: Error | null;
-    restaurantData: RestaurantData;
-}
-interface ReservationStepTwoProps {
-    formData: FormData;
-    errors: FormErrors;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
-    isSubmitting: boolean;
-    menuData: MenuData[];
-}
-interface ReservationSummaryProps {
-    formData: FormData;
-    onNewReservation: () => void;
-}
-
-declare const ReservationSidebar: React$1.FC<ReservationSidebarProps>;
-
-declare const FormField: React$1.FC<FormFieldProps>;
-
-declare const GiftcardSelection: React$1.FC<GiftcardSelectionProps>;
-
-declare const ZitplaatsSelection: React$1.FC<ZitplaatsSelectionProps>;
-
-/**
- * Placeholder for ReservationStepOne component
- *
- * This component has complex dependencies on:
- * - @happychef/algorithm package for table availability
- * - Multiple sub-components (Calendar, DateSelector, TimeSelector, TableSelector, ValueSelector)
- * - Complex reservation logic
- *
- * To implement this component fully:
- * 1. Install @happychef/algorithm package
- * 2. Copy the sub-components from StepOne directory
- * 3. Implement the full logic from the source repository
- *
- * For now, this is a placeholder that maintains the interface.
- */
-declare const ReservationStepOne: React$1.FC<ReservationStepOneProps>;
-
-declare const ReservationStepTwo: React$1.FC<ReservationStepTwoProps>;
-
-declare const ReservationSummary: React$1.FC<ReservationSummaryProps>;
-
-interface ApiConfig extends AxiosRequestConfig {
-    noCache?: boolean;
-}
-interface ApiMethods {
-    get: (endpoint: string, config?: ApiConfig) => Promise<any>;
-    post: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
-    put: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
-    patch: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
-    delete: (endpoint: string, config?: AxiosRequestConfig) => Promise<any>;
-}
-declare const useApi: () => ApiMethods;
-
-declare const getPreferredLanguage: () => string;
-declare const getSection: (translationsObj: Record<string, any>, sectionKey: string, fallbackLang?: string) => Record<string, any>;
-
-export { type Floor, type FormData, type FormErrors, FormField, type FormFieldProps, GiftcardSelection, type GiftcardSelectionProps, type MenuData, type Personeel, ReservationSidebar, type ReservationSidebarProps, ReservationStepOne, type ReservationStepOneProps, ReservationStepTwo, type ReservationStepTwoProps, ReservationSummary, type ReservationSummaryProps, type RestaurantData, type SelectOption, type Table, type Timeblock, ZitplaatsSelection, type ZitplaatsSelectionProps, getPreferredLanguage, getSection, useApi };

package/dist/index.d.ts

@@ -1,199 +0,0 @@
-import React$1 from 'react';
-import { AxiosRequestConfig } from 'axios';
-
-interface FormData {
-    guests: number;
-    date: string;
-    time: string;
-    firstName: string;
-    lastName: string;
-    email: string;
-    phone: string;
-    extraInfo: string;
-    menu: string;
-    personeel: string;
-    giftcard: string;
-    zitplaats: string;
-    selectedTableNumbers: number[];
-    selectedTableIds: string[];
-    reservationMode: string;
-}
-interface FormErrors {
-    guests?: string;
-    date?: string;
-    time?: string;
-    firstName?: string;
-    lastName?: string;
-    email?: string;
-    phone?: string;
-    menu?: string;
-    personeel?: string;
-    [key: string]: string | undefined;
-}
-interface ReservationSidebarProps {
-    isOpen: boolean;
-    onClose: () => void;
-    formData: FormData;
-    errors: FormErrors;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    handleFinalSubmit: () => void;
-    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
-    isSubmitting: boolean;
-    reservationSubmitted: boolean;
-    onNewReservation: () => void;
-    apiBaseDomain?: string;
-}
-interface Timeblock {
-    id: string;
-    startTime: string;
-    endTime: string;
-    capacity: number;
-    [key: string]: any;
-}
-interface MenuData {
-    name: string;
-    startDate: string;
-    endDate: string;
-    startHour: string;
-    endHour: string;
-    daysOfWeek: string[];
-    [key: string]: any;
-}
-interface RestaurantData {
-    timeblocks?: Timeblock[];
-    menu?: MenuData[];
-    'general-settings'?: {
-        seatSelectionEnabled?: boolean;
-        [key: string]: any;
-    };
-    'table-settings'?: {
-        isInstalled?: boolean;
-        assignmentMode?: string;
-        [key: string]: any;
-    };
-    floors?: Floor[];
-    [key: string]: any;
-}
-interface Floor {
-    tables: Table[];
-    [key: string]: any;
-}
-interface Table {
-    zitplaats?: string;
-    number?: number;
-    id?: string;
-    [key: string]: any;
-}
-interface Personeel {
-    voornaam: string;
-    achternaam: string;
-    startDate: string;
-    endDate: string;
-    [key: string]: any;
-}
-interface SelectOption {
-    value: string;
-    label: string;
-}
-interface FormFieldProps {
-    label: string;
-    name: string;
-    type?: 'text' | 'email' | 'tel' | 'textarea' | 'select';
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    value: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    onBlur?: () => void;
-    error?: string;
-    placeholder?: string;
-    halfWidth?: boolean;
-    options?: SelectOption[];
-    selectPlaceholder?: string;
-    rightIcon?: React.ComponentType<{
-        className?: string;
-        style?: React.CSSProperties;
-    }>;
-    onRightIconClick?: () => void;
-    tooltipContent?: React.ReactNode;
-}
-interface GiftcardSelectionProps {
-    restaurantData: RestaurantData;
-    formData: FormData;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    resetFormDataFields: (fields: string[]) => void;
-}
-interface ZitplaatsSelectionProps {
-    restaurantData: RestaurantData;
-    formData: FormData;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    resetFormDataFields: (fields: string[]) => void;
-}
-interface ReservationStepOneProps {
-    formData: FormData;
-    errors: FormErrors;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
-    timeblocks: Timeblock[];
-    loadingTimeblocks: boolean;
-    timeblocksError: Error | null;
-    restaurantData: RestaurantData;
-}
-interface ReservationStepTwoProps {
-    formData: FormData;
-    errors: FormErrors;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
-    isSubmitting: boolean;
-    menuData: MenuData[];
-}
-interface ReservationSummaryProps {
-    formData: FormData;
-    onNewReservation: () => void;
-}
-
-declare const ReservationSidebar: React$1.FC<ReservationSidebarProps>;
-
-declare const FormField: React$1.FC<FormFieldProps>;
-
-declare const GiftcardSelection: React$1.FC<GiftcardSelectionProps>;
-
-declare const ZitplaatsSelection: React$1.FC<ZitplaatsSelectionProps>;
-
-/**
- * Placeholder for ReservationStepOne component
- *
- * This component has complex dependencies on:
- * - @happychef/algorithm package for table availability
- * - Multiple sub-components (Calendar, DateSelector, TimeSelector, TableSelector, ValueSelector)
- * - Complex reservation logic
- *
- * To implement this component fully:
- * 1. Install @happychef/algorithm package
- * 2. Copy the sub-components from StepOne directory
- * 3. Implement the full logic from the source repository
- *
- * For now, this is a placeholder that maintains the interface.
- */
-declare const ReservationStepOne: React$1.FC<ReservationStepOneProps>;
-
-declare const ReservationStepTwo: React$1.FC<ReservationStepTwoProps>;
-
-declare const ReservationSummary: React$1.FC<ReservationSummaryProps>;
-
-interface ApiConfig extends AxiosRequestConfig {
-    noCache?: boolean;
-}
-interface ApiMethods {
-    get: (endpoint: string, config?: ApiConfig) => Promise<any>;
-    post: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
-    put: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
-    patch: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
-    delete: (endpoint: string, config?: AxiosRequestConfig) => Promise<any>;
-}
-declare const useApi: () => ApiMethods;
-
-declare const getPreferredLanguage: () => string;
-declare const getSection: (translationsObj: Record<string, any>, sectionKey: string, fallbackLang?: string) => Record<string, any>;
-
-export { type Floor, type FormData, type FormErrors, FormField, type FormFieldProps, GiftcardSelection, type GiftcardSelectionProps, type MenuData, type Personeel, ReservationSidebar, type ReservationSidebarProps, ReservationStepOne, type ReservationStepOneProps, ReservationStepTwo, type ReservationStepTwoProps, ReservationSummary, type ReservationSummaryProps, type RestaurantData, type SelectOption, type Table, type Timeblock, ZitplaatsSelection, type ZitplaatsSelectionProps, getPreferredLanguage, getSection, useApi };