@eventlook/sdk 1.5.0-beta.6 → 1.5.0-beta.7

package/dist/esm/{index-BlTqx0jm.js → index-CJ_gPli9.js}

@@ -1,6 +1,6 @@
-import React, { forwardRef, useState, useEffect, createElement, createContext, useMemo, useContext, useLayoutEffect, useRef, useCallback, useDebugValue, memo, lazy, Suspense } from 'react';
-import { Box, IconButton, Stack, Typography, Button, Grid, Card, Link, LinearProgress, TextField, FormControlLabel, Checkbox, FormHelperText, FormControl, FormLabel, RadioGroup, Radio, Tooltip, MenuItem, Divider, Skeleton, Dialog, DialogTitle, DialogContent, DialogActions, Badge, Stepper, Step, StepLabel, StepContent } from '@mui/material';
-import { m } from 'framer-motion';
+import React, { forwardRef, useState, useEffect, createElement, createContext, useMemo, useContext, useLayoutEffect, useRef, useCallback, useDebugValue, memo, lazy } from 'react';
+import { m } from 'motion/react';
+import { Box, IconButton, Stack, Typography, Button, Grid, Card, Link, LinearProgress, TextField, FormControlLabel, Checkbox, FormHelperText, FormControl, FormLabel, RadioGroup, Radio, MenuItem, Collapse, useTheme as useTheme$1, Skeleton, Divider, Dialog, DialogTitle, DialogContent, DialogActions, Stepper, Step, StepLabel, StepContent, SwipeableDrawer } from '@mui/material';
 import { useTheme, styled, alpha } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { DatePicker, DateCalendar, PickersDay, LocalizationProvider } from '@mui/x-date-pickers';
@@ -14,35 +14,6 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-function getAugmentedNamespace(n) {
-  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			var isInstance = false;
-      try {
-        isInstance = this instanceof a;
-      } catch {}
-			if (isInstance) {
-        return Reflect.construct(f, arguments, this.constructor);
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 var cs$2 = {exports: {}};
 
 var dayjs_min$1 = {exports: {}};
@@ -2188,6 +2159,8 @@ const cs = {
     add: 'Přidat',
     confirm: 'Potvrdit',
     cancel: 'Zrušit',
+    close: 'Zavřít',
+    remove: 'Odstranit',
     pay: 'Zaplatit',
     change: 'Změnit',
     free: 'Zdarma',
@@ -2220,7 +2193,7 @@ const cs = {
             promo_code: 'Slevový kód',
             start_date: 'Datum konání',
             organizer: 'Pořadatel',
-            total: 'Celkem ',
+            total: 'Celkem',
             with_fee: 'vč. servisního poplatku',
             service_fee: 'Servisní poplatek',
             shipping_fee: 'Doprava',
@@ -2233,6 +2206,10 @@ const cs = {
             category: 'Kategorie',
             sms_notification: 'SMS notifikace',
             open_map: 'Otevřít mapu',
+            payment_overview_open: 'Otevřít přehled platby',
+            payment_overview_close: 'Zavřít přehled platby',
+            ticket_quantity_decrease: 'Snížit počet vstupenek',
+            ticket_quantity_increase: 'Zvýšit počet vstupenek',
         },
         validation: {
             required: 'Toto pole je povinné.',
@@ -2283,8 +2260,12 @@ const cs = {
                 7: {
                     title: 'Přidružené eventy',
                 },
+                8: {
+                    title: 'EventLook služby',
+                    additional_info: 'Více informací ke službám',
+                },
             },
-            terms_and_conditions: 'Odesláním objednávky souhlasím s <0>Obchodními podmínkami</0> {{termsAndConditionsCompanies}} a beru na vědomí <1>Zásady soukromí</1>.',
+            terms_and_conditions: 'Souhlasím s <0>Obchodními podmínkami</0> {{termsAndConditionsCompanies}} a <1>Zásady soukromí</1>.',
             insurance: {
                 label: 'Pojištění vstupenek',
                 per_ticket: 'ks',
@@ -2295,12 +2276,22 @@ const cs = {
                 },
             },
             sms_notification: {
-                label: 'SMS připomenutí termínu akce',
+                label: 'SMS připomenutí termínu',
                 modal: {
                     description: 'Připomínka akce den předem: SMS vás upozorní na blížící se událost, abyste na ni nezapomněli a stihli se včas připravit.',
                     price: 'Cena SMS připomenutí termínu akce',
                 },
             },
+            merchandise: {
+                show_sizes: 'Zobrazit velikosti',
+                show_added: 'Zobrazit přidané',
+            },
+            services: {
+                add_tickets_first: 'Nejdříve prosím přidejte vstupenky',
+            },
+            shipping: {
+                choose_address: 'Vybrat adresu',
+            },
             order_success: {
                 title: 'Vstupenky byly úspěšně zarezervovány. Teď už zbývá jenom zaplatit.',
                 description: 'Odpočet běží {{countdown}}. Pokud k přesměrování nedojde automaticky, klikněte na tlačítko Zaplatit níže.',
@@ -2332,6 +2323,8 @@ const cs = {
     components: {
         product_variant_dialog: {
             select_variant: 'Musíte vybrat variantu produktu.',
+            decrease_quantity: 'Snížit množství varianty produktu',
+            increase_quantity: 'Zvýšit množství varianty produktu',
         },
     },
 };
@@ -2345,6 +2338,8 @@ const en = {
     add: 'Add',
     confirm: 'Confirm',
     cancel: 'Cancel',
+    close: 'Close',
+    remove: 'Remove',
     pay: 'Pay',
     change: 'Change',
     free: 'Free',
@@ -2390,6 +2385,10 @@ const en = {
             category: 'Category',
             sms_notification: 'SMS notification',
             open_map: 'Open map',
+            payment_overview_open: 'Open payment overview',
+            payment_overview_close: 'Close payment overview',
+            ticket_quantity_decrease: 'Decrease ticket quantity',
+            ticket_quantity_increase: 'Increase ticket quantity',
         },
         validation: {
             required: 'This field is required.',
@@ -2440,8 +2439,12 @@ const en = {
                 7: {
                     title: 'Associated events',
                 },
+                8: {
+                    title: 'EventLook services',
+                    additional_info: 'More information about services',
+                },
             },
-            terms_and_conditions: 'By submitting the order, I agree to the <0>Terms and Conditions</0> of {{termsAndConditionsCompanies}} and acknowledge the <1>Privacy Policy</1>.',
+            terms_and_conditions: 'I agree with the <0>Terms and Conditions</0> {{termsAndConditionsCompanies}} and the <1>Privacy Policy</1>.',
             insurance: {
                 label: 'Ticket insurance',
                 per_ticket: 'pc',
@@ -2459,6 +2462,16 @@ const en = {
                     price: 'SMS event reminder price',
                 },
             },
+            merchandise: {
+                show_sizes: 'Show sizes',
+                show_added: 'Show added',
+            },
+            services: {
+                add_tickets_first: 'Please add tickets first',
+            },
+            shipping: {
+                choose_address: 'Choose address',
+            },
             order_success: {
                 title: 'Tickets have been successfully reserved. Now you just need to pay.',
                 description: 'The countdown is running {{countdown}}. If you are not redirected automatically, please click the Pay button below.',
@@ -2490,6 +2503,8 @@ const en = {
     components: {
         product_variant_dialog: {
             select_variant: 'You must select a product variant',
+            decrease_quantity: 'Decrease product variant quantity',
+            increase_quantity: 'Increase product variant quantity',
         },
     },
 };
@@ -2503,6 +2518,8 @@ const sk = {
     add: 'Pridať',
     confirm: 'Potvrdiť',
     cancel: 'Zrušiť',
+    close: 'Zavrieť',
+    remove: 'Odstrániť',
     pay: 'Zaplaťte',
     change: 'Zmeniť',
     free: 'Zadarmo',
@@ -2548,6 +2565,10 @@ const sk = {
             category: 'Kategória',
             sms_notification: 'SMS notifikácia',
             open_map: 'Otvoriť mapu',
+            payment_overview_open: 'Otvoriť prehľad platby',
+            payment_overview_close: 'Zavrieť prehľad platby',
+            ticket_quantity_decrease: 'Znížiť počet vstupeniek',
+            ticket_quantity_increase: 'Zvýšiť počet vstupeniek',
         },
         validation: {
             required: 'Toto pole je povinné.',
@@ -2598,8 +2619,12 @@ const sk = {
                 7: {
                     title: 'Pridružené eventy',
                 },
+                8: {
+                    title: 'EventLook služby',
+                    additional_info: 'Viac informácií o službách',
+                },
             },
-            terms_and_conditions: 'Odoslaním objednávky súhlasím s <0>Obchodnými podmienkami</0> {{termsAndConditionsCompanies}} a beriem na vedomie <1>Zásady ochrany osobných údajov</1>.',
+            terms_and_conditions: 'Súhlasím s <0>Obchodnými podmienkami</0> {{termsAndConditionsCompanies}} a <1>Zásadami ochrany osobných údajov</1>.',
             insurance: {
                 label: 'Poistenie vstupenky',
                 per_ticket: 'pc',
@@ -2611,12 +2636,22 @@ const sk = {
                 },
             },
             sms_notification: {
-                label: 'SMS pripomenutie termínu akcie',
+                label: 'SMS pripomenutie termínu',
                 modal: {
                     description: 'Pripomienka akcie deň vopred: SMS vás upozorní na blížiacu sa udalosť, aby ste na ňu nezabudli a stihli sa včas pripraviť.',
                     price: 'Cena SMS pripomenutia termínu akcie',
                 },
             },
+            merchandise: {
+                show_sizes: 'Zobraziť veľkosti',
+                show_added: 'Zobraziť pridané',
+            },
+            services: {
+                add_tickets_first: 'Najskôr prosím pridajte lístky',
+            },
+            shipping: {
+                choose_address: 'Vybrať adresu',
+            },
             order_success: {
                 title: 'Vstupenky boli úspešne rezervované. Teraz už len zaplatiť.',
                 description: 'Odpočet beží {{countdown}}. Ak nedôjde k automatickému presmerovaniu, kliknite na tlačidlo Zaplatiť nižšie.',
@@ -2648,6 +2683,8 @@ const sk = {
     components: {
         product_variant_dialog: {
             select_variant: 'Musíte vybrať variant produktu',
+            decrease_quantity: 'Znížiť množstvo variantu produktu',
+            increase_quantity: 'Zvýšiť množstvo variantu produktu',
         },
     },
 };
@@ -2661,6 +2698,8 @@ const pl = {
     add: 'Dodaj',
     confirm: 'Potwierdź',
     cancel: 'Anuluj',
+    close: 'Zamknij',
+    remove: 'Usuń',
     pay: 'Zapłać',
     change: 'Zmień',
     free: 'Darmowe',
@@ -2706,6 +2745,10 @@ const pl = {
             category: 'Kategoria',
             sms_notification: 'Powiadomienie SMS',
             open_map: 'Otwórz mapę',
+            payment_overview_open: 'Otwórz podsumowanie płatności',
+            payment_overview_close: 'Zamknij podsumowanie płatności',
+            ticket_quantity_decrease: 'Zmniejsz liczbę biletów',
+            ticket_quantity_increase: 'Zwiększ liczbę biletów',
         },
         validation: {
             required: 'To pole jest wymagane.',
@@ -2756,8 +2799,12 @@ const pl = {
                 7: {
                     title: 'Powiązane wydarzenia',
                 },
+                8: {
+                    title: 'EventLook usługi',
+                    additional_info: 'Więcej informacji o usługach',
+                },
             },
-            terms_and_conditions: 'Składając zamówienie, akceptuję <0>Regulamin</0> {{termsAndConditionsCompanies}} oraz potwierdzam <1>Politykę prywatności</1>.',
+            terms_and_conditions: 'Zgadzam się z <0>Regulaminem</0> {{termsAndConditionsCompanies}} i <1>Polityką prywatności</1>.',
             insurance: {
                 label: 'Ubezpieczenie biletu',
                 per_ticket: 'pc',
@@ -2775,6 +2822,16 @@ const pl = {
                     price: 'Cena przypomnienia SMS o wydarzeniu',
                 },
             },
+            merchandise: {
+                show_sizes: 'Pokaż rozmiary',
+                show_added: 'Pokaż dodane',
+            },
+            services: {
+                add_tickets_first: 'Najpierw dodaj bilety',
+            },
+            shipping: {
+                choose_address: 'Wybierz adres',
+            },
             order_success: {
                 title: 'Bilety zostały pomyślnie zarezerwowane. Teraz wystarczy zapłacić.',
                 description: 'Odliczanie trwa {{countdown}}. Jeśli przekierowanie nie nastąpi automatycznie, kliknij przycisk Zapłać poniżej.',
@@ -2806,6 +2863,8 @@ const pl = {
     components: {
         product_variant_dialog: {
             select_variant: 'Musisz wybrać wariant produktu',
+            decrease_quantity: 'Zmniejsz ilość wariantu produktu',
+            increase_quantity: 'Zwiększ ilość wariantu produktu',
         },
     },
 };
@@ -2819,6 +2878,8 @@ const uk = {
     add: 'Додати',
     confirm: 'Підтвердити',
     cancel: 'Скасувати',
+    close: 'Закрити',
+    remove: 'Видалити',
     pay: 'Оплатити',
     change: 'Змінити',
     free: 'Безкоштовно',
@@ -2864,6 +2925,10 @@ const uk = {
             category: 'Категорія',
             sms_notification: 'SMS-сповіщення',
             open_map: 'Відкрити карту',
+            payment_overview_open: 'Відкрити огляд платежу',
+            payment_overview_close: 'Закрити огляд платежу',
+            ticket_quantity_decrease: 'Зменшити кількість квитків',
+            ticket_quantity_increase: 'Збільшити кількість квитків',
         },
         validation: {
             required: "Це поле обов'язкове.",
@@ -2914,8 +2979,12 @@ const uk = {
                 7: {
                     title: 'Пов’язані події',
                 },
+                8: {
+                    title: 'EventLook послуги',
+                    additional_info: 'Додаткова інформація про послуги',
+                },
             },
-            terms_and_conditions: 'Надсилаючи замовлення, я погоджуюсь з <0>Правилами та умовами</0> {{termsAndConditionsCompanies}} та підтверджую <1>Політику конфіденційності</1>.',
+            terms_and_conditions: 'Я погоджуюся з <0>Правилами та умовами</0> {{termsAndConditionsCompanies}} та <1>Політикою конфіденційності</1>.',
             insurance: {
                 label: 'Страхування квитка',
                 per_ticket: 'pc',
@@ -2933,6 +3002,16 @@ const uk = {
                     price: 'Ціна SMS-нагадування про подію',
                 },
             },
+            merchandise: {
+                show_sizes: 'Показати розміри',
+                show_added: 'Показати додані',
+            },
+            services: {
+                add_tickets_first: 'Будь ласка, спочатку додайте квитки',
+            },
+            shipping: {
+                choose_address: 'Вибрати адресу',
+            },
             order_success: {
                 title: 'Квитки успішно зарезервовані. Тепер залишилося оплатити.',
                 description: 'Відлік триває {{countdown}}. Якщо перенаправлення не відбудеться автоматично, натисніть кнопку Оплатити нижче.',
@@ -2964,6 +3043,8 @@ const uk = {
     components: {
         product_variant_dialog: {
             select_variant: 'Ви повинні вибрати варіант продукту',
+            decrease_quantity: 'Зменшити кількість варіанту продукту',
+            increase_quantity: 'Збільшити кількість варіанту продукту',
         },
     },
 };
@@ -2977,6 +3058,8 @@ const es = {
     add: 'Añadir',
     confirm: 'Confirmar',
     cancel: 'Cancelar',
+    close: 'Cerrar',
+    remove: 'Eliminar',
     pay: 'Pagar',
     change: 'Cambiar',
     free: 'Gratis',
@@ -3022,6 +3105,10 @@ const es = {
             category: 'Categoría',
             sms_notification: 'Notificación SMS',
             open_map: 'Abrir mapa',
+            payment_overview_open: 'Abrir resumen de pago',
+            payment_overview_close: 'Cerrar resumen de pago',
+            ticket_quantity_decrease: 'Disminuir cantidad de entradas',
+            ticket_quantity_increase: 'Aumentar cantidad de entradas',
         },
         validation: {
             required: 'Este campo es obligatorio.',
@@ -3072,8 +3159,12 @@ const es = {
                 7: {
                     title: 'Eventos asociados',
                 },
+                8: {
+                    title: 'EventLook servicios',
+                    additional_info: 'Más información sobre los servicios',
+                },
             },
-            terms_and_conditions: 'Al enviar el pedido, acepto los <0>Términos y Condiciones</0> de {{termsAndConditionsCompanies}} y reconozco la <1>Política de Privacidad</1>.',
+            terms_and_conditions: 'Estoy de acuerdo con los <0>Términos y Condiciones</0> de {{termsAndConditionsCompanies}} y la <1>Política de Privacidad</1>.',
             insurance: {
                 label: 'Seguro de entrada',
                 per_ticket: 'pc',
@@ -3091,6 +3182,16 @@ const es = {
                     price: 'Precio del recordatorio por SMS del evento',
                 },
             },
+            merchandise: {
+                show_sizes: 'Mostrar tallas',
+                show_added: 'Mostrar añadidos',
+            },
+            services: {
+                add_tickets_first: 'Por favor, agregue entradas primero',
+            },
+            shipping: {
+                choose_address: 'Elegir dirección',
+            },
             order_success: {
                 title: 'Las entradas han sido reservadas con éxito. Ahora solo tienes que pagar.',
                 description: 'La cuenta atrás está en marcha {{countdown}}. Si no se le redirige automáticamente, haga clic en el botón Pagar abajo.',
@@ -3122,6 +3223,8 @@ const es = {
     components: {
         product_variant_dialog: {
             select_variant: 'Debes seleccionar una variante de producto',
+            decrease_quantity: 'Disminuir cantidad de variante de producto',
+            increase_quantity: 'Aumentar cantidad de variante de producto',
         },
     },
 };
@@ -3437,7 +3540,7 @@ function isArrayBufferView(val) {
  *
  * @returns {boolean} True if value is a String, otherwise false
  */
-const isString$1 = typeOfTest('string');
+const isString$2 = typeOfTest('string');
 
 /**
  * Determine if a value is a Function
@@ -3454,7 +3557,7 @@ const isFunction$3 = typeOfTest('function');
  *
  * @returns {boolean} True if value is a Number, otherwise false
  */
-const isNumber = typeOfTest('number');
+const isNumber$1 = typeOfTest('number');
 
 /**
  * Determine if a value is an Object
@@ -3463,7 +3566,7 @@ const isNumber = typeOfTest('number');
  *
  * @returns {boolean} True if value is an Object, otherwise false
  */
-const isObject$2 = (thing) => thing !== null && typeof thing === 'object';
+const isObject$4 = (thing) => thing !== null && typeof thing === 'object';
 
 /**
  * Determine if a value is a Boolean
@@ -3471,7 +3574,7 @@ const isObject$2 = (thing) => thing !== null && typeof thing === 'object';
  * @param {*} thing The value to test
  * @returns {boolean} True if value is a Boolean, otherwise false
  */
-const isBoolean$1 = (thing) => thing === true || thing === false;
+const isBoolean$2 = (thing) => thing === true || thing === false;
 
 /**
  * Determine if a value is a plain Object
@@ -3504,7 +3607,7 @@ const isPlainObject$1 = (val) => {
  */
 const isEmptyObject$1 = (val) => {
   // Early return for non-objects or Buffers to prevent RangeError
-  if (!isObject$2(val) || isBuffer(val)) {
+  if (!isObject$4(val) || isBuffer(val)) {
     return false;
   }
 
@@ -3584,7 +3687,7 @@ const isFileList = kindOfTest('FileList');
  *
  * @returns {boolean} True if value is a Stream, otherwise false
  */
-const isStream = (val) => isObject$2(val) && isFunction$3(val.pipe);
+const isStream = (val) => isObject$4(val) && isFunction$3(val.pipe);
 
 /**
  * Determine if a value is a FormData
@@ -3914,7 +4017,7 @@ const toArray$1 = (thing) => {
   if (!thing) return null;
   if (isArray(thing)) return thing;
   let i = thing.length;
-  if (!isNumber(i)) return null;
+  if (!isNumber$1(i)) return null;
   const arr = new Array(i);
   while (i-- > 0) {
     arr[i] = thing[i];
@@ -4102,7 +4205,7 @@ const toJSONObject = (obj) => {
   const stack = new Array(10);
 
   const visit = (source, i) => {
-    if (isObject$2(source)) {
+    if (isObject$4(source)) {
       if (stack.indexOf(source) >= 0) {
         return;
       }
@@ -4149,7 +4252,7 @@ const isAsyncFn = kindOfTest('AsyncFunction');
  */
 const isThenable = (thing) =>
   thing &&
-  (isObject$2(thing) || isFunction$3(thing)) &&
+  (isObject$4(thing) || isFunction$3(thing)) &&
   isFunction$3(thing.then) &&
   isFunction$3(thing.catch);
 
@@ -4210,10 +4313,10 @@ var utils$1 = {
   isBuffer,
   isFormData,
   isArrayBufferView,
-  isString: isString$1,
-  isNumber,
-  isBoolean: isBoolean$1,
-  isObject: isObject$2,
+  isString: isString$2,
+  isNumber: isNumber$1,
+  isBoolean: isBoolean$2,
+  isObject: isObject$4,
   isPlainObject: isPlainObject$1,
   isEmptyObject: isEmptyObject$1,
   isReadableStream,
@@ -9157,12 +9260,12 @@ var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
 
 const isObjectType = (value) => typeof value === 'object';
-var isObject$1 = (value) => !isNullOrUndefined(value) &&
+var isObject$3 = (value) => !isNullOrUndefined(value) &&
     !Array.isArray(value) &&
     isObjectType(value) &&
     !isDateObject(value);
 
-var getEventValue = (event) => isObject$1(event) && event.target
+var getEventValue = (event) => isObject$3(event) && event.target
     ? isCheckBoxInput(event.target)
         ? event.target.checked
         : event.target.value
@@ -9174,7 +9277,7 @@ var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
 
 var isPlainObject = (tempObject) => {
     const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-    return (isObject$1(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+    return (isObject$3(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
 };
 
 var isWeb = typeof window !== 'undefined' &&
@@ -9190,7 +9293,7 @@ function cloneObject(data) {
         return data;
     }
     const isArray = Array.isArray(data);
-    if (!isArray && !(isObject$1(data) && isPlainObject(data))) {
+    if (!isArray && !(isObject$3(data) && isPlainObject(data))) {
         return data;
     }
     const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
@@ -9211,7 +9314,7 @@ var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
 var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
 
 var get = (object, path, defaultValue) => {
-    if (!path || !isObject$1(object)) {
+    if (!path || !isObject$3(object)) {
         return defaultValue;
     }
     const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
@@ -9222,7 +9325,7 @@ var get = (object, path, defaultValue) => {
         : result;
 };
 
-var isBoolean = (value) => typeof value === 'boolean';
+var isBoolean$1 = (value) => typeof value === 'boolean';
 
 var isFunction$1 = (value) => typeof value === 'function';
 
@@ -9237,7 +9340,7 @@ var set = (object, path, value) => {
         if (index !== lastIndex) {
             const objValue = object[key];
             newValue =
-                isObject$1(objValue) || Array.isArray(objValue)
+                isObject$3(objValue) || Array.isArray(objValue)
                     ? objValue
                     : !isNaN(+tempPath[index + 1])
                         ? []
@@ -9367,10 +9470,10 @@ function useFormState(props) {
     return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
-var isString = (value) => typeof value === 'string';
+var isString$1 = (value) => typeof value === 'string';
 
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
-    if (isString(names)) {
+    if (isString$1(names)) {
         isGlobal && _names.watch.add(names);
         return get(formValues, names, defaultValue);
     }
@@ -9409,7 +9512,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
         if (key !== 'ref') {
             const val2 = object2[key];
             if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject$1(val1) && isObject$1(val2)) ||
+                (isObject$3(val1) && isObject$3(val2)) ||
                 (Array.isArray(val1) && Array.isArray(val2))
                 ? !deepEqual(val1, val2, _internal_visited)
                 : !Object.is(val1, val2)) {
@@ -9551,7 +9654,7 @@ function useController(props) {
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
-        ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
+        ...(isBoolean$1(props.disabled) ? { disabled: props.disabled } : {}),
     }));
     _props.current = props;
     const fieldState = React.useMemo(() => Object.defineProperties({}, {
@@ -9604,7 +9707,7 @@ function useController(props) {
     const field = React.useMemo(() => ({
         name,
         value,
-        ...(isBoolean(disabled) || formState.disabled
+        ...(isBoolean$1(disabled) || formState.disabled
             ? { disabled: formState.disabled || disabled }
             : {}),
         onChange,
@@ -9619,7 +9722,7 @@ function useController(props) {
         }
         control.register(name, {
             ..._props.current.rules,
-            ...(isBoolean(_props.current.disabled)
+            ...(isBoolean$1(_props.current.disabled)
                 ? { disabled: _props.current.disabled }
                 : {}),
         });
@@ -9853,9 +9956,9 @@ function extractFormValues(fieldsState, formValues) {
         if (fieldsState.hasOwnProperty(key)) {
             const fieldState = fieldsState[key];
             const fieldValue = formValues[key];
-            if (fieldState && isObject$1(fieldState) && fieldValue) {
+            if (fieldState && isObject$3(fieldState) && fieldValue) {
                 const nestedFieldsState = extractFormValues(fieldState, fieldValue);
-                if (isObject$1(nestedFieldsState)) {
+                if (isObject$3(nestedFieldsState)) {
                     values[key] = nestedFieldsState;
                 }
             }
@@ -9867,7 +9970,7 @@ function extractFormValues(fieldsState, formValues) {
     return values;
 }
 
-var isEmptyObject = (value) => isObject$1(value) && !Object.keys(value).length;
+var isEmptyObject = (value) => isObject$3(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
 
@@ -9917,7 +10020,7 @@ function unset(object, path) {
         delete childObject[key];
     }
     if (index !== 0 &&
-        ((isObject$1(childObject) && isEmptyObject(childObject)) ||
+        ((isObject$3(childObject) && isEmptyObject(childObject)) ||
             (Array.isArray(childObject) && isEmptyArray(childObject)))) {
         unset(object, paths.slice(0, -1));
     }
@@ -9934,7 +10037,7 @@ var objectHasFunction = (data) => {
 };
 
 function isTraversable(value) {
-    return Array.isArray(value) || (isObject$1(value) && !objectHasFunction(value));
+    return Array.isArray(value) || (isObject$3(value) && !objectHasFunction(value));
 }
 function markFieldsDirty(data, fields = {}) {
     for (const key in data) {
@@ -10004,7 +10107,7 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
             : value
                 ? +value
                 : value
-        : valueAsDate && isString(value)
+        : valueAsDate && isString$1(value)
             ? new Date(value)
             : setValueAs
                 ? setValueAs(value)
@@ -10060,7 +10163,7 @@ var getRuleValue = (rule) => isUndefined$1(rule)
     ? rule
     : isRegex(rule)
         ? rule.source
-        : isObject$1(rule)
+        : isObject$3(rule)
             ? isRegex(rule.value)
                 ? rule.value.source
                 : rule.value
@@ -10079,7 +10182,7 @@ var hasPromiseValidation = (fieldReference) => !!fieldReference &&
     !!fieldReference.validate &&
     !!((isFunction$1(fieldReference.validate) &&
         fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
-        (isObject$1(fieldReference.validate) &&
+        (isObject$3(fieldReference.validate) &&
             Object.values(fieldReference.validate).find((validateFunction) => validateFunction.constructor.name === ASYNC_FUNCTION)));
 
 var hasValidation = (options) => options.mount &&
@@ -10115,7 +10218,7 @@ const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
                     }
                 }
             }
-            else if (isObject$1(currentField)) {
+            else if (isObject$3(currentField)) {
                 if (iterateFieldsByAction(currentField, action)) {
                     break;
                 }
@@ -10204,18 +10307,18 @@ var updateFieldArrayRootError = (errors, error, name) => {
 };
 
 function getValidateError(result, ref, type = 'validate') {
-    if (isString(result) ||
-        (Array.isArray(result) && result.every(isString)) ||
-        (isBoolean(result) && !result)) {
+    if (isString$1(result) ||
+        (Array.isArray(result) && result.every(isString$1)) ||
+        (isBoolean$1(result) && !result)) {
         return {
             type,
-            message: isString(result) ? result : '',
+            message: isString$1(result) ? result : '',
             ref,
         };
     }
 }
 
-var getValueAndMessage = (validationData) => isObject$1(validationData) && !isRegex(validationData)
+var getValueAndMessage = (validationData) => isObject$3(validationData) && !isRegex(validationData)
     ? validationData
     : {
         value: validationData,
@@ -10231,7 +10334,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
-            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
+            inputRef.setCustomValidity(isBoolean$1(message) ? '' : message || '');
             inputRef.reportValidity();
         }
     };
@@ -10259,10 +10362,10 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
         ? !Array.isArray(inputValue) || !inputValue.length
         : required &&
             ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
-                (isBoolean(inputValue) && !inputValue) ||
+                (isBoolean$1(inputValue) && !inputValue) ||
                 (isCheckBox && !getCheckboxValue(refs).isValid) ||
                 (isRadio && !getRadioValue(refs).isValid))) {
-        const { value, message } = isString(required)
+        const { value, message } = isString$1(required)
             ? { value: !!required, message: required }
             : getValueAndMessage(required);
         if (value) {
@@ -10298,14 +10401,14 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
             const convertTimeToDate = (time) => new Date(new Date().toDateString() + ' ' + time);
             const isTime = ref.type == 'time';
             const isWeek = ref.type == 'week';
-            if (isString(maxOutput.value) && inputValue) {
+            if (isString$1(maxOutput.value) && inputValue) {
                 exceedMax = isTime
                     ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)
                     : isWeek
                         ? inputValue > maxOutput.value
                         : valueDate > new Date(maxOutput.value);
             }
-            if (isString(minOutput.value) && inputValue) {
+            if (isString$1(minOutput.value) && inputValue) {
                 exceedMin = isTime
                     ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)
                     : isWeek
@@ -10323,7 +10426,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
     }
     if ((maxLength || minLength) &&
         !isEmpty &&
-        (isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))) {
+        (isString$1(inputValue) || (isFieldArray && Array.isArray(inputValue)))) {
         const maxLengthOutput = getValueAndMessage(maxLength);
         const minLengthOutput = getValueAndMessage(minLength);
         const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
@@ -10338,7 +10441,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
             }
         }
     }
-    if (pattern && !isEmpty && isString(inputValue)) {
+    if (pattern && !isEmpty && isString$1(inputValue)) {
         const { value: patternValue, message } = getValueAndMessage(pattern);
         if (isRegex(patternValue) && !inputValue.match(patternValue)) {
             error[name] = {
@@ -10368,7 +10471,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
                 }
             }
         }
-        else if (isObject$1(validate)) {
+        else if (isObject$3(validate)) {
             let validationResult = {};
             for (const key in validate) {
                 if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
@@ -10401,14 +10504,14 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
     return error;
 };
 
-const defaultOptions = {
+const defaultOptions$1 = {
     mode: VALIDATION_MODE.onSubmit,
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
 function createFormControl(props = {}) {
     let _options = {
-        ...defaultOptions,
+        ...defaultOptions$1,
         ...props,
     };
     let _formState = {
@@ -10428,7 +10531,7 @@ function createFormControl(props = {}) {
         disabled: _options.disabled || false,
     };
     let _fields = {};
-    let _defaultValues = isObject$1(_options.defaultValues) || isObject$1(_options.values)
+    let _defaultValues = isObject$3(_options.defaultValues) || isObject$3(_options.values)
         ? cloneObject(_options.defaultValues || _options.values) || {}
         : {};
     let _formValues = _options.shouldUnregister
@@ -10619,7 +10722,7 @@ function createFormControl(props = {}) {
     const shouldRenderByError = (name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
         const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
-            isBoolean(isValid) &&
+            isBoolean$1(isValid) &&
             _formState.isValid !== isValid;
         if (_options.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
@@ -10637,7 +10740,7 @@ function createFormControl(props = {}) {
             shouldUpdateValid) {
             const updatedFormState = {
                 ...fieldState,
-                ...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),
+                ...(shouldUpdateValid && isBoolean$1(isValid) ? { isValid } : {}),
                 errors: _formState.errors,
                 name,
             };
@@ -10724,7 +10827,7 @@ function createFormControl(props = {}) {
             ? _formValues
             : isUndefined$1(defaultValue)
                 ? _defaultValues
-                : isString(names)
+                : isString$1(names)
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
@@ -10789,7 +10892,7 @@ function createFormControl(props = {}) {
             const fieldName = name + '.' + fieldKey;
             const field = get(_fields, fieldName);
             (_names.array.has(name) ||
-                isObject$1(fieldValue) ||
+                isObject$3(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
                 ? setValues(fieldName, fieldValue, options)
@@ -10961,7 +11064,7 @@ function createFormControl(props = {}) {
             validationResult = isValid = await executeBuiltInValidation(_fields);
         }
         _subjects.state.next({
-            ...(!isString(name) ||
+            ...(!isString$1(name) ||
                 ((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
                     isValid !== _formState.isValid)
                 ? {}
@@ -10983,7 +11086,7 @@ function createFormControl(props = {}) {
         }
         return isUndefined$1(fieldNames)
             ? values
-            : isString(fieldNames)
+            : isString$1(fieldNames)
                 ? get(values, fieldNames)
                 : fieldNames.map((name) => get(values, name));
     };
@@ -11091,7 +11194,7 @@ function createFormControl(props = {}) {
         !options.keepIsValid && _setValid();
     };
     const _setDisabledField = ({ disabled, name, }) => {
-        if ((isBoolean(disabled) && _state.mount) ||
+        if ((isBoolean$1(disabled) && _state.mount) ||
             !!disabled ||
             _names.disabled.has(name)) {
             const wasDisabled = _names.disabled.has(name);
@@ -11103,7 +11206,7 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const disabledIsDefined = isBoolean$1(options.disabled) || isBoolean$1(_options.disabled);
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -11116,7 +11219,7 @@ function createFormControl(props = {}) {
         _names.mount.add(name);
         if (field) {
             _setDisabledField({
-                disabled: isBoolean(options.disabled)
+                disabled: isBoolean$1(options.disabled)
                     ? options.disabled
                     : _options.disabled,
                 name,
@@ -11190,7 +11293,7 @@ function createFormControl(props = {}) {
     const _focusError = () => _options.shouldFocusError &&
         iterateFieldsByAction(_fields, _focusInput, _names.mount);
     const _disableForm = (disabled) => {
-        if (isBoolean(disabled)) {
+        if (isBoolean$1(disabled)) {
             _subjects.state.next({ disabled });
             iterateFieldsByAction(_fields, (ref, name) => {
                 const currentField = get(_fields, name);
@@ -11702,9 +11805,9 @@ function RHFCheckbox({ name, helperText, ...other }) {
             (!!error || helperText) && (React.createElement(FormHelperText, { error: !!error, sx: { mt: 0 } }, error ? error?.message : helperText)))) }));
 }
 
-function FormProvider({ children, onSubmit, methods }) {
+function FormProvider({ children, onSubmit, methods, formId }) {
     return (React.createElement(FormProvider$1, { ...methods },
-        React.createElement("form", { onSubmit: onSubmit }, children)));
+        React.createElement("form", { id: formId, onSubmit: onSubmit }, children)));
 }
 
 function RHFTextField({ name, helperText, ...other }) {
@@ -13209,34 +13312,6 @@ function useEventActiveReleases(id, includeChildren, timeslotId) {
     };
 }
 
-const FeeBox = ({ event, align = 'left' }) => {
-    const { t, lang } = useGlobal();
-    const xs = useResponsive('only', 'xs');
-    const { watch } = useFormContext();
-    const values = watch();
-    const isRight = align === 'right';
-    return (React.createElement(Box, { mb: 1, textAlign: isRight ? 'right' : undefined },
-        values.promoCodes.length > 0 && (React.createElement(Stack, { direction: "row", justifyContent: isRight ? 'flex-end' : 'space-between', alignItems: "center", spacing: 1, sx: { color: (theme) => theme.palette.grey.A700 } },
-            React.createElement(Typography, { variant: "caption", sx: { textAlign: 'right' } },
-                t('form.labels.original_price'),
-                ":"),
-            React.createElement(Typography, { variant: "caption", sx: { textDecoration: 'line-through' } }, fCurrency(values.originalPrice, lang, event.currency)))),
-        React.createElement(Stack, { direction: "row", justifyContent: isRight ? 'flex-end' : 'space-between', alignItems: "center", spacing: 1 },
-            React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 1 },
-                React.createElement(Tooltip, { title: t('form.labels.price_including_service_fee', {
-                        fee: fCurrency(values.totalFee ?? 0, lang, event.currency),
-                    }), placement: xs ? 'top' : 'left', arrow: true, sx: { cursor: 'help' } },
-                    React.createElement(Stack, { alignItems: "center" },
-                        React.createElement(Iconify, { icon: "carbon:information-filled" }))),
-                React.createElement(Typography, { variant: "subtitle1", sx: { textAlign: 'right' } },
-                    t('form.labels.total'),
-                    ":")),
-            React.createElement(Typography, { variant: "subtitle1" }, fCurrency(values.total, lang, event.currency))),
-        !!values.totalFee && (React.createElement(Typography, { variant: "caption", sx: {
-                color: (theme) => theme.palette.grey.A700,
-            } }, t('form.labels.with_fee')))));
-};
-
 var ExtraFieldTypes;
 (function (ExtraFieldTypes) {
     ExtraFieldTypes["ORDER"] = "ORDER";
@@ -13312,8 +13387,141 @@ var EventType;
     EventType["RECURRING"] = "RECURRING";
 })(EventType || (EventType = {}));
 
-const TicketSelection = ({ event }) => {
+const ReleaseDescription = ({ description, isExpanded, onToggle, moreInfoLabel, showCollapse = false, }) => {
+    if (!description)
+        return null;
+    if (showCollapse) {
+        return (React.createElement(Collapse, { in: isExpanded },
+            React.createElement(Typography, { variant: "body2", color: "text.secondary" }, description)));
+    }
+    return (React.createElement(Link, { onClick: onToggle, color: "inherit", underline: "always", fontSize: 12 },
+        React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0 },
+            React.createElement(Box, null, moreInfoLabel),
+            React.createElement(Iconify, { sx: { width: 24, height: 24 }, icon: isExpanded ? 'eva:chevron-up-fill' : 'eva:chevron-down-fill' }))));
+};
+
+const TicketQuantityControl = ({ quantity, isDisabled, canAddFirst, canAddMore, addLabel, onDecrement, onIncrement, onAddFirst, }) => {
+    const { t } = useGlobal();
+    if (quantity > 0) {
+        return (React.createElement(Stack, { direction: "row", spacing: { xs: 0.5, md: 1 }, alignItems: "center" },
+            React.createElement(IconButton, { onClick: onDecrement, "aria-label": t('form.labels.ticket_quantity_decrease'), disabled: isDisabled || quantity <= 0, sx: {
+                    width: { xs: 36, md: 40 },
+                    height: { xs: 36, md: 40 },
+                    borderRadius: 1,
+                    border: '1px solid',
+                    borderColor: 'grey.300',
+                } },
+                React.createElement(Iconify, { icon: "eva:minus-fill" })),
+            React.createElement(Box, { sx: {
+                    width: { xs: 36, md: 40 },
+                    height: { xs: 36, md: 40 },
+                    borderRadius: 1,
+                    border: '1px solid',
+                    borderColor: 'grey.300',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontWeight: 600,
+                } }, quantity),
+            React.createElement(IconButton, { onClick: onIncrement, "aria-label": t('form.labels.ticket_quantity_increase'), disabled: isDisabled || !canAddMore, sx: {
+                    width: { xs: 36, md: 40 },
+                    height: { xs: 36, md: 40 },
+                    borderRadius: 1,
+                    bgcolor: 'primary.main',
+                    color: 'primary.contrastText',
+                    '&:hover': { bgcolor: 'primary.dark' },
+                } },
+                React.createElement(Iconify, { icon: "eva:plus-fill" }))));
+    }
+    return (React.createElement(Button, { variant: "contained", onClick: onAddFirst, "aria-label": addLabel, disabled: isDisabled || !canAddFirst, sx: {
+            height: { xs: 36, md: 40 },
+            width: { xs: 116, md: 136 },
+            borderRadius: 1,
+            px: 3,
+            textTransform: 'none',
+            fontWeight: 600,
+        } }, addLabel));
+};
+
+const TicketSelectionMobile = ({ event, activeReleases, showLoading, soldOutReleaseCategoryNames, tickets, isQuantityDisabled, setValue, removeTicket, getExtraFields, }) => {
     const { t, lang } = useGlobal();
+    const [expandedReleaseIds, setExpandedReleaseIds] = useState({});
+    const theme = useTheme$1();
+    const isLight = theme.palette.mode === 'light';
+    const getReleaseTitle = (release) => release.releaseCategoryName || release.name || '';
+    const getTicketIndexByRelease = (releaseId) => tickets.findIndex((ticket) => ticket.releaseId === releaseId);
+    const getReleaseQuantity = (releaseId) => {
+        const ticket = tickets.find((t) => t.releaseId === releaseId);
+        return Number(ticket?.quantity || 0);
+    };
+    const updateReleaseQuantity = (release, nextQuantity) => {
+        const maxAvailable = Math.min(release.availableTickets || 0, 10);
+        const clampedQuantity = Math.max(0, Math.min(nextQuantity, maxAvailable));
+        const ticketIndex = getTicketIndexByRelease(release.id);
+        if (clampedQuantity <= 0) {
+            if (ticketIndex >= 0)
+                removeTicket(ticketIndex);
+            return;
+        }
+        if (ticketIndex >= 0) {
+            setValue(`tickets.${event.id}.${ticketIndex}.quantity`, clampedQuantity);
+            return;
+        }
+        setValue(`tickets.${event.id}`, [
+            ...tickets,
+            {
+                releaseId: release.id,
+                quantity: clampedQuantity,
+                itemName: getReleaseTitle(release),
+                price: release.price || 0,
+                products: [],
+                extraFields: [],
+            },
+        ]);
+    };
+    const toggleReleaseDescription = (releaseId) => setExpandedReleaseIds((prev) => ({
+        ...prev,
+        [releaseId]: !prev[releaseId],
+    }));
+    if (showLoading) {
+        return (React.createElement(Stack, { spacing: 2 }, [...Array(2)].map((_, index) => (React.createElement(Skeleton, { key: index, variant: "rounded", sx: {
+                width: '100%',
+                height: (theme) => theme.spacing(12),
+            } })))));
+    }
+    return (React.createElement(Stack, { spacing: 2 }, activeReleases?.map((release) => {
+        const quantity = getReleaseQuantity(release.id);
+        const ticketIndex = getTicketIndexByRelease(release.id);
+        const maxAvailable = Math.min(release.availableTickets || 0, 10);
+        const isLocked = release.locked && !soldOutReleaseCategoryNames.includes(release.releaseCategoryName);
+        const isDisabled = isLocked && quantity === 0;
+        const canAddFirst = maxAvailable > 0 && !isQuantityDisabled(1, release.id);
+        const canAddMore = quantity < maxAvailable && !isQuantityDisabled(quantity + 1, release.id);
+        return (React.createElement(Box, { key: release.id, sx: {
+                pt: 1,
+                pr: 0.5,
+                pb: 0.5,
+                pl: 2,
+                borderRadius: 1,
+                bgcolor: (theme) => (isLight ? theme.palette.grey[100] : theme.palette.grey[800]),
+            } },
+            React.createElement(Stack, { spacing: 0 },
+                React.createElement(Box, null,
+                    React.createElement(Typography, { variant: "subtitle2", fontWeight: 700 }, getReleaseTitle(release))),
+                React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" },
+                    React.createElement(Stack, null,
+                        React.createElement(Typography, { variant: "body2" }, release.price === 0
+                            ? t('free')
+                            : fCurrency(release.price, lang, event.currency)),
+                        React.createElement(ReleaseDescription, { description: release.description, isExpanded: Boolean(expandedReleaseIds[release.id]), onToggle: () => toggleReleaseDescription(release.id), moreInfoLabel: t('more_info') })),
+                    React.createElement(TicketQuantityControl, { quantity: quantity, isDisabled: isDisabled, canAddFirst: canAddFirst, canAddMore: canAddMore, addLabel: t('add'), onDecrement: () => updateReleaseQuantity(release, quantity - 1), onIncrement: () => updateReleaseQuantity(release, quantity + 1), onAddFirst: () => updateReleaseQuantity(release, 1) })),
+                React.createElement(ReleaseDescription, { description: release.description, isExpanded: Boolean(expandedReleaseIds[release.id]), onToggle: () => toggleReleaseDescription(release.id), moreInfoLabel: t('more_info'), showCollapse: true }),
+                ticketIndex >= 0 && getExtraFields(release.id, ticketIndex))));
+    })));
+};
+
+const TicketSelection = ({ event }) => {
+    const { t } = useGlobal();
     const isMobile = useResponsive('down', 'md');
     const { setValue, watch } = useFormContext();
     const tickets = useWatch({
@@ -13344,11 +13552,11 @@ const TicketSelection = ({ event }) => {
         const countTickets = addedRelease?.quantity || 0;
         return (React.createElement(ReleaseExtraFields, { release: release, eventId: event.id, releaseIndex: index, quantity: countTickets }));
     };
-    const getAvailableTicketsForRelease = (release) => {
-        const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
-        const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
-        return availableQuantity > 10 ? 10 : availableQuantity;
-    };
+    // const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
+    //   const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
+    //   const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
+    //   return availableQuantity > 10 ? 10 : availableQuantity;
+    // };
     const countReleaseCategories = () => {
         const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
         return Object.keys(grouped).length;
@@ -13426,47 +13634,12 @@ const TicketSelection = ({ event }) => {
             }
         }
     };
-    return (React.createElement(Stack, { spacing: 3, direction: "column", divider: React.createElement(Divider, { sx: { borderStyle: 'dashed' } }) },
-        tickets.map((item, index) => (React.createElement(Box, { key: index },
-            React.createElement(Grid, { container: true, spacing: 3 },
-                React.createElement(Grid, { size: { xs: 12, md: 6 } }, showLoading ? (React.createElement(Skeleton, { variant: "rounded", sx: {
-                        width: '100%',
-                        height: (theme) => theme.spacing(7.5),
-                    } })) : (React.createElement(RHFSelect, { name: `tickets.${event.id}.${index}.releaseId`, value: item.releaseId, label: index > 0
-                        ? t('form.labels.add_another_release')
-                        : t('form.labels.release_category_price'), maxHeight: "calc(100vh - 2rem)", onChange: (e) => {
-                        setValue(`tickets.${event.id}.${index}.releaseId`, Number(e.target.value));
-                        setValue(`tickets.${event.id}.${index}.extraFields`, []);
-                    } },
-                    React.createElement(MenuItem, { key: 0, value: "" }, t('choose')),
-                    activeReleases?.map((activeRelease) => (React.createElement(MenuItem, { key: activeRelease.id, value: activeRelease.id, disabled: isReleaseSelected(activeRelease.id) ||
-                            (activeRelease.locked &&
-                                !soldOutReleaseCategoryNames.includes(activeRelease.releaseCategoryName)) },
-                        activeRelease.releaseCategoryName,
-                        " - ",
-                        activeRelease.name,
-                        ":",
-                        ' ',
-                        activeRelease.price === 0
-                            ? t('free')
-                            : fCurrency(activeRelease.price, lang, event.currency))))))),
-                React.createElement(Grid, { key: index, size: { xs: 12, md: 6 } }, showLoading ? (React.createElement(Skeleton, { variant: "rounded", sx: {
-                        width: '100%',
-                        height: (theme) => theme.spacing(7.5),
-                    } })) : (React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 1 },
-                    React.createElement(RHFSelect, { name: `tickets.${event.id}.${index}.quantity`, value: item.quantity, label: t('form.labels.quantity') },
-                        [...Array(getAvailableTicketsForRelease(item))].map((_, index2) => (React.createElement(MenuItem, { key: index2, value: index2 + 1, disabled: isQuantityDisabled(index2 + 1, item.releaseId) }, index2 + 1))),
-                        !item.releaseId && (React.createElement(MenuItem, { disabled: true, sx: { textTransform: 'unset!important' } }, t('event.tickets.stepper.1.quantity_select')))),
-                    item.releaseId && item.quantity && (React.createElement(Box, null,
-                        React.createElement(IconButton, { color: "primary", onClick: () => removeTicket(index) },
-                            React.createElement(Iconify, { icon: "carbon:trash-can" })))))))),
-            activeReleases && item.releaseId && (React.createElement(Typography, { variant: "caption", content: "div", mt: 2, mb: getRelease(item.releaseId)?.extraFields?.length ? 2 : 0, display: "block" }, getRelease(item.releaseId)?.description ?? '')),
-            getExtraFields(item.releaseId, index)))),
+    return (React.createElement(Stack, { spacing: 3, direction: "column", divider: !isMobile ? React.createElement(Divider, { sx: { borderStyle: 'dashed' } }) : undefined },
+        React.createElement(TicketSelectionMobile, { event: event, activeReleases: activeReleases, showLoading: showLoading, soldOutReleaseCategoryNames: soldOutReleaseCategoryNames, tickets: tickets, isQuantityDisabled: isQuantityDisabled, setValue: setValue, removeTicket: removeTicket, getExtraFields: getExtraFields }),
         React.createElement(Box, null,
             React.createElement(Typography, { variant: "caption", component: "div", fontStyle: "italic", mb: 2 },
                 "*",
-                t('event.tickets.stepper.1.max_ticket_quantity')),
-            isMobile && React.createElement(FeeBox, { event: event, align: "right" }))));
+                t('event.tickets.stepper.1.max_ticket_quantity')))));
 };
 
 function RHFDatePicker({ name, label, ...others }) {
@@ -13504,7 +13677,7 @@ function RHFPhone({ name, defaultCountry, helperText, ...other }) {
 
 const ContactPerson = ({ event }) => {
     const { t, content } = useGlobal();
-    return (React.createElement(Grid, { container: true, spacing: 3 },
+    return (React.createElement(Grid, { container: true, spacing: { xs: 1, md: 2 } },
         React.createElement(Grid, { size: { xs: 12, md: 6 } },
             React.createElement(RHFTextField, { name: "firstName", label: t('form.labels.first_name') })),
         React.createElement(Grid, { size: { xs: 12, md: 6 } },
@@ -13540,15 +13713,24 @@ function useAllowedPaymentMethods(currency, eventId) {
 const OverviewCard = styled(Card)(({ theme, stickyHeaderTop }) => ({
     position: 'sticky',
     top: stickyHeaderTop,
+    borderRadius: theme.spacing(2),
+    [theme.breakpoints.down('sm')]: {
+        borderRadius: theme.spacing(1),
+        boxShadow: 'none',
+    },
 }));
 const ShippingMethodItem = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => ({
+    shouldForwardProp: (prop) => prop !== 'active' && prop !== 'hasError',
+})(({ theme, active, hasError }) => ({
     borderRadius: theme.spacing(1),
-    border: `1px solid ${active ? theme.palette.primary.main : theme.palette.grey.A200}`,
+    border: `1px solid ${hasError
+        ? theme.palette.error.main
+        : active
+            ? theme.palette.primary.main
+            : theme.palette.grey.A200}`,
     marginTop: theme.spacing(1),
     width: '100%',
-    padding: `0 ${theme.spacing(2)}`,
+    padding: `0 0 0 ${theme.spacing(2)}`,
     transitionDuration: '.3s',
     '& > .MuiFormControlLabel-root': {
         width: '100%',
@@ -33280,7 +33462,7 @@ const deepHas = (obj, p) => {
   let parent = propertyExprExports.getter(propertyExprExports.join(path), true)(obj);
   return !!(parent && last in parent);
 };
-let isObject = obj => Object.prototype.toString.call(obj) === '[object Object]';
+let isObject$2 = obj => Object.prototype.toString.call(obj) === '[object Object]';
 function unknown(ctx, value) {
   let known = Object.keys(ctx.fields);
   return Object.keys(value).filter(key => known.indexOf(key) === -1);
@@ -33294,7 +33476,7 @@ class ObjectSchema extends Schema {
     super({
       type: 'object',
       check(value) {
-        return isObject(value) || typeof value === 'function';
+        return isObject$2(value) || typeof value === 'function';
       }
     });
     this.fields = Object.create(null);
@@ -33371,7 +33553,7 @@ class ObjectSchema extends Schema {
     options.__validating = true;
     options.originalValue = originalValue;
     super._validate(_value, options, panic, (objectErrors, value) => {
-      if (!recursive || !isObject(value)) {
+      if (!recursive || !isObject$2(value)) {
         next(objectErrors, value);
         return;
       }
@@ -33786,34 +33968,40 @@ const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidi
 
 function o(o,n,s$1){return void 0===s$1&&(s$1={}),function(a,i,c){try{return Promise.resolve(function(t,r){try{var u=(null!=n&&n.context&&"development"===process.env.NODE_ENV&&console.warn("You should not used the yup options context. Please, use the 'useForm' context object instead"),Promise.resolve(o["sync"===s$1.mode?"validateSync":"validate"](a,Object.assign({abortEarly:!1},n,{context:i}))).then(function(t){return c.shouldUseNativeValidation&&o$1({},c),{values:s$1.raw?Object.assign({},a):t,errors:{}}}));}catch(e){return r(e)}return u&&u.then?u.then(void 0,r):u}(0,function(e){if(!e.inner)throw e;return {values:{},errors:s((o=e,n=!c.shouldUseNativeValidation&&"all"===c.criteriaMode,(o.inner||[]).reduce(function(e,t){if(e[t.path]||(e[t.path]={message:t.message,type:t.type}),n){var o=e[t.path].types,s=o&&o[t.type];e[t.path]=appendErrors(t.path,n,e,t.type,s?[].concat(s,t.message):t.message);}return e},{})),c)};var o,n;}))}catch(e){return Promise.reject(e)}}}
 
-const PaymentOverviewCheckbox = ({ checkboxName, label, value, modal }) => {
+const PaymentOverviewCheckbox = ({ checkboxName, label, value }) => {
     const { t } = useGlobal();
-    const [open, setOpen] = useState(false);
-    const handleOpen = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setOpen(true);
-    };
-    const handleClose = () => setOpen(false);
+    const { control } = useFormContext();
     return (React.createElement(React.Fragment, null,
-        React.createElement(RHFCheckbox, { name: checkboxName, label: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, sx: { width: '100%' } },
-                React.createElement(Typography, { variant: "caption", sx: { flex: 1 } }, label),
-                React.createElement(Stack, { alignItems: "flex-end" },
-                    React.createElement(Typography, { variant: "caption", fontWeight: "600" }, value),
-                    React.createElement(Link, { variant: "caption", onClick: handleOpen }, t('more_info')))), sx: {
-                width: 'calc(100% + 11px)',
-                mb: 0.5,
-                '& > .MuiTypography-root': {
-                    width: '100%',
-                },
-            } }),
-        React.createElement(Dialog, { open: open, onClose: handleClose, maxWidth: "sm", fullWidth: true },
-            React.createElement(DialogTitle, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-                modal.title,
-                React.createElement(IconButton, { onClick: handleClose, size: "small" },
-                    React.createElement(Iconify, { icon: "carbon:close" }))),
-            React.createElement(DialogContent, null,
-                React.createElement(Typography, { variant: "body2" }, modal.description)))));
+        React.createElement(Controller, { name: checkboxName, control: control, render: ({ field }) => (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", useFlexGap: true, spacing: 1, sx: { width: '100%', mb: 0.5 } },
+                React.createElement(Typography, { variant: "body2", sx: { flex: 1 } }, label),
+                React.createElement(Box, { sx: {
+                        position: 'relative',
+                        display: 'flex',
+                        alignItems: 'center',
+                    } },
+                    React.createElement(Typography, { variant: "body2", sx: {
+                            mr: field.value ? 0 : 1,
+                            ...(field.value
+                                ? {
+                                    position: 'absolute',
+                                    right: 0,
+                                }
+                                : {}),
+                        } }, value),
+                    React.createElement(Button, { variant: "outlined", color: "primary", size: "small", startIcon: React.createElement(Iconify, { icon: "carbon:add" }), onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            field.onChange(true);
+                        }, sx: {
+                            borderRadius: 1,
+                            textTransform: 'none',
+                            px: 1,
+                            width: 96,
+                            minWidth: 96,
+                            color: 'text.primary',
+                            visibility: field.value ? 'hidden' : 'visible',
+                            pointerEvents: field.value ? 'none' : 'auto',
+                        }, tabIndex: field.value ? -1 : 0, "aria-hidden": field.value }, t('add'))))) })));
 };
 
 var location$1 = {};
@@ -33843,6 +34031,24 @@ const calculatePriceWithDiscount = (price, discountPercent = 0, fixedDiscount =
     return Math.ceil(finalPrice * 100) / 100;
 };
 
+const FeeBox = ({ event, align = 'left' }) => {
+    const { t, lang } = useGlobal();
+    const { watch } = useFormContext();
+    const values = watch();
+    const isRight = align === 'right';
+    return (React.createElement(Box, { mb: 1, textAlign: isRight ? 'right' : undefined },
+        values.promoCodes.length > 0 && (React.createElement(Stack, { direction: "row", justifyContent: isRight ? 'flex-end' : 'space-between', alignItems: "center", spacing: 1, sx: { color: (theme) => theme.palette.grey.A700 } },
+            React.createElement(Typography, { variant: "caption", sx: { textAlign: 'right' } },
+                t('form.labels.original_price'),
+                ":"),
+            React.createElement(Typography, { variant: "caption", sx: { textDecoration: 'line-through' } }, fCurrency(values.originalPrice, lang, event.currency)))),
+        React.createElement(Stack, { direction: "row", justifyContent: isRight ? 'flex-end' : 'space-between', alignItems: "center", spacing: 1 },
+            React.createElement(Typography, { variant: "subtitle1", sx: { textAlign: 'right' } },
+                t('form.labels.total'),
+                ":"),
+            React.createElement(Typography, { variant: "subtitle1" }, fCurrency(values.total, lang, event.currency)))));
+};
+
 var calendar = {};
 
 var hasRequiredCalendar;
@@ -33914,7 +34120,10 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 
-const PaymentOverviewBox = ({ event }) => {
+const EVENTLOOK_ORDER_FORM_CONTAINER_ID = 'eventlook-order-form-container';
+const EVENTLOOK_ORDER_FORM_ID = 'eventlook-order-form';
+
+const PaymentOverviewBox = ({ event, withoutPadding, hideBuyButton }) => {
     const { t, lang, options } = useGlobal();
     const xs = useResponsive('only', 'xs');
     const md = useResponsive('only', 'md');
@@ -33923,7 +34132,7 @@ const PaymentOverviewBox = ({ event }) => {
     const [shippingFee, setShippingFee] = useState(0);
     const { setValue, watch } = useFormContext();
     const values = watch();
-    const { total, uuid, firstName, lastName, email, gender, birthdate, phone, promoCodes, shipping, totalFee, isPaymentVerify, ticketInsurance, ticketInsurancePricePerUnit, smsNotification, smsNotificationPrice, } = values;
+    const { total, uuid, firstName, lastName, email, gender, birthdate, phone, promoCodes, shipping, totalFee, isPaymentVerify, ticketInsurance, smsNotification, smsNotificationPrice, ticketInsurancePricePerUnit, } = values;
     const tickets = useWatch({
         name: 'tickets',
         defaultValue: {},
@@ -34188,28 +34397,25 @@ const PaymentOverviewBox = ({ event }) => {
             console.error('Error calculating cart:', err);
         }
     }, []);
-    const removeProduct = (variant) => {
-        const { eventId, variantId } = variant;
-        const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
-        const idx = list.findIndex((p) => Number(p.eventProductVariantId) === Number(variantId));
-        if (idx === -1)
-            return;
-        const item = list[idx];
-        if ((item.quantity ?? 0) <= 1) {
-            list.splice(idx, 1);
-        }
-        else {
-            list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
-        }
-        const next = { ...products, [eventId]: list };
-        if (list.length === 0) {
-            const { [eventId]: _removed, ...rest } = next;
-            setValue('products', rest);
-        }
-        else {
-            setValue('products', next);
-        }
-    };
+    // const removeProduct = (variant: ISelectedProductVariant) => {
+    //   const { eventId, variantId } = variant;
+    //   const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
+    //   const idx = list.findIndex((p) => Number(p.eventProductVariantId) === Number(variantId));
+    //   if (idx === -1) return;
+    //   const item = list[idx];
+    //   if ((item.quantity ?? 0) <= 1) {
+    //     list.splice(idx, 1);
+    //   } else {
+    //     list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
+    //   }
+    //   const next = { ...products, [eventId]: list };
+    //   if (list.length === 0) {
+    //     const { [eventId]: _removed, ...rest } = next;
+    //     setValue('products', rest);
+    //   } else {
+    //     setValue('products', next);
+    //   }
+    // };
     return (React.createElement(OverviewCard, { id: "overview-card", stickyHeaderTop: options?.stickyHeaderTop || 0 },
         !isMobile && (React.createElement(Stack, { className: "overview-card__event-info", p: 2, spacing: 2 },
             React.createElement(Typography, { variant: "h6" }, event.name),
@@ -34221,7 +34427,7 @@ const PaymentOverviewBox = ({ event }) => {
                         React.createElement(TextIconLabel, { icon: React.createElement(Iconify, { icon: locationIcon, sx: { mr: 0.5, mt: 0.5, width: 18, height: 18, minWidth: 18 } }), value: React.createElement(Box, null, getPlaceAsString(event.place)), sx: { typography: 'body3', color: 'text.secondary', alignItems: 'flex-start' } })))),
             React.createElement(Divider, { sx: { borderStyle: 'dashed' } }),
             React.createElement(Stack, { direction: { xs: 'column', sm: 'row', md: 'column', lg: 'row' }, spacing: 2, p: 2, divider: React.createElement(Divider, { orientation: xs || md ? 'horizontal' : 'vertical', flexItem: true, sx: { borderStyle: 'dashed' } }), sx: {
-                    backgroundColor: (theme) => theme.palette.grey.A100,
+                    backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
                     borderRadius: 1,
                 } },
                 React.createElement(Box, { width: { sm: '50%', md: '100%', lg: '50%' } },
@@ -34230,67 +34436,50 @@ const PaymentOverviewBox = ({ event }) => {
                 React.createElement(Box, { width: { sm: '50%', md: '100%', lg: '50%' } },
                     React.createElement(TextIconLabel, { icon: React.createElement(Iconify, { icon: userIcon, sx: { minWidth: 20, height: 20, mr: 1 } }), value: t('form.labels.organizer'), sx: { color: 'text.secondary' } }),
                     React.createElement(Typography, { variant: "body2", fontWeight: 700 }, event.company.displayName))))),
-        React.createElement(Stack, { className: "overview-card__order-info", p: 2, spacing: 1 },
+        React.createElement(Stack, { className: "overview-card__order-info", sx: { p: { xs: withoutPadding ? 0 : 2, md: 2 } }, pt: { xs: 0, sm: 2 }, spacing: 0.75, useFlexGap: true },
             !!selectedTickets.length && !isMobile && React.createElement(Divider, { sx: { borderStyle: 'dashed' } }),
+            !!selectedTickets.length && (React.createElement(Stack, { spacing: 0.5 },
+                React.createElement(PaymentOverviewCheckbox, { checkboxName: "smsNotification", label: t('event.tickets.sms_notification.label'), value: React.createElement(React.Fragment, null,
+                        smsNotification && totalItemCount.totalTickets > 0 ? '' : '+ ',
+                        fCurrency(smsNotificationPrice, lang, event.currency)) }),
+                React.createElement(Divider, { sx: { borderStyle: 'dashed' } }))),
             selectedTickets.map((ticket, index) => (React.createElement(Box, { key: index },
                 React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    React.createElement(Typography, { variant: "caption" },
+                    React.createElement(Typography, { variant: "body2" },
                         ticket.quantity,
                         "x ",
                         ticket.itemName),
-                    React.createElement(Typography, { variant: "caption" }, fCurrency(calculatePriceWithDiscount(ticket.price, promoCodesValues.percent, promoCodesValues.fixedDevidedTickets) * Number(ticket.quantity), lang, event.currency))),
+                    React.createElement(Typography, { variant: "body2" }, fCurrency(calculatePriceWithDiscount(ticket.price, promoCodesValues.percent, promoCodesValues.fixedDevidedTickets) * Number(ticket.quantity), lang, event.currency))),
                 ticket.products.map((product, index2) => (React.createElement(Stack, { key: index2, direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    React.createElement(Typography, { variant: "caption" },
+                    React.createElement(Typography, { variant: "body2" },
                         "- ",
                         product.quantity,
                         "x ",
                         product.name),
-                    React.createElement(Typography, { variant: "caption" }, product.price > 0
+                    React.createElement(Typography, { variant: "body2" }, product.price > 0
                         ? fCurrency(calculatePriceWithDiscount(product.price, promoCodesValues.productDiscountPercent, promoCodesValues.fixedDevidedProducts
                             ? promoCodesValues.fixedDevidedProducts * product.quantity
                             : 0), lang, event.currency)
                         : t('free')))))))),
             selectedVariants.map((variant, index) => (React.createElement(Box, { key: index },
                 React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    React.createElement(Typography, { variant: "caption" },
+                    React.createElement(Typography, { variant: "body2" },
                         variant.quantity,
                         "x ",
                         variant.name),
-                    React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                        React.createElement(Typography, { variant: "caption" }, fCurrency(calculatePriceWithDiscount(variant.price, promoCodesValues.productDiscountPercent, promoCodesValues.fixedDevidedProducts
-                            ? promoCodesValues.fixedDevidedProducts * variant.quantity
-                            : 0), lang, event.currency)),
-                        React.createElement(IconButton, { onClick: () => removeProduct(variant), color: "primary", size: "small" },
-                            React.createElement(Iconify, { icon: "carbon:trash-can" }))))))),
+                    React.createElement(Typography, { variant: "body2" }, fCurrency(calculatePriceWithDiscount(variant.price, promoCodesValues.productDiscountPercent, promoCodesValues.fixedDevidedProducts
+                        ? promoCodesValues.fixedDevidedProducts * variant.quantity
+                        : 0), lang, event.currency)))))),
             !!shippingFee && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(Typography, { variant: "caption" }, t('form.labels.shipping_fee')),
-                React.createElement(Typography, { variant: "caption" }, fCurrency(shippingFee, lang, event.currency)))),
-            ticketInsurance && totalItemCount.totalTickets > 0 && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(Typography, { variant: "caption" }, t('form.labels.ticket_insurance')),
-                React.createElement(Typography, { variant: "caption" }, fCurrency(values.ticketInsurancePrice, lang, event.currency)))),
-            smsNotification && totalItemCount.totalTickets > 0 && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(Typography, { variant: "caption" }, t('form.labels.sms_notification')),
-                React.createElement(Typography, { variant: "caption" }, fCurrency(values.smsNotificationPrice, lang, event.currency)))),
+                React.createElement(Typography, { variant: "body2" }, t('form.labels.shipping_fee')),
+                React.createElement(Typography, { variant: "body2" }, fCurrency(shippingFee, lang, event.currency)))),
             !!total && !!totalFee && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(Typography, { variant: "caption" }, t('form.labels.service_fee')),
-                React.createElement(Typography, { variant: "caption" }, getFee))),
+                React.createElement(Typography, { variant: "body2" }, t('form.labels.service_fee')),
+                React.createElement(Typography, { variant: "body2" }, getFee))),
             ((!!selectedTickets.length && isMobile) || !isMobile) && (React.createElement(Divider, { sx: { borderStyle: 'dashed' } })),
-            !!selectedTickets.length && (React.createElement(React.Fragment, null,
-                React.createElement(PaymentOverviewCheckbox, { checkboxName: "smsNotification", label: t('event.tickets.sms_notification.label'), value: React.createElement(React.Fragment, null,
-                        "+ ",
-                        fCurrency(smsNotificationPrice, lang, event.currency)), modal: {
-                        title: t('event.tickets.sms_notification.label'),
-                        description: (React.createElement(React.Fragment, null,
-                            React.createElement(Typography, { variant: "body2", paragraph: true }, t('event.tickets.sms_notification.modal.description')),
-                            React.createElement(Typography, { variant: "body2", sx: { fontWeight: 600 } },
-                                t('event.tickets.sms_notification.modal.price'),
-                                ":",
-                                ' ',
-                                fCurrency(smsNotificationPrice, lang, event.currency)))),
-                    } }),
-                React.createElement(Divider, { sx: { borderStyle: 'dashed' } }))),
-            React.createElement(FeeBox, { event: event }),
-            React.createElement(Button, { type: "submit", variant: "contained", size: "large", fullWidth: true }, t(isPaymentVerify ? 'verify' : 'buy')))));
+            !hideBuyButton && (React.createElement(React.Fragment, null,
+                React.createElement(FeeBox, { event: event }),
+                React.createElement(Button, { type: "submit", form: EVENTLOOK_ORDER_FORM_ID, variant: "contained", size: "large", fullWidth: true, sx: { height: { xs: 36, md: 40 } } }, t(isPaymentVerify ? 'verify' : 'buy')))))));
 };
 
 // ----------------------------------------------------------------------
@@ -34348,24 +34537,1776 @@ const ReleaseCountdown = ({ event, setShowReleaseDate }) => {
 
 const v="5.6.5";const fr=24;const ip=0;const op=74;const w=738;const h=100;const nm="bank transfer";const ddd=0;const assets=[];const layers=[{ddd:0,ind:1,ty:4,nm:"r bank Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[655.22,48.585,0],ix:2},a:{a:0,k:[40.949,41.396,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[38.126,30.072],[40.499,31.134],[40.499,38.773],[39.437,41.146],[-38.124,41.146],[-40.498,40.084],[-40.498,32.445],[-39.435,30.072]],o:[[39.437,30.072],[40.499,32.445],[40.499,40.084],[38.126,41.146],[-39.435,41.146],[-40.498,38.773],[-40.498,31.134],[-38.124,30.072]],v:[[38.126,30.072],[40.499,32.445],[40.499,38.773],[38.126,41.146],[-38.124,41.146],[-40.498,38.773],[-40.498,32.445],[-38.124,30.072]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:1,ty:"sh",ix:2,ks:{a:0,k:{i:[[31.729,27.372],[22.238,27.372],[22.238,-2.628],[31.729,-2.628]],o:[[31.729,27.372],[22.238,27.372],[22.238,-2.628],[31.729,-2.628]],v:[[31.729,27.372],[22.238,27.372],[22.238,-2.628],[31.729,-2.628]],c:true},ix:2},nm:"Path 2",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:2,ty:"sh",ix:3,ks:{a:0,k:{i:[[31.729,-2.628]],o:[[31.729,-2.628]],v:[[31.729,-2.628]],c:false},ix:2},nm:"Path 3",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:3,ty:"sh",ix:4,ks:{a:0,k:{i:[[13.749,27.372],[4.257,27.372],[4.257,-2.628],[13.749,-2.628]],o:[[13.749,27.372],[4.257,27.372],[4.257,-2.628],[13.749,-2.628]],v:[[13.749,27.372],[4.257,27.372],[4.257,-2.628],[13.749,-2.628]],c:true},ix:2},nm:"Path 4",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:4,ty:"sh",ix:5,ks:{a:0,k:{i:[[13.749,-2.628]],o:[[13.749,-2.628]],v:[[13.749,-2.628]],c:false},ix:2},nm:"Path 5",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:5,ty:"sh",ix:6,ks:{a:0,k:{i:[[-4.233,27.372],[-13.725,27.372],[-13.725,-2.628],[-4.233,-2.628]],o:[[-4.233,27.372],[-13.725,27.372],[-13.725,-2.628],[-4.233,-2.628]],v:[[-4.233,27.372],[-13.725,27.372],[-13.725,-2.628],[-4.233,-2.628]],c:true},ix:2},nm:"Path 6",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:6,ty:"sh",ix:7,ks:{a:0,k:{i:[[-4.233,-2.628]],o:[[-4.233,-2.628]],v:[[-4.233,-2.628]],c:false},ix:2},nm:"Path 7",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:7,ty:"sh",ix:8,ks:{a:0,k:{i:[[-22.215,27.372],[-31.707,27.372],[-31.707,-2.628],[-22.215,-2.628]],o:[[-22.215,27.372],[-31.707,27.372],[-31.707,-2.628],[-22.215,-2.628]],v:[[-22.215,27.372],[-31.707,27.372],[-31.707,-2.628],[-22.215,-2.628]],c:true},ix:2},nm:"Path 8",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:8,ty:"sh",ix:9,ks:{a:0,k:{i:[[-22.215,-2.628]],o:[[-22.215,-2.628]],v:[[-22.215,-2.628]],c:false},ix:2},nm:"Path 9",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:9,ty:"sh",ix:10,ks:{a:0,k:{i:[[34.872,-10.168],[34.872,-7.795],[33.81,-5.422],[-32.499,-5.422],[-34.871,-6.484],[-34.871,-10.168]],o:[[34.872,-10.168],[34.872,-6.484],[32.499,-5.422],[-33.81,-5.422],[-34.871,-7.795],[-34.871,-10.168]],v:[[34.872,-10.168],[34.872,-7.795],[32.499,-5.422],[-32.499,-5.422],[-34.871,-7.795],[-34.871,-10.168]],c:true},ix:2},nm:"Path 10",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:10,ty:"sh",ix:11,ks:{a:0,k:{i:[[-1.243,-40.676],[0.4810000000000001,-41.146],[39.371,-17.208],[40.69799999999999,-15.562],[39.188,-12.814],[-38.126,-12.814],[-40.120999999999995,-13.518999999999998],[-40.275000000000006,-16.651]],o:[[-0.4800000000000001,-41.146],[1.243,-40.676],[40.275000000000006,-16.651999999999997],[40.120999999999995,-13.518999999999998],[38.127,-12.814],[-39.187,-12.814],[-40.699,-15.562],[-39.371,-17.208]],v:[[-1.243,-40.676],[1.243,-40.676],[39.371,-17.208],[40.41,-14.54],[38.127,-12.814],[-38.126,-12.814],[-40.41,-14.54],[-39.371,-17.208]],c:true},ix:2},nm:"Path 11",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"mm",mm:1,nm:"Merge Paths 1",mn:"ADBE Vector Filter - Merge",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9804,0.3294,0.1098,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[40.948,41.396],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 1",np:13,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false,_render:true}],ip:0,op:108,st:0,bm:0,completed:true},{ddd:0,ind:2,ty:4,nm:"l bank Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[79.22,48.585,0],ix:2},a:{a:0,k:[40.949,41.396,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[38.126,30.072],[40.499,31.134],[40.499,38.773],[39.437,41.146],[-38.124,41.146],[-40.498,40.084],[-40.498,32.445],[-39.435,30.072]],o:[[39.437,30.072],[40.499,32.445],[40.499,40.084],[38.126,41.146],[-39.435,41.146],[-40.498,38.773],[-40.498,31.134],[-38.124,30.072]],v:[[38.126,30.072],[40.499,32.445],[40.499,38.773],[38.126,41.146],[-38.124,41.146],[-40.498,38.773],[-40.498,32.445],[-38.124,30.072]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:1,ty:"sh",ix:2,ks:{a:0,k:{i:[[31.73,27.372],[22.239,27.372],[22.239,-2.628],[31.73,-2.628]],o:[[31.73,27.372],[22.239,27.372],[22.239,-2.628],[31.73,-2.628]],v:[[31.73,27.372],[22.239,27.372],[22.239,-2.628],[31.73,-2.628]],c:true},ix:2},nm:"Path 2",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:2,ty:"sh",ix:3,ks:{a:0,k:{i:[[31.73,-2.628]],o:[[31.73,-2.628]],v:[[31.73,-2.628]],c:false},ix:2},nm:"Path 3",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:3,ty:"sh",ix:4,ks:{a:0,k:{i:[[13.749,27.372],[4.257,27.372],[4.257,-2.628],[13.749,-2.628]],o:[[13.749,27.372],[4.257,27.372],[4.257,-2.628],[13.749,-2.628]],v:[[13.749,27.372],[4.257,27.372],[4.257,-2.628],[13.749,-2.628]],c:true},ix:2},nm:"Path 4",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:4,ty:"sh",ix:5,ks:{a:0,k:{i:[[13.749,-2.628]],o:[[13.749,-2.628]],v:[[13.749,-2.628]],c:false},ix:2},nm:"Path 5",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:5,ty:"sh",ix:6,ks:{a:0,k:{i:[[-4.233,27.372],[-13.725,27.372],[-13.725,-2.628],[-4.233,-2.628]],o:[[-4.233,27.372],[-13.725,27.372],[-13.725,-2.628],[-4.233,-2.628]],v:[[-4.233,27.372],[-13.725,27.372],[-13.725,-2.628],[-4.233,-2.628]],c:true},ix:2},nm:"Path 6",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:6,ty:"sh",ix:7,ks:{a:0,k:{i:[[-4.233,-2.628]],o:[[-4.233,-2.628]],v:[[-4.233,-2.628]],c:false},ix:2},nm:"Path 7",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:7,ty:"sh",ix:8,ks:{a:0,k:{i:[[-22.216,27.372],[-31.708,27.372],[-31.708,-2.628],[-22.216,-2.628]],o:[[-22.216,27.372],[-31.708,27.372],[-31.708,-2.628],[-22.216,-2.628]],v:[[-22.216,27.372],[-31.708,27.372],[-31.708,-2.628],[-22.216,-2.628]],c:true},ix:2},nm:"Path 8",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:8,ty:"sh",ix:9,ks:{a:0,k:{i:[[-22.216,-2.628]],o:[[-22.216,-2.628]],v:[[-22.216,-2.628]],c:false},ix:2},nm:"Path 9",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:9,ty:"sh",ix:10,ks:{a:0,k:{i:[[34.872,-10.168],[34.872,-7.795],[33.809000000000005,-5.422],[-32.499,-5.422],[-34.871,-6.484],[-34.871,-10.168]],o:[[34.872,-10.168],[34.872,-6.484],[32.499,-5.422],[-33.809000000000005,-5.422],[-34.871,-7.795],[-34.871,-10.168]],v:[[34.872,-10.168],[34.872,-7.795],[32.499,-5.422],[-32.499,-5.422],[-34.871,-7.795],[-34.871,-10.168]],c:true},ix:2},nm:"Path 10",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ind:10,ty:"sh",ix:11,ks:{a:0,k:{i:[[-1.244,-40.676],[0.481,-41.146],[39.371,-17.208],[40.699,-15.562],[39.188,-12.814],[-38.127,-12.814],[-40.120999999999995,-13.518999999999998],[-40.275000000000006,-16.651]],o:[[-0.481,-41.146],[1.244,-40.676],[40.275000000000006,-16.651999999999997],[40.120999999999995,-13.518999999999998],[38.127,-12.814],[-39.188,-12.814],[-40.699,-15.562],[-39.371,-17.208]],v:[[-1.244,-40.676],[1.244,-40.676],[39.371,-17.208],[40.41,-14.54],[38.127,-12.814],[-38.127,-12.814],[-40.41,-14.54],[-39.371,-17.208]],c:true},ix:2},nm:"Path 11",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"mm",mm:1,nm:"Merge Paths 1",mn:"ADBE Vector Filter - Merge",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9804,0.3294,0.1098,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[40.949,41.396],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 1",np:13,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false,_render:true}],ip:0,op:108,st:0,bm:0,completed:true},{ddd:0,ind:3,ty:4,nm:"lines Outlines 2",td:1,sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[367.221,50.457,0],ix:2},a:{a:0,k:[205.75,3.25,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[400.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[370.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 2",np:2,cix:2,bm:0,ix:2,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[340.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 3",np:2,cix:2,bm:0,ix:3,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[310.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 4",np:2,cix:2,bm:0,ix:4,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[280.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 5",np:2,cix:2,bm:0,ix:5,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[250.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 6",np:2,cix:2,bm:0,ix:6,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[220.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 7",np:2,cix:2,bm:0,ix:7,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[190.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 8",np:2,cix:2,bm:0,ix:8,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[160.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 9",np:2,cix:2,bm:0,ix:9,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[130.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 10",np:2,cix:2,bm:0,ix:10,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[100.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 11",np:2,cix:2,bm:0,ix:11,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[70.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 12",np:2,cix:2,bm:0,ix:12,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[40.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 13",np:2,cix:2,bm:0,ix:13,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[10.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 14",np:2,cix:2,bm:0,ix:14,mn:"ADBE Vector Group",hd:false,_render:true}],ip:0,op:108,st:0,bm:0,completed:true},{ddd:0,ind:4,ty:4,nm:"Shape Layer 1",tt:1,sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{s:true,x:{a:1,k:[{i:{x:[0.34],y:[1]},o:{x:[0.26],y:[0]},t:0,s:[141.465]},{i:{x:[0.34],y:[1]},o:{x:[0.26],y:[0]},t:36,s:[683.465]},{i:{x:[0.34],y:[1]},o:{x:[0.26],y:[0]},t:37,s:[141.465]},{t:73,s:[683.465]}],ix:3},y:{a:0,k:48.4,ix:4}},a:{a:0,k:[-125.535,-3.6,0],ix:1},s:{a:0,k:[14.105,39.614,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ty:"rc",d:1,s:{a:0,k:[190.93,82.801],ix:2},p:{a:0,k:[0,0],ix:3},r:{a:0,k:0,ix:4},nm:"Rectangle Path 1",mn:"ADBE Vector Shape - Rect",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9753,0.7274,0.6447,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[-765.035,-3.6],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[110.538,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Rectangle 4",np:3,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ty:"rc",d:1,s:{a:0,k:[190.93,82.801],ix:2},p:{a:0,k:[0,0],ix:3},r:{a:0,k:0,ix:4},nm:"Rectangle Path 1",mn:"ADBE Vector Shape - Rect",hd:false,_render:true},{ty:"fl",c:{a:0,k:[1,0.265,0.02,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[-550.035,-3.6],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[114.837,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Rectangle 3",np:3,cix:2,bm:0,ix:2,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ty:"rc",d:1,s:{a:0,k:[190.93,82.801],ix:2},p:{a:0,k:[0,0],ix:3},r:{a:0,k:0,ix:4},nm:"Rectangle Path 1",mn:"ADBE Vector Shape - Rect",hd:false,_render:true},{ty:"fl",c:{a:0,k:[1,0.25,0,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[-335.535,-3.6],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[110.435,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Rectangle 2",np:3,cix:2,bm:0,ix:3,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ty:"rc",d:1,s:{a:0,k:[190.93,82.801],ix:2},p:{a:0,k:[0,0],ix:3},r:{a:0,k:0,ix:4},nm:"Rectangle Path 1",mn:"ADBE Vector Shape - Rect",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9804,0.3294,0.1098,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[-125.535,-3.6],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[113.221,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Rectangle 1",np:3,cix:2,bm:0,ix:4,mn:"ADBE Vector Group",hd:false,_render:true}],ip:0,op:108,st:0,bm:0,completed:true},{ddd:0,ind:5,ty:4,nm:"lines Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[367.221,50.457,0],ix:2},a:{a:0,k:[205.75,3.25,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[400.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[370.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 2",np:2,cix:2,bm:0,ix:2,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[340.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 3",np:2,cix:2,bm:0,ix:3,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[310.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 4",np:2,cix:2,bm:0,ix:4,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[280.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 5",np:2,cix:2,bm:0,ix:5,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.156,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.156,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[250.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 6",np:2,cix:2,bm:0,ix:6,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[220.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 7",np:2,cix:2,bm:0,ix:7,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[190.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 8",np:2,cix:2,bm:0,ix:8,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[160.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 9",np:2,cix:2,bm:0,ix:9,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[130.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 10",np:2,cix:2,bm:0,ix:10,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[100.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 11",np:2,cix:2,bm:0,ix:11,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[70.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 12",np:2,cix:2,bm:0,ix:12,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[40.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 13",np:2,cix:2,bm:0,ix:13,mn:"ADBE Vector Group",hd:false,_render:true},{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-9.157,-3],[7.5,-3],[10.5,-1.657],[9.157,3],[-7.5,3],[-10.5,1.656]],o:[[-7.5,-3],[9.157,-3],[10.5,1.656],[7.5,3],[-9.157,3],[-10.5,-1.657]],v:[[-7.5,-3],[7.5,-3],[10.5,0],[7.5,3],[-7.5,3],[-10.5,0]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false,_render:true},{ty:"fl",c:{a:0,k:[0.9961,0.807,0.7439,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:false,_render:true},{ty:"tr",p:{a:0,k:[10.75,3.25],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform",_render:true}],nm:"Group 14",np:2,cix:2,bm:0,ix:14,mn:"ADBE Vector Group",hd:false,_render:true}],ip:0,op:108,st:0,bm:0,completed:true}];const markers=[];const __complete=true;var bankTransferAnimation = {v:v,fr:fr,ip:ip,op:op,w:w,h:h,nm:nm,ddd:ddd,assets:assets,layers:layers,markers:markers,__complete:__complete};
 
-const Lottie = lazy(() => import('./index.umd-Dn0hjh7E.js').then(function (n) { return n.i; }));
+lazy(() => import('./index.umd-ewNTELOK.js').then(function (n) { return n.i; }));
 const PaymentPending = () => {
     const { t } = useGlobal();
+    const [LottieComponent, setLottieComponent] = useState(null);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        let isMounted = true;
+        import('./index.umd-ewNTELOK.js').then(function (n) { return n.i; }).then((module) => {
+            if (isMounted) {
+                setLottieComponent(() => module.default);
+            }
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, []);
     return (React.createElement(Box, { textAlign: "center" },
         React.createElement(m.div, { variants: varBounce().in },
             React.createElement(Typography, { variant: "h4", sx: { mb: 2, maxWidth: 600, mx: 'auto' } }, t('event.tickets.payment_pending'))),
-        React.createElement(Box, { maxWidth: 600, mx: "auto" },
-            React.createElement(Suspense, { fallback: null },
-                React.createElement(Lottie, { animationData: bankTransferAnimation })))));
+        React.createElement(Box, { maxWidth: 600, mx: "auto" }, LottieComponent ? React.createElement(LottieComponent, { animationData: bankTransferAnimation }) : null)));
+};
+
+const CustomSkeleton = ({ sx, ...other }) => (React.createElement(Skeleton, { ...other, sx: {
+        transform: 'none',
+        borderRadius: 1,
+        ...sx,
+    } }));
+
+function isObject$1(subject) {
+  return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function isRecord(subject) {
+  return isObject$1(subject) || Array.isArray(subject);
+}
+function canUseDOM() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+function areOptionsEqual(optionsA, optionsB) {
+  const optionsAKeys = Object.keys(optionsA);
+  const optionsBKeys = Object.keys(optionsB);
+  if (optionsAKeys.length !== optionsBKeys.length) return false;
+  const breakpointsA = JSON.stringify(Object.keys(optionsA.breakpoints || {}));
+  const breakpointsB = JSON.stringify(Object.keys(optionsB.breakpoints || {}));
+  if (breakpointsA !== breakpointsB) return false;
+  return optionsAKeys.every(key => {
+    const valueA = optionsA[key];
+    const valueB = optionsB[key];
+    if (typeof valueA === 'function') return `${valueA}` === `${valueB}`;
+    if (!isRecord(valueA) || !isRecord(valueB)) return valueA === valueB;
+    return areOptionsEqual(valueA, valueB);
+  });
+}
+function sortAndMapPluginToOptions(plugins) {
+  return plugins.concat().sort((a, b) => a.name > b.name ? 1 : -1).map(plugin => plugin.options);
+}
+function arePluginsEqual(pluginsA, pluginsB) {
+  if (pluginsA.length !== pluginsB.length) return false;
+  const optionsA = sortAndMapPluginToOptions(pluginsA);
+  const optionsB = sortAndMapPluginToOptions(pluginsB);
+  return optionsA.every((optionA, index) => {
+    const optionB = optionsB[index];
+    return areOptionsEqual(optionA, optionB);
+  });
+}
+
+function isNumber(subject) {
+  return typeof subject === 'number';
+}
+function isString(subject) {
+  return typeof subject === 'string';
+}
+function isBoolean(subject) {
+  return typeof subject === 'boolean';
+}
+function isObject(subject) {
+  return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function mathAbs(n) {
+  return Math.abs(n);
+}
+function mathSign(n) {
+  return Math.sign(n);
+}
+function deltaAbs(valueB, valueA) {
+  return mathAbs(valueB - valueA);
+}
+function factorAbs(valueB, valueA) {
+  if (valueB === 0 || valueA === 0) return 0;
+  if (mathAbs(valueB) <= mathAbs(valueA)) return 0;
+  const diff = deltaAbs(mathAbs(valueB), mathAbs(valueA));
+  return mathAbs(diff / valueB);
+}
+function roundToTwoDecimals(num) {
+  return Math.round(num * 100) / 100;
+}
+function arrayKeys(array) {
+  return objectKeys(array).map(Number);
+}
+function arrayLast(array) {
+  return array[arrayLastIndex(array)];
+}
+function arrayLastIndex(array) {
+  return Math.max(0, array.length - 1);
+}
+function arrayIsLastIndex(array, index) {
+  return index === arrayLastIndex(array);
+}
+function arrayFromNumber(n, startAt = 0) {
+  return Array.from(Array(n), (_, i) => startAt + i);
+}
+function objectKeys(object) {
+  return Object.keys(object);
+}
+function objectsMergeDeep(objectA, objectB) {
+  return [objectA, objectB].reduce((mergedObjects, currentObject) => {
+    objectKeys(currentObject).forEach(key => {
+      const valueA = mergedObjects[key];
+      const valueB = currentObject[key];
+      const areObjects = isObject(valueA) && isObject(valueB);
+      mergedObjects[key] = areObjects ? objectsMergeDeep(valueA, valueB) : valueB;
+    });
+    return mergedObjects;
+  }, {});
+}
+function isMouseEvent(evt, ownerWindow) {
+  return typeof ownerWindow.MouseEvent !== 'undefined' && evt instanceof ownerWindow.MouseEvent;
+}
+
+function Alignment(align, viewSize) {
+  const predefined = {
+    start,
+    center,
+    end
+  };
+  function start() {
+    return 0;
+  }
+  function center(n) {
+    return end(n) / 2;
+  }
+  function end(n) {
+    return viewSize - n;
+  }
+  function measure(n, index) {
+    if (isString(align)) return predefined[align](n);
+    return align(viewSize, n, index);
+  }
+  const self = {
+    measure
+  };
+  return self;
+}
+
+function EventStore() {
+  let listeners = [];
+  function add(node, type, handler, options = {
+    passive: true
+  }) {
+    let removeListener;
+    if ('addEventListener' in node) {
+      node.addEventListener(type, handler, options);
+      removeListener = () => node.removeEventListener(type, handler, options);
+    } else {
+      const legacyMediaQueryList = node;
+      legacyMediaQueryList.addListener(handler);
+      removeListener = () => legacyMediaQueryList.removeListener(handler);
+    }
+    listeners.push(removeListener);
+    return self;
+  }
+  function clear() {
+    listeners = listeners.filter(remove => remove());
+  }
+  const self = {
+    add,
+    clear
+  };
+  return self;
+}
+
+function Animations(ownerDocument, ownerWindow, update, render) {
+  const documentVisibleHandler = EventStore();
+  const fixedTimeStep = 1000 / 60;
+  let lastTimeStamp = null;
+  let accumulatedTime = 0;
+  let animationId = 0;
+  function init() {
+    documentVisibleHandler.add(ownerDocument, 'visibilitychange', () => {
+      if (ownerDocument.hidden) reset();
+    });
+  }
+  function destroy() {
+    stop();
+    documentVisibleHandler.clear();
+  }
+  function animate(timeStamp) {
+    if (!animationId) return;
+    if (!lastTimeStamp) {
+      lastTimeStamp = timeStamp;
+      update();
+      update();
+    }
+    const timeElapsed = timeStamp - lastTimeStamp;
+    lastTimeStamp = timeStamp;
+    accumulatedTime += timeElapsed;
+    while (accumulatedTime >= fixedTimeStep) {
+      update();
+      accumulatedTime -= fixedTimeStep;
+    }
+    const alpha = accumulatedTime / fixedTimeStep;
+    render(alpha);
+    if (animationId) {
+      animationId = ownerWindow.requestAnimationFrame(animate);
+    }
+  }
+  function start() {
+    if (animationId) return;
+    animationId = ownerWindow.requestAnimationFrame(animate);
+  }
+  function stop() {
+    ownerWindow.cancelAnimationFrame(animationId);
+    lastTimeStamp = null;
+    accumulatedTime = 0;
+    animationId = 0;
+  }
+  function reset() {
+    lastTimeStamp = null;
+    accumulatedTime = 0;
+  }
+  const self = {
+    init,
+    destroy,
+    start,
+    stop,
+    update,
+    render
+  };
+  return self;
+}
+
+function Axis(axis, contentDirection) {
+  const isRightToLeft = contentDirection === 'rtl';
+  const isVertical = axis === 'y';
+  const scroll = isVertical ? 'y' : 'x';
+  const cross = isVertical ? 'x' : 'y';
+  const sign = !isVertical && isRightToLeft ? -1 : 1;
+  const startEdge = getStartEdge();
+  const endEdge = getEndEdge();
+  function measureSize(nodeRect) {
+    const {
+      height,
+      width
+    } = nodeRect;
+    return isVertical ? height : width;
+  }
+  function getStartEdge() {
+    if (isVertical) return 'top';
+    return isRightToLeft ? 'right' : 'left';
+  }
+  function getEndEdge() {
+    if (isVertical) return 'bottom';
+    return isRightToLeft ? 'left' : 'right';
+  }
+  function direction(n) {
+    return n * sign;
+  }
+  const self = {
+    scroll,
+    cross,
+    startEdge,
+    endEdge,
+    measureSize,
+    direction
+  };
+  return self;
+}
+
+function Limit(min = 0, max = 0) {
+  const length = mathAbs(min - max);
+  function reachedMin(n) {
+    return n < min;
+  }
+  function reachedMax(n) {
+    return n > max;
+  }
+  function reachedAny(n) {
+    return reachedMin(n) || reachedMax(n);
+  }
+  function constrain(n) {
+    if (!reachedAny(n)) return n;
+    return reachedMin(n) ? min : max;
+  }
+  function removeOffset(n) {
+    if (!length) return n;
+    return n - length * Math.ceil((n - max) / length);
+  }
+  const self = {
+    length,
+    max,
+    min,
+    constrain,
+    reachedAny,
+    reachedMax,
+    reachedMin,
+    removeOffset
+  };
+  return self;
+}
+
+function Counter(max, start, loop) {
+  const {
+    constrain
+  } = Limit(0, max);
+  const loopEnd = max + 1;
+  let counter = withinLimit(start);
+  function withinLimit(n) {
+    return !loop ? constrain(n) : mathAbs((loopEnd + n) % loopEnd);
+  }
+  function get() {
+    return counter;
+  }
+  function set(n) {
+    counter = withinLimit(n);
+    return self;
+  }
+  function add(n) {
+    return clone().set(get() + n);
+  }
+  function clone() {
+    return Counter(max, get(), loop);
+  }
+  const self = {
+    get,
+    set,
+    add,
+    clone
+  };
+  return self;
+}
+
+function DragHandler(axis, rootNode, ownerDocument, ownerWindow, target, dragTracker, location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, baseFriction, watchDrag) {
+  const {
+    cross: crossAxis,
+    direction
+  } = axis;
+  const focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
+  const nonPassiveEvent = {
+    passive: false
+  };
+  const initEvents = EventStore();
+  const dragEvents = EventStore();
+  const goToNextThreshold = Limit(50, 225).constrain(percentOfView.measure(20));
+  const snapForceBoost = {
+    mouse: 300,
+    touch: 400
+  };
+  const freeForceBoost = {
+    mouse: 500,
+    touch: 600
+  };
+  const baseSpeed = dragFree ? 43 : 25;
+  let isMoving = false;
+  let startScroll = 0;
+  let startCross = 0;
+  let pointerIsDown = false;
+  let preventScroll = false;
+  let preventClick = false;
+  let isMouse = false;
+  function init(emblaApi) {
+    if (!watchDrag) return;
+    function downIfAllowed(evt) {
+      if (isBoolean(watchDrag) || watchDrag(emblaApi, evt)) down(evt);
+    }
+    const node = rootNode;
+    initEvents.add(node, 'dragstart', evt => evt.preventDefault(), nonPassiveEvent).add(node, 'touchmove', () => undefined, nonPassiveEvent).add(node, 'touchend', () => undefined).add(node, 'touchstart', downIfAllowed).add(node, 'mousedown', downIfAllowed).add(node, 'touchcancel', up).add(node, 'contextmenu', up).add(node, 'click', click, true);
+  }
+  function destroy() {
+    initEvents.clear();
+    dragEvents.clear();
+  }
+  function addDragEvents() {
+    const node = isMouse ? ownerDocument : rootNode;
+    dragEvents.add(node, 'touchmove', move, nonPassiveEvent).add(node, 'touchend', up).add(node, 'mousemove', move, nonPassiveEvent).add(node, 'mouseup', up);
+  }
+  function isFocusNode(node) {
+    const nodeName = node.nodeName || '';
+    return focusNodes.includes(nodeName);
+  }
+  function forceBoost() {
+    const boost = dragFree ? freeForceBoost : snapForceBoost;
+    const type = isMouse ? 'mouse' : 'touch';
+    return boost[type];
+  }
+  function allowedForce(force, targetChanged) {
+    const next = index.add(mathSign(force) * -1);
+    const baseForce = scrollTarget.byDistance(force, !dragFree).distance;
+    if (dragFree || mathAbs(force) < goToNextThreshold) return baseForce;
+    if (skipSnaps && targetChanged) return baseForce * 0.5;
+    return scrollTarget.byIndex(next.get(), 0).distance;
+  }
+  function down(evt) {
+    const isMouseEvt = isMouseEvent(evt, ownerWindow);
+    isMouse = isMouseEvt;
+    preventClick = dragFree && isMouseEvt && !evt.buttons && isMoving;
+    isMoving = deltaAbs(target.get(), location.get()) >= 2;
+    if (isMouseEvt && evt.button !== 0) return;
+    if (isFocusNode(evt.target)) return;
+    pointerIsDown = true;
+    dragTracker.pointerDown(evt);
+    scrollBody.useFriction(0).useDuration(0);
+    target.set(location);
+    addDragEvents();
+    startScroll = dragTracker.readPoint(evt);
+    startCross = dragTracker.readPoint(evt, crossAxis);
+    eventHandler.emit('pointerDown');
+  }
+  function move(evt) {
+    const isTouchEvt = !isMouseEvent(evt, ownerWindow);
+    if (isTouchEvt && evt.touches.length >= 2) return up(evt);
+    const lastScroll = dragTracker.readPoint(evt);
+    const lastCross = dragTracker.readPoint(evt, crossAxis);
+    const diffScroll = deltaAbs(lastScroll, startScroll);
+    const diffCross = deltaAbs(lastCross, startCross);
+    if (!preventScroll && !isMouse) {
+      if (!evt.cancelable) return up(evt);
+      preventScroll = diffScroll > diffCross;
+      if (!preventScroll) return up(evt);
+    }
+    const diff = dragTracker.pointerMove(evt);
+    if (diffScroll > dragThreshold) preventClick = true;
+    scrollBody.useFriction(0.3).useDuration(0.75);
+    animation.start();
+    target.add(direction(diff));
+    evt.preventDefault();
+  }
+  function up(evt) {
+    const currentLocation = scrollTarget.byDistance(0, false);
+    const targetChanged = currentLocation.index !== index.get();
+    const rawForce = dragTracker.pointerUp(evt) * forceBoost();
+    const force = allowedForce(direction(rawForce), targetChanged);
+    const forceFactor = factorAbs(rawForce, force);
+    const speed = baseSpeed - 10 * forceFactor;
+    const friction = baseFriction + forceFactor / 50;
+    preventScroll = false;
+    pointerIsDown = false;
+    dragEvents.clear();
+    scrollBody.useDuration(speed).useFriction(friction);
+    scrollTo.distance(force, !dragFree);
+    isMouse = false;
+    eventHandler.emit('pointerUp');
+  }
+  function click(evt) {
+    if (preventClick) {
+      evt.stopPropagation();
+      evt.preventDefault();
+      preventClick = false;
+    }
+  }
+  function pointerDown() {
+    return pointerIsDown;
+  }
+  const self = {
+    init,
+    destroy,
+    pointerDown
+  };
+  return self;
+}
+
+function DragTracker(axis, ownerWindow) {
+  const logInterval = 170;
+  let startEvent;
+  let lastEvent;
+  function readTime(evt) {
+    return evt.timeStamp;
+  }
+  function readPoint(evt, evtAxis) {
+    const property = evtAxis || axis.scroll;
+    const coord = `client${property === 'x' ? 'X' : 'Y'}`;
+    return (isMouseEvent(evt, ownerWindow) ? evt : evt.touches[0])[coord];
+  }
+  function pointerDown(evt) {
+    startEvent = evt;
+    lastEvent = evt;
+    return readPoint(evt);
+  }
+  function pointerMove(evt) {
+    const diff = readPoint(evt) - readPoint(lastEvent);
+    const expired = readTime(evt) - readTime(startEvent) > logInterval;
+    lastEvent = evt;
+    if (expired) startEvent = evt;
+    return diff;
+  }
+  function pointerUp(evt) {
+    if (!startEvent || !lastEvent) return 0;
+    const diffDrag = readPoint(lastEvent) - readPoint(startEvent);
+    const diffTime = readTime(evt) - readTime(startEvent);
+    const expired = readTime(evt) - readTime(lastEvent) > logInterval;
+    const force = diffDrag / diffTime;
+    const isFlick = diffTime && !expired && mathAbs(force) > 0.1;
+    return isFlick ? force : 0;
+  }
+  const self = {
+    pointerDown,
+    pointerMove,
+    pointerUp,
+    readPoint
+  };
+  return self;
+}
+
+function NodeRects() {
+  function measure(node) {
+    const {
+      offsetTop,
+      offsetLeft,
+      offsetWidth,
+      offsetHeight
+    } = node;
+    const offset = {
+      top: offsetTop,
+      right: offsetLeft + offsetWidth,
+      bottom: offsetTop + offsetHeight,
+      left: offsetLeft,
+      width: offsetWidth,
+      height: offsetHeight
+    };
+    return offset;
+  }
+  const self = {
+    measure
+  };
+  return self;
+}
+
+function PercentOfView(viewSize) {
+  function measure(n) {
+    return viewSize * (n / 100);
+  }
+  const self = {
+    measure
+  };
+  return self;
+}
+
+function ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects) {
+  const observeNodes = [container].concat(slides);
+  let resizeObserver;
+  let containerSize;
+  let slideSizes = [];
+  let destroyed = false;
+  function readSize(node) {
+    return axis.measureSize(nodeRects.measure(node));
+  }
+  function init(emblaApi) {
+    if (!watchResize) return;
+    containerSize = readSize(container);
+    slideSizes = slides.map(readSize);
+    function defaultCallback(entries) {
+      for (const entry of entries) {
+        if (destroyed) return;
+        const isContainer = entry.target === container;
+        const slideIndex = slides.indexOf(entry.target);
+        const lastSize = isContainer ? containerSize : slideSizes[slideIndex];
+        const newSize = readSize(isContainer ? container : slides[slideIndex]);
+        const diffSize = mathAbs(newSize - lastSize);
+        if (diffSize >= 0.5) {
+          emblaApi.reInit();
+          eventHandler.emit('resize');
+          break;
+        }
+      }
+    }
+    resizeObserver = new ResizeObserver(entries => {
+      if (isBoolean(watchResize) || watchResize(emblaApi, entries)) {
+        defaultCallback(entries);
+      }
+    });
+    ownerWindow.requestAnimationFrame(() => {
+      observeNodes.forEach(node => resizeObserver.observe(node));
+    });
+  }
+  function destroy() {
+    destroyed = true;
+    if (resizeObserver) resizeObserver.disconnect();
+  }
+  const self = {
+    init,
+    destroy
+  };
+  return self;
+}
+
+function ScrollBody(location, offsetLocation, previousLocation, target, baseDuration, baseFriction) {
+  let scrollVelocity = 0;
+  let scrollDirection = 0;
+  let scrollDuration = baseDuration;
+  let scrollFriction = baseFriction;
+  let rawLocation = location.get();
+  let rawLocationPrevious = 0;
+  function seek() {
+    const displacement = target.get() - location.get();
+    const isInstant = !scrollDuration;
+    let scrollDistance = 0;
+    if (isInstant) {
+      scrollVelocity = 0;
+      previousLocation.set(target);
+      location.set(target);
+      scrollDistance = displacement;
+    } else {
+      previousLocation.set(location);
+      scrollVelocity += displacement / scrollDuration;
+      scrollVelocity *= scrollFriction;
+      rawLocation += scrollVelocity;
+      location.add(scrollVelocity);
+      scrollDistance = rawLocation - rawLocationPrevious;
+    }
+    scrollDirection = mathSign(scrollDistance);
+    rawLocationPrevious = rawLocation;
+    return self;
+  }
+  function settled() {
+    const diff = target.get() - offsetLocation.get();
+    return mathAbs(diff) < 0.001;
+  }
+  function duration() {
+    return scrollDuration;
+  }
+  function direction() {
+    return scrollDirection;
+  }
+  function velocity() {
+    return scrollVelocity;
+  }
+  function useBaseDuration() {
+    return useDuration(baseDuration);
+  }
+  function useBaseFriction() {
+    return useFriction(baseFriction);
+  }
+  function useDuration(n) {
+    scrollDuration = n;
+    return self;
+  }
+  function useFriction(n) {
+    scrollFriction = n;
+    return self;
+  }
+  const self = {
+    direction,
+    duration,
+    velocity,
+    seek,
+    settled,
+    useBaseFriction,
+    useBaseDuration,
+    useFriction,
+    useDuration
+  };
+  return self;
+}
+
+function ScrollBounds(limit, location, target, scrollBody, percentOfView) {
+  const pullBackThreshold = percentOfView.measure(10);
+  const edgeOffsetTolerance = percentOfView.measure(50);
+  const frictionLimit = Limit(0.1, 0.99);
+  let disabled = false;
+  function shouldConstrain() {
+    if (disabled) return false;
+    if (!limit.reachedAny(target.get())) return false;
+    if (!limit.reachedAny(location.get())) return false;
+    return true;
+  }
+  function constrain(pointerDown) {
+    if (!shouldConstrain()) return;
+    const edge = limit.reachedMin(location.get()) ? 'min' : 'max';
+    const diffToEdge = mathAbs(limit[edge] - location.get());
+    const diffToTarget = target.get() - location.get();
+    const friction = frictionLimit.constrain(diffToEdge / edgeOffsetTolerance);
+    target.subtract(diffToTarget * friction);
+    if (!pointerDown && mathAbs(diffToTarget) < pullBackThreshold) {
+      target.set(limit.constrain(target.get()));
+      scrollBody.useDuration(25).useBaseFriction();
+    }
+  }
+  function toggleActive(active) {
+    disabled = !active;
+  }
+  const self = {
+    shouldConstrain,
+    constrain,
+    toggleActive
+  };
+  return self;
+}
+
+function ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance) {
+  const scrollBounds = Limit(-contentSize + viewSize, 0);
+  const snapsBounded = measureBounded();
+  const scrollContainLimit = findScrollContainLimit();
+  const snapsContained = measureContained();
+  function usePixelTolerance(bound, snap) {
+    return deltaAbs(bound, snap) <= 1;
+  }
+  function findScrollContainLimit() {
+    const startSnap = snapsBounded[0];
+    const endSnap = arrayLast(snapsBounded);
+    const min = snapsBounded.lastIndexOf(startSnap);
+    const max = snapsBounded.indexOf(endSnap) + 1;
+    return Limit(min, max);
+  }
+  function measureBounded() {
+    return snapsAligned.map((snapAligned, index) => {
+      const {
+        min,
+        max
+      } = scrollBounds;
+      const snap = scrollBounds.constrain(snapAligned);
+      const isFirst = !index;
+      const isLast = arrayIsLastIndex(snapsAligned, index);
+      if (isFirst) return max;
+      if (isLast) return min;
+      if (usePixelTolerance(min, snap)) return min;
+      if (usePixelTolerance(max, snap)) return max;
+      return snap;
+    }).map(scrollBound => parseFloat(scrollBound.toFixed(3)));
+  }
+  function measureContained() {
+    if (contentSize <= viewSize + pixelTolerance) return [scrollBounds.max];
+    if (containScroll === 'keepSnaps') return snapsBounded;
+    const {
+      min,
+      max
+    } = scrollContainLimit;
+    return snapsBounded.slice(min, max);
+  }
+  const self = {
+    snapsContained,
+    scrollContainLimit
+  };
+  return self;
+}
+
+function ScrollLimit(contentSize, scrollSnaps, loop) {
+  const max = scrollSnaps[0];
+  const min = loop ? max - contentSize : arrayLast(scrollSnaps);
+  const limit = Limit(min, max);
+  const self = {
+    limit
+  };
+  return self;
+}
+
+function ScrollLooper(contentSize, limit, location, vectors) {
+  const jointSafety = 0.1;
+  const min = limit.min + jointSafety;
+  const max = limit.max + jointSafety;
+  const {
+    reachedMin,
+    reachedMax
+  } = Limit(min, max);
+  function shouldLoop(direction) {
+    if (direction === 1) return reachedMax(location.get());
+    if (direction === -1) return reachedMin(location.get());
+    return false;
+  }
+  function loop(direction) {
+    if (!shouldLoop(direction)) return;
+    const loopDistance = contentSize * (direction * -1);
+    vectors.forEach(v => v.add(loopDistance));
+  }
+  const self = {
+    loop
+  };
+  return self;
+}
+
+function ScrollProgress(limit) {
+  const {
+    max,
+    length
+  } = limit;
+  function get(n) {
+    const currentLocation = n - max;
+    return length ? currentLocation / -length : 0;
+  }
+  const self = {
+    get
+  };
+  return self;
+}
+
+function ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll) {
+  const {
+    startEdge,
+    endEdge
+  } = axis;
+  const {
+    groupSlides
+  } = slidesToScroll;
+  const alignments = measureSizes().map(alignment.measure);
+  const snaps = measureUnaligned();
+  const snapsAligned = measureAligned();
+  function measureSizes() {
+    return groupSlides(slideRects).map(rects => arrayLast(rects)[endEdge] - rects[0][startEdge]).map(mathAbs);
+  }
+  function measureUnaligned() {
+    return slideRects.map(rect => containerRect[startEdge] - rect[startEdge]).map(snap => -mathAbs(snap));
+  }
+  function measureAligned() {
+    return groupSlides(snaps).map(g => g[0]).map((snap, index) => snap + alignments[index]);
+  }
+  const self = {
+    snaps,
+    snapsAligned
+  };
+  return self;
+}
+
+function SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes) {
+  const {
+    groupSlides
+  } = slidesToScroll;
+  const {
+    min,
+    max
+  } = scrollContainLimit;
+  const slideRegistry = createSlideRegistry();
+  function createSlideRegistry() {
+    const groupedSlideIndexes = groupSlides(slideIndexes);
+    const doNotContain = !containSnaps || containScroll === 'keepSnaps';
+    if (scrollSnaps.length === 1) return [slideIndexes];
+    if (doNotContain) return groupedSlideIndexes;
+    return groupedSlideIndexes.slice(min, max).map((group, index, groups) => {
+      const isFirst = !index;
+      const isLast = arrayIsLastIndex(groups, index);
+      if (isFirst) {
+        const range = arrayLast(groups[0]) + 1;
+        return arrayFromNumber(range);
+      }
+      if (isLast) {
+        const range = arrayLastIndex(slideIndexes) - arrayLast(groups)[0] + 1;
+        return arrayFromNumber(range, arrayLast(groups)[0]);
+      }
+      return group;
+    });
+  }
+  const self = {
+    slideRegistry
+  };
+  return self;
+}
+
+function ScrollTarget(loop, scrollSnaps, contentSize, limit, targetVector) {
+  const {
+    reachedAny,
+    removeOffset,
+    constrain
+  } = limit;
+  function minDistance(distances) {
+    return distances.concat().sort((a, b) => mathAbs(a) - mathAbs(b))[0];
+  }
+  function findTargetSnap(target) {
+    const distance = loop ? removeOffset(target) : constrain(target);
+    const ascDiffsToSnaps = scrollSnaps.map((snap, index) => ({
+      diff: shortcut(snap - distance, 0),
+      index
+    })).sort((d1, d2) => mathAbs(d1.diff) - mathAbs(d2.diff));
+    const {
+      index
+    } = ascDiffsToSnaps[0];
+    return {
+      index,
+      distance
+    };
+  }
+  function shortcut(target, direction) {
+    const targets = [target, target + contentSize, target - contentSize];
+    if (!loop) return target;
+    if (!direction) return minDistance(targets);
+    const matchingTargets = targets.filter(t => mathSign(t) === direction);
+    if (matchingTargets.length) return minDistance(matchingTargets);
+    return arrayLast(targets) - contentSize;
+  }
+  function byIndex(index, direction) {
+    const diffToSnap = scrollSnaps[index] - targetVector.get();
+    const distance = shortcut(diffToSnap, direction);
+    return {
+      index,
+      distance
+    };
+  }
+  function byDistance(distance, snap) {
+    const target = targetVector.get() + distance;
+    const {
+      index,
+      distance: targetSnapDistance
+    } = findTargetSnap(target);
+    const reachedBound = !loop && reachedAny(target);
+    if (!snap || reachedBound) return {
+      index,
+      distance
+    };
+    const diffToSnap = scrollSnaps[index] - targetSnapDistance;
+    const snapDistance = distance + shortcut(diffToSnap, 0);
+    return {
+      index,
+      distance: snapDistance
+    };
+  }
+  const self = {
+    byDistance,
+    byIndex,
+    shortcut
+  };
+  return self;
+}
+
+function ScrollTo(animation, indexCurrent, indexPrevious, scrollBody, scrollTarget, targetVector, eventHandler) {
+  function scrollTo(target) {
+    const distanceDiff = target.distance;
+    const indexDiff = target.index !== indexCurrent.get();
+    targetVector.add(distanceDiff);
+    if (distanceDiff) {
+      if (scrollBody.duration()) {
+        animation.start();
+      } else {
+        animation.update();
+        animation.render(1);
+        animation.update();
+      }
+    }
+    if (indexDiff) {
+      indexPrevious.set(indexCurrent.get());
+      indexCurrent.set(target.index);
+      eventHandler.emit('select');
+    }
+  }
+  function distance(n, snap) {
+    const target = scrollTarget.byDistance(n, snap);
+    scrollTo(target);
+  }
+  function index(n, direction) {
+    const targetIndex = indexCurrent.clone().set(n);
+    const target = scrollTarget.byIndex(targetIndex.get(), direction);
+    scrollTo(target);
+  }
+  const self = {
+    distance,
+    index
+  };
+  return self;
+}
+
+function SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus) {
+  const focusListenerOptions = {
+    passive: true,
+    capture: true
+  };
+  let lastTabPressTime = 0;
+  function init(emblaApi) {
+    if (!watchFocus) return;
+    function defaultCallback(index) {
+      const nowTime = new Date().getTime();
+      const diffTime = nowTime - lastTabPressTime;
+      if (diffTime > 10) return;
+      eventHandler.emit('slideFocusStart');
+      root.scrollLeft = 0;
+      const group = slideRegistry.findIndex(group => group.includes(index));
+      if (!isNumber(group)) return;
+      scrollBody.useDuration(0);
+      scrollTo.index(group, 0);
+      eventHandler.emit('slideFocus');
+    }
+    eventStore.add(document, 'keydown', registerTabPress, false);
+    slides.forEach((slide, slideIndex) => {
+      eventStore.add(slide, 'focus', evt => {
+        if (isBoolean(watchFocus) || watchFocus(emblaApi, evt)) {
+          defaultCallback(slideIndex);
+        }
+      }, focusListenerOptions);
+    });
+  }
+  function registerTabPress(event) {
+    if (event.code === 'Tab') lastTabPressTime = new Date().getTime();
+  }
+  const self = {
+    init
+  };
+  return self;
+}
+
+function Vector1D(initialValue) {
+  let value = initialValue;
+  function get() {
+    return value;
+  }
+  function set(n) {
+    value = normalizeInput(n);
+  }
+  function add(n) {
+    value += normalizeInput(n);
+  }
+  function subtract(n) {
+    value -= normalizeInput(n);
+  }
+  function normalizeInput(n) {
+    return isNumber(n) ? n : n.get();
+  }
+  const self = {
+    get,
+    set,
+    add,
+    subtract
+  };
+  return self;
+}
+
+function Translate(axis, container) {
+  const translate = axis.scroll === 'x' ? x : y;
+  const containerStyle = container.style;
+  let previousTarget = null;
+  let disabled = false;
+  function x(n) {
+    return `translate3d(${n}px,0px,0px)`;
+  }
+  function y(n) {
+    return `translate3d(0px,${n}px,0px)`;
+  }
+  function to(target) {
+    if (disabled) return;
+    const newTarget = roundToTwoDecimals(axis.direction(target));
+    if (newTarget === previousTarget) return;
+    containerStyle.transform = translate(newTarget);
+    previousTarget = newTarget;
+  }
+  function toggleActive(active) {
+    disabled = !active;
+  }
+  function clear() {
+    if (disabled) return;
+    containerStyle.transform = '';
+    if (!container.getAttribute('style')) container.removeAttribute('style');
+  }
+  const self = {
+    clear,
+    to,
+    toggleActive
+  };
+  return self;
+}
+
+function SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, location, slides) {
+  const roundingSafety = 0.5;
+  const ascItems = arrayKeys(slideSizesWithGaps);
+  const descItems = arrayKeys(slideSizesWithGaps).reverse();
+  const loopPoints = startPoints().concat(endPoints());
+  function removeSlideSizes(indexes, from) {
+    return indexes.reduce((a, i) => {
+      return a - slideSizesWithGaps[i];
+    }, from);
+  }
+  function slidesInGap(indexes, gap) {
+    return indexes.reduce((a, i) => {
+      const remainingGap = removeSlideSizes(a, gap);
+      return remainingGap > 0 ? a.concat([i]) : a;
+    }, []);
+  }
+  function findSlideBounds(offset) {
+    return snaps.map((snap, index) => ({
+      start: snap - slideSizes[index] + roundingSafety + offset,
+      end: snap + viewSize - roundingSafety + offset
+    }));
+  }
+  function findLoopPoints(indexes, offset, isEndEdge) {
+    const slideBounds = findSlideBounds(offset);
+    return indexes.map(index => {
+      const initial = isEndEdge ? 0 : -contentSize;
+      const altered = isEndEdge ? contentSize : 0;
+      const boundEdge = isEndEdge ? 'end' : 'start';
+      const loopPoint = slideBounds[index][boundEdge];
+      return {
+        index,
+        loopPoint,
+        slideLocation: Vector1D(-1),
+        translate: Translate(axis, slides[index]),
+        target: () => location.get() > loopPoint ? initial : altered
+      };
+    });
+  }
+  function startPoints() {
+    const gap = scrollSnaps[0];
+    const indexes = slidesInGap(descItems, gap);
+    return findLoopPoints(indexes, contentSize, false);
+  }
+  function endPoints() {
+    const gap = viewSize - scrollSnaps[0] - 1;
+    const indexes = slidesInGap(ascItems, gap);
+    return findLoopPoints(indexes, -contentSize, true);
+  }
+  function canLoop() {
+    return loopPoints.every(({
+      index
+    }) => {
+      const otherIndexes = ascItems.filter(i => i !== index);
+      return removeSlideSizes(otherIndexes, viewSize) <= 0.1;
+    });
+  }
+  function loop() {
+    loopPoints.forEach(loopPoint => {
+      const {
+        target,
+        translate,
+        slideLocation
+      } = loopPoint;
+      const shiftLocation = target();
+      if (shiftLocation === slideLocation.get()) return;
+      translate.to(shiftLocation);
+      slideLocation.set(shiftLocation);
+    });
+  }
+  function clear() {
+    loopPoints.forEach(loopPoint => loopPoint.translate.clear());
+  }
+  const self = {
+    canLoop,
+    clear,
+    loop,
+    loopPoints
+  };
+  return self;
+}
+
+function SlidesHandler(container, eventHandler, watchSlides) {
+  let mutationObserver;
+  let destroyed = false;
+  function init(emblaApi) {
+    if (!watchSlides) return;
+    function defaultCallback(mutations) {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          emblaApi.reInit();
+          eventHandler.emit('slidesChanged');
+          break;
+        }
+      }
+    }
+    mutationObserver = new MutationObserver(mutations => {
+      if (destroyed) return;
+      if (isBoolean(watchSlides) || watchSlides(emblaApi, mutations)) {
+        defaultCallback(mutations);
+      }
+    });
+    mutationObserver.observe(container, {
+      childList: true
+    });
+  }
+  function destroy() {
+    if (mutationObserver) mutationObserver.disconnect();
+    destroyed = true;
+  }
+  const self = {
+    init,
+    destroy
+  };
+  return self;
+}
+
+function SlidesInView(container, slides, eventHandler, threshold) {
+  const intersectionEntryMap = {};
+  let inViewCache = null;
+  let notInViewCache = null;
+  let intersectionObserver;
+  let destroyed = false;
+  function init() {
+    intersectionObserver = new IntersectionObserver(entries => {
+      if (destroyed) return;
+      entries.forEach(entry => {
+        const index = slides.indexOf(entry.target);
+        intersectionEntryMap[index] = entry;
+      });
+      inViewCache = null;
+      notInViewCache = null;
+      eventHandler.emit('slidesInView');
+    }, {
+      root: container.parentElement,
+      threshold
+    });
+    slides.forEach(slide => intersectionObserver.observe(slide));
+  }
+  function destroy() {
+    if (intersectionObserver) intersectionObserver.disconnect();
+    destroyed = true;
+  }
+  function createInViewList(inView) {
+    return objectKeys(intersectionEntryMap).reduce((list, slideIndex) => {
+      const index = parseInt(slideIndex);
+      const {
+        isIntersecting
+      } = intersectionEntryMap[index];
+      const inViewMatch = inView && isIntersecting;
+      const notInViewMatch = !inView && !isIntersecting;
+      if (inViewMatch || notInViewMatch) list.push(index);
+      return list;
+    }, []);
+  }
+  function get(inView = true) {
+    if (inView && inViewCache) return inViewCache;
+    if (!inView && notInViewCache) return notInViewCache;
+    const slideIndexes = createInViewList(inView);
+    if (inView) inViewCache = slideIndexes;
+    if (!inView) notInViewCache = slideIndexes;
+    return slideIndexes;
+  }
+  const self = {
+    init,
+    destroy,
+    get
+  };
+  return self;
+}
+
+function SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow) {
+  const {
+    measureSize,
+    startEdge,
+    endEdge
+  } = axis;
+  const withEdgeGap = slideRects[0] && readEdgeGap;
+  const startGap = measureStartGap();
+  const endGap = measureEndGap();
+  const slideSizes = slideRects.map(measureSize);
+  const slideSizesWithGaps = measureWithGaps();
+  function measureStartGap() {
+    if (!withEdgeGap) return 0;
+    const slideRect = slideRects[0];
+    return mathAbs(containerRect[startEdge] - slideRect[startEdge]);
+  }
+  function measureEndGap() {
+    if (!withEdgeGap) return 0;
+    const style = ownerWindow.getComputedStyle(arrayLast(slides));
+    return parseFloat(style.getPropertyValue(`margin-${endEdge}`));
+  }
+  function measureWithGaps() {
+    return slideRects.map((rect, index, rects) => {
+      const isFirst = !index;
+      const isLast = arrayIsLastIndex(rects, index);
+      if (isFirst) return slideSizes[index] + startGap;
+      if (isLast) return slideSizes[index] + endGap;
+      return rects[index + 1][startEdge] - rect[startEdge];
+    }).map(mathAbs);
+  }
+  const self = {
+    slideSizes,
+    slideSizesWithGaps,
+    startGap,
+    endGap
+  };
+  return self;
+}
+
+function SlidesToScroll(axis, viewSize, slidesToScroll, loop, containerRect, slideRects, startGap, endGap, pixelTolerance) {
+  const {
+    startEdge,
+    endEdge,
+    direction
+  } = axis;
+  const groupByNumber = isNumber(slidesToScroll);
+  function byNumber(array, groupSize) {
+    return arrayKeys(array).filter(i => i % groupSize === 0).map(i => array.slice(i, i + groupSize));
+  }
+  function bySize(array) {
+    if (!array.length) return [];
+    return arrayKeys(array).reduce((groups, rectB, index) => {
+      const rectA = arrayLast(groups) || 0;
+      const isFirst = rectA === 0;
+      const isLast = rectB === arrayLastIndex(array);
+      const edgeA = containerRect[startEdge] - slideRects[rectA][startEdge];
+      const edgeB = containerRect[startEdge] - slideRects[rectB][endEdge];
+      const gapA = !loop && isFirst ? direction(startGap) : 0;
+      const gapB = !loop && isLast ? direction(endGap) : 0;
+      const chunkSize = mathAbs(edgeB - gapB - (edgeA + gapA));
+      if (index && chunkSize > viewSize + pixelTolerance) groups.push(rectB);
+      if (isLast) groups.push(array.length);
+      return groups;
+    }, []).map((currentSize, index, groups) => {
+      const previousSize = Math.max(groups[index - 1] || 0);
+      return array.slice(previousSize, currentSize);
+    });
+  }
+  function groupSlides(array) {
+    return groupByNumber ? byNumber(array, slidesToScroll) : bySize(array);
+  }
+  const self = {
+    groupSlides
+  };
+  return self;
+}
+
+function Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler) {
+  // Options
+  const {
+    align,
+    axis: scrollAxis,
+    direction,
+    startIndex,
+    loop,
+    duration,
+    dragFree,
+    dragThreshold,
+    inViewThreshold,
+    slidesToScroll: groupSlides,
+    skipSnaps,
+    containScroll,
+    watchResize,
+    watchSlides,
+    watchDrag,
+    watchFocus
+  } = options;
+  // Measurements
+  const pixelTolerance = 2;
+  const nodeRects = NodeRects();
+  const containerRect = nodeRects.measure(container);
+  const slideRects = slides.map(nodeRects.measure);
+  const axis = Axis(scrollAxis, direction);
+  const viewSize = axis.measureSize(containerRect);
+  const percentOfView = PercentOfView(viewSize);
+  const alignment = Alignment(align, viewSize);
+  const containSnaps = !loop && !!containScroll;
+  const readEdgeGap = loop || !!containScroll;
+  const {
+    slideSizes,
+    slideSizesWithGaps,
+    startGap,
+    endGap
+  } = SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow);
+  const slidesToScroll = SlidesToScroll(axis, viewSize, groupSlides, loop, containerRect, slideRects, startGap, endGap, pixelTolerance);
+  const {
+    snaps,
+    snapsAligned
+  } = ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll);
+  const contentSize = -arrayLast(snaps) + arrayLast(slideSizesWithGaps);
+  const {
+    snapsContained,
+    scrollContainLimit
+  } = ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance);
+  const scrollSnaps = containSnaps ? snapsContained : snapsAligned;
+  const {
+    limit
+  } = ScrollLimit(contentSize, scrollSnaps, loop);
+  // Indexes
+  const index = Counter(arrayLastIndex(scrollSnaps), startIndex, loop);
+  const indexPrevious = index.clone();
+  const slideIndexes = arrayKeys(slides);
+  // Animation
+  const update = ({
+    dragHandler,
+    scrollBody,
+    scrollBounds,
+    options: {
+      loop
+    }
+  }) => {
+    if (!loop) scrollBounds.constrain(dragHandler.pointerDown());
+    scrollBody.seek();
+  };
+  const render = ({
+    scrollBody,
+    translate,
+    location,
+    offsetLocation,
+    previousLocation,
+    scrollLooper,
+    slideLooper,
+    dragHandler,
+    animation,
+    eventHandler,
+    scrollBounds,
+    options: {
+      loop
+    }
+  }, alpha) => {
+    const shouldSettle = scrollBody.settled();
+    const withinBounds = !scrollBounds.shouldConstrain();
+    const hasSettled = loop ? shouldSettle : shouldSettle && withinBounds;
+    const hasSettledAndIdle = hasSettled && !dragHandler.pointerDown();
+    if (hasSettledAndIdle) animation.stop();
+    const interpolatedLocation = location.get() * alpha + previousLocation.get() * (1 - alpha);
+    offsetLocation.set(interpolatedLocation);
+    if (loop) {
+      scrollLooper.loop(scrollBody.direction());
+      slideLooper.loop();
+    }
+    translate.to(offsetLocation.get());
+    if (hasSettledAndIdle) eventHandler.emit('settle');
+    if (!hasSettled) eventHandler.emit('scroll');
+  };
+  const animation = Animations(ownerDocument, ownerWindow, () => update(engine), alpha => render(engine, alpha));
+  // Shared
+  const friction = 0.68;
+  const startLocation = scrollSnaps[index.get()];
+  const location = Vector1D(startLocation);
+  const previousLocation = Vector1D(startLocation);
+  const offsetLocation = Vector1D(startLocation);
+  const target = Vector1D(startLocation);
+  const scrollBody = ScrollBody(location, offsetLocation, previousLocation, target, duration, friction);
+  const scrollTarget = ScrollTarget(loop, scrollSnaps, contentSize, limit, target);
+  const scrollTo = ScrollTo(animation, index, indexPrevious, scrollBody, scrollTarget, target, eventHandler);
+  const scrollProgress = ScrollProgress(limit);
+  const eventStore = EventStore();
+  const slidesInView = SlidesInView(container, slides, eventHandler, inViewThreshold);
+  const {
+    slideRegistry
+  } = SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes);
+  const slideFocus = SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus);
+  // Engine
+  const engine = {
+    ownerDocument,
+    ownerWindow,
+    eventHandler,
+    containerRect,
+    slideRects,
+    animation,
+    axis,
+    dragHandler: DragHandler(axis, root, ownerDocument, ownerWindow, target, DragTracker(axis, ownerWindow), location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, friction, watchDrag),
+    eventStore,
+    percentOfView,
+    index,
+    indexPrevious,
+    limit,
+    location,
+    offsetLocation,
+    previousLocation,
+    options,
+    resizeHandler: ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects),
+    scrollBody,
+    scrollBounds: ScrollBounds(limit, offsetLocation, target, scrollBody, percentOfView),
+    scrollLooper: ScrollLooper(contentSize, limit, offsetLocation, [location, offsetLocation, previousLocation, target]),
+    scrollProgress,
+    scrollSnapList: scrollSnaps.map(scrollProgress.get),
+    scrollSnaps,
+    scrollTarget,
+    scrollTo,
+    slideLooper: SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, offsetLocation, slides),
+    slideFocus,
+    slidesHandler: SlidesHandler(container, eventHandler, watchSlides),
+    slidesInView,
+    slideIndexes,
+    slideRegistry,
+    slidesToScroll,
+    target,
+    translate: Translate(axis, container)
+  };
+  return engine;
+}
+
+function EventHandler() {
+  let listeners = {};
+  let api;
+  function init(emblaApi) {
+    api = emblaApi;
+  }
+  function getListeners(evt) {
+    return listeners[evt] || [];
+  }
+  function emit(evt) {
+    getListeners(evt).forEach(e => e(api, evt));
+    return self;
+  }
+  function on(evt, cb) {
+    listeners[evt] = getListeners(evt).concat([cb]);
+    return self;
+  }
+  function off(evt, cb) {
+    listeners[evt] = getListeners(evt).filter(e => e !== cb);
+    return self;
+  }
+  function clear() {
+    listeners = {};
+  }
+  const self = {
+    init,
+    emit,
+    off,
+    on,
+    clear
+  };
+  return self;
+}
+
+const defaultOptions = {
+  align: 'center',
+  axis: 'x',
+  container: null,
+  slides: null,
+  containScroll: 'trimSnaps',
+  direction: 'ltr',
+  slidesToScroll: 1,
+  inViewThreshold: 0,
+  breakpoints: {},
+  dragFree: false,
+  dragThreshold: 10,
+  loop: false,
+  skipSnaps: false,
+  duration: 25,
+  startIndex: 0,
+  active: true,
+  watchDrag: true,
+  watchResize: true,
+  watchSlides: true,
+  watchFocus: true
 };
 
-const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, selectedQuantityByVariant, isOnlyMerchandise, eventId, }) => {
+function OptionsHandler(ownerWindow) {
+  function mergeOptions(optionsA, optionsB) {
+    return objectsMergeDeep(optionsA, optionsB || {});
+  }
+  function optionsAtMedia(options) {
+    const optionsAtMedia = options.breakpoints || {};
+    const matchedMediaOptions = objectKeys(optionsAtMedia).filter(media => ownerWindow.matchMedia(media).matches).map(media => optionsAtMedia[media]).reduce((a, mediaOption) => mergeOptions(a, mediaOption), {});
+    return mergeOptions(options, matchedMediaOptions);
+  }
+  function optionsMediaQueries(optionsList) {
+    return optionsList.map(options => objectKeys(options.breakpoints || {})).reduce((acc, mediaQueries) => acc.concat(mediaQueries), []).map(ownerWindow.matchMedia);
+  }
+  const self = {
+    mergeOptions,
+    optionsAtMedia,
+    optionsMediaQueries
+  };
+  return self;
+}
+
+function PluginsHandler(optionsHandler) {
+  let activePlugins = [];
+  function init(emblaApi, plugins) {
+    activePlugins = plugins.filter(({
+      options
+    }) => optionsHandler.optionsAtMedia(options).active !== false);
+    activePlugins.forEach(plugin => plugin.init(emblaApi, optionsHandler));
+    return plugins.reduce((map, plugin) => Object.assign(map, {
+      [plugin.name]: plugin
+    }), {});
+  }
+  function destroy() {
+    activePlugins = activePlugins.filter(plugin => plugin.destroy());
+  }
+  const self = {
+    init,
+    destroy
+  };
+  return self;
+}
+
+function EmblaCarousel(root, userOptions, userPlugins) {
+  const ownerDocument = root.ownerDocument;
+  const ownerWindow = ownerDocument.defaultView;
+  const optionsHandler = OptionsHandler(ownerWindow);
+  const pluginsHandler = PluginsHandler(optionsHandler);
+  const mediaHandlers = EventStore();
+  const eventHandler = EventHandler();
+  const {
+    mergeOptions,
+    optionsAtMedia,
+    optionsMediaQueries
+  } = optionsHandler;
+  const {
+    on,
+    off,
+    emit
+  } = eventHandler;
+  const reInit = reActivate;
+  let destroyed = false;
+  let engine;
+  let optionsBase = mergeOptions(defaultOptions, EmblaCarousel.globalOptions);
+  let options = mergeOptions(optionsBase);
+  let pluginList = [];
+  let pluginApis;
+  let container;
+  let slides;
+  function storeElements() {
+    const {
+      container: userContainer,
+      slides: userSlides
+    } = options;
+    const customContainer = isString(userContainer) ? root.querySelector(userContainer) : userContainer;
+    container = customContainer || root.children[0];
+    const customSlides = isString(userSlides) ? container.querySelectorAll(userSlides) : userSlides;
+    slides = [].slice.call(customSlides || container.children);
+  }
+  function createEngine(options) {
+    const engine = Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler);
+    if (options.loop && !engine.slideLooper.canLoop()) {
+      const optionsWithoutLoop = Object.assign({}, options, {
+        loop: false
+      });
+      return createEngine(optionsWithoutLoop);
+    }
+    return engine;
+  }
+  function activate(withOptions, withPlugins) {
+    if (destroyed) return;
+    optionsBase = mergeOptions(optionsBase, withOptions);
+    options = optionsAtMedia(optionsBase);
+    pluginList = withPlugins || pluginList;
+    storeElements();
+    engine = createEngine(options);
+    optionsMediaQueries([optionsBase, ...pluginList.map(({
+      options
+    }) => options)]).forEach(query => mediaHandlers.add(query, 'change', reActivate));
+    if (!options.active) return;
+    engine.translate.to(engine.location.get());
+    engine.animation.init();
+    engine.slidesInView.init();
+    engine.slideFocus.init(self);
+    engine.eventHandler.init(self);
+    engine.resizeHandler.init(self);
+    engine.slidesHandler.init(self);
+    if (engine.options.loop) engine.slideLooper.loop();
+    if (container.offsetParent && slides.length) engine.dragHandler.init(self);
+    pluginApis = pluginsHandler.init(self, pluginList);
+  }
+  function reActivate(withOptions, withPlugins) {
+    const startIndex = selectedScrollSnap();
+    deActivate();
+    activate(mergeOptions({
+      startIndex
+    }, withOptions), withPlugins);
+    eventHandler.emit('reInit');
+  }
+  function deActivate() {
+    engine.dragHandler.destroy();
+    engine.eventStore.clear();
+    engine.translate.clear();
+    engine.slideLooper.clear();
+    engine.resizeHandler.destroy();
+    engine.slidesHandler.destroy();
+    engine.slidesInView.destroy();
+    engine.animation.destroy();
+    pluginsHandler.destroy();
+    mediaHandlers.clear();
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    mediaHandlers.clear();
+    deActivate();
+    eventHandler.emit('destroy');
+    eventHandler.clear();
+  }
+  function scrollTo(index, jump, direction) {
+    if (!options.active || destroyed) return;
+    engine.scrollBody.useBaseFriction().useDuration(jump === true ? 0 : options.duration);
+    engine.scrollTo.index(index, direction || 0);
+  }
+  function scrollNext(jump) {
+    const next = engine.index.add(1).get();
+    scrollTo(next, jump, -1);
+  }
+  function scrollPrev(jump) {
+    const prev = engine.index.add(-1).get();
+    scrollTo(prev, jump, 1);
+  }
+  function canScrollNext() {
+    const next = engine.index.add(1).get();
+    return next !== selectedScrollSnap();
+  }
+  function canScrollPrev() {
+    const prev = engine.index.add(-1).get();
+    return prev !== selectedScrollSnap();
+  }
+  function scrollSnapList() {
+    return engine.scrollSnapList;
+  }
+  function scrollProgress() {
+    return engine.scrollProgress.get(engine.offsetLocation.get());
+  }
+  function selectedScrollSnap() {
+    return engine.index.get();
+  }
+  function previousScrollSnap() {
+    return engine.indexPrevious.get();
+  }
+  function slidesInView() {
+    return engine.slidesInView.get();
+  }
+  function slidesNotInView() {
+    return engine.slidesInView.get(false);
+  }
+  function plugins() {
+    return pluginApis;
+  }
+  function internalEngine() {
+    return engine;
+  }
+  function rootNode() {
+    return root;
+  }
+  function containerNode() {
+    return container;
+  }
+  function slideNodes() {
+    return slides;
+  }
+  const self = {
+    canScrollNext,
+    canScrollPrev,
+    containerNode,
+    internalEngine,
+    destroy,
+    off,
+    on,
+    emit,
+    plugins,
+    previousScrollSnap,
+    reInit,
+    rootNode,
+    scrollNext,
+    scrollPrev,
+    scrollProgress,
+    scrollSnapList,
+    scrollTo,
+    selectedScrollSnap,
+    slideNodes,
+    slidesInView,
+    slidesNotInView
+  };
+  activate(userOptions, userPlugins);
+  setTimeout(() => eventHandler.emit('init'), 0);
+  return self;
+}
+EmblaCarousel.globalOptions = undefined;
+
+function useEmblaCarousel(options = {}, plugins = []) {
+  const storedOptions = useRef(options);
+  const storedPlugins = useRef(plugins);
+  const [emblaApi, setEmblaApi] = useState();
+  const [viewport, setViewport] = useState();
+  const reInit = useCallback(() => {
+    if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current);
+  }, [emblaApi]);
+  useEffect(() => {
+    if (areOptionsEqual(storedOptions.current, options)) return;
+    storedOptions.current = options;
+    reInit();
+  }, [options, reInit]);
+  useEffect(() => {
+    if (arePluginsEqual(storedPlugins.current, plugins)) return;
+    storedPlugins.current = plugins;
+    reInit();
+  }, [plugins, reInit]);
+  useEffect(() => {
+    if (canUseDOM() && viewport) {
+      EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions;
+      const newEmblaApi = EmblaCarousel(viewport, storedOptions.current, storedPlugins.current);
+      setEmblaApi(newEmblaApi);
+      return () => newEmblaApi.destroy();
+    } else {
+      setEmblaApi(undefined);
+    }
+  }, [viewport, setEmblaApi]);
+  return [setViewport, emblaApi];
+}
+useEmblaCarousel.globalOptions = undefined;
+
+const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, selectedQuantityByVariant, isOnlyMerchandise, eventId, canAddOnlyOneAtATime, }) => {
     const { t, lang, options } = useGlobal();
     const { showSnackbar } = useGlobal();
-    const [selectedVariant, setSelectedVariant] = useState(null);
-    const [variantPrice, setVariantPrice] = useState(null);
-    const [variantQuantity, setVariantQuantity] = useState(1);
-    const [isVariantClicked, setIsVariantClicked] = useState(false);
+    const [draftQuantities, setDraftQuantities] = useState({});
     const tickets = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
     const products = useWatch({ name: `products.${eventId}`, defaultValue: [] });
     useEffect(() => {
@@ -34376,38 +36317,41 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
         }
     }, [openDialog]);
     useEffect(() => {
-        if (isVariantClicked) {
-            setVariantQuantity(selectedQuantityByVariant &&
-                selectedVariant &&
-                selectedQuantityByVariant[selectedVariant.eventProductVariantId] !== undefined
-                ? selectedQuantityByVariant[selectedVariant.eventProductVariantId]
-                : 1);
-            setIsVariantClicked(false);
-        }
-    }, [selectedVariant, isVariantClicked]);
-    const handleOnClick = (variant) => {
-        setVariantPrice(variant.priceWithVat);
-        setSelectedVariant({
-            eventProductVariantId: variant.id,
-            productVariantId: variant.productVariant.id,
-            quantity: 1,
-            price: variant.priceWithVat,
-            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
-        });
-        setIsVariantClicked(true);
-    };
+        if (openDialog) {
+            setDraftQuantities(canAddOnlyOneAtATime ? {} : (selectedQuantityByVariant ?? {}));
+        }
+    }, [openDialog, selectedQuantityByVariant, canAddOnlyOneAtATime]);
     const handleOnAdd = () => {
-        if (!selectedVariant) {
+        const selectedVariants = eventProduct.eventProductVariants
+            .map((variant) => {
+            const quantity = draftQuantities[variant.id] ?? 0;
+            const selectedQty = selectedQuantityByVariant?.[variant.id] ?? 0;
+            if (canAddOnlyOneAtATime) {
+                if (quantity <= 0)
+                    return null;
+            }
+            else if (quantity <= 0 && selectedQty <= 0) {
+                return null;
+            }
+            return {
+                eventProductVariantId: variant.id,
+                productVariantId: variant.productVariant.id,
+                quantity,
+                price: variant.priceWithVat,
+                excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
+            };
+        })
+            .filter((variant) => Boolean(variant));
+        if (selectedVariants.length === 0) {
             showSnackbar(t('components.product_variant_dialog.select_variant'), { variant: 'error' });
             return;
         }
-        callback(selectedVariant);
-        setSelectedVariant(null);
+        callback(selectedVariants);
+        setDraftQuantities({});
         onClose?.();
     };
-    const isVariantDisabled = (variant) => {
+    const getUsedCount = (variant) => {
         let countUsed = 0;
-        let selectedVariantQuantity = 0;
         for (const product of products) {
             if (product.productVariantId === variant.productVariant.id) {
                 countUsed += product.quantity;
@@ -34418,59 +36362,78 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
                 for (const product of ticket.products) {
                     if (product.productVariantId === variant.productVariant.id) {
                         countUsed += product.quantity;
-                        selectedVariantQuantity = product.quantity;
                     }
                 }
             }
         }
-        return ((variant.productVariant.quantity &&
-            countUsed + variant.productVariant.sold >= variant.productVariant.quantity) ||
-            selectedVariantQuantity >= 10);
+        return countUsed;
     };
-    const isVariantSoldOut = () => {
-        const variant = eventProduct.eventProductVariants.find((product) => product.id === selectedVariant?.eventProductVariantId);
-        let countUsed = variantQuantity;
-        for (const ticket of tickets) {
-            if (ticket.products) {
-                for (const product of ticket.products) {
-                    if (product.productVariantId === variant?.productVariant.id) {
-                        countUsed += product.quantity;
-                    }
-                }
-            }
-        }
-        if (variant && variant.productVariant.quantity) {
-            if (variant.productVariant.sold + countUsed >= variant.productVariant.quantity ||
-                variantQuantity >= 10) {
-                return true;
+    const getMaxAvailable = (variant) => {
+        if (!variant.productVariant.quantity)
+            return Number.POSITIVE_INFINITY;
+        return variant.productVariant.quantity - variant.productVariant.sold - getUsedCount(variant);
+    };
+    const isVariantDisabled = (variant) => {
+        if (!variant.productVariant.quantity)
+            return false;
+        return getMaxAvailable(variant) <= 0;
+    };
+    const handleAddQuantity = (variant) => {
+        setDraftQuantities((prev) => {
+            const current = prev[variant.id] ?? 0;
+            const next = current + 1;
+            const maxAvailable = getMaxAvailable(variant);
+            if (next > 10 || next > maxAvailable)
+                return prev;
+            if (canAddOnlyOneAtATime) {
+                // Only allow one variant to be selected
+                return { [variant.id]: 1 };
             }
-        }
-        return false;
+            return { ...prev, [variant.id]: next };
+        });
     };
-    const handleAddQuantity = () => {
-        setVariantQuantity(variantQuantity + 1);
-        setSelectedVariant((prevState) => {
-            if (!prevState)
-                return null;
-            return {
-                ...prevState,
-                quantity: variantQuantity + 1,
-            };
+    const handleRemoveQuantity = (variant) => {
+        setDraftQuantities((prev) => {
+            const current = prev[variant.id] ?? 0;
+            const next = current - 1;
+            if (next <= 0) {
+                const rest = { ...prev };
+                delete rest[variant.id];
+                return rest;
+            }
+            if (canAddOnlyOneAtATime) {
+                // Remove the only variant
+                return {};
+            }
+            return { ...prev, [variant.id]: next };
         });
     };
-    const handleRemoveQuantity = () => {
-        if (variantQuantity > 0) {
-            setVariantQuantity(variantQuantity - 1);
+    const handleRemoveProduct = () => {
+        const variantsToRemove = eventProduct.eventProductVariants
+            .filter((variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0)
+            .map((variant) => ({
+            eventProductVariantId: variant.id,
+            productVariantId: variant.productVariant.id,
+            quantity: 0,
+            price: variant.priceWithVat,
+            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
+        }));
+        if (variantsToRemove.length === 0) {
+            return;
         }
-        setSelectedVariant((prevState) => {
-            if (!prevState)
-                return null;
-            return {
-                ...prevState,
-                quantity: variantQuantity - 1,
-            };
-        });
+        callback(variantsToRemove);
+        setDraftQuantities({});
+        onClose?.();
     };
+    const hasSelectedVariants = eventProduct.eventProductVariants.some((variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0);
+    const variantsById = useMemo(() => new Map(eventProduct.eventProductVariants.map((variant) => [variant.id, variant])), [eventProduct.eventProductVariants]);
+    const totalDraftPrice = useMemo(() => Object.entries(draftQuantities).reduce((total, [variantId, qty]) => {
+        const variant = variantsById.get(Number(variantId));
+        if (!variant)
+            return total;
+        return total + variant.priceWithVat * qty;
+    }, 0), [draftQuantities, variantsById]);
+    const hasDraftSelection = useMemo(() => eventProduct.eventProductVariants.some((variant) => (draftQuantities[variant.id] ?? 0) > 0), [eventProduct.eventProductVariants, draftQuantities]);
     return (React.createElement(Dialog, { open: openDialog, onClose: () => onClose && onClose(), fullWidth: true, sx: {
             mx: 'auto',
             width: {
@@ -34483,35 +36446,91 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
                 height: options?.isIframe ? 'auto' : '100%',
             },
         } },
-        React.createElement(DialogTitle, null),
-        React.createElement(DialogContent, null,
+        React.createElement(DialogTitle, { sx: { textAlign: 'center', fontWeight: 700, fontSize: { xs: '1.5rem', sm: '1.5rem' } } }, eventProduct.product.name),
+        React.createElement(DialogContent, { sx: { pb: 0 } },
             React.createElement(Stack, { spacing: 1 },
-                React.createElement(Image, { src: eventProduct.product.previewImage.url, alt: eventProduct.product.name, ratio: "1/1", sx: { borderRadius: 2 } }),
-                React.createElement(Typography, { variant: "h5" }, eventProduct.product.name),
+                React.createElement(Image, { src: eventProduct.product.previewImage.url, alt: eventProduct.product.name, ratio: "16/9", sx: { borderRadius: 1 } }),
                 React.createElement(Typography, { variant: "body2", color: "primary" },
                     t('form.labels.category'),
                     ": ",
                     eventProduct.product.category.value.text),
                 React.createElement(Typography, { variant: "caption", dangerouslySetInnerHTML: { __html: eventProduct.product.description } }))),
         React.createElement(DialogActions, { sx: { justifyContent: 'flex-start' } },
-            React.createElement(Stack, { spacing: 2, width: "100%" },
-                React.createElement(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, textAlign: "left" }, eventProduct.eventProductVariants.map((variant) => (React.createElement(Button, { key: variant.id, onClick: () => handleOnClick(variant), variant: variant.id === selectedVariant?.eventProductVariantId ? 'contained' : 'outlined', size: "large", disabled: isOnlyMerchandise ? false : isVariantDisabled(variant) },
-                    React.createElement(Badge, { color: "primary", badgeContent: selectedQuantityByVariant ? selectedQuantityByVariant[variant.id] : 0, sx: { position: 'unset' } }, variant.productVariant.value))))),
-                React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", pt: 1 },
-                    selectedVariant && isOnlyMerchandise && (React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 1 },
-                        React.createElement(IconButton, { size: "small", color: "primary", onClick: handleRemoveQuantity, disabled: variantQuantity < 1 },
-                            React.createElement(Iconify, { icon: "eva:minus-fill" })),
-                        React.createElement(Typography, { color: "grey.500" }, variantQuantity),
-                        React.createElement(IconButton, { size: "small", color: "primary", onClick: handleAddQuantity, disabled: isVariantSoldOut() },
-                            React.createElement(Iconify, { icon: "eva:plus-fill" })))),
-                    React.createElement(Typography, { variant: "h4", textAlign: "right", mt: 0 }, variantPrice !== null
-                        ? variantPrice > 0
-                            ? fCurrency(variantPrice, lang, eventProduct.product.currency)
-                            : t('free')
-                        : t('unselected'))),
+            React.createElement(Stack, { spacing: 1, width: "100%" },
+                React.createElement(Stack, { spacing: 1 }, eventProduct.eventProductVariants.map((variant) => {
+                    const draftQty = draftQuantities[variant.id] ?? 0;
+                    const maxAvailable = getMaxAvailable(variant);
+                    const isAddDisabled = isVariantDisabled(variant) || maxAvailable <= 0;
+                    const isAnotherSelected = canAddOnlyOneAtATime &&
+                        Object.keys(draftQuantities).length > 0 &&
+                        !draftQuantities[variant.id];
+                    return (React.createElement(Stack, { key: variant.id, direction: "row", spacing: 1, alignItems: "center", width: "100%" },
+                        React.createElement(Box, { sx: {
+                                minWidth: 64,
+                                maxWidth: 64,
+                                height: 36,
+                                borderRadius: 1,
+                                border: 1,
+                                borderColor: 'divider',
+                                bgcolor: 'background.paper',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            } },
+                            React.createElement(Typography, { variant: "body2", fontWeight: 600 }, variant.productVariant.value)),
+                        draftQty > 0 ? (React.createElement(Box, { sx: {
+                                flex: 1,
+                                display: 'grid',
+                                gridTemplateColumns: canAddOnlyOneAtATime
+                                    ? 'repeat(2, minmax(0, 1fr))'
+                                    : 'repeat(3, minmax(0, 1fr))',
+                                gap: 1,
+                                alignItems: 'center',
+                            } },
+                            React.createElement(Button, { variant: "outlined", onClick: () => handleRemoveQuantity(variant), "aria-label": t('components.product_variant_dialog.decrease_quantity'), disabled: draftQty < 1, sx: {
+                                    minWidth: 0,
+                                    height: 36,
+                                    borderRadius: 1,
+                                    fontWeight: 700,
+                                    borderColor: 'grey.300',
+                                    color: 'text.primary',
+                                } }, "-"),
+                            React.createElement(Typography, { sx: {
+                                    minWidth: 0,
+                                    height: 36,
+                                    borderRadius: 1,
+                                    border: 1,
+                                    borderColor: 'divider',
+                                    boxSizing: 'border-box',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    textAlign: 'center',
+                                    fontWeight: 700,
+                                    color: 'text.primary',
+                                } }, draftQty),
+                            !canAddOnlyOneAtATime && (React.createElement(Button, { variant: "contained", onClick: () => handleAddQuantity(variant), "aria-label": t('components.product_variant_dialog.increase_quantity'), disabled: draftQty >= 10 || draftQty >= maxAvailable, sx: { minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 } }, "+")))) : (React.createElement(Button, { variant: "contained", onClick: () => handleAddQuantity(variant), disabled: isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected, sx: {
+                                flex: 1,
+                                height: 36,
+                                borderRadius: 1,
+                                fontWeight: 700,
+                                textTransform: 'none',
+                            } }, t('add'))),
+                        React.createElement(Typography, { variant: "body2" }, variant.priceWithVat > 0
+                            ? fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)
+                            : t('free'))));
+                })),
+                React.createElement(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", width: "100%" },
+                    React.createElement(Typography, { variant: "body2" }, t('form.labels.total')),
+                    React.createElement(Typography, { variant: "body2", fontWeight: 600 }, fCurrency(totalDraftPrice, lang, eventProduct.product.currency))),
                 React.createElement(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", width: "100%" },
-                    onClose && React.createElement(Button, { onClick: onClose }, t('cancel')),
-                    React.createElement(Button, { variant: "contained", onClick: handleOnAdd, disabled: !selectedVariant }, t('add')))))));
+                    hasSelectedVariants && !canAddOnlyOneAtATime && (React.createElement(Button, { variant: "outlined", color: "error", onClick: handleRemoveProduct }, t('remove'))),
+                    onClose && (React.createElement(Button, { onClick: onClose, sx: {
+                            border: 1,
+                            color: 'inherit',
+                            borderColor: (theme) => theme.palette.grey[300],
+                        } }, t('cancel'))),
+                    React.createElement(Button, { variant: "contained", onClick: handleOnAdd, disabled: !hasDraftSelection }, t('confirm')))))));
 };
 
 const getSelectedQuantityByVariant = (products, tickets) => {
@@ -34540,72 +36559,201 @@ const getSelectedQuantityByVariant = (products, tickets) => {
 };
 
 const ProductCard = ({ eventProduct, eventId, isOnlyMerchandise }) => {
-    const { t } = useGlobal();
+    const { t, lang } = useGlobal();
     const [openVariantDialog, setOpenVariantDialog] = useState(false);
-    const { setValue } = useFormContext();
+    const [openSimpleProductDialog, setOpenSimpleProductDialog] = useState(false);
+    const { setValue, getValues } = useFormContext();
     const tickets = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
     const products = useWatch({ name: `products.${eventId}`, defaultValue: [] });
-    const onSelectVariant = (selectedVariant) => {
-        const variant = products.find((product) => product.eventProductVariantId === selectedVariant.eventProductVariantId);
-        if (variant) {
-            if (selectedVariant.quantity === 0) {
-                setValue(`products.${eventId}`, products.filter((product) => product.eventProductVariantId !== variant.eventProductVariantId));
+    const isSimpleProduct = eventProduct.eventProductVariants.length === 1;
+    const simpleVariant = isSimpleProduct ? eventProduct.eventProductVariants[0] : undefined;
+    const onSelectVariant = (selectedVariants) => {
+        const normalized = Array.isArray(selectedVariants) ? selectedVariants : [selectedVariants];
+        const currentProducts = getValues(`products.${eventId}`) ?? [];
+        const nextProducts = [...currentProducts];
+        normalized.forEach((selectedVariant) => {
+            const index = nextProducts.findIndex((product) => product.eventProductVariantId === selectedVariant.eventProductVariantId);
+            if (index >= 0) {
+                if (selectedVariant.quantity <= 0) {
+                    nextProducts.splice(index, 1);
+                }
+                else {
+                    nextProducts[index] = {
+                        ...nextProducts[index],
+                        quantity: selectedVariant.quantity,
+                    };
+                }
             }
             else {
-                setValue(`products.${eventId}`, products.map((product) => {
-                    if (product.eventProductVariantId === selectedVariant.eventProductVariantId) {
-                        return {
-                            ...product,
-                            quantity: selectedVariant.quantity,
-                        };
-                    }
-                    return product;
-                }));
+                if (selectedVariant.quantity > 0) {
+                    nextProducts.push(selectedVariant);
+                }
             }
-        }
-        else if (selectedVariant.quantity !== 0) {
-            setValue(`products.${eventId}`, [...products, selectedVariant]);
-        }
+        });
+        setValue(`products.${eventId}`, nextProducts, {
+            shouldDirty: true,
+            shouldValidate: true,
+        });
     };
-    const eventNotEmpty = useMemo(() => products.some((product) => product?.quantity), [products]);
+    const eventNotEmpty = useMemo(() => {
+        const variantIds = new Set(eventProduct.eventProductVariants.map((variant) => variant.id));
+        return products.some((product) => product?.quantity && variantIds.has(product.eventProductVariantId));
+    }, [products, eventProduct.eventProductVariants]);
+    const selectedQuantityByVariant = useMemo(() => getSelectedQuantityByVariant(products, tickets), [products, tickets]);
+    const simpleProductQuantity = useMemo(() => {
+        if (!simpleVariant)
+            return 0;
+        const matched = products.find((product) => product.eventProductVariantId === simpleVariant.id);
+        return matched?.quantity ?? 0;
+    }, [products, simpleVariant]);
+    const simpleProductMaxAvailable = useMemo(() => {
+        if (!simpleVariant)
+            return 0;
+        const { quantity, sold } = simpleVariant.productVariant;
+        if (!quantity)
+            return Number.POSITIVE_INFINITY;
+        const used = selectedQuantityByVariant[simpleVariant.id] ?? 0;
+        return quantity - sold - used;
+    }, [simpleVariant, selectedQuantityByVariant]);
+    const onChangeSimpleProductQuantity = (nextQuantity) => {
+        if (!simpleVariant)
+            return;
+        if (nextQuantity < 0 || nextQuantity > 10)
+            return;
+        if (nextQuantity > simpleProductQuantity &&
+            nextQuantity - simpleProductQuantity > simpleProductMaxAvailable)
+            return;
+        onSelectVariant({
+            eventProductVariantId: simpleVariant.id,
+            productVariantId: simpleVariant.productVariant.id,
+            quantity: nextQuantity,
+            price: simpleVariant.priceWithVat,
+            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
+        });
+    };
+    const simpleProductQuantityControl = simpleProductQuantity > 0 ? (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center", width: "100%" },
+        React.createElement(IconButton, { onClick: () => onChangeSimpleProductQuantity(simpleProductQuantity - 1), disabled: simpleProductQuantity <= 0, sx: {
+                flex: '1 1 0',
+                height: 36,
+                p: 0,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'grey.300',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            React.createElement(Iconify, { icon: "eva:minus-fill", width: 18, height: 18 })),
+        React.createElement(Box, { sx: {
+                flex: '1 1 0',
+                height: 36,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'grey.300',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 700,
+            } }, simpleProductQuantity),
+        React.createElement(IconButton, { onClick: () => onChangeSimpleProductQuantity(simpleProductQuantity + 1), disabled: simpleProductQuantity >= 10 || simpleProductMaxAvailable <= 0, sx: {
+                flex: '1 1 0',
+                height: 36,
+                p: 0,
+                borderRadius: 1,
+                bgcolor: 'primary.main',
+                color: 'primary.contrastText',
+                '&:hover': { bgcolor: 'primary.dark' },
+                '&.Mui-disabled': {
+                    bgcolor: 'action.disabledBackground',
+                    color: 'action.disabled',
+                },
+            } },
+            React.createElement(Iconify, { icon: "eva:plus-fill", width: 18, height: 18 })))) : (React.createElement(Button, { variant: "contained", onClick: () => onChangeSimpleProductQuantity(1), disabled: simpleProductMaxAvailable <= 0, fullWidth: true }, t('add')));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Card, { sx: { p: 2 } },
-            React.createElement(Stack, { spacing: 1 },
-                React.createElement(Image, { src: eventProduct.product.previewImage.url, ratio: "1/1", sx: { borderRadius: 2 } }),
-                React.createElement(Typography, { variant: "h5" }, eventProduct.product.name),
-                React.createElement(Typography, { variant: "caption", dangerouslySetInnerHTML: { __html: eventProduct.product.description }, sx: {
-                        height: 44,
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden',
-                        display: '-webkit-box',
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: 'vertical',
-                    } }),
-                React.createElement(Button, { variant: "contained", onClick: () => setOpenVariantDialog(true), fullWidth: true, startIcon: eventNotEmpty ? React.createElement(Iconify, { icon: "eva:edit-fill" }) : React.createElement(Iconify, { icon: "eva:plus-fill" }) }, eventNotEmpty ? t('change') : t('add')))),
-        React.createElement(ProductVariantsDialog, { eventProduct: eventProduct, eventId: eventId, openDialog: openVariantDialog, onClose: () => setOpenVariantDialog(false), callback: onSelectVariant, selectedQuantityByVariant: getSelectedQuantityByVariant(products, tickets), isOnlyMerchandise: isOnlyMerchandise })));
+        React.createElement(Card, { sx: {
+                p: 0,
+                borderRadius: 0,
+                boxShadow: 'none',
+                background: 'none',
+            } },
+            React.createElement(Stack, { spacing: 0 },
+                React.createElement(Image, { src: eventProduct.product.previewImage.url, ratio: "21/9", sx: { borderRadius: 1, maxHeight: 96 } }),
+                React.createElement(Typography, { variant: "h5", sx: { fontSize: '14px', fontWeight: 700 } }, eventProduct.product.name),
+                React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1 },
+                    React.createElement(Typography, { variant: "body2", color: "text.primary" }, eventProduct.product.priceWithVat > 0
+                        ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                        : t('free')),
+                    isSimpleProduct && (React.createElement(Link, { onClick: () => setOpenSimpleProductDialog(true), color: "inherit", underline: "always", fontSize: 12 }, t('more_info')))),
+                isSimpleProduct ? (simpleProductQuantityControl) : (React.createElement(Button, { variant: eventNotEmpty ? 'contained' : 'outlined', onClick: () => setOpenVariantDialog(true), fullWidth: true, sx: {
+                        color: eventNotEmpty ? (theme) => theme.palette.common.white : 'inherit',
+                        borderColor: (theme) => theme.palette.grey[300],
+                    } }, eventNotEmpty
+                    ? t('event.tickets.merchandise.show_added')
+                    : t('event.tickets.merchandise.show_sizes'))))),
+        React.createElement(ProductVariantsDialog, { eventProduct: eventProduct, eventId: eventId, openDialog: openVariantDialog && !isSimpleProduct, onClose: () => setOpenVariantDialog(false), callback: onSelectVariant, selectedQuantityByVariant: selectedQuantityByVariant, isOnlyMerchandise: isOnlyMerchandise }),
+        React.createElement(Dialog, { open: openSimpleProductDialog && isSimpleProduct, onClose: () => setOpenSimpleProductDialog(false), fullWidth: true, maxWidth: "sm" },
+            React.createElement(DialogTitle, { sx: {
+                    textAlign: 'center',
+                    fontWeight: 700,
+                    fontSize: { xs: '1.5rem', sm: '2rem' },
+                    mb: 2,
+                } }, eventProduct.product.name),
+            React.createElement(DialogContent, { sx: { pb: 0 } },
+                React.createElement(Stack, { spacing: 2 },
+                    React.createElement(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: eventProduct.product.description } }),
+                    React.createElement(Typography, { variant: "body1", color: "text.primary" }, eventProduct.product.priceWithVat > 0
+                        ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                        : t('free')))),
+            React.createElement(DialogActions, { sx: { px: 3, pb: 3 } },
+                React.createElement(Stack, { spacing: 1, width: "100%" },
+                    simpleProductQuantityControl,
+                    React.createElement(Button, { variant: "outlined", onClick: () => setOpenSimpleProductDialog(false), fullWidth: true, sx: {
+                            color: 'inherit',
+                            borderColor: (theme) => theme.palette.grey[300],
+                        } }, t('close')))))));
 };
 
-const CustomSkeleton = ({ sx, ...other }) => (React.createElement(Skeleton, { ...other, sx: {
-        transform: 'none',
-        borderRadius: 1,
-        ...sx,
-    } }));
+const MerchandiseSlider = ({ eventProducts, eventId, sx }) => {
+    const [emblaRef] = useEmblaCarousel();
+    const theme = useTheme();
+    return (React.createElement(Box, { sx: sx },
+        React.createElement(Box, { sx: {
+                overflow: 'hidden',
+                padding: theme.spacing(8, 3),
+                margin: theme.spacing(-8, -2.5),
+            } },
+            React.createElement(Box, { ref: emblaRef, className: "embla", sx: { overflow: 'visible' } },
+                React.createElement(Box, { className: "embla__container", sx: {
+                        display: 'flex',
+                    } }, eventProducts.map((eventProduct, index) => (React.createElement(Box, { key: `event-slide-${index}`, className: "embla__slide", sx: {
+                        flex: `0 0 ${eventProducts.length > 1 ? '78%' : '100%'}`,
+                        minWidth: 0,
+                        maxWidth: 220,
+                        margin: `0 ${theme.spacing(0.5)}`,
+                        transition: 'opacity 0.2s ease',
+                        [theme.breakpoints.up('sm')]: {
+                            flex: '0 0 43%',
+                        },
+                        [theme.breakpoints.up('md')]: {
+                            flex: '0 0 33.3333%',
+                        },
+                    } },
+                    React.createElement(ProductCard, { eventProduct: eventProduct, eventId: eventId, isOnlyMerchandise: true })))))))));
+};
 
-const MerchandiseSelection = ({ eventProducts, eventId, isLoading }) => (React.createElement(Grid, { container: true, spacing: 3 }, isLoading
-    ? [...Array(3)].map((item) => (React.createElement(Grid, { key: item, size: { xs: 12, md: 4 } },
-        React.createElement(CustomSkeleton, { height: 334 }))))
-    : eventProducts.map((eventProduct) => (React.createElement(Grid, { key: eventProduct.id, size: { xs: 12, md: 4 } },
-        React.createElement(ProductCard, { eventProduct: eventProduct, eventId: eventId, isOnlyMerchandise: true }))))));
+const MerchandiseSelection = ({ eventProducts, eventId, isLoading }) => isLoading ? ([...Array(3)].map((item) => (React.createElement(Grid, { key: item, size: { xs: 12, md: 4 } },
+    React.createElement(CustomSkeleton, { height: 334 }))))) : (React.createElement(MerchandiseSlider, { eventProducts: eventProducts, eventId: eventId }));
 
 const ReleaseWithMerchandise = ({ eventId, release, activeReleases, currency, index, }) => {
     const { t, lang } = useGlobal();
     const [openVariantDialog, setOpenVariantDialog] = useState(null);
+    const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
     const { setValue } = useFormContext();
     const tickets = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
     const products = useWatch({ name: `products.${eventId}`, defaultValue: [] });
     const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
     const countTickets = addedRelease?.quantity || 0;
-    const isReleaseSelected = (id) => !!tickets.find((ticket) => ticket.releaseId === id);
+    const getReleaseTitle = (release) => release.releaseCategoryName || release.name || '';
     const getSelectedQuantity = (id) => tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;
     const getAvailableTicketsForRelease = (release) => {
         const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
@@ -34618,45 +36766,52 @@ const ReleaseWithMerchandise = ({ eventId, release, activeReleases, currency, in
             return false;
         return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
     };
-    const addRelease = (product) => {
+    const addRelease = (productsToAdd) => {
+        const normalizedProducts = productsToAdd ?? [];
+        const quantity = normalizedProducts.length ? normalizedProducts.length : 1;
+        const extraFields = release.extraFields?.length
+            ? Array.from({ length: quantity }, () => release.extraFields.map((field) => ({
+                eventExtraFieldId: field.id,
+                value: '',
+            })))
+            : [];
         setValue(`tickets.${eventId}`, [
             ...tickets,
             {
                 releaseId: release.id,
-                quantity: 1,
+                quantity,
                 itemName: '',
                 price: 0,
-                products: product ? [product] : [],
-                extraFields: release.extraFields?.length
-                    ? [
-                        release.extraFields.map((field) => ({
-                            eventExtraFieldId: field.id,
-                            value: '',
-                        })),
-                    ]
-                    : [],
+                products: normalizedProducts,
+                extraFields,
             },
         ]);
         setOpenVariantDialog(null);
     };
-    const increaseQuantity = (product) => {
+    const increaseQuantity = (productsToAdd) => {
+        const normalizedProducts = productsToAdd ?? [];
         const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
         if (addedRelease) {
-            const newQuantity = Number(addedRelease.quantity) + 1;
+            const increment = normalizedProducts.length ? normalizedProducts.length : 1;
             const maxQuantity = getAvailableTicketsForRelease(addedRelease);
+            const availableIncrement = Math.max(0, Math.min(increment, maxQuantity - Number(addedRelease.quantity)));
+            if (availableIncrement === 0)
+                return;
+            const newQuantity = Number(addedRelease.quantity) + availableIncrement;
+            const productsSlice = normalizedProducts.slice(0, availableIncrement);
+            const extraFieldsToAdd = release.extraFields?.length
+                ? Array.from({ length: availableIncrement }, () => release.extraFields.map((field) => ({
+                    eventExtraFieldId: field.id,
+                    value: '',
+                })))
+                : [];
             setValue(`tickets.${eventId}`, tickets.map((ticket) => ticket.releaseId === release.id
                 ? {
                     ...ticket,
                     quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,
-                    products: product ? [...ticket.products, product] : ticket.products,
+                    products: [...ticket.products, ...productsSlice],
                     extraFields: release.extraFields?.length
-                        ? [
-                            ...ticket.extraFields,
-                            release.extraFields.map((field) => ({
-                                eventExtraFieldId: field.id,
-                                value: '',
-                            })),
-                        ]
+                        ? [...ticket.extraFields, ...extraFieldsToAdd]
                         : [],
                 }
                 : ticket));
@@ -34684,36 +36839,29 @@ const ReleaseWithMerchandise = ({ eventId, release, activeReleases, currency, in
             }
         }
     }, [tickets, release.id, setValue]);
-    return (React.createElement(Box, null,
-        React.createElement(Stack, { direction: "row", spacing: 1 },
-            React.createElement(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", sx: { width: '100%', backgroundColor: 'grey.200', p: 1, pl: 1.5, borderRadius: 1 } },
-                React.createElement(Stack, { direction: "row", spacing: 2, alignItems: "center" },
-                    React.createElement(Stack, { direction: "row", spacing: 0.5, alignItems: "center" },
-                        React.createElement(Iconify, { icon: "ion:ticket-outline", color: "primary.main", sx: { width: 24, height: 24 } }),
-                        release.product && (React.createElement(React.Fragment, null,
-                            React.createElement(Typography, { fontSize: 20, lineHeight: 1 }, "+"),
-                            React.createElement(Iconify, { icon: "lucide-lab:shirt-t", color: "primary.main", sx: { width: 24, height: 24 } })))),
-                    React.createElement(Typography, { color: "grey.500" },
-                        release.releaseCategoryName,
-                        " - ",
-                        release.name,
-                        " -",
-                        ' ',
-                        fCurrency(release.price, lang, currency))),
-                isReleaseSelected(release.id) ? (React.createElement(Stack, { direction: "row", spacing: 1, py: 0.5 },
-                    React.createElement(IconButton, { onClick: () => decreaseQuantity(), size: "small", color: "primary" },
-                        React.createElement(Iconify, { icon: "eva:minus-fill" })),
-                    React.createElement(Typography, { color: "grey.500" }, getSelectedQuantity(release.id)),
-                    React.createElement(IconButton, { onClick: () => release.product ? setOpenVariantDialog('increase') : increaseQuantity(), size: "small", color: "primary", disabled: isMaxQuantity(release.id) },
-                        React.createElement(Iconify, { icon: "eva:plus-fill" })))) : (React.createElement(Button, { onClick: () => !release.locked && (release.product ? setOpenVariantDialog('add') : addRelease()), variant: "contained", disabled: release.locked }, t('add'))))),
-        React.createElement(Typography, { variant: "caption", content: "div", mt: 2, mb: release.extraFields?.length ? 2 : 0, display: "block" }, release.description),
-        release.extraFields && release.extraFields.length > 0 && (React.createElement(ReleaseExtraFields, { release: release, eventId: eventId, releaseIndex: index, quantity: countTickets })),
-        release.product && (React.createElement(ProductVariantsDialog, { eventProduct: release.product, openDialog: !!openVariantDialog, callback: openVariantDialog === 'increase' ? increaseQuantity : addRelease, onClose: () => setOpenVariantDialog(null), selectedQuantityByVariant: getSelectedQuantityByVariant(products, tickets), eventId: eventId }))));
+    return (React.createElement(Box, { sx: {
+            pt: 1,
+            pr: 0.5,
+            pb: 0.5,
+            pl: 2,
+            borderRadius: 1,
+            bgcolor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800],
+        } },
+        React.createElement(Stack, { spacing: 0 },
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", fontWeight: 700 }, getReleaseTitle(release))),
+            React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" },
+                React.createElement(Stack, null,
+                    React.createElement(Typography, { variant: "body2" }, release.price === 0 ? t('free') : fCurrency(release.price, lang, currency)),
+                    React.createElement(ReleaseDescription, { description: release.description, isExpanded: isDescriptionExpanded, onToggle: () => setIsDescriptionExpanded((prev) => !prev), moreInfoLabel: t('more_info') })),
+                React.createElement(TicketQuantityControl, { quantity: getSelectedQuantity(release.id), isDisabled: release.locked, canAddFirst: !release.locked, canAddMore: !isMaxQuantity(release.id), addLabel: t('add'), onDecrement: () => decreaseQuantity(), onIncrement: () => release.product ? setOpenVariantDialog('increase') : increaseQuantity(), onAddFirst: () => (release.product ? setOpenVariantDialog('add') : addRelease()) })),
+            React.createElement(ReleaseDescription, { description: release.description, isExpanded: isDescriptionExpanded, onToggle: () => setIsDescriptionExpanded((prev) => !prev), moreInfoLabel: t('more_info'), showCollapse: true }),
+            release.extraFields && release.extraFields.length > 0 && (React.createElement(ReleaseExtraFields, { release: release, eventId: eventId, releaseIndex: index, quantity: countTickets })),
+            release.product && (React.createElement(ProductVariantsDialog, { eventProduct: release.product, openDialog: !!openVariantDialog, callback: openVariantDialog === 'increase' ? increaseQuantity : addRelease, onClose: () => setOpenVariantDialog(null), selectedQuantityByVariant: getSelectedQuantityByVariant(products, tickets), eventId: eventId, canAddOnlyOneAtATime: true })))));
 };
 
 const TicketWithMerchandiseSelection = ({ event }) => {
     const { t } = useGlobal();
-    const isMobile = useResponsive('down', 'md');
     const { setValue, watch } = useFormContext();
     const tickets = useWatch({ name: `tickets.${event.id}`, defaultValue: [] });
     const eventTimeslotId = watch('eventTimeslotId');
@@ -34801,7 +36949,7 @@ const TicketWithMerchandiseSelection = ({ event }) => {
             }
         }
     };
-    return (React.createElement(Stack, { spacing: 3, direction: "column", divider: React.createElement(Divider, { sx: { borderStyle: 'dashed' } }) },
+    return (React.createElement(Stack, { spacing: 1, direction: "column" },
         !activeReleases && event.type !== EventType.RECURRING ? (React.createElement(Skeleton, { variant: "rounded", sx: {
                 width: '100%',
                 height: (theme) => theme.spacing(7.5),
@@ -34811,8 +36959,7 @@ const TicketWithMerchandiseSelection = ({ event }) => {
         React.createElement(Box, null,
             React.createElement(Typography, { variant: "caption", component: "div", fontStyle: "italic", mb: 2 },
                 "*",
-                t('event.tickets.stepper.1.max_ticket_quantity')),
-            isMobile && React.createElement(FeeBox, { event: event, align: "right" }))));
+                t('event.tickets.stepper.1.max_ticket_quantity')))));
 };
 
 function useEventShippingMethods(id, filters) {
@@ -34869,7 +37016,6 @@ const Shipping = ({ event }) => {
     });
     const flatProducts = useMemo(() => Object.values(products).flat(), [products]);
     const shippingMethodId = watch('shipping.shippingMethodId');
-    const branchId = watch('shipping.branchId');
     const [displayBranchName, setDisplayBranchName] = useState(null);
     const [firstRender, setFirstRender] = useState(true);
     const filteredShippingMethods = useMemo(() => shippingMethods?.filter((shippingMethod) => !flatProducts?.find((product) => product.excludedShippingMethodIds?.includes(shippingMethod?.id)) &&
@@ -34889,9 +37035,20 @@ const Shipping = ({ event }) => {
             setDisplayBranchName(null);
         }
     };
+    const openPacketaWidget = () => {
+        const interval = setInterval(() => {
+            if (window.Packeta && window.Packeta.Widget) {
+                clearInterval(interval);
+                window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
+                    language: lang,
+                });
+            }
+        }, 100);
+    };
     const handleChangeBranch = () => {
         setValue('shipping.branchId', null);
         setDisplayBranchName(null);
+        openPacketaWidget();
     };
     useEffect(() => {
         if (firstRender && filteredShippingMethods.length === 1) {
@@ -34903,19 +37060,7 @@ const Shipping = ({ event }) => {
         const selectedShippingMethod = shippingMethods.find((method) => method.id === Number(shippingMethodId));
         if (selectedShippingMethod) {
             setValue('shipping.price', selectedShippingMethod.price);
-            if (selectedShippingMethod.type === ShippingTypes.PACKETA) {
-                if (!branchId) {
-                    const interval = setInterval(() => {
-                        if (window.Packeta && window.Packeta.Widget) {
-                            clearInterval(interval);
-                            window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
-                                language: lang,
-                            });
-                        }
-                    }, 100);
-                }
-            }
-            else {
+            if (selectedShippingMethod.type !== ShippingTypes.PACKETA) {
                 setValue('shipping.branchId', null);
                 setDisplayBranchName(null);
             }
@@ -34923,34 +37068,43 @@ const Shipping = ({ event }) => {
         else {
             setValue('shipping.price', 0);
         }
-    }, [shippingMethodId, shippingMethods, branchId]);
+    }, [shippingMethodId, shippingMethods]);
     return (React.createElement(React.Fragment, null,
         React.createElement(ScriptLoader, null),
-        React.createElement("div", null, isLoading ? (React.createElement(ShippingSkeleton, null)) : (React.createElement(React.Fragment, null, filteredShippingMethods.length === 0 ? (React.createElement(Typography, { variant: "h4", color: "error" }, t('event.tickets.stepper.5.error'))) : (React.createElement(Controller, { name: "shipping.shippingMethodId", control: control, render: ({ field, fieldState: { error } }) => (React.createElement(FormControl, { component: "fieldset", sx: { width: '100%' } },
-                React.createElement(RadioGroup, { ...field }, filteredShippingMethods.map((shippingMethod) => (React.createElement(ShippingMethodItem, { key: shippingMethod.id, active: Number(shippingMethodId) === shippingMethod.id },
-                    React.createElement(FormControlLabel, { value: shippingMethod.id, control: React.createElement(Radio, null), label: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%" },
-                            React.createElement(Stack, { direction: "row", alignItems: "center" },
-                                React.createElement(Box, { sx: {
-                                        marginRight: 2,
-                                    } },
-                                    React.createElement(Typography, { sx: { lineHeight: 1.2 } }, t(`shipping_method.types.${shippingMethod.type}`)),
+        React.createElement("div", null, isLoading ? (React.createElement(ShippingSkeleton, null)) : (React.createElement(React.Fragment, null, filteredShippingMethods.length === 0 ? (React.createElement(Typography, { variant: "h4", color: "error" }, t('event.tickets.stepper.5.error'))) : (React.createElement(React.Fragment, null,
+            React.createElement(Controller, { name: "shipping.shippingMethodId", control: control, render: ({ field, fieldState: { error } }) => (React.createElement(FormControl, { component: "fieldset", sx: { width: '100%' } },
+                    React.createElement(RadioGroup, { ...field, onChange: (event, value) => {
+                            field.onChange(event);
+                            const selectedShippingMethod = filteredShippingMethods.find((method) => method.id === Number(value));
+                            if (selectedShippingMethod?.type === ShippingTypes.PACKETA) {
+                                openPacketaWidget();
+                            }
+                        } }, filteredShippingMethods.map((shippingMethod) => (React.createElement(ShippingMethodItem, { key: shippingMethod.id, active: Number(shippingMethodId) === shippingMethod.id, hasError: !!error, sx: {
+                            '& .MuiFormControlLabel-labelPlacementEnd': {
+                                mr: 0,
+                                width: '100%',
+                            },
+                        } },
+                        React.createElement(FormControlLabel, { value: shippingMethod.id, control: React.createElement(Radio, null), label: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%" },
+                                React.createElement(Stack, { direction: "column" },
+                                    React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 1 },
+                                        React.createElement(Typography, { sx: { lineHeight: 1.2 } }, t(`shipping_method.types.${shippingMethod.type}`)),
+                                        paymentImages[shippingMethod.type]),
                                     displayBranchName &&
                                         shippingMethod.type === ShippingTypes.PACKETA &&
                                         shippingMethod.id === Number(shippingMethodId) && (React.createElement(Typography, { variant: "caption", sx: { lineHeight: 1 } }, displayBranchName))),
-                                paymentImages[shippingMethod.type]),
-                            shippingMethod.type === ShippingTypes.PACKETA &&
-                                shippingMethod.id === Number(shippingMethodId) &&
-                                branchId && (React.createElement(Box, null,
-                                React.createElement(Button, { onClick: handleChangeBranch, variant: "outlined", size: "small" }, t('change'))))), sx: {
-                            '&:not(:last-of-type)': {
-                                mb: 0,
-                            },
-                            '& .MuiFormControlLabel-label': {
-                                width: '100%',
-                                mr: 0,
-                            },
-                        } }))))),
-                !!error && (React.createElement(FormHelperText, { error: !!error, sx: { mx: 0 } }, error?.message)))) })))))));
+                                shippingMethod.type === ShippingTypes.PACKETA &&
+                                    shippingMethod.id === Number(shippingMethodId) && (React.createElement(Box, null,
+                                    React.createElement(Button, { onClick: handleChangeBranch, variant: "outlined", size: "small", sx: { px: 1, whiteSpace: 'nowrap' } }, t('event.tickets.shipping.choose_address'))))), sx: {
+                                '&:not(:last-of-type)': {
+                                    mb: 0,
+                                },
+                                '& .MuiFormControlLabel-label': {
+                                    width: '100%',
+                                    mr: 0,
+                                },
+                            } }))))),
+                    !!error && (React.createElement(FormHelperText, { error: !!error, sx: { mx: 0 } }, error?.message)))) }))))))));
 };
 
 const useErrors = (defaultMessage) => {
@@ -35092,7 +37246,70 @@ const TimeslotSelection = ({ event }) => {
                 ?.timeslots.map((timeslot) => (React.createElement(Button, { key: timeslot.id, variant: eventTimeslotId === timeslot.id ? 'contained' : 'outlined', onClick: () => setValue('eventTimeslotId', timeslot.id), disabled: timeslot.isSoldOut }, dayjs(timeslot.startDate).format('HH:mm')))))))));
 };
 
-const EVENTLOOK_ORDER_FORM_ID = 'eventlook-order-form';
+const isFieldError = (value) => !!value && typeof value === 'object' && ('type' in value || 'message' in value);
+const getFirstError = (errors, parentPath = '') => {
+    for (const [key, value] of Object.entries(errors)) {
+        if (!value) {
+            continue;
+        }
+        const fieldPath = parentPath ? `${parentPath}.${key}` : key;
+        if (isFieldError(value)) {
+            return {
+                name: fieldPath,
+                ref: value.ref instanceof HTMLElement ? value.ref : null,
+            };
+        }
+        if (Array.isArray(value)) {
+            for (let index = 0; index < value.length; index++) {
+                const nestedError = value[index];
+                if (!nestedError) {
+                    continue;
+                }
+                const firstNestedError = getFirstError(nestedError, parentPath ? `${parentPath}.${key}.${index}` : `${key}.${index}`);
+                if (firstNestedError) {
+                    return firstNestedError;
+                }
+            }
+        }
+        else if (typeof value === 'object') {
+            const firstNestedError = getFirstError(value, fieldPath);
+            if (firstNestedError) {
+                return firstNestedError;
+            }
+        }
+    }
+    return null;
+};
+const escapeSelectorValue = (value) => {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    // Fallback: escape all CSS special characters manually
+    return value.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
+};
+function useScrollToFirstError({ setFocus, }) {
+    return useCallback((errors) => {
+        const firstError = getFirstError(errors);
+        if (!firstError) {
+            return;
+        }
+        // Re-query the DOM instead of relying on potentially stale refs
+        const fieldName = String(firstError.name);
+        const scrollTarget = document.querySelector(`[name="${escapeSelectorValue(fieldName)}"]`) ||
+            document.getElementById(fieldName);
+        if (scrollTarget) {
+            scrollTarget.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+            scrollTarget.focus({ preventScroll: true });
+        }
+        else {
+            // Fallback to RHF's setFocus if no DOM element found
+            setFocus(firstError.name);
+        }
+    }, [setFocus]);
+}
 
 const ChildEventDialog = ({ event, openDialog, onClose }) => {
     const { t } = useGlobal();
@@ -35200,15 +37417,432 @@ const TicketSelectionMap = ({ event }) => {
     };
     if (!seatingIframeUrl)
         return null;
-    return (React.createElement(Button, { variant: "contained", onClick: () => iframe.openPicker({
+    return (React.createElement(Button, { variant: "outlined", onClick: () => iframe.openPicker({
             eventId: String(event.id),
             onSelect,
             baseUrl: seatingIframeUrl,
             clientId: uuid,
-        }) }, t('form.labels.open_map')));
+        }), sx: {
+            width: { xs: '100%' },
+            color: 'text.primary',
+            borderColor: (theme) => theme.palette.grey['300'],
+            '& .MuiButton-endIcon': { ml: 0, fontSize: '1.5em' },
+        }, endIcon: React.createElement(Iconify, { icon: "eva:chevron-right-outline" }) }, t('form.labels.open_map')));
+};
+
+const swipeAreaWidth = 120;
+const clearResetPulledPastTimeout = (timeoutRef) => {
+    if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+    }
+};
+const PaymentOverviewDrawer = ({ event, totalPrice, termsAndConditionsRef, onOpenChange, }) => {
+    const { t, lang } = useGlobal();
+    const [isDrawerOpened, setIsDrawerOpened] = useState(false);
+    const [isOpeningGesture, setIsOpeningGesture] = useState(false);
+    const [hasPulledPastClosedTabHeight, setHasPulledPastClosedTabHeight] = useState(false);
+    const [isDrawerHidden, setIsDrawerHidden] = useState(false);
+    const [closedTabHeight, setClosedTabHeight] = useState(0);
+    const openingTouchStartYRef = useRef(null);
+    const openDrawerRef = useRef(false);
+    const isOpeningGestureRef = useRef(false);
+    const shouldReopenOnScrollUpRef = useRef(false);
+    const lastScrollYRef = useRef(0);
+    const isScrollingDownRef = useRef(false);
+    const wasAtPageBottomRef = useRef(false);
+    const resetPulledPastTimeoutRef = useRef(null);
+    const closedTabRef = useRef(null);
+    useEffect(() => {
+        openDrawerRef.current = isDrawerOpened;
+    }, [isDrawerOpened]);
+    useEffect(() => {
+        isOpeningGestureRef.current = isOpeningGesture;
+    }, [isOpeningGesture]);
+    // reopens the drawer when user scrolls up and the drawer was closed by scrolling down to the bottom of the page
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const atBottomThreshold = 8;
+        lastScrollYRef.current = window.scrollY;
+        isScrollingDownRef.current = false;
+        wasAtPageBottomRef.current =
+            window.innerHeight + window.scrollY >=
+                document.documentElement.scrollHeight - atBottomThreshold;
+        const handleScroll = () => {
+            const currentY = window.scrollY;
+            const isScrollingUp = currentY < lastScrollYRef.current;
+            const isScrollingDown = currentY > lastScrollYRef.current;
+            const isAtPageBottom = window.innerHeight + currentY >= document.documentElement.scrollHeight - atBottomThreshold;
+            isScrollingDownRef.current = isScrollingDown;
+            if (isScrollingUp &&
+                wasAtPageBottomRef.current &&
+                shouldReopenOnScrollUpRef.current &&
+                !openDrawerRef.current) {
+                shouldReopenOnScrollUpRef.current = false;
+                setIsDrawerHidden(false);
+                openDrawerHandler();
+            }
+            wasAtPageBottomRef.current = isAtPageBottom;
+            lastScrollYRef.current = currentY;
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    useEffect(() => {
+        const closedTab = closedTabRef.current;
+        if (!closedTab)
+            return;
+        const updateClosedTabHeight = () => {
+            setClosedTabHeight(closedTab.offsetHeight);
+        };
+        updateClosedTabHeight();
+        const resizeObserver = new ResizeObserver(() => {
+            updateClosedTabHeight();
+        });
+        resizeObserver.observe(closedTab);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    useEffect(() => () => {
+        clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    }, []);
+    useEffect(() => {
+        const termsAndConditionsElement = termsAndConditionsRef?.current;
+        if (!termsAndConditionsElement) {
+            return;
+        }
+        if (!('IntersectionObserver' in window)) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            const hasReachedTermsSection = entry?.isIntersecting ?? false;
+            const shouldAutoCloseDrawer = hasReachedTermsSection;
+            const shouldHideDrawerTab = hasReachedTermsSection && !openDrawerRef.current && !isOpeningGestureRef.current;
+            setIsDrawerHidden(shouldHideDrawerTab);
+            if (shouldAutoCloseDrawer && openDrawerRef.current && isScrollingDownRef.current) {
+                closeDrawerHandler({ shouldReopenOnScrollUp: true });
+                setIsDrawerHidden(true);
+            }
+        }, {
+            root: null,
+            threshold: 0,
+            rootMargin: '0px 0px -40% 0px',
+        });
+        observer.observe(termsAndConditionsElement);
+        return () => {
+            observer.disconnect();
+        };
+    }, [termsAndConditionsRef]);
+    const toggleDrawer = () => {
+        if (openDrawerRef.current) {
+            closeDrawerHandler();
+            return;
+        }
+        openDrawerHandler();
+    };
+    const openDrawerHandler = () => {
+        clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+        setIsOpeningGesture(false);
+        setHasPulledPastClosedTabHeight(false);
+        openingTouchStartYRef.current = null;
+        shouldReopenOnScrollUpRef.current = false;
+        setIsDrawerOpened(true);
+        onOpenChange?.(true);
+    };
+    const closeDrawerHandler = ({ shouldReopenOnScrollUp = false, } = {}) => {
+        clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+        setIsOpeningGesture(false);
+        setHasPulledPastClosedTabHeight(false);
+        openingTouchStartYRef.current = null;
+        shouldReopenOnScrollUpRef.current = shouldReopenOnScrollUp;
+        setIsDrawerOpened(false);
+        onOpenChange?.(false);
+    };
+    const scheduleResetPulledPastTimeout = () => {
+        clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+        resetPulledPastTimeoutRef.current = window.setTimeout(() => {
+            if (!openDrawerRef.current) {
+                setHasPulledPastClosedTabHeight(false);
+            }
+        }, 180);
+    };
+    const handleGestureStart = (startY) => {
+        openingTouchStartYRef.current = startY;
+        setIsOpeningGesture(true);
+        setHasPulledPastClosedTabHeight(false);
+    };
+    const handleGestureMove = (currentY) => {
+        if (!isOpeningGestureRef.current)
+            return;
+        const startY = openingTouchStartYRef.current;
+        if (startY === null || typeof currentY !== 'number')
+            return;
+        const pullDistance = startY - currentY;
+        const currentClosedTabHeight = closedTabRef.current?.offsetHeight ?? 0;
+        setHasPulledPastClosedTabHeight(currentClosedTabHeight > 0 && pullDistance >= currentClosedTabHeight);
+    };
+    const handleGestureCancel = () => {
+        openingTouchStartYRef.current = null;
+        setIsOpeningGesture(false);
+        setHasPulledPastClosedTabHeight(false);
+    };
+    const handleGestureEnd = ({ shouldResetTouchStart = false, } = {}) => {
+        if (shouldResetTouchStart) {
+            openingTouchStartYRef.current = null;
+        }
+        if (!isDrawerOpened) {
+            setIsOpeningGesture(false);
+            scheduleResetPulledPastTimeout();
+        }
+    };
+    return (React.createElement(Box, { sx: { display: { md: 'none' } } },
+        React.createElement(Box, { ref: closedTabRef, sx: {
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                backgroundColor: (theme) => theme.palette.background.paper,
+                borderTopLeftRadius: isOpeningGesture || isDrawerOpened ? 0 : 16,
+                borderTopRightRadius: isOpeningGesture || isDrawerOpened ? 0 : 16,
+                boxShadow: isOpeningGesture || isDrawerOpened ? 'none' : '0 -8px 10px 2px rgba(0,0,0,0.2)',
+                zIndex: (theme) => theme.zIndex.drawer + 1,
+                opacity: isDrawerHidden ? 0 : 1,
+                transform: isDrawerHidden ? 'translateY(calc(100% + 12px))' : 'translateY(0)',
+                transition: 'opacity 180ms ease, transform 180ms ease, border-radius 120ms ease, box-shadow 120ms ease',
+                pointerEvents: 'none',
+            } },
+            !isDrawerOpened && (React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: '100%',
+                    py: 1,
+                } },
+                React.createElement(Box, { sx: {
+                        width: 80,
+                        height: 6,
+                        backgroundColor: (theme) => theme.palette.grey[300],
+                        borderRadius: 3,
+                        opacity: isOpeningGesture ? 0 : 1,
+                        transition: 'opacity 120ms ease',
+                    } }))),
+            React.createElement(Box, { role: "button", "aria-label": t('form.labels.payment_overview_open'), onClick: toggleDrawer, onTouchStart: (event) => {
+                    handleGestureStart(event.touches[0]?.clientY ?? null);
+                }, onMouseDown: () => {
+                    handleGestureStart(null);
+                }, onTouchMove: (event) => {
+                    handleGestureMove(event.touches[0]?.clientY);
+                }, onTouchCancel: handleGestureCancel, onTouchEnd: () => {
+                    handleGestureEnd({ shouldResetTouchStart: true });
+                }, onMouseUp: () => {
+                    handleGestureEnd();
+                }, sx: {
+                    width: '100%',
+                    px: 2,
+                    pb: 2,
+                    pointerEvents: isDrawerOpened || isDrawerHidden ? 'none' : 'auto',
+                    cursor: 'pointer',
+                } },
+                React.createElement(Typography, { sx: {
+                        fontWeight: 'bold',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    } },
+                    React.createElement("span", null,
+                        t('form.labels.total'),
+                        ":"),
+                    React.createElement("span", null, fCurrency(totalPrice, lang, event.currency))),
+                React.createElement(Button, { type: "submit", form: EVENTLOOK_ORDER_FORM_ID, onClick: (event) => {
+                        event.stopPropagation();
+                    }, variant: "contained", size: "large", fullWidth: true, sx: { mt: 1, height: { xs: 36, md: 40 } } }, t('buy')))),
+        React.createElement(SwipeableDrawer, { anchor: "bottom", open: isDrawerOpened, onClose: () => closeDrawerHandler(), onOpen: () => openDrawerHandler(), swipeAreaWidth: swipeAreaWidth, allowSwipeInChildren: true, disableSwipeToOpen: isDrawerHidden, keepMounted: true, SwipeAreaProps: {
+                onTouchStart: (event) => {
+                    handleGestureStart(event.touches[0]?.clientY ?? null);
+                },
+                onMouseDown: () => {
+                    handleGestureStart(null);
+                },
+                onTouchMove: (event) => {
+                    handleGestureMove(event.touches[0]?.clientY);
+                },
+                onTouchCancel: handleGestureCancel,
+                onTouchEnd: () => {
+                    handleGestureEnd({ shouldResetTouchStart: true });
+                },
+                onMouseUp: () => {
+                    handleGestureEnd();
+                },
+            }, sx: {
+                display: { md: 'none' },
+                pointerEvents: isDrawerOpened ? 'none' : 'auto',
+                '& .MuiDrawer-paper': {
+                    pointerEvents: 'auto',
+                },
+                '& .MuiSwipeArea-root': {
+                    pointerEvents: 'auto',
+                },
+            }, ModalProps: {
+                disableScrollLock: true,
+                keepMounted: false,
+                disableAutoFocus: true,
+                disableRestoreFocus: true,
+                disableEnforceFocus: true,
+                BackdropProps: {
+                    sx: {
+                        background: 'none',
+                        pointerEvents: 'none',
+                    },
+                },
+            }, PaperProps: {
+                sx: {
+                    borderTopLeftRadius: 16,
+                    borderTopRightRadius: 16,
+                    boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+                    overflow: 'hidden',
+                    mb: isDrawerOpened ||
+                        (!isDrawerOpened && (isOpeningGesture || hasPulledPastClosedTabHeight))
+                        ? `${closedTabHeight}px`
+                        : 0,
+                    transition: 'none',
+                },
+            } },
+            React.createElement(Box, { role: "button", "aria-label": t('form.labels.payment_overview_close'), onClick: toggleDrawer, sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: (theme) => theme.palette.background.paper,
+                    cursor: 'pointer',
+                    py: 1,
+                } },
+                React.createElement(Box, { sx: {
+                        width: 80,
+                        height: 6,
+                        backgroundColor: (theme) => theme.palette.grey[300],
+                        borderRadius: 3,
+                    } })),
+            React.createElement(Box, { sx: {
+                    height: '100%',
+                    overflow: 'auto',
+                } },
+                React.createElement(PaymentOverviewBox, { event: event, hideBuyButton: true })))));
+};
+
+const BorderedCheckbox = ({ name, disabled, title, price, onChange, }) => {
+    const { control } = useFormContext();
+    return (React.createElement(Controller, { name: name, control: control, render: ({ field }) => (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { ...field, checked: field.value || false, onChange: (e) => {
+                    onChange?.(e);
+                    if (!e.defaultPrevented) {
+                        field.onChange(e);
+                    }
+                }, disabled: disabled }), label: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%', pr: 1 } },
+                React.createElement(Typography, { variant: "body2", fontWeight: 400 }, title),
+                React.createElement(Typography, { variant: "body2", fontWeight: 700, sx: { whiteSpace: 'nowrap' } }, price)), sx: {
+                m: 0,
+                px: 1,
+                pr: 0.5,
+                pl: 0,
+                borderRadius: 1,
+                width: '100%',
+                border: '1px solid',
+                borderColor: 'primary.main',
+                '& .MuiFormControlLabel-label': {
+                    width: '100%',
+                },
+            } })) }));
+};
+const Services = ({ event }) => {
+    const { t, lang, showSnackbar } = useGlobal();
+    const [open, setOpen] = useState(false);
+    Number(useWatch({
+        name: 'ticketInsurancePricePerUnit',
+        defaultValue: 0,
+    }) || 0);
+    const smsNotificationPrice = Number(useWatch({
+        name: 'smsNotificationPrice',
+        defaultValue: 0,
+    }) || 0);
+    const tickets = useWatch({
+        name: 'tickets',
+        defaultValue: {},
+    });
+    const totalTickets = useMemo(() => {
+        const items = Object.values(tickets || {}).flat();
+        return items.reduce((sum, ticket) => sum + (Number(ticket.quantity) || 0), 0);
+    }, [tickets]);
+    const handleOpen = (e) => {
+        e.preventDefault();
+        setOpen(true);
+    };
+    const handleClose = () => setOpen(false);
+    const handleServiceChange = (e) => {
+        if (totalTickets <= 0) {
+            e.preventDefault();
+            showSnackbar(t('event.tickets.services.add_tickets_first'), {
+                variant: 'error',
+            });
+        }
+    };
+    return (React.createElement(Stack, { spacing: 1 },
+        React.createElement(BorderedCheckbox, { name: "smsNotification", disabled: false, title: t('event.tickets.sms_notification.label'), price: React.createElement(React.Fragment, null,
+                "+ ",
+                fCurrency(smsNotificationPrice, lang, event.currency)), onChange: handleServiceChange }),
+        React.createElement(Box, { sx: { display: 'flex', justifyContent: 'flex-end' } },
+            React.createElement(Link, { variant: "body2", underline: "always", onClick: handleOpen, color: 'text.primary' }, t('event.tickets.stepper.8.additional_info'))),
+        React.createElement(Dialog, { open: open, onClose: handleClose, maxWidth: "sm", fullWidth: true, PaperProps: {
+                sx: {
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                },
+            } },
+            React.createElement(DialogTitle, { sx: {
+                    position: 'relative',
+                    textAlign: 'center',
+                    fontWeight: 700,
+                    fontSize: { xs: '1.5rem', sm: '1.75rem' },
+                    pt: { xs: 3.5, sm: 4 },
+                    pb: { xs: 2, sm: 2.5 },
+                    px: { xs: 3, sm: 4 },
+                } },
+                t('event.tickets.stepper.8.title'),
+                ":",
+                React.createElement(IconButton, { onClick: handleClose, size: "small", sx: { position: 'absolute', right: 16, top: 16 } },
+                    React.createElement(Iconify, { icon: "carbon:close" }))),
+            React.createElement(DialogContent, { sx: { px: { xs: 3, sm: 4 }, pb: { xs: 4, sm: 5 } } },
+                React.createElement(Stack, { spacing: 3 },
+                    React.createElement(Box, null,
+                        React.createElement(Typography, { variant: "subtitle2", fontWeight: 700, gutterBottom: true }, t('event.tickets.sms_notification.label')),
+                        React.createElement(Typography, { variant: "body2", paragraph: true }, t('event.tickets.sms_notification.modal.description')),
+                        React.createElement(BorderedCheckbox, { name: "smsNotification", disabled: false, title: t('event.tickets.sms_notification.label'), price: React.createElement(React.Fragment, null,
+                                "+ ",
+                                fCurrency(smsNotificationPrice, lang, event.currency)), onChange: handleServiceChange })),
+                    React.createElement(Button, { variant: "outlined", onClick: handleClose, sx: {
+                            mt: 1,
+                            py: 1.25,
+                            borderRadius: 1,
+                            height: 36,
+                            fontWeight: 700,
+                            borderColor: 'grey.300',
+                            color: 'text.primary',
+                        } }, t('close')))))));
 };
 
-const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInline, }) => {
+const getCartUniqueItemCount = (formValues) => {
+    const flatTickets = Object.values(formValues.tickets ?? {}).flat();
+    const ticketsCount = flatTickets.reduce((sum, ticket) => sum + (Number(ticket.quantity) > 0 ? 1 : 0), 0);
+    const ticketsWithProductsCount = flatTickets.reduce((sum, ticket) => sum + ((ticket.products?.length ?? 0) > 0 ? 1 : 0), 0);
+    const productsCount = Object.values(formValues.products ?? {})
+        .flat()
+        .reduce((sum, product) => sum + (Number(product.quantity) || 0), 0);
+    return ticketsCount + ticketsWithProductsCount + productsCount;
+};
+const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInline, headerSlot, }) => {
     const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } = useGlobal();
     const { transformErrors } = useErrors(t('event.tickets.error.order'));
     const { data: eventProducts, isLoading } = useActiveEventProducts(event.id);
@@ -35216,12 +37850,14 @@ const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInlin
     const [hasGopayId, setHasGopayId] = useState(hasGopayIdSsr);
     const [isPaying, setIsPaying] = useState(false);
     const [formStep, setFormStep] = useState(1);
+    const [isPaymentOverviewDrawerOpen, setIsPaymentOverviewDrawerOpen] = useState(false);
     const [showReleaseDate, setShowReleaseDate] = useState(dayjs(event.releaseDate).diff(dayjs()) > 0);
     const [matchIsValidTel, setMatchIsValidTel] = useState(() => false);
     const isNotReleased = dayjs(event.releaseDate).diff(dayjs()) > 0;
     const hasFiredViewCart = useRef(false);
     const hasFiredBeginCheckout = useRef(false);
     const hasFiredPaymentMethod = useRef(false);
+    const termsAndConditionsRef = useRef(null);
     const item = {
         currency: event.currency,
         items: [
@@ -35387,10 +38023,31 @@ const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInlin
         //   }
         //   return true;
         // }),
-        shipping: create$3().shape({
+        shipping: create$3()
+            .shape({
             shippingMethodId: create$5().nullable(),
             branchId: create$6().nullable(),
             price: create$5(),
+        })
+            .test('shipping-method-required', t('form.validation.required'), function (value) {
+            if (!event.hasMerchandise) {
+                return true;
+            }
+            const formValues = this.parent;
+            const hasProducts = Object.values(formValues.products ?? {}).some((arr) => arr.length > 0);
+            const allTickets = Object.values(formValues.tickets ?? {}).flat();
+            const hasTicketProducts = allTickets.some((ticket) => (ticket.products?.length ?? 0) > 0);
+            const requiresShipping = hasProducts || hasTicketProducts;
+            if (!requiresShipping) {
+                return true;
+            }
+            if (value?.shippingMethodId !== null && value?.shippingMethodId !== undefined) {
+                return true;
+            }
+            return this.createError({
+                path: 'shipping.shippingMethodId',
+                message: t('form.validation.required'),
+            });
         }),
         paymentMethodId: create$5().nullable().required(t('form.validation.required')),
         paymentMethodOptionId: create$5().nullable(),
@@ -35415,12 +38072,10 @@ const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInlin
         defaultValues,
     });
     const values = methods.watch();
+    const cartItemCount = getCartUniqueItemCount(values);
+    const onInvalid = useScrollToFirstError(methods);
     const onSubmit = async (values) => {
-        const allTickets = Object.values(values.tickets).flat();
-        if (allTickets.length === 1 &&
-            !allTickets[0].releaseId &&
-            !allTickets[0].quantity &&
-            !values.products.length) {
+        if (cartItemCount <= 0) {
             showSnackbar(t('form.validation.count_tickets_or_products'), {
                 variant: 'error',
             });
@@ -35532,7 +38187,7 @@ const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInlin
         }
     }, [window.location.search]);
     useEffect(() => {
-        const subscription = methods.watch((value, { name }) => {
+        const subscription = methods.watch((value) => {
             if (JSON.stringify(defaultValues) !== JSON.stringify(value) &&
                 !hasFiredBeginCheckout.current) {
                 if (isIframe) {
@@ -35554,7 +38209,7 @@ const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInlin
     useEffect(() => {
         if (hasGopayId || isPaying || paymentRedirect) {
             if (options?.autoscrollAfterViewChange) {
-                const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_ID);
+                const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_CONTAINER_ID);
                 if (orderForm) {
                     orderForm.scrollIntoView({ behavior: 'smooth' });
                 }
@@ -35563,46 +38218,65 @@ const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInlin
     }, [hasGopayId, isPaying, paymentRedirect]);
     if (isIframe && isNotReleased && showReleaseDate)
         return React.createElement(ReleaseCountdown, { event: event, setShowReleaseDate: setShowReleaseDate });
-    return (React.createElement(Box, { id: EVENTLOOK_ORDER_FORM_ID }, hasGopayId ? (React.createElement(PaymentSuccess, { setIsPaying: setIsPaying, isIframe: isIframe, pixels: pixels })) : isPaying ? (React.createElement(PaymentPending, null)) : paymentRedirect ? (React.createElement(OrderSuccess, { gwUrl: paymentRedirect, isIframe: isIframe, setIsPaying: setIsPaying, isInline: isInline })) : (
-    // @ts-ignore -- FormProvider expects stricter form types
-    React.createElement(FormProvider, { methods: methods, onSubmit: methods.handleSubmit(onSubmit) },
-        React.createElement(Typography, { className: "overview-card__event-info", display: { md: 'none' }, variant: "h4", sx: {
+    return (React.createElement(Box, { id: EVENTLOOK_ORDER_FORM_CONTAINER_ID }, hasGopayId ? (React.createElement(PaymentSuccess, { setIsPaying: setIsPaying, isIframe: isIframe, pixels: pixels })) : isPaying ? (React.createElement(PaymentPending, null)) : paymentRedirect ? (React.createElement(OrderSuccess, { gwUrl: paymentRedirect, isIframe: isIframe, setIsPaying: setIsPaying, isInline: isInline })) : (React.createElement(FormProvider, { methods: methods, 
+        // @ts-ignore
+        onSubmit: methods.handleSubmit(onSubmit, onInvalid), formId: EVENTLOOK_ORDER_FORM_ID },
+        React.createElement(Stack, { className: "overview-card__event-info", display: { md: 'none' }, sx: {
                 mb: 2,
             } },
-            event.name,
-            " - ",
-            dayjs(event.startDate).format('DD.MM.YYYY HH:mm')),
-        React.createElement(Grid, { container: true, spacing: 2 },
+            React.createElement(Typography, { variant: "h3", component: "h1" }, event.name),
+            React.createElement(Typography, { variant: "h5", component: "h2" }, dayjs(event.startDate).format('DD.MM.YYYY HH:mm')),
+            React.createElement(Typography, { variant: "body2", mt: 1 }, getPlaceAsString(event.place)),
+            headerSlot ? React.createElement(React.Fragment, null, headerSlot) : null),
+        React.createElement(Grid, { container: true, spacing: 2, sx: {
+                pb: {
+                    xs: isPaymentOverviewDrawerOpen ? cartItemCount * 4 + 18 : 0,
+                    md: 0,
+                },
+            } },
             React.createElement(Grid, { size: { xs: 12, md: 8 } },
-                React.createElement(Stepper, { orientation: "vertical" },
+                React.createElement(Stepper, { orientation: "vertical", sx: (theme) => ({
+                        [theme.breakpoints.down('sm')]: {
+                            '& .MuiStepContent-root': {
+                                borderLeftWidth: 0,
+                                paddingLeft: 0,
+                                marginLeft: 0,
+                            },
+                            '& .MuiStepConnector-line': { borderLeftWidth: 0 },
+                        },
+                    }) },
                     event.type === EventType.RECURRING && (React.createElement(Step, { active: true },
                         React.createElement(StepLabel, null, t('event.tickets.stepper.6.title')),
-                        React.createElement(StepContent, null,
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } },
                             React.createElement(TimeslotSelection, { event: event })))),
                     React.createElement(Step, { active: true },
                         React.createElement(StepLabel, null, t('event.tickets.stepper.1.title')),
-                        React.createElement(StepContent, null, event.mapId && seatingIframeUrl ? (React.createElement(TicketSelectionMap, { event: event })) : event.hasMerchandise ? (React.createElement(TicketWithMerchandiseSelection, { event: event })) : (React.createElement(TicketSelection, { event: event })))),
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } }, event.mapId && seatingIframeUrl ? (React.createElement(TicketSelectionMap, { event: event })) : event.hasMerchandise ? (React.createElement(TicketWithMerchandiseSelection, { event: event })) : (React.createElement(TicketSelection, { event: event })))),
                     event.hasMerchandise && eventProducts.length && (React.createElement(Step, { active: true },
                         React.createElement(StepLabel, null, t('event.tickets.stepper.4.title')),
-                        React.createElement(StepContent, null,
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } },
                             React.createElement(MerchandiseSelection, { eventProducts: eventProducts, eventId: event.id, isLoading: isLoading })))),
+                    React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.8.title')),
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } },
+                            React.createElement(Services, { event: event }))),
                     event.children.length && (React.createElement(Step, { active: true },
                         React.createElement(StepLabel, null, t('event.tickets.stepper.7.title')),
-                        React.createElement(StepContent, null,
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } },
                             React.createElement(ChildEventSection, { events: event.children })))),
                     React.createElement(Step, { active: true },
                         React.createElement(StepLabel, null, t('event.tickets.stepper.2.title')),
-                        React.createElement(StepContent, null,
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } },
                             React.createElement(ContactPerson, { event: event }))),
                     event.hasMerchandise && showShippingMethods() && (React.createElement(Step, { active: true },
                         React.createElement(StepLabel, null, t('event.tickets.stepper.5.title')),
-                        React.createElement(StepContent, null,
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } },
                             React.createElement(Shipping, { event: event })))),
                     React.createElement(Step, { active: true },
                         React.createElement(StepLabel, null, t(`event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`)),
-                        React.createElement(StepContent, null,
+                        React.createElement(StepContent, { sx: { pr: { xs: 0 } } },
                             React.createElement(Payment, { event: event })))),
-                React.createElement(Stack, { mt: 2, ml: 4 },
+                React.createElement(Stack, { ref: termsAndConditionsRef, mt: 2, ml: { xs: 1, md: 4 }, sx: { scrollMarginBottom: { xs: 220, md: 0 } } },
                     React.createElement(RHFCheckbox, { name: "termsAndConditions", label: React.createElement(Trans, { text: "event.tickets.terms_and_conditions", values: {
                                 termsAndConditionsCompanies: options?.termsAndConditionsCompanies
                                     ? options.termsAndConditionsCompanies.join(t('and'))
@@ -35611,13 +38285,16 @@ const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInlin
                                 0: React.createElement(CustomLink, { key: 2, href: links.termsAndConditions, target: "_blank" }),
                                 1: React.createElement(CustomLink, { key: 1, href: links.gdpr, target: "_blank" }),
                             } }) }))),
-            React.createElement(Grid, { size: { xs: 12, md: 4 } },
-                React.createElement(PaymentOverviewBox, { event: event }))),
+            React.createElement(Grid, { size: 12, sx: { display: { xs: 'block', md: 'none' } } },
+                React.createElement(Divider, { sx: { borderStyle: 'dashed' } })),
+            React.createElement(Grid, { size: { xs: 12, md: 4 }, sx: { mt: { xs: 0, md: 0 } } },
+                React.createElement(PaymentOverviewBox, { event: event, withoutPadding: true }))),
+        React.createElement(PaymentOverviewDrawer, { event: event, totalPrice: values.total, termsAndConditionsRef: termsAndConditionsRef, onOpenChange: setIsPaymentOverviewDrawerOpen }),
         React.createElement(EmailConfirmation, { open: formStep === 2 && !isIframe, onClose: () => setFormStep(1), 
-            // @ts-ignore -- handleSubmit return type mismatch with onConfirm prop
-            onConfirm: methods.handleSubmit(onSubmit) })))));
+            // @ts-ignore
+            onConfirm: methods.handleSubmit(onSubmit, onInvalid) })))));
 };
-const CustomLink = ({ href = '', children, ...other }) => (React.createElement(Link, { href: href, ...other }, children));
+const CustomLink = ({ href = '', children, ...other }) => (React.createElement(Link, { href: href, ...other, sx: { color: 'inherit', textDecoration: 'underline' } }, children));
 
 var utc$2 = {exports: {}};
 
@@ -35792,7 +38469,7 @@ const ClientRender = ({ eventSlug, apiUrl, seatingIframeUrl, lang, slots, option
         }
     };
     return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: lang || Languages.CS, localeText: getLocalizationProviderLocaleText() },
-        React.createElement(GlobalProvider, { lang: lang || Languages.CS, showSnackbar: slots?.showSnackbar, callbacks: callbacks, links: links, options: options, content: content, seatingIframeUrl: seatingIframeUrl }, !data || !!error ? (React.createElement(TicketFormSkeleton, null)) : (React.createElement(TicketForm, { event: data, hasGopayIdSsr: options?.hasGopayId || false, isIframe: options?.isIframe, selectedReleaseId: selectedReleaseId })))));
+        React.createElement(GlobalProvider, { lang: lang || Languages.CS, showSnackbar: slots?.showSnackbar, callbacks: callbacks, links: links, options: options, content: content, seatingIframeUrl: seatingIframeUrl }, !data || !!error ? (React.createElement(TicketFormSkeleton, null)) : (React.createElement(TicketForm, { event: data, hasGopayIdSsr: options?.hasGopayId || false, isIframe: options?.isIframe, selectedReleaseId: selectedReleaseId, headerSlot: slots?.headerSlot })))));
 };
 function Index(props) {
     return (React.createElement(ClientOnly, null,
@@ -35801,5 +38478,5 @@ function Index(props) {
 
 const OrderFormSdk = Index;
 
-export { OrderFormSdk as O, getAugmentedNamespace as a, getDefaultExportFromCjs as g };
-//# sourceMappingURL=index-BlTqx0jm.js.map
+export { OrderFormSdk as O, getDefaultExportFromCjs as g };
+//# sourceMappingURL=index-CJ_gPli9.js.map