goobs-frontend 0.8.5 → 0.8.7

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.5",
+  "version": "0.8.7",
+  "type": "module",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
   "main": "./src/index.ts",
@@ -18,35 +19,35 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/cache": "^11.13.1",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.4",
-    "@mui/material": "^6.1.4",
-    "@types/lodash": "^4.17.12",
+    "@emotion/cache": "^11.13.5",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@types/lodash": "^4.17.13",
     "highlight.js": "^11.10.0",
-    "jotai": "^2.10.1",
+    "jotai": "^2.10.3",
     "lodash": "^4.17.21",
-    "next": "14.2.15",
+    "next": "15.0.3",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.15",
-    "@types/node": "^22.7.7",
-    "@types/react": "18.3.11",
+    "@next/eslint-plugin-next": "^15.0.3",
+    "@types/node": "^22.10.0",
+    "@types/react": "18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "@typescript-eslint/parser": "^8.10.0",
-    "eslint": "^9.13.0",
-    "eslint-config-next": "^14.2.15",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "files": [
     "src"

package/src/components/Button/index.tsx

@@ -19,7 +19,6 @@ export interface CustomButtonProps extends ButtonProps {
 
 const CustomButton: React.FC<CustomButtonProps> = React.memo(
   props => {
-    console.log('[trace-button] CustomButton: Rendering component', { props })
     const {
       text,
       variant,
@@ -40,7 +39,6 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
     const handleButtonClick = (
       event: React.MouseEvent<HTMLButtonElement>
     ): void => {
-      console.log('[trace-button] CustomButton: Button clicked')
       event.preventDefault()
       onClick?.(event)
     }
@@ -63,13 +61,6 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
         })
       : null
 
-    console.log('[trace-button] CustomButton: Rendering button', {
-      variant,
-      style: buttonStyle,
-      disableButton,
-      isDisabled,
-    })
-
     const buttonContent = (
       <>
         {iconlocation === 'above' && IconComponent}
@@ -140,15 +131,9 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
       prevProps.iconlocation === nextProps.iconlocation &&
       prevProps.fontlocation === nextProps.fontlocation
 
-    console.log('[trace-button] CustomButton: Props comparison', {
-      propsAreEqual,
-      prevProps: Object.keys(prevProps),
-      nextProps: Object.keys(nextProps),
-    })
     return propsAreEqual
   }
 )
 
 CustomButton.displayName = 'CustomButton'
-console.log('[trace-button] CustomButton: Component defined')
 export default CustomButton

package/src/components/Content/Structure/phoneNumber/usePhoneNumber.tsx

@@ -1,11 +1,10 @@
 'use client'
 import React from 'react'
-import PhoneNumberField, {
-  PhoneNumberFieldProps,
-} from './../../../PhoneNumberField'
+import PhoneNumberField from '../../../PhoneNumberField'
 import { columnconfig, cellconfig } from '../../../Grid'
+import { TextFieldProps } from '@mui/material'
 
-export interface ExtendedPhoneNumberFieldProps extends PhoneNumberFieldProps {
+export type ExtendedPhoneNumberFieldProps = TextFieldProps & {
   columnconfig?: Partial<columnconfig>
   cellconfig?: cellconfig
 }

package/src/components/Content/Structure/textfield/useTextField.tsx

@@ -1,15 +1,14 @@
+'use client'
 import React from 'react'
-import TextField, {
-  CustomTextFieldProps,
-} from '../../../../components/TextField'
+import TextField from '../../../../components/TextField'
 import { columnconfig, cellconfig } from '../../../Grid'
+import { TextFieldProps } from '@mui/material'
 
 type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
   component?: columnconfig['component']
 }
 
-export interface ExtendedTextFieldProps
-  extends Omit<CustomTextFieldProps, 'columnconfig'> {
+export type ExtendedTextFieldProps = TextFieldProps & {
   columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
@@ -24,15 +23,6 @@ const useTextField = (grid: {
     index: number
   ): columnconfig => {
     const {
-      name,
-      label,
-      placeholder,
-      value,
-      onChange,
-      onFocus,
-      onBlur,
-      error,
-      InputProps,
       columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
@@ -54,21 +44,7 @@ const useTextField = (grid: {
       cellconfig: {
         ...cellconfig,
       },
-      component: (
-        <TextField
-          key={`textfield-${index}`}
-          name={name}
-          label={label}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          error={error}
-          InputProps={InputProps}
-          {...restProps}
-        />
-      ),
+      component: <TextField key={`textfield-${index}`} {...restProps} />,
     }
 
     return mergedConfig

package/src/components/Dropdown/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Select,
   MenuItem,
@@ -8,9 +8,12 @@ import {
   InputLabel,
   SelectProps,
   FormHelperText,
-  Typography,
+  Box,
+  CircularProgress,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import { black, white } from '../../styles/palette'
+import Typography from '../Typography'
 
 export interface SimpleDropdownOption {
   value: string
@@ -40,37 +43,62 @@ export interface DropdownProps extends Omit<SelectProps, 'onChange'> {
   onFocus?: SelectProps['onFocus']
 }
 
+const StyledBox = styled(Box)(() => ({
+  position: 'relative',
+  width: '100%',
+  height: '50px',
+  marginTop: '5px',
+}))
+
 const StyledFormControl = styled(FormControl)<{
   backgroundcolor?: string
   outlinecolor?: string
-}>(({ theme, backgroundcolor, outlinecolor }) => ({
-  width: '100%',
+}>(({ outlinecolor }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   '& .MuiOutlinedInput-root': {
-    backgroundColor: backgroundcolor || theme.palette.background.paper,
+    backgroundColor: white.main,
+    height: '45px',
     '& fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
+      borderColor: outlinecolor || black.main,
     },
     '&:hover fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
+      borderColor: outlinecolor || black.main,
     },
     '&.Mui-focused fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
+      borderColor: outlinecolor || black.main,
     },
   },
 }))
 
 const StyledInputLabel = styled(InputLabel)<{ shrunkfontcolor?: string }>(
-  ({ theme, shrunkfontcolor }) => ({
+  () => ({
+    color: black.main,
     '&.Mui-focused': {
-      color: shrunkfontcolor || theme.palette.primary.main,
+      color: black.main,
+    },
+    '&.MuiInputLabel-shrink': {
+      transform: 'translate(13px, -7px) scale(0.75)',
+      color: black.main,
     },
   })
 )
 
-const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+const StyledMenuItem = styled(MenuItem)(() => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
+  backgroundColor: white.main,
+}))
+
+const LoadingContainer = styled(Box)(() => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '50px',
 }))
 
 const capitalizeFirstLetter = (string: string) => {
@@ -94,23 +122,33 @@ const Dropdown: React.FC<DropdownProps> = ({
   onFocus,
   ...rest
 }) => {
-  const [selectedValue, setSelectedValue] = useState(() => {
+  const [selectedValue, setSelectedValue] = useState<string>('')
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
     const defaultOption = options.find(option => option.value === defaultValue)
-    return defaultOption ? defaultOption.value : ''
-  })
+    setSelectedValue(defaultOption ? defaultOption.value : '')
+    setIsLoading(false)
+  }, [defaultValue, options])
 
   const handleChange: SelectProps['onChange'] = (event, child) => {
     const newValue = event.target.value as string
     setSelectedValue(newValue)
-    onChange?.(event, child)
+    if (onChange) {
+      onChange(event, child)
+    }
   }
 
   const handleBlur: SelectProps['onBlur'] = event => {
-    onBlur?.(event)
+    if (onBlur) {
+      onBlur(event)
+    }
   }
 
   const handleFocus: SelectProps['onFocus'] = event => {
-    onFocus?.(event)
+    if (onFocus) {
+      onFocus(event)
+    }
   }
 
   const renderMenuItem = (option: DropdownOption) => {
@@ -118,48 +156,107 @@ const Dropdown: React.FC<DropdownProps> = ({
     if (!('attribute1' in option)) {
       return (
         <MenuItem key={option.value} value={option.value}>
-          {label}
+          <Typography fontvariant="merriparagraph" text={label} />
         </MenuItem>
       )
     } else {
       return (
         <StyledMenuItem key={option.value} value={option.value}>
-          <Typography variant="body1">{label}</Typography>
-          <Typography variant="caption" color="textSecondary">
-            {option.attribute1}
-            {option.attribute2 && ` | ${option.attribute2}`}
-          </Typography>
+          <Typography fontvariant="merriparagraph" text={label} />
+          <Typography
+            fontvariant="merriparagraph"
+            text={`${option.attribute1}${option.attribute2 ? ` | ${option.attribute2}` : ''}`}
+            fontcolor="textSecondary"
+          />
         </StyledMenuItem>
       )
     }
   }
 
+  if (isLoading) {
+    return (
+      <LoadingContainer>
+        <CircularProgress size={24} />
+      </LoadingContainer>
+    )
+  }
+
   return (
-    <StyledFormControl
-      backgroundcolor={backgroundcolor}
-      outlinecolor={outlinecolor}
-      error={error}
-      required={required}
-    >
-      <StyledInputLabel id={`${name}-label`} shrunkfontcolor={shrunkfontcolor}>
-        {label}
-      </StyledInputLabel>
-      <Select
-        labelId={`${name}-label`}
-        value={selectedValue}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        label={label}
-        sx={{ color: fontcolor }}
-        name={name}
-        aria-labelledby={`${name}-label`}
-        {...rest}
+    <StyledBox>
+      <StyledFormControl
+        backgroundcolor={backgroundcolor}
+        outlinecolor={outlinecolor}
+        error={error}
+        required={required}
+        fullWidth
       >
-        {options.map(renderMenuItem)}
-      </Select>
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-    </StyledFormControl>
+        <StyledInputLabel
+          id={`${name}-label`}
+          shrunkfontcolor={shrunkfontcolor}
+        >
+          {label}
+        </StyledInputLabel>
+        <Select
+          labelId={`${name}-label`}
+          value={selectedValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          label={label}
+          sx={{
+            color: fontcolor || black.main,
+            height: '45px',
+            backgroundColor: white.main,
+            '& .MuiSelect-select': {
+              paddingTop: '10px',
+              paddingBottom: '10px',
+            },
+            '& .MuiSvgIcon-root': {
+              color: black.main,
+            },
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: black.main,
+            },
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: black.main,
+            },
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+              borderColor: black.main,
+            },
+            '& .MuiInputBase-input': {
+              color: black.main,
+            },
+            '& .MuiInputBase-input::placeholder': {
+              color: black.main,
+              opacity: 1,
+            },
+            '& .MuiPaper-root': {
+              backgroundColor: white.main,
+            },
+            '& .MuiMenu-list': {
+              backgroundColor: white.main,
+            },
+          }}
+          MenuProps={{
+            PaperProps: {
+              sx: {
+                backgroundColor: white.main,
+              },
+            },
+          }}
+          name={name}
+          aria-labelledby={`${name}-label`}
+          {...rest}
+        >
+          {options.map(renderMenuItem)}
+        </Select>
+        {helperText && (
+          <FormHelperText>
+            <Typography fontvariant="merriparagraph" text={helperText} />
+          </FormHelperText>
+        )}
+      </StyledFormControl>
+    </StyledBox>
   )
 }
 

package/src/components/Nav/HorizontalVariant/index.tsx

@@ -2,78 +2,43 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Tabs, Tab } from '@mui/material'
 import { NavProps, SubNav, View } from '../index'
+import { usePathname } from 'next/navigation'
 
-/**
- * Represents the possible alignment options for the horizontal navigation.
- */
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
 
-/**
- * Represents the structure of an active tab value.
- */
 export interface ActiveTabValue {
-  /** The unique identifier of the active tab. */
-  tabId: string
+  tabId: string | false
 }
 
-/**
- * Props for the HorizontalVariant component.
- */
 export interface HorizontalVariantProps {
-  /** An array of navigation items, sub-navigation items, or views. */
   items: (NavProps | SubNav | View)[]
-  /** The height of the navigation bar. Defaults to '80px'. */
   height?: string
-  /** The alignment of the navigation items. Defaults to 'left'. */
   alignment?: Alignment
-  /** A unique name for this navigation component. Used for state management. */
   navname?: string
 }
 
-/**
- * HorizontalVariant component that renders a horizontal navigation bar.
- * It supports dynamic tab management, routing, and custom click handlers.
- *
- * @param {HorizontalVariantProps} props - The props for the HorizontalVariant component.
- * @returns {JSX.Element} The rendered HorizontalVariant component.
- */
 function HorizontalVariant({
   items,
   height = '80px',
   alignment = 'left',
   navname = '',
 }: HorizontalVariantProps) {
-  /**
-   * State to keep track of active tab values for different navigation components.
-   */
   const [activeTabValues, setActiveTabValues] = useState<
     Record<string, ActiveTabValue>
   >({})
+  const pathname = usePathname()
 
-  /**
-   * Effect hook to initialize the active tab values when the component mounts.
-   */
   useEffect(() => {
-    if (!activeTabValues[navname]) {
-      const firstTab = items.find(item => 'orientation' in item) as
-        | NavProps
-        | undefined
-      if (firstTab && firstTab.title) {
-        setActiveTabValues(prev => ({
-          ...prev,
-          [navname]: { tabId: firstTab.title as string },
-        }))
-      }
-    }
-  }, [items, navname, activeTabValues])
+    const currentTab = items.find(
+      item => 'orientation' in item && item.route === pathname
+    ) as NavProps | undefined
+
+    setActiveTabValues(prev => ({
+      ...prev,
+      [navname]: { tabId: currentTab?.title || false },
+    }))
+  }, [items, navname, pathname])
 
-  /**
-   * Handles tab change events.
-   * Updates the active tab values in the state.
-   *
-   * @param {React.SyntheticEvent} event - The event object.
-   * @param {string} newValue - The new value of the selected tab.
-   */
   const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
     setActiveTabValues(prev => ({
       ...prev,
@@ -81,12 +46,6 @@ function HorizontalVariant({
     }))
   }
 
-  /**
-   * Handles click events on individual tabs.
-   * Supports different trigger types: route, onClick, and routeonhorizontal.
-   *
-   * @param {NavProps} tab - The tab object that was clicked.
-   */
   const handleTabClick = (tab: NavProps) => {
     if (tab.trigger === 'route') {
       if (tab.route) {
@@ -116,7 +75,7 @@ function HorizontalVariant({
       }}
     >
       <Tabs
-        value={activeTabValues[navname]?.tabId || ''}
+        value={activeTabValues[navname]?.tabId || false}
         onChange={handleTabChange}
         aria-label="nav tabs"
         sx={{
@@ -136,8 +95,8 @@ function HorizontalVariant({
             return (
               <Tab
                 key={tab.title}
-                value={tab.title}
-                label={tab.title}
+                value={tab.title || ''}
+                label={tab.title || ''}
                 onClick={() => handleTabClick(tab)}
                 sx={{
                   minHeight: 0,

package/src/components/PhoneNumberField/index.tsx

@@ -1,45 +1,6 @@
 'use client'
-import React, { useState, useCallback } from 'react'
-import { TextField, TextFieldProps } from '@mui/material'
-import { styled } from '@mui/material/styles'
-
-export interface PhoneNumberFieldProps
-  extends Omit<TextFieldProps, 'onChange'> {
-  initialValue?: string
-  onChange?: () => void
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-  label?: string
-}
-
-const StyledTextField = styled(TextField)<{
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
-  '& .MuiOutlinedInput-root': {
-    backgroundColor: backgroundcolor || theme.palette.background.paper,
-    '& fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&:hover fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputLabel-root': {
-    color: fontcolor || theme.palette.text.primary,
-    '&.Mui-focused': {
-      color: fontcolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputBase-input': {
-    color: fontcolor || theme.palette.text.primary,
-  },
-}))
+import React, { useCallback, useMemo, useState } from 'react'
+import { Box, TextField as MuiTextField, TextFieldProps } from '@mui/material'
 
 const formatPhoneNumber = (value: string): string => {
   const digits = value.replace(/\D/g, '')
@@ -57,47 +18,110 @@ const formatPhoneNumber = (value: string): string => {
   return formattedNumber.trim()
 }
 
-const PhoneNumberField: React.FC<PhoneNumberFieldProps> = ({
-  initialValue = '',
-  onChange,
-  backgroundcolor,
-  outlinecolor,
-  fontcolor,
-  label = 'Phone Number',
-  ...rest
-}) => {
+const PhoneNumberField: React.FC<TextFieldProps> = React.memo(props => {
+  const {
+    name,
+    label = 'Phone Number',
+    placeholder,
+    onChange,
+    onFocus,
+    onBlur,
+    value = '',
+    error,
+    ...restProps
+  } = props
+
   const [phoneNumber, setPhoneNumber] = useState(
-    formatPhoneNumber(initialValue)
+    formatPhoneNumber(value as string)
   )
 
-  const handlePhoneNumberChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
       const input = e.target.value
       let strippedInput = input.replace(/^\+1\s?/, '').replace(/\D/g, '')
       strippedInput = strippedInput.slice(0, 10)
       const formattedValue =
         strippedInput.length > 0 ? formatPhoneNumber(strippedInput) : '+1 '
       setPhoneNumber(formattedValue)
-      onChange?.()
+      if (onChange) {
+        onChange(e)
+      }
     },
     [onChange]
   )
 
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(e)
+      }
+    },
+    [onFocus]
+  )
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(e)
+      }
+    },
+    [onBlur]
+  )
+
+  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }, [])
+
+  const inputProps = useMemo(
+    () => ({
+      style: {
+        height: '40px',
+        padding: '8px 14px',
+      },
+    }),
+    []
+  )
+
+  const InputProps = useMemo(
+    () => ({
+      style: {
+        height: '45px',
+      },
+    }),
+    []
+  )
+
   return (
-    <StyledTextField
-      label={label}
-      value={phoneNumber}
-      onChange={handlePhoneNumberChange}
-      backgroundcolor={backgroundcolor}
-      outlinecolor={outlinecolor}
-      fontcolor={fontcolor}
-      fullWidth
-      inputProps={{
-        maxLength: 16,
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: '100%',
+        marginTop: '5px',
+        height: '70px',
       }}
-      {...rest}
-    />
+      onClick={handleClick}
+    >
+      <MuiTextField
+        name={name}
+        label={label}
+        placeholder={placeholder}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        value={phoneNumber}
+        error={error}
+        fullWidth
+        variant="outlined"
+        inputProps={inputProps}
+        InputProps={InputProps}
+        {...restProps}
+      />
+    </Box>
   )
-}
+})
+
+PhoneNumberField.displayName = 'PhoneNumberField'
 
 export default PhoneNumberField

package/src/components/PricingTable/index.tsx

@@ -1,6 +1,6 @@
 'use client'
-import React, { useState, useCallback, useMemo } from 'react'
-import { Box, Paper, SelectChangeEvent } from '@mui/material'
+import React, { useState, useCallback, useMemo, useEffect } from 'react'
+import { Box, Paper, SelectChangeEvent, CircularProgress } from '@mui/material'
 import InfoIcon from '@mui/icons-material/Info'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import { Typography } from '../Typography'
@@ -72,17 +72,37 @@ export interface PricingProps {
 const PricingTable: React.FC<PricingProps> = props => {
   const router = useRouter()
   const [selectedPackageIndex, setSelectedPackageIndex] = useState(0)
+  const [selectedPackage, setSelectedPackage] = useState('')
+  const [isLoading, setIsLoading] = useState(true)
 
   const config = useMemo(() => {
     return { ...defaultConfig, ...props }
   }, [props])
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false)
+    }, 100) // Simulating a 100ms loading time
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  useEffect(() => {
+    if (
+      config.packagecolumns?.packagenames &&
+      config.packagecolumns.packagenames.length > 0
+    ) {
+      setSelectedPackage(config.packagecolumns.packagenames[0])
+    }
+  }, [config.packagecolumns?.packagenames])
+
   const handlePackageChange = useCallback(
     (event: SelectChangeEvent<unknown>) => {
       const newValue = event.target.value as string
       const newIndex =
         config.packagecolumns?.packagenames?.indexOf(newValue) ?? 0
       setSelectedPackageIndex(newIndex)
+      setSelectedPackage(newValue)
       console.log('Package selection changed to:', newValue)
     },
     [config.packagecolumns?.packagenames]
@@ -116,7 +136,7 @@ const PricingTable: React.FC<PricingProps> = props => {
               value: name,
               label: name,
             }))}
-            defaultValue={config.packagecolumns.packagenames?.[0] || ''}
+            defaultValue={selectedPackage}
             backgroundcolor={semiTransparentBlack.main}
             outlinecolor={black.main}
             fontcolor={black.main}
@@ -276,10 +296,46 @@ const PricingTable: React.FC<PricingProps> = props => {
     }
 
     return { headerColumnConfigs, featureColumnConfigs }
-  }, [config, selectedPackageIndex, router, handlePackageChange])
+  }, [
+    config,
+    selectedPackageIndex,
+    selectedPackage,
+    router,
+    handlePackageChange,
+  ])
 
   const { headerColumnConfigs, featureColumnConfigs } = renderColumnConfigs()
 
+  if (isLoading) {
+    return (
+      <CustomGrid
+        gridconfig={{
+          gridwidth: '100%',
+          alignment: 'center',
+        }}
+        columnconfig={[
+          {
+            row: 1,
+            column: 1,
+            alignment: 'center',
+            component: (
+              <Box
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                height="350px"
+                width="100%"
+                overflow="auto"
+              >
+                <CircularProgress size={240} thickness={2} />
+              </Box>
+            ),
+          },
+        ]}
+      />
+    )
+  }
+
   return (
     <Paper
       elevation={1}

package/src/components/TextField/index.tsx

@@ -1,11 +1,8 @@
+'use client'
 import React, { useCallback, useMemo } from 'react'
 import { Box, TextField as MuiTextField, TextFieldProps } from '@mui/material'
 
-export interface CustomTextFieldProps extends Omit<TextFieldProps, 'name'> {
-  name: string
-}
-
-const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
+const TextField: React.FC<TextFieldProps> = React.memo(props => {
   const {
     name,
     label,
@@ -16,7 +13,6 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
     value,
     error,
     sx,
-    InputProps,
     ...restProps
   } = props
 
@@ -64,31 +60,27 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
     []
   )
 
-  const mergedInputProps = useMemo(
+  const slotProps = useMemo(
     () => ({
-      ...InputProps,
-      style: {
-        ...inputStyle,
-        ...InputProps?.style,
+      input: {
+        style: inputStyle,
       },
-    }),
-    [InputProps, inputStyle]
-  )
-
-  const labelStyle = useMemo(
-    () => ({
-      '&.MuiInputLabel-shrink': {
-        top: '0px',
-        left: '0px',
-      },
-      '&:not(.MuiInputLabel-shrink)': {
-        transform: 'scale(1)',
-        transformOrigin: 'top left',
-        top: '9px',
-        left: '12px',
+      inputLabel: {
+        sx: {
+          '&.MuiInputLabel-shrink': {
+            top: '0px',
+            left: '0px',
+          },
+          '&:not(.MuiInputLabel-shrink)': {
+            transform: 'scale(1)',
+            transformOrigin: 'top left',
+            top: '9px',
+            left: '12px',
+          },
+        },
       },
     }),
-    []
+    [inputStyle]
   )
 
   return (
@@ -99,7 +91,7 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
         justifyContent: 'center',
         width: '100%',
         marginTop: '5px',
-        height: '62px',
+        height: '70px',
         ...sx,
       }}
       onClick={handleClick}
@@ -113,10 +105,7 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
         onBlur={handleBlur}
         value={value}
         error={error}
-        InputProps={mergedInputProps}
-        InputLabelProps={{
-          sx: labelStyle,
-        }}
+        slotProps={slotProps}
         fullWidth
         variant="outlined"
         {...restProps}

package/src/index.ts

@@ -71,7 +71,6 @@ import { ExtendedImageProps } from './components/Content/Structure/image/useImag
 import { ExtendedConfirmationCodeInputsProps } from './components/Content/Structure/confirmationinput/useConfirmationInput'
 import { ExtendedRadioGroupProps } from './components/Content/Structure/radiogroup/useRadioGroup'
 import { ExtendedPhoneNumberFieldProps } from './components/Content/Structure/phoneNumber/usePhoneNumber'
-import { CustomTextFieldProps } from './components/TextField'
 // Colors
 import {
   moss,
@@ -268,7 +267,6 @@ export type { CustomToolbarComponentProps }
 export type { TransferListComponentProps }
 export type { StyledTooltipComponentProps }
 export type { DropdownOption }
-export type { CustomTextFieldProps }
 
 // New type exports
 export type { DateFieldProps }