@licklist/design 0.78.12 → 0.78.15

package/bitbucket-pipelines.yml

@@ -62,7 +62,7 @@ pipelines:
           name: Publish to NPM
           script:
             - printf "//`node -p \"require('url').parse(process.env.NPM_REGISTRY_URL || 'https://registry.npmjs.org').host\"`/:_authToken=${NPM_TOKEN}\nregistry=${NPM_REGISTRY_URL:-https://registry.npmjs.org}\n" >> ~/.npmrc
-            - pipe: atlassian/npm-publish:0.2.0
+            - pipe: atlassian/npm-publish:1.1.1
               variables:
                 NPM_TOKEN: $NPM_TOKEN
 

package/dist/CustomDatePicker/CustomDatePicker.d.ts

@@ -0,0 +1,10 @@
+type CustomDatePickerProps = {
+    name: string;
+    error?: string;
+    label?: string;
+    showAge?: boolean;
+    required?: boolean;
+};
+export declare function CustomDatePicker({ name, error, showAge, required }: CustomDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CustomDatePicker.d.ts.map

package/dist/CustomDatePicker/CustomDatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDatePicker.d.ts","sourceRoot":"","sources":["../../src/CustomDatePicker/CustomDatePicker.tsx"],"names":[],"mappings":"AAMA,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,OAAc,EACd,QAAe,EAChB,EAAE,qBAAqB,2CA8OvB"}

package/dist/customRadioButton/RadioButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface RadioButtonProps {
+    name: string;
+    value: string;
+    checked: boolean;
+    onChange: (value: string) => void;
+    label?: string;
+}
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;
+//# sourceMappingURL=RadioButton.d.ts.map

package/dist/customRadioButton/RadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/customRadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/customRadioButton/RadioButton.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+
+var RadioButton = function(param) {
+    var name = param.name, value = param.value, checked = param.checked, onChange = param.onChange, label = param.label;
+    // Generate a stable id so label could be connected if needed
+    var id = "".concat(name, "-").concat(value);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "tw-flex tw-items-center tw-space-x-3",
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "tw-relative tw-cursor-pointer",
+                style: {
+                    position: 'relative',
+                    cursor: 'pointer'
+                },
+                onClick: function() {
+                    return onChange(value);
+                },
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        id: id,
+                        type: "radio",
+                        name: name,
+                        value: value,
+                        checked: checked,
+                        onChange: function() {
+                            return onChange(value);
+                        },
+                        className: "tw-sr-only",
+                        style: {
+                            position: 'absolute',
+                            opacity: 0,
+                            pointerEvents: 'none',
+                            width: 0,
+                            height: 0
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "tw-w-[47px] tw-h-[47px] tw-border-[3px] tw-border-black tw-rounded-full tw-bg-white tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 hover:tw-shadow-sm",
+                        style: {
+                            width: 52,
+                            height: 52,
+                            borderWidth: 3,
+                            borderStyle: 'solid',
+                            borderColor: '#000',
+                            borderRadius: 9999,
+                            background: '#fff',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'all 200ms'
+                        },
+                        children: checked && /*#__PURE__*/ jsx("div", {
+                            className: "tw-w-[30px] tw-h-[30px] tw-bg-slate-900 tw-rounded-full",
+                            style: {
+                                width: 30,
+                                height: 30,
+                                background: '#0f172a',
+                                borderRadius: 9999
+                            }
+                        })
+                    })
+                ]
+            }),
+            label && /*#__PURE__*/ jsx("label", {
+                htmlFor: id,
+                className: "tw-cursor-pointer tw-text-gray-700 tw-select-none tw-flex tw-items-center tw-leading-none",
+                style: {
+                    cursor: 'pointer',
+                    color: '#374151',
+                    userSelect: 'none',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    lineHeight: 1,
+                    position: 'relative',
+                    top: 5
+                },
+                onClick: function() {
+                    return onChange(value);
+                },
+                children: label
+            })
+        ]
+    });
+};
+
+export { RadioButton as default };

package/dist/index.d.ts

@@ -43,4 +43,5 @@ export * from './availability-indicator';
 export * from './number-of-people-input';
 export * from './fullscreen-loader';
 export * from './pages';
+export { default as RadioButton } from './customRadioButton/RadioButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA"}

package/dist/index.js

@@ -205,6 +205,7 @@ export { useFullscreenLoader } from './fullscreen-loader/useFullscreenLoader.js'
 export { FullscreenLoaderContext } from './fullscreen-loader/context.js';
 export { PrivacyComponent } from './pages/PrivacyComponent.js';
 export { TermsComponent } from './pages/TermsComponent.js';
+export { default as RadioButton } from './customRadioButton/RadioButton.js';
 export { default as CountrySelect } from './static/CountrySelect.js';
 export { default as FormCard } from './static/FormCard.js';
 export { default as Image } from './static/Image.js';

package/dist/sales/guest-profile/profile/Profile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Profile.d.ts","sourceRoot":"","sources":["../../../../src/sales/guest-profile/profile/Profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAO5E,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CAGrB,CAAA;AAED,eAAO,MAAM,OAAO,aAAc,YAAY,4CAgD7C,CAAA"}
+{"version":3,"file":"Profile.d.ts","sourceRoot":"","sources":["../../../../src/sales/guest-profile/profile/Profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAO5E,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CAGrB,CAAA;AAED,eAAO,MAAM,OAAO,aAAc,YAAY,4CA6C7C,CAAA"}

package/dist/sales/guest-profile/profile/Profile.js

@@ -10,7 +10,8 @@ var Profile = function(param) {
     if (!user) {
         return null;
     }
-    var firstName = user.firstName, lastName = user.lastName, gender = user.userDetail.gender;
+    var firstName = user.firstName, lastName = user.lastName, userDetail = user.userDetail;
+    var gender = userDetail === null || userDetail === void 0 ? void 0 : userDetail.gender;
     return /*#__PURE__*/ jsx("div", {
         className: "profile",
         children: /*#__PURE__*/ jsxs("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.12",
+  "version": "0.78.15",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

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/customRadioButton/RadioButton.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+interface RadioButtonProps {
+  name: string;
+  value: string;
+  checked: boolean;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+const RadioButton: React.FC<RadioButtonProps> = ({
+                                                   name,
+                                                   value,
+                                                   checked,
+                                                   onChange,
+                                                   label
+                                                 }) => {
+  // Generate a stable id so label could be connected if needed
+  const id = `${name}-${value}`;
+
+  return (
+    <div
+      className="tw-flex tw-items-center tw-space-x-3"
+      style={{ display: 'flex', alignItems: 'center', gap: 12 }}
+    >
+      <div
+        className="tw-relative tw-cursor-pointer"
+        style={{ position: 'relative', cursor: 'pointer' }}
+        onClick={() => onChange(value)}
+      >
+        {/* Hidden native radio input for accessibility */}
+        <input
+          id={id}
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={() => onChange(value)}
+          className="tw-sr-only"
+          style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', width: 0, height: 0 }}
+        />
+
+        {/* Custom radio button circle */}
+        <div
+          className="tw-w-[47px] tw-h-[47px] tw-border-[3px] tw-border-black tw-rounded-full tw-bg-white tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 hover:tw-shadow-sm"
+          style={{
+            width: 52,
+            height: 52,
+            borderWidth: 3,
+            borderStyle: 'solid',
+            borderColor: '#000',
+            borderRadius: 9999,
+            background: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'all 200ms',
+          }}
+        >
+          {/* Inner filled circle when selected */}
+          {checked && (
+            <div
+              className="tw-w-[30px] tw-h-[30px] tw-bg-slate-900 tw-rounded-full"
+              style={{ width: 30, height: 30, background: '#0f172a', borderRadius: 9999 }}
+            />
+          )}
+        </div>
+      </div>
+
+      {label && (
+        <label
+          htmlFor={id}
+          className="tw-cursor-pointer tw-text-gray-700 tw-select-none tw-flex tw-items-center tw-leading-none"
+          style={{ cursor: 'pointer', color: '#374151', userSelect: 'none', display: 'inline-flex', alignItems: 'center', lineHeight: 1, position: 'relative', top: 5 }}
+          onClick={() => onChange(value)}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default RadioButton;

package/src/index.ts

@@ -43,3 +43,4 @@ export * from './availability-indicator'
 export * from './number-of-people-input'
 export * from './fullscreen-loader'
 export * from './pages'
+export { default as RadioButton } from './customRadioButton/RadioButton'

package/src/sales/guest-profile/profile/Profile.tsx

@@ -16,11 +16,8 @@ export const Profile = ({ user }: ProfileProps) => {
     return null
   }
 
-  const {
-    firstName,
-    lastName,
-    userDetail: { gender },
-  } = user
+  const { firstName, lastName, userDetail } = user
+  const gender = userDetail?.gender
 
   return (
     <div className='profile'>

package/dist/CustomAlertTypes/AlertBox.d.ts

@@ -1,22 +0,0 @@
-import { alertThemes } from "./alertThemes";
-export interface AlertConfig {
-    type: keyof typeof alertThemes;
-    title?: string;
-    subTitle?: string;
-    message?: string | string[];
-    description?: string;
-    actionText?: string;
-    secondaryActionText?: string;
-    onAction?: (() => void) | null;
-    onSecondaryAction?: (() => void) | null;
-    timeout?: number;
-    closable?: boolean;
-    titleColor?: string;
-    subTitleColor?: string;
-    showArrow?: boolean;
-    showSecondaryArrow?: boolean;
-    alignActionsRight?: boolean;
-    mount?: "container" | "global";
-}
-export declare function showAlert(config: AlertConfig): void;
-//# sourceMappingURL=AlertBox.d.ts.map

package/dist/CustomAlertTypes/AlertBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AlertBox.d.ts","sourceRoot":"","sources":["../../src/CustomAlertTypes/AlertBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,OAAO,WAAW,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CAChC;AAqDD,wBAAgB,SAAS,CAAC,MAAM,EAAE,WAAW,QAW5C"}

package/dist/CustomAlertTypes/AlertRender.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import { AlertConfig } from './AlertBox';
-export declare class AlertRenderer {
-    static createAlert(config: AlertConfig, onClose: () => void): React.DetailedReactHTMLElement<{
-        style: {
-            backgroundColor: string;
-            border: string;
-            borderRadius: string;
-            padding: string;
-            width: string;
-            maxWidth: string;
-            margin: string;
-            pointerEvents: "auto";
-            fontFamily: string;
-            position: "relative";
-            overflow: "hidden";
-            boxSizing: "border-box";
-        };
-    }, HTMLElement>;
-}
-//# sourceMappingURL=AlertRender.d.ts.map

package/dist/CustomAlertTypes/AlertRender.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AlertRender.d.ts","sourceRoot":"","sources":["../../src/CustomAlertTypes/AlertRender.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,qBAAa,aAAa;IACxB,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,IAAI;;;;;;;;;;;;;;;;CAoR5D"}

package/dist/CustomAlertTypes/alertThemes.d.ts

@@ -1,41 +0,0 @@
-import React from "react";
-export declare const ErrorIcon: () => React.ReactSVGElement;
-export declare const SuccessIcon: () => React.ReactSVGElement;
-export declare const InfoIcon: () => React.ReactSVGElement;
-export declare const WarningIcon: () => React.ReactSVGElement;
-export declare const commonStyle: {
-    fontFamily: string;
-    color: string;
-    borderRad: string;
-};
-export declare const alertThemes: {
-    error: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-    success: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-    warning: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-    info: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-};
-//# sourceMappingURL=alertThemes.d.ts.map

package/dist/CustomAlertTypes/alertThemes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertThemes.d.ts","sourceRoot":"","sources":["../../src/CustomAlertTypes/alertThemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,eAAO,MAAM,SAAS,6BAA0C,CAAC;AACjE,eAAO,MAAM,WAAW,6BAA4C,CAAC;AACrE,eAAO,MAAM,QAAQ,6BAAyC,CAAC;AAC/D,eAAO,MAAM,WAAW,6BAA4C,CAAC;AAErE,eAAO,MAAM,WAAW;;;;CAIvB,CAAA;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BvB,CAAC"}

package/dist/CustomAlertTypes/utils/textWrapperUtils.d.ts

@@ -1,8 +0,0 @@
-/**
- * Wraps text into multiple lines by word count limit.
- * @param text - The input string
- * @param limit - Max characters per line
- * @returns Wrapped text as a single string with newlines
- */
-export declare function wrapText(text: string, limit: number): string;
-//# sourceMappingURL=textWrapperUtils.d.ts.map

package/dist/CustomAlertTypes/utils/textWrapperUtils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"textWrapperUtils.d.ts","sourceRoot":"","sources":["../../../src/CustomAlertTypes/utils/textWrapperUtils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAmB5D"}