@licklist/design 0.78.5-dev.9 → 0.78.5-dev.91

package/rollup.config.js

@@ -7,6 +7,7 @@ import autoExternal from 'rollup-plugin-auto-external'
 import purge from 'rollup-plugin-delete'
 import json from '@rollup/plugin-json'
 import { swc } from 'rollup-plugin-swc3'
+import postcss from 'rollup-plugin-postcss'
 
 export default [
   {
@@ -28,11 +29,21 @@ export default [
       json(),
       image(),
       svgr(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        use: ['sass'],
+        extract: false,
+        minimize: true,
+        inject(cssVariableName) {
+          return `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`
+        },
+      }),
 
       copy({
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
+          { src: './src/v2/styles/*', dest: './dist/v2/styles' },
           { src: './src/root.css', dest: './dist' },
         ],
       }),
@@ -42,7 +53,7 @@ export default [
         clean: true,
       }),
     ],
-    external: ['tslib', /node_modules/],
+    external: ['tslib', 'style-inject', /node_modules/],
   },
   {
     input: 'src/index.ts',
@@ -59,6 +70,15 @@ export default [
       json(),
       image(),
       svgr(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        use: ['sass'],
+        extract: false,
+        minimize: true,
+        inject(cssVariableName) {
+          return `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`
+        },
+      }),
 
       swc({
         jsc: {
@@ -90,6 +110,6 @@ export default [
         isModule: true,
       }),
     ],
-    external: ['tslib', /node_modules/],
+    external: ['tslib', 'style-inject', /node_modules/],
   },
 ]

package/src/CustomDatePicker/CustomDatePicker.tsx

@@ -0,0 +1,258 @@
+import { TextInput } from '@mantine/core'
+import { useEffect, useState } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+import { DateTime } from 'luxon'
+import { useTranslation } from 'react-i18next'
+
+type CustomDatePickerProps = {
+  name: string
+  error?: string
+  label?: string
+  showAge?: boolean
+  required?: boolean
+}
+
+export function CustomDatePicker({
+  name, 
+  error, 
+  showAge = true,
+  required = true 
+}: CustomDatePickerProps) {
+  const { t } = useTranslation()
+  const { control, setValue, watch, getValues, trigger, formState } = useFormContext()
+  const [age, setAge] = useState<number | null>(null)
+  const [localError, setLocalError] = useState<string | null>(null)
+  
+  // Get current field values
+  const day = watch(`${name}_day`) || ''
+  const month = watch(`${name}_month`) || ''
+  const year = watch(`${name}_year`) || ''
+  
+  // Initialize values from existing date
+  useEffect(() => {
+    const existingDate = getValues(name)
+    
+    if (existingDate instanceof Date && !day && !month && !year) {
+      const dateTime = DateTime.fromJSDate(existingDate)
+      if (dateTime.isValid) {
+        setValue(`${name}_day`, dateTime.day.toString().padStart(2, '0'))
+        setValue(`${name}_month`, dateTime.month.toString().padStart(2, '0'))
+        setValue(`${name}_year`, dateTime.year.toString())
+      }
+    }
+  }, [name, setValue, getValues, day, month, year])
+  
+  // Check for empty fields after submit attempt
+  useEffect(() => {
+    if (formState.isSubmitted && required) {
+      const hasEmptyFields = !day || !month || !year
+      
+      if (hasEmptyFields) {
+        setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
+        // Set the main field to null to trigger form validation
+        setValue(name, null, { shouldValidate: true })
+      } else {
+        setLocalError(null)
+      }
+    }
+  }, [formState.isSubmitted, day, month, year, required, name, setValue, t])
+  
+  // Calculate age and validate date when all fields are filled
+  useEffect(() => {
+    if (day && month && year) {
+      try {
+        // Create a date object
+        const dateObj = DateTime.fromObject({ 
+          day: parseInt(day, 10), 
+          month: parseInt(month, 10), 
+          year: parseInt(year, 10) 
+        })
+        
+        // Only proceed if date is valid
+        if (dateObj.isValid) {
+          // Set the main field value
+          setValue(name, dateObj.toJSDate(), { shouldValidate: true })
+          setLocalError(null)
+          
+          // Calculate age
+          if (showAge) {
+            const now = DateTime.now()
+            const diff = now.diff(dateObj, 'years')
+            setAge(Math.floor(diff.years))
+          }
+        } else {
+          setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
+          setValue(name, null, { shouldValidate: true })
+          setAge(null)
+        }
+      } catch (err) {
+        // If any parsing fails, just reset the age display
+        setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
+        setValue(name, null, { shouldValidate: true })
+        setAge(null)
+      }
+    } else if (formState.isSubmitted && required) {
+      // If form was submitted and fields are required but not all filled
+      setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
+      setValue(name, null, { shouldValidate: true })
+      setAge(null)
+    } else {
+      // Reset if not all fields are filled but not submitted yet
+      setValue(name, null, { shouldValidate: false })
+      setAge(null)
+    }
+  }, [day, month, year, name, setValue, showAge, formState.isSubmitted, required, t])
+
+  // After user completes all fields, validate the form
+  useEffect(() => {
+    if (day && month && year) {
+      trigger(name)
+    }
+  }, [day, month, year, name, trigger])
+
+  // Display either the form error or our local error
+  const displayError = error || localError
+
+  return (
+    <div className="tw-w-full">
+      <div className="tw-flex tw-flex-col">
+        <div className="tw-mb-2 tw-flex tw-items-center tw-justify-between">
+          <label className="tw-font-semibold">
+            {t('App:dateOfBirth')}
+            {required && <span className="tw-ml-1 tw-text-red-500"></span>}
+          </label>
+          {age !== null && (
+            <span className="tw-text-sm tw-text-gray-600">
+              {t('App:Age')}: {age}
+            </span>
+          )}
+        </div>
+        
+        <div className="tw-flex tw-flex-row tw-gap-4">
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Day')}</label>
+            <Controller
+              control={control}
+              name={`${name}_day`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="DD"
+                  maxLength={2}
+                  error={!!displayError}
+                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
+                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate and format on blur
+                    let value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      if (num < 1) value = '01'
+                      else if (num > 31) value = '31'
+                      else value = num.toString().padStart(2, '0')
+                    }
+                    field.onChange(value)
+                  }}
+                />
+              )}
+            />
+          </div>
+          
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Month')}</label>
+            <Controller
+              control={control}
+              name={`${name}_month`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="MM"
+                  maxLength={2}
+                  error={!!displayError}
+                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
+                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate and format on blur
+                    let value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      if (num < 1) value = '01'
+                      else if (num > 12) value = '12'
+                      else value = num.toString().padStart(2, '0')
+                    }
+                    field.onChange(value)
+                  }}
+                />
+              )}
+            />
+          </div>
+          
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Year')}</label>
+            <Controller
+              control={control}
+              name={`${name}_year`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="YYYY"
+                  maxLength={4}
+                  error={!!displayError}
+                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
+                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate on blur
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      const currentYear = new Date().getFullYear()
+                      if (num > currentYear) {
+                        field.onChange(currentYear.toString())
+                      } else if (num < 1900) {
+                        field.onChange('1900')
+                      }
+                    }
+                  }}
+                />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      
+      {/* Hidden field to store the actual date value */}
+      <Controller
+        control={control}
+        name={name}
+        defaultValue={null}
+        rules={{
+          validate: value => {
+            if (required && !value) {
+              return t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') })
+            }
+            return true
+          }
+        }}
+        render={() => <input type="hidden" />}
+      />
+    </div>
+  )
+}

package/src/Maintenance/Maintenance.scss

@@ -0,0 +1,253 @@
+
+.figmas-admin-sidebar {
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-right: 1px solid var(--borders-main-border-primary, #E8E9EF);    
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    height: 100%;
+    transition: all 0.3s ease;
+
+    &--expanded {
+        width: 268px;
+
+        @media (max-width: 768px) {
+            display: none !important;
+        }
+    }
+
+    &--collapsed {
+        width: 72px;
+
+        @media (max-width: 768px) {
+            display: none !important;
+        }
+    }
+
+    @media (max-width: 768px) {
+        display: none !important;
+    }
+
+    &__top {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    &__links {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-start;
+        padding: 0 8px;
+        width: 100%;
+    }
+
+    &__section-label {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 20px 8px 0;
+        width: 100%;
+    }
+
+    &__label-text {
+        font-family: var(--font-family-sans);
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 0;
+        text-transform: none !important; // Override any global uppercase rules
+    }
+
+    &__link-item {
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+        &__link {
+            box-sizing: border-box;
+            display: flex;
+            flex: 1 0 0;
+            gap: 8px;
+            align-items: center;
+            min-height: 0;
+            min-width: 0;
+            padding: 8px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+            outline: none;
+
+    }
+
+
+}
+
+.back-to-company {
+    display: flex;
+    padding: var(--padding-md, 8px);
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+}
+
+.skeleton-item {
+    margin: 8px;
+    border-radius: 11px
+}
+.venue-skeleton-items {
+    display: flex;
+    width: 129px;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.venue-name {
+    display: flex;
+    padding: var(--padding-sm, 4px) var(--padding-md, 8px);
+    border-radius: var(--padding-md, 8px);
+    background: var(--surfaces-main-background-tertiary, #E8E9EF);
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    opacity: var(--opacity-80, 0.8);
+    color: var(--labels-main-label-secondary, #626A90);
+    font-family: var(--font-family-sans);
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
+    margin-left: 8px;
+
+}
+
+.maintenance-page-content {
+    display: flex;
+    width: 700px;
+    flex-direction: column;
+    align-items: flex-start;
+    padding:120px;
+    
+    @media (max-width: 768px) {
+        padding:30px;
+        width: 100%;
+    }
+}
+
+.maintenance-page-title {
+    align-self: stretch;
+    color: var(--labels-main-label-primary, #121E52);
+    font-family: var(--font-family-sans);
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 36px;
+
+    @media (max-width: 768px) {
+        font-size: 26px;
+    }
+}
+
+.maintenance-page-subheading {
+    color: var(--labels-main-label-primary, #121E52);
+    font-family: var(--font-family-sans);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+
+    @media (max-width: 768px) {
+        font-size: 18px;
+    }
+}
+
+.maintenance-page-body {
+    color: var(--labels-main-label-primary, #121E52);
+    font-family: var(--font-family-sans);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+
+    @media (max-width: 768px) {
+        font-size: 18px;
+    }
+}
+
+
+.maintenance-page-footer-logo{
+    padding-top: 24px;
+}
+
+.controls-button {
+    display: flex;
+    height: 44px;
+    padding: var(--padding-md, 8px) var(--padding-reg, 16px);
+    border-radius: var(--radius-md, 4px);
+    background: linear-gradient(180deg, var(--fills-main-fill-white, rgba(255, 255, 255, 0.20)) 0%, var(--purples-purple-500, rgba(98, 0, 238, 0.20)) 5.77%, var(--purples-purple-700, rgba(70, 0, 169, 0.20)) 95.19%, var(--purples-purple-900, rgba(41, 0, 100, 0.20)) 100%), linear-gradient(180deg, var(--purples-purple-50, rgba(239, 230, 253, 0.30)) 0%, var(--purples-purple-900, rgba(41, 0, 100, 0.30)) 100%), var(--fills-main-fill-action, #6200EE);
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--font-family-sans);
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 18px;
+    color: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-color:#F8F8FA ;
+    margin-top: 10px;
+}
+
+.back-button{
+    display: flex;
+    height: 44px;
+    padding: var(--padding-md, 8px) var(--padding-reg, 16px);
+    border-radius: var(--radius-md, 4px);
+    background: linear-gradient(180deg, var(--fills-main-fill-white, rgba(255, 255, 255, 0.20)) 0%, var(--purples-purple-500, rgba(98, 0, 238, 0.20)) 5.77%, var(--purples-purple-700, rgba(70, 0, 169, 0.20)) 95.19%, var(--purples-purple-900, rgba(41, 0, 100, 0.20)) 100%), linear-gradient(180deg, var(--purples-purple-50, rgba(239, 230, 253, 0.30)) 0%, var(--purples-purple-900, rgba(41, 0, 100, 0.30)) 100%), var(--fills-main-fill-action, #6200EE);
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    gap: 8px;
+    border-color: none;
+    color: var(--labels-main-label-white, #FFF);
+    font-family: var(--font-family-sans);
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 18px; /* 120% */
+    
+}                                                                   
+
+.venue-skeleton-item {
+    width: 87px;
+    height: 15px;
+    border-radius: 11px;
+    background: var(--surfaces-main-background-secondary-hover, #E8E9EF);
+    margin-left: 8px;
+}
+
+.venue-skeleton-contaier {
+    margin-top: 30px;
+}
+
+.mobile-logo {
+    display: none;
+    
+    @media (max-width: 768px) {
+        display: block;
+        padding: 10px;
+        background: var(--surfaces-main-background-secondary, #F8F8FA);
+    }
+}

package/src/Maintenance/MaintenancePage.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Button } from "../v2/components/Button";
+
+interface MaintenancePageProps {
+  svg: React.ReactNode;
+  title: string;
+  subheading: string;
+  body?: string;
+  buttonLabel?: string;
+  onButtonClick?: () => void;
+}
+
+export const MaintenancePage: React.FC<MaintenancePageProps> = ({
+  svg,
+  title,
+  subheading,
+  body,
+  buttonLabel,
+  onButtonClick,
+}) => {
+  return (
+    <div>
+      <div className="mobile-logo">
+        <svg xmlns="http://www.w3.org/2000/svg" width="124" height="32" viewBox="0 0 124 32" fill="none">
+          <path d="M9.52321 6.23162C11.6312 4.06995 12.6151 3.51115 13.7979 3.14351C14.9807 2.77588 16.1903 2.77588 17.3731 3.14351C18.5559 3.51115 19.5398 4.06995 21.6478 6.23162L25.0943 9.76587C27.2023 11.9275 27.7473 12.9365 28.1058 14.1494C28.4643 15.3623 28.4643 16.6028 28.1058 17.8157C27.7473 19.0286 27.2023 20.0375 25.0943 22.1992L21.6478 25.7335C19.5398 27.8951 18.556 28.4539 17.3731 28.8216C16.1903 29.1892 14.9807 29.1892 13.7979 28.8216C12.6151 28.4539 11.6312 27.8951 9.52321 25.7335L6.07672 22.1992C3.96872 20.0375 3.4238 19.0286 3.06529 17.8157C2.70679 16.6028 2.70679 15.3623 3.06529 14.1494C3.4238 12.9365 3.96872 11.9275 6.07672 9.76587L9.52321 6.23162ZM11.4177 8.07385L7.92219 11.6583C6.27888 13.3435 5.82902 14.0256 5.56297 14.9257C5.35408 15.6325 5.35408 16.3326 5.56297 17.0394C5.82636 17.9305 6.2699 18.608 7.87325 20.2565L11.4177 23.8912C13.0253 25.5354 13.6859 25.9902 14.555 26.2603C15.2442 26.4745 15.9269 26.4745 16.6161 26.2603C17.4939 25.9875 18.1591 25.5262 19.8024 23.841L23.2489 20.3068C24.8922 18.6216 25.342 17.9395 25.6081 17.0394C25.817 16.3326 25.817 15.6325 25.6081 14.9257C25.342 14.0256 24.8922 13.3435 23.2489 11.6583L19.8024 8.12408C18.1591 6.43893 17.4939 5.97761 16.6161 5.70479C15.9269 5.49057 15.2442 5.49057 14.555 5.70479C13.6859 5.97488 13.0253 6.42972 11.4177 8.07385ZM20.0103 14.7102C20.711 13.9916 21.8471 13.9916 22.5478 14.7102C23.2486 15.4287 23.2486 16.5937 22.5478 17.3123L16.8961 23.108C16.1954 23.8265 15.0593 23.8265 14.3586 23.108L13.5334 22.2618C13.3792 22.1036 13.3393 22.0298 13.3131 21.941C13.2868 21.8523 13.2868 21.7615 13.3131 21.6728C13.3393 21.584 13.3792 21.5102 13.5334 21.352L20.0103 14.7102ZM10.575 17.927C10.7437 17.7539 10.9728 17.6569 11.2114 17.6575L14.5124 17.6653C14.6926 17.6657 14.8383 17.8159 14.8379 18.0006C14.8377 18.0874 14.8047 18.1706 14.7458 18.2329L14.5717 18.4168L12.5131 20.509C12.3218 20.7035 12.0131 20.7028 11.8226 20.5074L10.575 19.228C10.2246 18.8687 10.2246 18.2862 10.575 17.927Z" fill="#D2D5E3" />
+          <path d="M51.535 11.5924C53.1724 11.5924 54.4499 12.0267 55.3675 12.8952C56.285 13.7637 56.7438 14.9579 56.7438 16.4778V18.7577C56.7438 20.35 56.2815 21.6057 55.3569 22.5249C54.4323 23.4441 53.1583 23.9037 51.535 23.9037C49.9117 23.9037 48.6377 23.4694 47.7131 22.6009C46.7885 21.7324 46.3262 20.5382 46.3262 19.0183V16.7384C46.3262 15.1461 46.7885 13.8904 47.7131 12.9712C48.6377 12.052 49.9117 11.5924 51.535 11.5924ZM63.1171 11.5924C64.7546 11.5924 66.0321 12.0267 66.9496 12.8952C67.8672 13.7637 68.3259 14.9579 68.3259 16.4778V18.7577C68.3259 20.35 67.8636 21.6057 66.939 22.5249C66.0144 23.4441 64.7405 23.9037 63.1171 23.9037C61.4938 23.9037 60.2198 23.4694 59.2952 22.6009C58.3706 21.7324 57.9083 20.5382 57.9083 19.0183V16.7384C57.9083 15.1461 58.3706 13.8904 59.2952 12.9712C60.2198 12.052 61.4938 11.5924 63.1171 11.5924ZM86.0062 11.5924C87.5166 11.5924 88.7235 12.0448 89.6269 12.9495C90.5303 13.8542 90.982 15.1461 90.982 16.8252V17.8458C90.982 18.1932 90.922 18.4175 90.8021 18.5189C90.6821 18.6202 90.4386 18.6709 90.0716 18.6709H84.164V18.7577C84.164 19.6118 84.2981 20.2306 84.5663 20.6142C84.8345 20.9978 85.3498 21.1896 86.112 21.1896C86.479 21.1896 86.7861 21.1389 87.0331 21.0376C87.2801 20.9363 87.4813 20.7336 87.6366 20.4296C87.7071 20.2849 87.7954 20.1763 87.9012 20.1039C88.0071 20.0315 88.1941 19.9954 88.4623 19.9954H90.1139C90.3962 19.9954 90.5868 20.0496 90.6856 20.1582C90.7844 20.2668 90.8338 20.4369 90.8338 20.6685C90.8338 20.9869 90.7597 21.2945 90.6115 21.5913C90.4633 21.888 90.2974 22.145 90.1139 22.3621C89.6622 22.8977 89.0658 23.2885 88.3247 23.5346C87.5836 23.7807 86.7967 23.9037 85.9638 23.9037C84.3264 23.9037 83.063 23.4803 82.1737 22.6335C81.2844 21.7867 80.8397 20.5237 80.8397 18.8446V16.7818C80.8397 15.1461 81.295 13.8723 82.2054 12.9603C83.1159 12.0484 84.3828 11.5924 86.0062 11.5924ZM101.548 8.14001C101.915 8.14001 102.158 8.1943 102.278 8.30286C102.398 8.41143 102.458 8.63218 102.458 8.96511V18.9966C102.458 20.5165 101.989 21.7143 101.05 22.5901C100.112 23.4658 98.8235 23.9037 97.186 23.9037C95.5768 23.9037 94.3169 23.4658 93.4065 22.5901C92.496 21.7143 92.0407 20.4948 92.0407 18.9314V16.5647C92.0407 15.0303 92.436 13.818 93.2265 12.9277C94.017 12.0375 95.0968 11.5924 96.4661 11.5924C97.6377 11.5924 98.5129 11.8891 99.0917 12.4826V8.96511C99.0917 8.63218 99.1516 8.41143 99.2716 8.30286C99.3916 8.1943 99.6351 8.14001 100.002 8.14001H101.548ZM115.569 8.7303C115.936 8.7303 116.179 8.78458 116.299 8.89315C116.419 9.00171 116.479 9.22246 116.479 9.5554V11.9221H118.025C118.35 11.9221 118.569 11.9764 118.681 12.085C118.794 12.1935 118.851 12.3998 118.851 12.7038V13.7894C118.851 14.1224 118.794 14.3468 118.681 14.4626C118.569 14.5784 118.35 14.6363 118.025 14.6363H116.479V19.196C116.479 19.7171 116.564 20.0935 116.733 20.3251C116.903 20.5567 117.185 20.6725 117.58 20.6725H117.94C118.293 20.6725 118.526 20.7268 118.639 20.8353C118.752 20.9439 118.809 21.1647 118.809 21.4976V22.8221C118.809 23.1405 118.752 23.3541 118.639 23.4626C118.526 23.5712 118.286 23.6255 117.919 23.6255H116.882C115.527 23.6255 114.56 23.3215 113.981 22.7135C113.402 22.1056 113.113 21.0995 113.113 19.6954V9.5554C113.113 9.22246 113.173 9.00171 113.293 8.89315C113.413 8.78458 113.656 8.7303 114.023 8.7303H115.569ZM40.0375 8.14001C43.2701 8.14001 44.8864 9.4428 44.8864 12.0484V12.3306C44.8864 13.0978 44.7064 13.7746 44.3464 14.3608C43.9865 14.9471 43.5101 15.3415 42.9172 15.5442C43.623 15.7179 44.1912 16.1087 44.6217 16.7167C45.0522 17.3246 45.2675 18.0339 45.2675 18.8446V19.192C45.2675 20.7119 44.8229 21.8265 43.9335 22.5358C43.0442 23.2451 41.6397 23.5997 39.7199 23.5997H35.3158C34.9487 23.5997 34.7052 23.5454 34.5853 23.4369C34.4653 23.3283 34.4053 23.1076 34.4053 22.7746V8.96511C34.4053 8.63218 34.4653 8.41143 34.5853 8.30286C34.7052 8.1943 34.9487 8.14001 35.3158 8.14001H40.0375ZM72.3066 8.14001C72.6736 8.14001 72.9171 8.1943 73.0371 8.30286C73.1571 8.41143 73.2171 8.63218 73.2171 8.96511V16.2607L76.372 12.5043C76.612 12.2148 76.7814 12.0411 76.8802 11.9832C76.979 11.9253 77.1413 11.8964 77.3672 11.8964H79.5058C79.8869 11.8964 80.0775 12.0556 80.0775 12.3741C80.0775 12.5333 79.9998 12.6925 79.8445 12.8518L76.7955 16.2824L80.3527 22.6444C80.4656 22.847 80.5221 23.0135 80.5221 23.1438C80.5221 23.4477 80.3104 23.5997 79.8869 23.5997H77.8118C77.5578 23.5997 77.3637 23.5563 77.2296 23.4694C77.0955 23.3826 76.9649 23.2234 76.8378 22.9918L74.5299 18.6709L73.2171 20.1473V22.7746C73.2171 23.1076 73.1571 23.3283 73.0371 23.4369C72.9171 23.5454 72.6736 23.5997 72.3066 23.5997H70.8456C70.4786 23.5997 70.2351 23.5454 70.1151 23.4369C69.9951 23.3283 69.9351 23.1076 69.9351 22.7746V8.96511C69.9351 8.63218 69.9951 8.41143 70.1151 8.30286C70.2351 8.1943 70.4786 8.14001 70.8456 8.14001H72.3066ZM110.187 14.2522C110.554 14.2522 110.797 14.3065 110.917 14.4151C111.037 14.5237 111.097 14.7444 111.097 15.0773L111.076 22.7529C111.076 23.0859 111.016 23.3066 110.896 23.4152C110.776 23.5237 110.533 23.578 110.166 23.578H108.62C108.253 23.578 108.009 23.5237 107.889 23.4152C107.769 23.3066 107.709 23.0859 107.709 22.7529L107.731 15.0773C107.731 14.7444 107.791 14.5237 107.911 14.4151C108.031 14.3065 108.274 14.2522 108.641 14.2522H110.187ZM51.5985 14.3065C50.9915 14.3065 50.5222 14.5056 50.1904 14.9036C49.8587 15.3017 49.6929 15.8771 49.6929 16.6298V18.8663C49.6929 20.4151 50.2857 21.1896 51.4715 21.1896C52.0926 21.1896 52.5655 20.9905 52.8901 20.5925C53.2148 20.1944 53.3771 19.619 53.3771 18.8663V16.6298C53.3771 15.081 52.7843 14.3065 51.5985 14.3065ZM63.1807 14.3065C62.5737 14.3065 62.1043 14.5056 61.7726 14.9036C61.4409 15.3017 61.275 15.8771 61.275 16.6298V18.8663C61.275 20.4151 61.8679 21.1896 63.0536 21.1896C63.6747 21.1896 64.1476 20.9905 64.4723 20.5925C64.7969 20.1944 64.9593 19.619 64.9593 18.8663V16.6298C64.9593 15.081 64.3664 14.3065 63.1807 14.3065ZM97.186 14.3065C96.0003 14.3065 95.4074 15.081 95.4074 16.6298V18.8663C95.4074 19.619 95.5662 20.1944 95.8838 20.5925C96.2014 20.9905 96.6637 21.1896 97.2707 21.1896C98.4847 21.1896 99.0917 20.4151 99.0917 18.8663V16.6298C99.0917 15.8771 98.9293 15.3017 98.6047 14.9036C98.28 14.5056 97.8071 14.3065 97.186 14.3065ZM40.0587 17.0858H37.8143V20.625H39.8258C41.0821 20.625 41.7103 20.0967 41.7103 19.04V18.6491C41.7103 18.1425 41.5691 17.7553 41.2868 17.4875C41.0045 17.2197 40.5951 17.0858 40.0587 17.0858ZM85.8791 14.2414C85.3709 14.2414 84.9686 14.4006 84.6722 14.7191C84.3758 15.0375 84.2134 15.5804 84.1852 16.3476H87.5942C87.5801 15.6238 87.4425 15.0918 87.1813 14.7516C86.9202 14.4115 86.4861 14.2414 85.8791 14.2414ZM39.5929 11.1147H37.8143V14.3282H39.7411C40.828 14.3282 41.3715 13.8288 41.3715 12.83V12.4826C41.3715 11.5707 40.7786 11.1147 39.5929 11.1147ZM109.693 8.7303C110.172 8.7303 110.346 8.78233 110.521 8.88003C110.696 8.97774 110.834 9.12111 110.928 9.3038C111.021 9.48649 111.071 9.66769 111.071 10.1674V10.9844C111.071 11.4841 111.021 11.6653 110.928 11.848C110.834 12.0307 110.696 12.1741 110.521 12.2718C110.346 12.3695 110.172 12.4215 109.693 12.4215H108.91C108.431 12.4215 108.257 12.3695 108.082 12.2718C107.906 12.1741 107.769 12.0307 107.675 11.848C107.582 11.6653 107.532 11.4841 107.532 10.9844V10.1674C107.532 9.66769 107.582 9.48649 107.675 9.3038C107.769 9.12111 107.906 8.97774 108.082 8.88003C108.257 8.78233 108.431 8.7303 108.91 8.7303H109.693Z" fill="#D2D5E3" />
+        </svg>
+      </div>
+      <div className="maintenance-page-content">
+          {svg}
+          <h2 className="maintenance-page-title">{title}</h2>
+          <h6 className="maintenance-page-subheading">{subheading}</h6>
+          <h6 className="maintenance-page-body">{body}</h6>
+
+          {buttonLabel && (
+            <Button
+              variant="primary"
+              onClick={onButtonClick}
+            >
+              {buttonLabel}
+            </Button>
+          )}  
+
+          <div className="maintenance-page-footer-logo">
+              <svg xmlns="http://www.w3.org/2000/svg" width="155" height="40" viewBox="0 0 155 40" fill="none">
+                  <path d="M11.9041 7.78943C14.5391 5.08734 15.7689 4.38884 17.2475 3.9293C18.726 3.46976 20.238 3.46976 21.7165 3.9293C23.195 4.38884 24.4249 5.08734 27.0599 7.78943L31.368 12.2072C34.003 14.9093 34.6841 16.1705 35.1323 17.6867C35.5804 19.2028 35.5804 20.7534 35.1323 22.2695C34.6841 23.7857 34.003 25.0468 31.368 27.7489L27.0599 32.1667C24.4249 34.8688 23.195 35.5673 21.7165 36.0269C20.238 36.4864 18.726 36.4864 17.2475 36.0269C15.769 35.5673 14.5391 34.8688 11.9041 32.1667L7.59596 27.7489C4.96096 25.0468 4.27981 23.7857 3.83168 22.2695C3.38355 20.7534 3.38355 19.2028 3.83168 17.6867C4.27981 16.1705 4.96096 14.9093 7.59596 12.2072L11.9041 7.78943ZM14.2721 10.0922L9.9028 14.5728C7.84866 16.6792 7.28634 17.5319 6.95378 18.6571C6.69266 19.5405 6.69266 20.4157 6.95377 21.2991C7.28301 22.413 7.83744 23.2598 9.84162 25.3205L14.2722 29.8639C16.2817 31.9191 17.1075 32.4877 18.1937 32.8253C19.0552 33.0931 19.9087 33.0931 20.7702 32.8253C21.8674 32.4843 22.6989 31.9076 24.753 29.8012L29.0612 25.3834C31.1153 23.2769 31.6776 22.4243 32.0102 21.2991C32.2713 20.4157 32.2713 19.5405 32.0102 18.6571C31.6776 17.5319 31.1153 16.6792 29.0612 14.5728L24.753 10.155C22.6989 8.04856 21.8674 7.47192 20.7702 7.13089C19.9087 6.86312 19.0552 6.86312 18.1938 7.13089C17.1075 7.46851 16.2817 8.03706 14.2721 10.0922ZM25.013 18.3876C25.8889 17.4894 27.309 17.4894 28.1849 18.3876C29.0608 19.2858 29.0608 20.7421 28.1849 21.6403L21.1202 28.8849C20.2443 29.7831 18.8242 29.783 17.9483 28.8849L16.9168 27.8271C16.724 27.6294 16.6742 27.5371 16.6414 27.4262C16.6086 27.3152 16.6086 27.2018 16.6414 27.0909C16.6742 26.9799 16.724 26.8876 16.9168 26.6899L25.013 18.3876ZM13.2188 22.4086C13.4297 22.1923 13.716 22.0711 14.0144 22.0718L18.1406 22.0816C18.3658 22.0821 18.548 22.2697 18.5474 22.5007C18.5472 22.6091 18.5059 22.7132 18.4323 22.791L18.2147 23.0209L15.6414 25.6361C15.4023 25.8792 15.0164 25.8784 14.7783 25.6342L13.2188 24.0349C12.7809 23.5858 12.7809 22.8577 13.2188 22.4086Z" fill="url(#paint0_linear_891_2724)" />
+                  <path d="M64.4187 14.4905C66.4655 14.4905 68.0624 15.0333 69.2093 16.1189C70.3563 17.2046 70.9297 18.6974 70.9297 20.5973V23.4471C70.9297 25.4375 70.3518 27.0071 69.1961 28.1561C68.0404 29.3051 66.4479 29.8796 64.4187 29.8796C62.3896 29.8796 60.7971 29.3368 59.6414 28.2511C58.4856 27.1655 57.9077 25.6727 57.9077 23.7728V20.923C57.9077 18.9326 58.4856 17.3629 59.6414 16.2139C60.7971 15.065 62.3896 14.4905 64.4187 14.4905ZM78.8964 14.4905C80.9432 14.4905 82.5401 15.0333 83.687 16.1189C84.8339 17.2046 85.4074 18.6974 85.4074 20.5973V23.4471C85.4074 25.4375 84.8295 27.0071 83.6738 28.1561C82.518 29.3051 80.9256 29.8796 78.8964 29.8796C76.8672 29.8796 75.2748 29.3368 74.119 28.2511C72.9633 27.1655 72.3854 25.6727 72.3854 23.7728V20.923C72.3854 18.9326 72.9633 17.3629 74.119 16.2139C75.2748 15.065 76.8672 14.4905 78.8964 14.4905ZM107.508 14.4905C109.396 14.4905 110.904 15.0559 112.034 16.1868C113.163 17.3177 113.728 18.9326 113.728 21.0315V22.3072C113.728 22.7414 113.653 23.0219 113.503 23.1486C113.353 23.2752 113.048 23.3385 112.589 23.3385H105.205V23.4471C105.205 24.5147 105.373 25.2882 105.708 25.7677C106.043 26.2472 106.687 26.4869 107.64 26.4869C108.099 26.4869 108.483 26.4236 108.791 26.2969C109.1 26.1703 109.352 25.917 109.546 25.537C109.634 25.356 109.744 25.2203 109.877 25.1299C110.009 25.0394 110.243 24.9942 110.578 24.9942H112.642C112.995 24.9942 113.233 25.062 113.357 25.1977C113.481 25.3334 113.542 25.546 113.542 25.8355C113.542 26.2336 113.45 26.6181 113.264 26.9891C113.079 27.36 112.872 27.6812 112.642 27.9526C112.078 28.6221 111.332 29.1106 110.406 29.4182C109.48 29.7258 108.496 29.8796 107.455 29.8796C105.408 29.8796 103.829 29.3503 102.717 28.2918C101.605 27.2333 101.05 25.6546 101.05 23.5557V20.9772C101.05 18.9326 101.619 17.3403 102.757 16.2004C103.895 15.0604 105.479 14.4905 107.508 14.4905ZM126.935 10.175C127.394 10.175 127.698 10.2428 127.848 10.3785C127.998 10.5143 128.073 10.7902 128.073 11.2064V23.7457C128.073 25.6456 127.486 27.1429 126.313 28.2376C125.139 29.3323 123.529 29.8796 121.482 29.8796C119.471 29.8796 117.896 29.3323 116.758 28.2376C115.62 27.1429 115.051 25.6184 115.051 23.6642V20.7058C115.051 18.7878 115.545 17.2724 116.533 16.1597C117.521 15.0469 118.871 14.4905 120.583 14.4905C122.047 14.4905 123.141 14.8614 123.865 15.6033V11.2064C123.865 10.7902 123.94 10.5143 124.09 10.3785C124.24 10.2428 124.544 10.175 125.003 10.175H126.935ZM144.461 10.9128C144.92 10.9128 145.224 10.9807 145.374 11.1164C145.524 11.2521 145.599 11.528 145.599 11.9442V14.9026H147.531C147.937 14.9026 148.211 14.9705 148.352 15.1062C148.493 15.2419 148.564 15.4997 148.564 15.8797V17.2368C148.564 17.6529 148.493 17.9334 148.352 18.0782C148.211 18.2229 147.937 18.2953 147.531 18.2953H145.599V23.995C145.599 24.6464 145.705 25.1168 145.917 25.4063C146.129 25.6958 146.481 25.8406 146.976 25.8406H147.425C147.867 25.8406 148.158 25.9084 148.299 26.0441C148.44 26.1799 148.511 26.4558 148.511 26.872V28.5276C148.511 28.9257 148.44 29.1925 148.299 29.3282C148.158 29.464 147.858 29.5318 147.399 29.5318H146.102C144.408 29.5318 143.2 29.1518 142.476 28.3919C141.753 27.6319 141.391 26.3744 141.391 24.6192V11.9442C141.391 11.528 141.466 11.2521 141.616 11.1164C141.766 10.9807 142.07 10.9128 142.529 10.9128H144.461ZM50.0469 10.175C54.0876 10.175 56.108 11.8035 56.108 15.0604V15.4133C56.108 16.3723 55.883 17.2182 55.433 17.951C54.9831 18.6838 54.3876 19.1769 53.6465 19.4302C54.5287 19.6473 55.239 20.1359 55.7771 20.8958C56.3153 21.6558 56.5844 22.5424 56.5844 23.5557V23.9899C56.5844 25.8898 56.0286 27.2831 54.9169 28.1697C53.8053 29.0563 52.0496 29.4996 49.6499 29.4996H44.1447C43.6859 29.4996 43.3815 29.4318 43.2316 29.2961C43.0816 29.1604 43.0066 28.8844 43.0066 28.4683V11.2064C43.0066 10.7902 43.0816 10.5143 43.2316 10.3785C43.3815 10.2428 43.6859 10.175 44.1447 10.175H50.0469ZM90.3833 10.175C90.842 10.175 91.1464 10.2428 91.2964 10.3785C91.4464 10.5143 91.5214 10.7902 91.5214 11.2064V20.3259L95.465 15.6304C95.765 15.2685 95.9767 15.0514 96.1002 14.979C96.2238 14.9066 96.4267 14.8704 96.709 14.8704H99.3822C99.8586 14.8704 100.097 15.0695 100.097 15.4676C100.097 15.6666 99.9998 15.8656 99.8057 16.0647L95.9944 20.353L100.441 28.3054C100.582 28.5587 100.653 28.7668 100.653 28.9297C100.653 29.3096 100.388 29.4996 99.8586 29.4996H97.2648C96.9472 29.4996 96.7046 29.4453 96.537 29.3368C96.3693 29.2282 96.2061 29.0292 96.0473 28.7397L93.1624 23.3385L91.5214 25.1842V28.4683C91.5214 28.8844 91.4464 29.1604 91.2964 29.2961C91.1464 29.4318 90.842 29.4996 90.3833 29.4996H88.557C88.0983 29.4996 87.7939 29.4318 87.6439 29.2961C87.4939 29.1604 87.4189 28.8844 87.4189 28.4683V11.2064C87.4189 10.7902 87.4939 10.5143 87.6439 10.3785C87.7939 10.2428 88.0983 10.175 88.557 10.175H90.3833ZM137.733 17.8153C138.192 17.8153 138.497 17.8831 138.647 18.0188C138.797 18.1545 138.872 18.4305 138.872 18.8466L138.845 28.4411C138.845 28.8573 138.77 29.1332 138.62 29.2689C138.47 29.4046 138.166 29.4725 137.707 29.4725H135.775C135.316 29.4725 135.012 29.4046 134.862 29.2689C134.712 29.1332 134.637 28.8573 134.637 28.4411L134.663 18.8466C134.663 18.4305 134.738 18.1545 134.888 18.0188C135.038 17.8831 135.343 17.8153 135.801 17.8153H137.733ZM64.4981 17.8831C63.7394 17.8831 63.1527 18.1319 62.7381 18.6295C62.3234 19.1271 62.1161 19.8464 62.1161 20.7873V23.5828C62.1161 25.5189 62.8572 26.4869 64.3393 26.4869C65.1157 26.4869 65.7068 26.2381 66.1126 25.7406C66.5185 25.243 66.7214 24.5237 66.7214 23.5828V20.7873C66.7214 18.8512 65.9803 17.8831 64.4981 17.8831ZM78.9758 17.8831C78.2171 17.8831 77.6304 18.1319 77.2157 18.6295C76.8011 19.1271 76.5938 19.8464 76.5938 20.7873V23.5828C76.5938 25.5189 77.3348 26.4869 78.817 26.4869C79.5934 26.4869 80.1845 26.2381 80.5903 25.7406C80.9962 25.243 81.1991 24.5237 81.1991 23.5828V20.7873C81.1991 18.8512 80.458 17.8831 78.9758 17.8831ZM121.482 17.8831C120 17.8831 119.259 18.8512 119.259 20.7873V23.5828C119.259 24.5237 119.458 25.243 119.855 25.7406C120.252 26.2381 120.83 26.4869 121.588 26.4869C123.106 26.4869 123.865 25.5189 123.865 23.5828V20.7873C123.865 19.8464 123.662 19.1271 123.256 18.6295C122.85 18.1319 122.259 17.8831 121.482 17.8831ZM50.0734 21.3572H47.2678V25.7813H49.7823C51.3527 25.7813 52.1379 25.1208 52.1379 23.7999V23.3114C52.1379 22.6781 51.9614 22.1941 51.6085 21.8593C51.2556 21.5246 50.7439 21.3572 50.0734 21.3572ZM107.349 17.8017C106.714 17.8017 106.211 18.0007 105.84 18.3988C105.47 18.7969 105.267 19.4754 105.231 20.4344H109.493C109.475 19.5297 109.303 18.8647 108.977 18.4395C108.65 18.0143 108.108 17.8017 107.349 17.8017ZM49.4911 13.8934H47.2678V17.9103H49.6764C51.035 17.9103 51.7144 17.286 51.7144 16.0375V15.6033C51.7144 14.4633 50.9733 13.8934 49.4911 13.8934ZM137.116 10.9128C137.715 10.9128 137.933 10.9779 138.152 11.1C138.371 11.2221 138.542 11.4014 138.66 11.6297C138.777 11.8581 138.839 12.0846 138.839 12.7092V13.7305C138.839 14.3551 138.777 14.5816 138.66 14.81C138.542 15.0384 138.371 15.2176 138.152 15.3397C137.933 15.4618 137.715 15.5269 137.116 15.5269H136.137C135.538 15.5269 135.321 15.4618 135.102 15.3397C134.883 15.2176 134.711 15.0384 134.594 14.81C134.477 14.5816 134.415 14.3551 134.415 13.7305V12.7092C134.415 12.0846 134.477 11.8581 134.594 11.6297C134.711 11.4014 134.883 11.2221 135.102 11.1C135.321 10.9779 135.538 10.9128 136.137 10.9128H137.116Z" fill="#121E52" />
+                  <defs>
+                      <linearGradient id="paint0_linear_891_2724" x1="33.2146" y1="15.2" x2="7.01524" y2="26.972" gradientUnits="userSpaceOnUse">
+                          <stop stop-color="#6200EE" />
+                          <stop offset="0.5" stop-color="#5D5BF4" />
+                          <stop offset="1" stop-color="#0E8CE2" />
+                      </linearGradient>
+                  </defs>
+              </svg>
+          </div>
+      </div>
+    </div>
+  );
+};