@licklist/design 0.71.18-dev.8 → 0.71.18

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -86,7 +86,6 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -130,7 +129,6 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -50,7 +50,6 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -91,7 +91,6 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
-                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -128,7 +127,6 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -59,7 +59,6 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
-                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,7 +111,6 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -166,7 +165,6 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,7 +85,6 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -144,7 +143,6 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,7 +69,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
-                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -221,7 +221,6 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
-                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -294,7 +293,6 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
-                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -355,7 +353,6 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
-                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -546,7 +543,6 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
-                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo } from 'react'
+import React, { useContext, useEffect, useMemo } from 'react'
 import { Col, Form, Row } from 'react-bootstrap'
 import {
   ArrayPath,

package/src/product-set/utils/index.ts

@@ -1,7 +1,5 @@
 import { EmailTemplate } from '@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper'
 import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper'
-import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
-import { convertToTypeaheadOptions } from 'src/sales/coupon/utils'
 import { TFunction } from 'react-i18next'
 import { UseFormSetError } from 'react-hook-form'
 import { checkIfZoneCategory } from '@licklist/plugins'
@@ -9,7 +7,6 @@ import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDat
 import { TemplateItem } from '../control/ProductSetControl'
 import { ProductSetFormValues } from '../form/ProductSetForm'
 
-
 interface CheckAvailableTimesErrors {
   values: ProductSetFormValues
   setError: UseFormSetError<ProductSetFormValues>
@@ -61,22 +58,6 @@ export const getFilteredTemplates = (
     }))
 }
 
-export  const updateModifiersSetAtProductSetForm = (data: ProductSetFormValues) => ({
-  ...data,
-  steps: data.steps.map(step => ({
-      ...step,
-      productCategories: step.productCategories.map(category => ({
-          ...category,
-          products: category.products.map(product => ({
-              ...product,
-              modifiersSet: product?.modifiersSet
-                  ? convertToTypeaheadOptions(product.modifiersSet as ModifierSet[])
-                  : [],
-          })),
-      })),
-  })),
-});
-
 export const checkAvailableTimesErrors = ({
   values,
   setError,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,7 +109,6 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/recurring-date-picker-input/RecurrenceEndInput.tsx

@@ -91,7 +91,6 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -33,7 +33,6 @@ export type ReportRunnerModalProps = {
   onHide: () => void
   onEdit: () => void
   reports?: Report[] | null
-  providerId?: number
 }
 
 type FormValues = Pick<GenerateReportBody, 'dateFrom' | 'dateTo' | 'periodBy'>
@@ -52,7 +51,6 @@ export const ReportRunnerModal = ({
   generate,
   download,
   onEdit,
-  providerId,
 }: ReportRunnerModalProps) => {
   const { t } = useTranslation(['App', 'Design'])
   const report = reports?.find((report) => report.id === reportId)
@@ -85,7 +83,6 @@ export const ReportRunnerModal = ({
       dateFrom: values.dateFrom,
       dateTo: values.dateTo,
       data,
-      providerId,
     })
   })
 

package/src/resource/form/components/CapacityControl.tsx

@@ -27,7 +27,6 @@ export const CapacityControl = ({ isLoading }: CapacityControlProps) => {
           required: true,
           min: 1,
         })}
-        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:capacity')}
         isInvalid={Boolean(errors.capacity)}
         disabled={isLoading}

package/src/resource/form/components/SortControl.tsx

@@ -27,7 +27,6 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
           required: false,
           min: 1,
         })}
-        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}

package/src/sales/booking/results/components/ResultCard.tsx

@@ -20,6 +20,8 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void
 }
 
+// @TODO integrate when API will be available
+// activity and staff keys
 export const ResultCard = ({
   order,
   className,

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -179,7 +179,6 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:discount')}</Form.Label>
               <Form.Control
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.discount !== undefined}
                 {...register('discount', {
                   required: t('Validation:fieldRequired', {
@@ -317,7 +316,6 @@ export const CouponFormControl = ({
               <Form.Control
                 {...register('totalCoupons')}
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}
               />
@@ -332,7 +330,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUser')}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
             </Form.Group>
@@ -345,7 +342,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('useAgain')}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -359,7 +355,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUserDay')}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -375,7 +370,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('minAmount')}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -389,7 +383,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('maxAmount')}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>

package/src/sales/coupon/utils/index.ts

@@ -1,15 +1,13 @@
-
-import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 import { ProductGroup } from '@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper'
 
-export const convertToTypeaheadOptions = (productGroups?: ProductGroup[] | ModifierSet[]) => {
+export const convertToTypeaheadOptions = (productGroups?: ProductGroup[]) => {
   if (!productGroups || !productGroups.length) {
     return []
   }
 
-  return productGroups.map(({ id, name }: ProductGroup | ModifierSet ) => ({
+  return productGroups.map(({ id, name }: ProductGroup) => ({
     id: Number(id),
     value: name,
-    label: name ,
+    label: name,
   }))
 }

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -9,18 +9,9 @@ import { FaTimes } from 'react-icons/fa'
 import { EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS } from '../../constants'
 import { CurrencyNumberInput } from '../../../static/CurrencyNumberInput'
 
-export const FULL_REFUND_TYPE = 'fullRefund'
-export const PARTIAL_REFUND_TYPE = 'partialRefund'
-export const NET_REFUND_TYPE = 'netRefund'
-
-export type RefundType =
-  | typeof FULL_REFUND_TYPE
-  | typeof PARTIAL_REFUND_TYPE
-  | typeof NET_REFUND_TYPE
-
 export interface RefundModalProps {
   isVisible: boolean
-  refundType?: RefundType
+  isFullRefund?: boolean
   onHide: () => void
   onSubmit: (amount?: number) => void
   isLoading?: boolean
@@ -38,14 +29,12 @@ export const RefundModal = ({
   onHide,
   onSubmit,
   isLoading = false,
-  refundType = PARTIAL_REFUND_TYPE,
+  isFullRefund = false,
   paymentType,
   defaultValue = 0,
   maxValue,
 }: RefundModalProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
-  const isInputDisabled =
-    isLoading || refundType === 'fullRefund' || refundType === 'netRefund'
 
   const {
     handleSubmit,
@@ -75,7 +64,9 @@ export const RefundModal = ({
     >
       <Form onSubmit={handleSubmit(onModalSubmit)}>
         <ModalHeader className='align-items-center border-0'>
-          <ModalTitle as='h5'>{t(`Design:${refundType}`)}</ModalTitle>
+          <ModalTitle as='h5'>
+            {t(isFullRefund ? 'Design:fullRefund' : 'Design:partialRefund')}
+          </ModalTitle>
 
           <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
             <FaTimes size={20} />
@@ -120,7 +111,7 @@ export const RefundModal = ({
                     },
                   })}
                   step={0.01}
-                  disabled={isInputDisabled}
+                  disabled={isLoading || isFullRefund}
                   isInvalid={!!errors.amount}
                   min={0}
                 />

package/src/sales/modals/refund-modal/index.ts

@@ -1,7 +1,2 @@
-export {
-  RefundModal,
-  FULL_REFUND_TYPE,
-  NET_REFUND_TYPE,
-  PARTIAL_REFUND_TYPE,
-} from './RefundModal'
-export type { RefundModalProps, RefundType } from './RefundModal'
+export { RefundModal } from './RefundModal'
+export type { RefundModalProps } from './RefundModal'

package/src/setting/admin/AdminSettingForm.tsx

@@ -145,14 +145,10 @@ export const AdminSettingForm = ({
                       ) && (
                         <>
                           {t('noCountryIsProvided')}
-                          {/* TODO fix issue react router types
-      @ts-expect-error */}
                           <Link
                             role='button'
                             to={`/provider/${providerMetadata?.providerType}/${providerMetadata?.providableId}/update`}
                           >
-                            {/* TODO fix issue react router types
-      @ts-expect-error */}
                             {t('here')}
                           </Link>
                         </>

package/src/setting/admin/PaymentFeeForm.tsx

@@ -74,7 +74,6 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                     max={100}
                     step='1'
                     placeholder='0'
-                    onWheel={(event) => event.currentTarget.blur()}
                     {...register('feeInPercent', {
                       validate: {
                         moreThan: (v) => (v ? v >= 0 : true),
@@ -130,7 +129,6 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                     max={999999.99}
                     step='0.01'
                     placeholder='0,00'
-                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.minFeeInPounds)}
                     disabled={isLoading}
                   />
@@ -176,7 +174,6 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                     max={999999.99}
                     step='0.01'
                     placeholder='0,00'
-                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.maxFeeInPounds)}
                     disabled={isLoading}
                   />
@@ -234,7 +231,6 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                     max={100}
                     step='1'
                     placeholder='0'
-                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.vatInPercent)}
                     disabled={isLoading}
                   />
@@ -280,7 +276,6 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                     max={999999.99}
                     step='0.01'
                     placeholder='0,00'
-                    onWheel={(event) => event.currentTarget.blur()}
                     isInvalid={Boolean(errors.fixedFee)}
                     disabled={isLoading}
                   />

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -178,7 +178,6 @@ export const DashboardSettingForm = ({
               <Form.Label>{t('metaPixelId')}</Form.Label>
               <Form.Control
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 {...register('metaPixelId', {
                   minLength: {
                     value: 15,

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -24,8 +24,6 @@ export function SnippetTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
-        {/* TODO fix issue react router types
-      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && !isDefault && (
           <button

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -29,6 +29,7 @@ import {
 import { NumberInput } from '../../../iframe/order-process/components/CategoryProduct/components/NumberInput'
 import { SnippetTemplateContext } from '../context/snippetTemplate'
 
+
 const DEFAULT_IMAGE =
   'https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80'
 
@@ -57,7 +58,7 @@ export function Preview({
 
   const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay)
   const [selectedDate, setSelectedDate] = useState<DateTime | null>(null)
-  const calendarDates = getMonthCalendarDates({ initialDate: currentDate })
+  const calendarDates = getMonthCalendarDates(currentDate)
 
   return (
     <div className='w-100 h-100 snippet-template-preview'>

package/src/sortable-tree/SortableTreeItem.tsx

@@ -33,7 +33,6 @@ export interface SortableTreeItemProps {
   body: ReactNode
   children?: ReactNode
   preItem?: ReactNode
-  itemButton?: ReactNode
   postItem?: ReactNode
   sortableItems?: string[]
   isExpanded?: boolean
@@ -83,7 +82,6 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
-  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded)
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded)
@@ -289,13 +287,9 @@ export function SortableTreeItem({
                     className={clsx(
                       'sortable-tree-item-title',
                       modalLabel && 'sortable-tree-product-set-element-title',
-                      'd-flex justify-content-between',
                     )}
                   >
                     {title}
-                    <div className='sortable-tree-item-subtitle'>
-                      {itemButton}
-                    </div>
                   </span>
                   {!expanded && (
                     <span className='sortable-tree-item-subtitle'>

package/src/static/CurrencyNumberInput.tsx

@@ -45,7 +45,6 @@ export const CurrencyNumberInput = forwardRef<
           disabled={disabled}
           value={value}
           onChange={onChange}
-          onWheel={(event) => event.currentTarget.blur()}
           ref={ref}
           {...props}
         />

package/src/static/date-range-input/utils/index.ts

@@ -58,7 +58,7 @@ export const stringDatesToInputValue = ({
   )} - ${DateTime.fromJSDate(nextEndDate).toFormat(INPUT_DATE_FORMAT)}`
 }
 
-export const getDateParams = (date: Date): [number, number, number] => {
+export const getDateParams = (date: Date) => {
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const monthDate = date.getDate()

package/src/static/form-number-input/FormNumberInput.tsx

@@ -75,7 +75,6 @@ export const FormNumberInput = ({
               type='number'
               step={step}
               disabled={disabled}
-              onWheel={(event) => event.currentTarget.blur()}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
               onChange={(event) => {

package/src/static/loader/LoaderIndicator.tsx

@@ -1,17 +1,16 @@
 /* eslint-disable react/jsx-pascal-case */
-import { PropsWithChildren } from 'react'
+import { ReactNode } from 'react'
 import * as ReactLoader from 'react-loader'
 import ILoaderOptions from '../../types/static/ILoaderOptions'
 
 export interface LoaderIndicatorProps {
+  children?: ReactNode | ReactNode[]
   isLoaded?: boolean
   options?: ILoaderOptions
   className?: string
 }
 
-export function LoaderIndicator(
-  props: PropsWithChildren<LoaderIndicatorProps>,
-) {
+export function LoaderIndicator(props: LoaderIndicatorProps) {
   const { children, isLoaded, options, className = '' } = props
 
   const defaultOptions: ILoaderOptions = {
@@ -38,8 +37,6 @@ export function LoaderIndicator(
   } as ILoaderOptions
 
   return (
-    // TODO Remove this library, it's deprecated and even removed from npm packages
-    // @ts-expect-error
     <ReactLoader.default
       loaded={isLoaded!}
       options={mergedOptions}

package/src/static/loader/index.ts

@@ -5,4 +5,3 @@ export { ButtonLoader } from './ButtonLoader'
 export { SnippetLoader } from './SnippetLoader'
 export { PaymentLoader } from './PaymentLoader'
 export type { PaymentLoaderProps } from './PaymentLoader'
-export { FullScreenLoader } from './FullScreenLoader'

package/src/static/number-input/NumberInput.tsx

@@ -49,7 +49,6 @@ export function NumberInput({
     <div className={inputWrapperClasses}>
       <FormControl
         type='number'
-        onWheel={(event) => event.currentTarget.blur()}
         onChange={(e) => onChange(Number(e.target.value))}
         value={value}
         min={min}

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -4,7 +4,8 @@
   align-items: center;
   gap: 0.5rem;
   font-weight: 300;
-  width: 100%;
+  max-width: 100%;
+
 
   .indicator-label {
     text-overflow: ellipsis;
@@ -24,6 +25,8 @@
   }
 }
 
+
+
 .activity-card {
   .availability-indicator {
     margin-top: 0.5rem;

package/src/styles/date-time-button/DateTimeButton.scss

@@ -33,10 +33,8 @@
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
-    background-color: transparent;
-    border: none;
+    background-color: $snippet-calendar-disabled-button-background-color;
     color: $snippet-calendar-disabled-button-font-color;
-    cursor: not-allowed;
 
     .weekday-info {
       div:last-child {
@@ -105,10 +103,3 @@
   font-weight: 300;
   color: $snippet-calendar-button-font-color;
 }
-
-.modifier-price {
-  font-size: 1rem;
-  line-height: 1.03rem;
-  font-weight: 500;
-  color: $snippet-calendar-button-font-color;
-}

package/src/styles/events/EditEventModal.scss

@@ -37,8 +37,6 @@
   .edit-step-dialog {
     .custom-checkbox {
       align-items: unset;
-      position: relative;
-      z-index: 0;
       .form-check-label {
         margin-top: 1rem;
       }

package/src/styles/iframe-events/Calendar.scss

@@ -74,7 +74,7 @@
     .calendar-dates-wrapper {
       .calendar-dates {
         display: grid;
-        grid-template-columns: repeat(7, auto);
+        grid-template-columns: repeat(7, 1fr);
         grid-gap: 0.5rem 1rem;
         overflow-x: auto;
       }