goobs-frontend 0.8.10 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "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",

package/src/components/Accordion/index.tsx

@@ -1,44 +1,83 @@
 'use client'
 
-import React from 'react'
+import React, { JSX } from 'react'
 import { styled } from '@mui/material/styles'
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'
 import MuiAccordionSummary, {
   AccordionSummaryProps,
 } from '@mui/material/AccordionSummary'
-import MuiAccordionDetails from '@mui/material/AccordionDetails'
+import MuiAccordionDetails, {
+  AccordionDetailsProps,
+} from '@mui/material/AccordionDetails'
 import { ExpandMore } from '@mui/icons-material'
 import { black } from '../../styles/palette'
 
-/**
- * Custom styled Accordion component.
- * Wraps MUI's Accordion with custom styling and disables gutters by default.
- */
-const Accordion = styled((props: AccordionProps) => (
-  <MuiAccordion disableGutters {...props} />
-))({})
-
-/**
- * Custom styled AccordionSummary component.
- * Wraps MUI's AccordionSummary with custom styling and a custom expand icon.
- */
-const AccordionSummary = styled((props: AccordionSummaryProps) => (
-  <MuiAccordionSummary
-    expandIcon={<ExpandMore sx={{ color: black.main }} />}
-    {...props}
-  />
-))({
+type CustomAccordionProps = Omit<AccordionProps, 'children'> & {
+  children: NonNullable<React.ReactNode>
+}
+
+type CustomAccordionSummaryProps = Omit<AccordionSummaryProps, 'children'> & {
+  children: NonNullable<React.ReactNode>
+}
+
+type CustomAccordionDetailsProps = Omit<AccordionDetailsProps, 'children'> & {
+  children: NonNullable<React.ReactNode>
+}
+
+const StyledAccordion = styled(MuiAccordion)({
+  '&.MuiAccordion-root': {
+    '&:before': {
+      display: 'none',
+    },
+  },
+})
+
+const StyledAccordionSummary = styled(MuiAccordionSummary)({
   fontSize: '20px',
   fontFamily: 'merriweather',
   fontWeight: 500,
 })
 
-/**
- * Custom styled AccordionDetails component.
- * Wraps MUI's AccordionDetails with custom padding based on the theme's spacing.
- */
-const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+const StyledAccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
   padding: theme.spacing(2),
 }))
 
+function Accordion({ children, ...props }: CustomAccordionProps): JSX.Element {
+  return (
+    <StyledAccordion disableGutters {...props}>
+      {children}
+    </StyledAccordion>
+  )
+}
+
+function AccordionSummary({
+  children,
+  ...props
+}: CustomAccordionSummaryProps): JSX.Element {
+  return (
+    <StyledAccordionSummary
+      expandIcon={<ExpandMore sx={{ color: black.main }} />}
+      {...props}
+    >
+      {children}
+    </StyledAccordionSummary>
+  )
+}
+
+function AccordionDetails({
+  children,
+  ...props
+}: CustomAccordionDetailsProps): JSX.Element {
+  return <StyledAccordionDetails {...props}>{children}</StyledAccordionDetails>
+}
+
+Accordion.displayName = 'Accordion'
+AccordionSummary.displayName = 'AccordionSummary'
+AccordionDetails.displayName = 'AccordionDetails'
+
 export { Accordion, AccordionSummary, AccordionDetails }
+export type {
+  CustomAccordionProps,
+  CustomAccordionSummaryProps,
+  CustomAccordionDetailsProps,
+}

package/src/components/Button/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { JSX } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import Typography from '../Typography'
 import { SvgIconProps } from '@mui/material/SvgIcon'
@@ -84,7 +84,7 @@ const ContentWrapper = styled(Box)<{
   gap: '8px',
 }))
 
-const CustomButton: React.FC<CustomButtonProps> = ({
+function CustomButton({
   text,
   variant = 'contained',
   fontvariant = 'merriparagraph',
@@ -101,7 +101,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   fontlocation = 'center',
   sx,
   ...restProps
-}) => {
+}: CustomButtonProps): JSX.Element {
   const handleButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
   ): void => {
@@ -159,5 +159,4 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   )
 }
 
-CustomButton.displayName = 'CustomButton'
 export default CustomButton

package/src/components/Card/index.tsx

@@ -1,4 +1,6 @@
-import React from 'react'
+'use client'
+
+import React, { JSX } from 'react'
 import { BoxProps } from '@mui/material'
 import { CustomStepperProps } from '../Stepper'
 import InventoryCard from './variants/inventory'
@@ -10,11 +12,7 @@ import DefaultCard from './variants/defaultconfig'
 import { columnconfig } from '../Grid'
 import { CustomButtonProps } from '../Button'
 
-/**
- * Props for the Card component.
- * Extends BoxProps from Material-UI and includes additional custom properties.
- */
-export interface CardProps extends BoxProps {
+type CardProps = Omit<BoxProps, 'children'> & {
   /** Title of the card */
   title?: string
   /** Whether to show an underline for the title */
@@ -124,11 +122,7 @@ export interface CardProps extends BoxProps {
   columnconfig?: columnconfig
 }
 
-/**
- * Card component that renders different card variants based on the provided props.
- * It supports various card types including default, inventory, pricing summary, product, and more.
- */
-const Card: React.FC<CardProps> = ({
+function Card({
   title,
   titleUnderline = true,
   body,
@@ -154,8 +148,7 @@ const Card: React.FC<CardProps> = ({
   productProps,
   productSummaryProps,
   ...rest
-}) => {
-  // Render the default card variant
+}: CardProps): JSX.Element | null {
   if (variant === 'default') {
     return (
       <DefaultCard
@@ -182,7 +175,6 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the inventory card variant
   if (variant === 'inventory') {
     return (
       <InventoryCard
@@ -196,7 +188,6 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the simple pricing summary card variant
   if (variant === 'pricingsummary') {
     return (
       <SimplePricingSummary
@@ -208,7 +199,6 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the detailed pricing summary card variant
   if (variant === 'detailedpricingsummary') {
     return (
       <DetailedPricingSummary
@@ -220,14 +210,12 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the product card variant
   if (variant === 'product') {
     return (
       <ProductCard width={width} height={height} {...productProps} {...rest} />
     )
   }
 
-  // Render the product summary card variant
   if (variant === 'productsummary') {
     return (
       <ProductSummaryCard
@@ -244,8 +232,10 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Return null if no matching variant is found
   return null
 }
 
+Card.displayName = 'Card'
+
 export default Card
+export type { CardProps }

package/src/components/Content/Structure/searchableDropdown/useSearchableDropdown.tsx

@@ -0,0 +1,65 @@
+'use client'
+import React from 'react'
+import SearchableDropdown, {
+  SearchableDropdownProps,
+} from './../../../SearchableDropdown'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedSearchableDropdownProps
+  extends SearchableDropdownProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+}
+
+const useSearchableDropdown = (grid: {
+  searchableDropdown?:
+    | ExtendedSearchableDropdownProps
+    | ExtendedSearchableDropdownProps[]
+}) => {
+  if (!grid.searchableDropdown) return null
+
+  const renderSearchableDropdown = (
+    searchableDropdownItem: ExtendedSearchableDropdownProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = searchableDropdownItem
+
+    if (
+      !itemColumnConfig ||
+      typeof itemColumnConfig !== 'object' ||
+      typeof itemColumnConfig.row !== 'number' ||
+      typeof itemColumnConfig.column !== 'number'
+    ) {
+      throw new Error(
+        'columnconfig must be an object with row and column as numbers'
+      )
+    }
+
+    const mergedConfig: columnconfig = {
+      ...(itemColumnConfig as columnconfig),
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <SearchableDropdown
+          key={`searchable-dropdown-${index}`}
+          {...restProps}
+        />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.searchableDropdown)) {
+    return grid.searchableDropdown.map(renderSearchableDropdown)
+  } else {
+    return [renderSearchableDropdown(grid.searchableDropdown, 0)]
+  }
+}
+
+export default useSearchableDropdown

package/src/components/Content/Structure/stepper/useStepper.tsx

@@ -1,18 +1,15 @@
+'use client'
+
 import React from 'react'
-import {
-  CustomStepper,
-  Step,
-  StepLabel,
-} from './../../../../components/Stepper'
+import { CustomStepper, CustomStepperProps } from '../../../Stepper'
 import { columnconfig, cellconfig } from '../../../Grid'
-import { CustomStepperProps as BaseCustomStepperProps } from './../../../../components/Stepper'
 
 type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
   component?: columnconfig['component']
 }
 
 export interface ExtendedStepperProps
-  extends Omit<BaseCustomStepperProps, 'columnconfig'> {
+  extends Omit<CustomStepperProps, 'columnconfig'> {
   cellconfig?: cellconfig
   columnconfig?: ExtendedColumnConfig
 }
@@ -50,13 +47,7 @@ const useStepper = (grid: {
         ...cellconfig,
       },
       component: (
-        <CustomStepper key={`stepper-${index}`} steps={steps} {...restProps}>
-          {steps.map(step => (
-            <Step key={step.label}>
-              <StepLabel>{step.label}</StepLabel>
-            </Step>
-          ))}
-        </CustomStepper>
+        <CustomStepper key={`stepper-${index}`} steps={steps} {...restProps} />
       ),
     }
     return mergedConfig

package/src/components/Content/index.tsx

@@ -66,6 +66,9 @@ import useCheckbox, {
 import useComplexEditor, {
   ExtendedComplexEditorProps,
 } from './Structure/complexeditor/useComplexEditor'
+import useSearchableDropdown, {
+  ExtendedSearchableDropdownProps,
+} from './Structure/searchableDropdown/useSearchableDropdown'
 
 /**
  * Props for the ContentSection component.
@@ -79,6 +82,9 @@ export interface ContentSectionProps {
     confirmationcodeinput?:
       | ExtendedConfirmationCodeInputsProps
       | ExtendedConfirmationCodeInputsProps[]
+    searchableDropdown?:
+      | ExtendedSearchableDropdownProps
+      | ExtendedSearchableDropdownProps[]
     complexeditor?: ExtendedComplexEditorProps | ExtendedComplexEditorProps[]
     typography?: TypographyProps | TypographyProps[]
     radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
@@ -143,6 +149,7 @@ const RenderContent: React.FC<
   addToColumnConfigs(useTransferList(props))
   addToColumnConfigs(useCard(props))
   addToColumnConfigs(useCodeCopy(props))
+  addToColumnConfigs(useSearchableDropdown(props))
   addToColumnConfigs(useTextField(props))
   addToColumnConfigs(useDateField(props))
   addToColumnConfigs(useCheckbox(props))

package/src/components/Grid/index.tsx

@@ -1,14 +1,14 @@
 'use client'
 
-import React from 'react'
+import React, { JSX } from 'react'
 import Grid2, { Grid2Props } from '@mui/material/Grid2'
 import { useMediaQuery, useTheme } from '@mui/material'
 
-export type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
-export type BorderProp = 'none' | 'solid'
-export type WrapProp = 'nowrap' | 'wrap'
+type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
+type BorderProp = 'none' | 'solid'
+type WrapProp = 'nowrap' | 'wrap'
 
-export interface columnconfig {
+type columnconfig = {
   row: number
   column: number
   gridname?: string
@@ -26,7 +26,7 @@ export interface columnconfig {
   computerwidth?: string
 }
 
-export interface gridconfig {
+type gridconfig = {
   gridname?: string
   alignment?: Alignment
   margintop?: number
@@ -37,13 +37,7 @@ export interface gridconfig {
   bordercolor?: string
 }
 
-export interface CustomGridProps extends Grid2Props {
-  gridconfig?: gridconfig
-  columnconfig?: columnconfig[]
-  cellconfig?: cellconfig
-}
-
-export interface cellconfig {
+type cellconfig = {
   border?: BorderProp
   minHeight?: string
   maxHeight?: string
@@ -57,12 +51,18 @@ export interface cellconfig {
   wrap?: WrapProp
 }
 
-const CustomGrid: React.FC<CustomGridProps> = ({
+type CustomGridProps = Omit<Grid2Props, 'children'> & {
+  gridconfig?: gridconfig
+  columnconfig?: columnconfig[]
+  cellconfig?: cellconfig
+}
+
+function CustomGrid({
   gridconfig,
   columnconfig,
   cellconfig,
   ...rest
-}) => {
+}: CustomGridProps): JSX.Element {
   const gridConfigValues = Array.isArray(gridconfig)
     ? gridconfig[0]
     : gridconfig
@@ -217,4 +217,7 @@ const CustomGrid: React.FC<CustomGridProps> = ({
   )
 }
 
+CustomGrid.displayName = 'CustomGrid'
+
 export default CustomGrid
+export type { CustomGridProps, columnconfig, gridconfig, cellconfig }

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

@@ -11,62 +11,56 @@ import {
   AccordionSummary,
   AccordionDetails,
   List,
-  SelectChangeEvent,
 } from '@mui/material'
-import Dropdown from '../../Dropdown'
-import Searchbar from '../../Searchbar'
+import SearchableDropdown from '../../SearchableDropdown'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { NavProps, SubNav, View } from '../index'
-import {
-  white,
-  black,
-  ocean,
-  semiTransparentWhite,
-} from '../../../styles/palette'
+import { white, ocean, semiTransparentWhite } from '../../../styles/palette'
 import { Typography } from './../../Typography'
 
 export interface VerticalVariantProps {
   items: (NavProps | SubNav | View)[]
-  showSearchbar: boolean
-  showDropdown: boolean
+  showSearchableNav: boolean
   showTitle: boolean
   showLine: boolean
   verticalNavTitle: string
-  dropdownLabel: string
-  searchbarLabel: string
+  searchableNavLabel: string
   anchor: 'left' | 'right'
   expandedNavs: string[]
   setExpandedNavs: React.Dispatch<React.SetStateAction<string[]>>
   expandedSubnavs: string[]
   setExpandedSubnavs: React.Dispatch<React.SetStateAction<string[]>>
   verticalNavWidth: string
+  backgroundcolor?: string
+  shrunkfontcolor?: string
+  unshrunkfontcolor?: string
 }
 
 function VerticalVariant({
   items,
-  showSearchbar,
-  showDropdown,
+  showSearchableNav,
   showTitle,
   showLine,
   verticalNavTitle,
-  dropdownLabel,
-  searchbarLabel,
+  searchableNavLabel,
   anchor,
   expandedNavs,
   setExpandedNavs,
   expandedSubnavs,
   setExpandedSubnavs,
   verticalNavWidth,
+  backgroundcolor,
+  shrunkfontcolor = white.main,
+  unshrunkfontcolor = white.main,
 }: VerticalVariantProps) {
   const router = useRouter()
   const [selectedNav, setSelectedNav] = useState<string | null>(null)
-  const [searchValue, setSearchValue] = useState('')
 
   const navOptions = items
     .filter((item): item is NavProps => 'title' in item && 'subnavs' in item)
-    .map(nav => ({ value: nav.title ?? '', label: nav.title ?? '' }))
+    .map(nav => ({ value: nav.title ?? '' }))
 
   const handleNavClick = useCallback(
     (nav: NavProps) => {
@@ -84,20 +78,12 @@ function VerticalVariant({
     [router]
   )
 
-  const handleDropdownChange = useCallback(
-    (event: SelectChangeEvent<unknown>) => {
-      const newValue = event.target.value as string
-      setSelectedNav(newValue)
-      console.log('Dropdown selection changed to:', newValue)
-    },
-    []
-  )
-
-  const handleSearchChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value
-      setSearchValue(newValue)
-      console.log('Search value changed to:', newValue)
+  // Adjusted handler to match the SearchableDropdown onChange signature
+  const handleSearchableNavChange = useCallback(
+    (newValue: { value: string } | null) => {
+      const newVal = newValue ? newValue.value : null
+      setSelectedNav(newVal)
+      console.log('SearchableNav selection changed to:', newVal)
     },
     []
   )
@@ -379,35 +365,29 @@ function VerticalVariant({
             </Link>
           </Box>
         )}
-        {(showDropdown || showSearchbar) && (
-          <Stack mt={2} spacing={1}>
-            {showDropdown && (
-              <Box mt="2px">
-                <Dropdown
-                  label={dropdownLabel}
-                  options={navOptions}
-                  backgroundcolor={white.main}
-                  outlinecolor="none"
-                  fontcolor={black.main}
-                  shrunkfontcolor={white.main}
-                  unshrunkfontcolor={black.main}
-                  shrunklabelposition="aboveNotch"
-                  onChange={handleDropdownChange}
-                />
-              </Box>
-            )}
-            {showSearchbar && (
-              <Searchbar
-                label={searchbarLabel}
-                backgroundcolor={semiTransparentWhite.main}
-                iconcolor={white.main}
+        {showSearchableNav && (
+          <Stack mt={0} spacing={0}>
+            <Box
+              sx={{
+                position: 'relative',
+                zIndex: theme => theme.zIndex.drawer + 1,
+                width: '100%',
+                minHeight: '40px',
+              }}
+            >
+              <SearchableDropdown
+                label={searchableNavLabel}
+                options={navOptions}
+                backgroundcolor={backgroundcolor || semiTransparentWhite.main}
                 outlinecolor="none"
                 fontcolor={white.main}
+                shrunkfontcolor={shrunkfontcolor}
+                unshrunkfontcolor={unshrunkfontcolor}
+                shrunklabelposition="aboveNotch"
+                onChange={handleSearchableNavChange}
                 placeholder="Search..."
-                value={searchValue}
-                onChange={handleSearchChange}
               />
-            )}
+            </Box>
           </Stack>
         )}
       </Box>

package/src/components/Nav/index.tsx

@@ -12,13 +12,11 @@ type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
  */
 export interface NavProps {
   items?: (NavProps | SubNav | View)[] // Array of navigation items
-  showSearchbar?: boolean // Flag to show/hide search bar
-  showDropdown?: boolean // Flag to show/hide dropdown
+  showSearchableNav?: boolean // Flag to show/hide searchable navigation
   showTitle?: boolean // Flag to show/hide title
   showLine?: boolean // Flag to show/hide divider line
   verticalNavTitle?: string // Title for vertical navigation
-  dropdownLabel?: string // Label for dropdown
-  searchbarLabel?: string // Label for search bar
+  searchableNavLabel?: string // Label for searchable navigation
   anchor?: 'left' | 'right' // Position of vertical navigation
   orientation?: 'vertical' | 'horizontal' // Orientation of navigation
   height?: string // Height of navigation (for horizontal)
@@ -31,6 +29,9 @@ export interface NavProps {
   hasleftborder?: string // Flag for left border
   hasrightborder?: string // Flag for right border
   trigger?: 'route' | 'onClick' | 'routeonhorizontal' // Trigger type for the item
+  backgroundcolor?: string
+  shrunkfontcolor?: string // Color of the label when shrunk
+  unshrunkfontcolor?: string // Color of the label when not shrunk
 }
 
 /**
@@ -61,23 +62,24 @@ export type View = {
  */
 function Nav({
   items = [],
-  showSearchbar = true,
-  showDropdown = true,
+  showSearchableNav = true, // Combined showSearchbar and showDropdown
   showTitle = true,
   showLine = true,
   verticalNavTitle = 'Navigation',
-  dropdownLabel = 'Select a nav',
-  searchbarLabel = 'Search your navs',
+  searchableNavLabel = 'Search or select a nav', // Combined label
   anchor = 'left',
   orientation,
   height = '80px',
   alignment = 'left',
   navname,
+  shrunkfontcolor = 'black',
+  unshrunkfontcolor = 'black',
+  backgroundcolor,
 }: NavProps): JSX.Element {
   // State for expanded navigation items
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
   const [expandedSubnavs, setExpandedSubnavs] = useState<string[]>([])
-  const [verticalNavWidth] = useState<number>(250) // Default width, no longer using goobs-cache
+  const [verticalNavWidth] = useState<number>(250) // Default width
 
   // Memoized navigation items
   const navs = useMemo(() => {
@@ -101,19 +103,20 @@ function Nav({
     return (
       <VerticalVariant
         items={navs}
-        showSearchbar={showSearchbar}
-        showDropdown={showDropdown}
+        showSearchableNav={showSearchableNav}
         showTitle={showTitle}
         showLine={showLine}
         verticalNavTitle={verticalNavTitle}
-        dropdownLabel={dropdownLabel}
-        searchbarLabel={searchbarLabel}
+        searchableNavLabel={searchableNavLabel}
         anchor={anchor}
         expandedNavs={expandedNavs}
         setExpandedNavs={setExpandedNavs}
         expandedSubnavs={expandedSubnavs}
         setExpandedSubnavs={setExpandedSubnavs}
         verticalNavWidth={`${verticalNavWidth}px`}
+        shrunkfontcolor={shrunkfontcolor}
+        unshrunkfontcolor={unshrunkfontcolor}
+        backgroundcolor={backgroundcolor} // Pass backgroundcolor to VerticalVariant
       />
     )
   } else {

package/src/components/SearchableDropdown/index.tsx

@@ -0,0 +1,378 @@
+'use client'
+
+import React, { useState, useEffect, SyntheticEvent } from 'react'
+import {
+  Autocomplete,
+  Box,
+  CircularProgress,
+  FilterOptionsState,
+  AutocompleteChangeReason,
+  AutocompleteChangeDetails,
+} from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { black, white } from '../../styles/palette'
+import Typography from '../Typography'
+import TextField from '../TextField'
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+
+interface DropdownOption {
+  value: string
+  attribute1?: string
+  attribute2?: string
+}
+
+export interface SearchableDropdownProps {
+  label: string
+  options: DropdownOption[]
+  defaultValue?: string
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  inputfontcolor?: string // New prop for input text color
+  shrunkfontcolor?: string
+  unshrunkfontcolor?: string
+  placeholdercolor?: string
+  shrunklabelposition?: 'onNotch' | 'aboveNotch'
+  onChange?: (value: DropdownOption | null) => void
+  error?: boolean
+  helperText?: string
+  name?: string
+  required?: boolean
+  placeholder?: string
+}
+
+const StyledBox = styled(Box)(() => ({
+  position: 'relative',
+  width: '100%',
+  marginTop: '10px',
+}))
+
+const StyledAutocomplete = styled(
+  Autocomplete<DropdownOption, false, false, true>
+)<{
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  inputfontcolor?: string
+  shrunkfontcolor?: string
+  shrunklabelposition?: 'onNotch' | 'aboveNotch'
+}>(
+  ({
+    outlinecolor,
+    fontcolor,
+    inputfontcolor,
+    shrunkfontcolor,
+    shrunklabelposition,
+  }) => ({
+    '& .MuiOutlinedInput-root': {
+      overflow: 'visible',
+      minHeight: '40px',
+      '& fieldset': {
+        borderColor: outlinecolor || black.main,
+        ...(shrunklabelposition === 'aboveNotch' && {
+          legend: {
+            width: '0px !important',
+          },
+        }),
+      },
+      '&:hover fieldset': {
+        borderColor: outlinecolor || black.main,
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: outlinecolor || black.main,
+        ...(shrunklabelposition === 'aboveNotch' && {
+          legend: {
+            width: '0px !important',
+          },
+        }),
+      },
+    },
+    '& .MuiAutocomplete-input': {
+      color: inputfontcolor || fontcolor || black.main,
+      height: 'auto',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+    },
+    '& .MuiFormLabel-root': {
+      zIndex: 1,
+      '&.MuiInputLabel-shrink, &.Mui-focused': {
+        color: `${shrunkfontcolor} !important`,
+      },
+    },
+  })
+)
+
+const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
+  label,
+  options,
+  defaultValue,
+  backgroundcolor,
+  outlinecolor,
+  fontcolor = black.main,
+  inputfontcolor = black.main,
+  shrunkfontcolor = black.main,
+  unshrunkfontcolor = black.main,
+  placeholdercolor = black.main,
+  shrunklabelposition = 'onNotch',
+  onChange,
+  error = false,
+  helperText,
+  name,
+  required = false,
+  placeholder,
+}) => {
+  const [isLoading, setIsLoading] = useState(true)
+  const [value, setValue] = useState<DropdownOption | string | null>(null)
+  const [inputValue, setInputValue] = useState('')
+  const [isFocused, setIsFocused] = useState(false)
+
+  useEffect(() => {
+    const defaultOption = options.find(option => option.value === defaultValue)
+    if (defaultOption) {
+      const displayText =
+        defaultOption.value.replace(/_/g, ' ').charAt(0).toUpperCase() +
+        defaultOption.value.replace(/_/g, ' ').slice(1)
+      setValue(defaultOption)
+      setInputValue(displayText)
+    }
+    setIsLoading(false)
+  }, [defaultValue, options])
+
+  const handleChange = (
+    event: SyntheticEvent<Element, Event>,
+    newValue: DropdownOption | string | null,
+    _reason: AutocompleteChangeReason,
+    _details?: AutocompleteChangeDetails<DropdownOption>
+  ) => {
+    // Use _reason and _details to avoid unused variable errors
+    console.debug(_reason, _details)
+
+    if (typeof newValue === 'string') {
+      setValue(newValue)
+      setInputValue(newValue)
+      if (onChange) {
+        onChange(null)
+      }
+    } else {
+      setValue(newValue)
+      if (newValue) {
+        const displayText =
+          newValue.value.replace(/_/g, ' ').charAt(0).toUpperCase() +
+          newValue.value.replace(/_/g, ' ').slice(1)
+        setInputValue(displayText)
+        if (onChange) {
+          onChange(newValue)
+        }
+      } else {
+        setInputValue('')
+        if (onChange) {
+          onChange(null)
+        }
+      }
+    }
+  }
+
+  const handleFocus = () => {
+    setIsFocused(true)
+  }
+
+  const handleBlur = () => {
+    if (!value && !inputValue) {
+      setIsFocused(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="50px"
+      >
+        <CircularProgress size={24} />
+      </Box>
+    )
+  }
+
+  const labelTransformNotFocused = 'translate(12px, 10px) scale(1) !important'
+  const labelTransformShrunkAboveNotch =
+    'translate(0px, -17px) scale(0.75) !important'
+  const labelTransformShrunkOnNotch =
+    'translate(13px, -4px) scale(0.75) !important'
+
+  const focusedTransform =
+    shrunklabelposition === 'aboveNotch'
+      ? labelTransformShrunkAboveNotch
+      : labelTransformShrunkOnNotch
+
+  return (
+    <StyledBox>
+      <StyledAutocomplete
+        id={name}
+        options={options}
+        freeSolo
+        value={value}
+        onChange={handleChange}
+        inputValue={inputValue}
+        onInputChange={(_e, newInputValue) => {
+          setInputValue(newInputValue)
+        }}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        popupIcon={null}
+        disablePortal
+        backgroundcolor={backgroundcolor}
+        outlinecolor={outlinecolor}
+        fontcolor={fontcolor}
+        inputfontcolor={inputfontcolor}
+        shrunkfontcolor={shrunkfontcolor}
+        shrunklabelposition={shrunklabelposition}
+        filterOptions={(
+          opts: DropdownOption[],
+          state: FilterOptionsState<DropdownOption>
+        ) => {
+          const input = state.inputValue.toLowerCase()
+          return opts.filter(o => o.value.toLowerCase().includes(input))
+        }}
+        // @ts-ignore - MUI freeSolo mode and TS defs conflict; runtime is fine
+        getOptionLabel={(option: DropdownOption | string) => {
+          if (typeof option === 'string') {
+            return option
+          }
+          return (
+            option.value.replace(/_/g, ' ').charAt(0).toUpperCase() +
+            option.value.replace(/_/g, ' ').slice(1)
+          )
+        }}
+        renderOption={(liProps, option) => {
+          // Extract the key and remove it from liProps, then apply it separately
+          const { key, ...otherLiProps } = liProps
+          const opt = option as DropdownOption
+          return (
+            <li key={key} {...otherLiProps} style={{ color: black.main }}>
+              <Typography
+                fontvariant="merriparagraph"
+                text={opt.value.replace(/_/g, ' ')}
+                fontcolor={black.main}
+              />
+              {opt.attribute1 && (
+                <Typography
+                  fontvariant="merriparagraph"
+                  text={`${opt.attribute1}${
+                    opt.attribute2 ? ` | ${opt.attribute2}` : ''
+                  }`}
+                  fontcolor={black.main}
+                />
+              )}
+            </li>
+          )
+        }}
+        renderInput={params => (
+          <TextField
+            {...params}
+            required={required}
+            error={error}
+            helperText={helperText}
+            label={label}
+            placeholder={placeholder}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            backgroundcolor={backgroundcolor}
+            endAdornment={<ArrowDropDownIcon sx={{ color: black.main }} />}
+            slotProps={{
+              inputLabel: {
+                shrink: isFocused || !!value || !!inputValue,
+                sx: {
+                  color: isFocused ? shrunkfontcolor : unshrunkfontcolor,
+                  transform: isFocused
+                    ? focusedTransform
+                    : labelTransformNotFocused,
+                  pointerEvents: 'none',
+                  '&.MuiInputLabel-shrink': {
+                    transform: focusedTransform,
+                    color: shrunkfontcolor,
+                  },
+                  zIndex: 1,
+                  overflow: 'visible',
+                },
+              },
+              input: {
+                ...params.InputProps,
+                notched:
+                  shrunklabelposition === 'onNotch' &&
+                  (isFocused || !!value || !!inputValue),
+              },
+            }}
+            sx={{
+              overflow: 'visible',
+              '& .MuiOutlinedInput-root': {
+                backgroundColor: backgroundcolor || white.main,
+                color: fontcolor,
+                minHeight: '40px',
+                overflow: 'visible',
+                '& fieldset': {
+                  borderColor: outlinecolor || black.main,
+                  overflow: 'visible',
+                  ...(shrunklabelposition === 'aboveNotch' && {
+                    legend: {
+                      width: '0px !important',
+                    },
+                  }),
+                },
+                '&:hover fieldset': {
+                  borderColor: outlinecolor || black.main,
+                },
+                '&.Mui-focused fieldset': {
+                  borderColor: outlinecolor || black.main,
+                },
+                '& input': {
+                  backgroundColor: backgroundcolor || white.main,
+                  color: inputfontcolor,
+                  '&::placeholder': {
+                    color: placeholdercolor,
+                    opacity: 1,
+                  },
+                  paddingTop: '16px',
+                },
+              },
+              '& .MuiInputLabel-root': {
+                color: unshrunkfontcolor,
+                overflow: 'visible',
+                zIndex: 1,
+              },
+              '& .MuiAutocomplete-clearIndicator': {
+                color: fontcolor,
+              },
+              '& .MuiAutocomplete-input': {
+                color: inputfontcolor,
+                height: 'auto',
+                paddingTop: '16px',
+                paddingBottom: '10px',
+                backgroundColor: backgroundcolor || white.main,
+                '&::placeholder': {
+                  color: placeholdercolor,
+                  opacity: 1,
+                },
+              },
+            }}
+          />
+        )}
+        sx={{
+          '& .MuiPaper-root': {
+            backgroundColor: backgroundcolor || white.main,
+            color: black.main,
+          },
+          '& .MuiAutocomplete-option': {
+            color: black.main,
+          },
+          '& .MuiAutocomplete-option[aria-selected="true"]': {
+            backgroundColor: `${black.main}08`,
+          },
+        }}
+      />
+    </StyledBox>
+  )
+}
+
+export default SearchableDropdown

package/src/components/Stepper/index.tsx

@@ -1,13 +1,26 @@
-import React from 'react'
+'use client'
+
+import React, { JSX } from 'react'
 import { styled } from '@mui/material/styles'
 import MuiStepper, { StepperProps } from '@mui/material/Stepper'
 import MuiStep, { StepProps } from '@mui/material/Step'
 import MuiStepLabel, { StepLabelProps } from '@mui/material/StepLabel'
 import CustomButton from '../Button'
 import StepConnector from '@mui/material/StepConnector'
-import { Check, CircleOutlined, LockOutlined } from '@mui/icons-material'
+import {
+  Check,
+  CircleOutlined,
+  LockOutlined,
+  InfoOutlined,
+} from '@mui/icons-material'
+import {
+  Box,
+  Tooltip,
+  IconButton,
+  tooltipClasses,
+  TooltipProps,
+} from '@mui/material'
 
-// Styled components for Stepper, Step, and StepLabel
 const StyledStepper = styled((props: StepperProps) => (
   <MuiStepper {...props} />
 ))({})
@@ -17,81 +30,74 @@ const Step = styled((props: StepProps) => <MuiStep {...props} />)({})
 const StepLabel = styled((props: StepLabelProps) => (
   <MuiStepLabel
     {...props}
-    StepIconComponent={props.StepIconComponent}
+    slots={{ stepIcon: props.slots?.stepIcon }}
     sx={{
       '.MuiStepLabel-labelContainer': {
         display: 'flex',
         alignItems: 'center',
+        width: '100%',
         '.MuiStepLabel-label': {
           marginLeft: '15px',
+          flex: 1,
         },
       },
     }}
   />
 ))({})
 
-/**
- * Interface for the props of the CustomStepper component
- */
-export interface CustomStepperProps extends StepperProps {
+const BlackTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: 'black',
+    color: 'white',
+    fontSize: 14,
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: 'black',
+  },
+})
+
+type CustomStepperProps = Omit<StepperProps, 'children'> & {
   steps: {
     stepNumber: number
     label: string
     stepLink: string
     status: 'completed' | 'active' | 'error' | 'inactive'
     statusLink?: string
+    description?: string
   }[]
   activeStep: number
 }
 
-/**
- * CustomStepper component renders a customized stepper with clickable steps
- * @param {CustomStepperProps} props - The props for the CustomStepper component
- * @returns {JSX.Element} The rendered CustomStepper component
- */
-const CustomStepper: React.FC<CustomStepperProps> = ({
+function CustomStepper({
   steps,
   activeStep,
   ...rest
-}) => {
-  /**
-   * Get the appropriate icon for each step based on its status
-   * @param {string} status - The status of the step
-   * @returns {JSX.Element} The icon component for the step
-   */
+}: CustomStepperProps): JSX.Element {
   const getStepIcon = (
     status: 'completed' | 'active' | 'error' | 'inactive'
-  ) => {
+  ): JSX.Element => {
     switch (status) {
       case 'completed':
-        return <Check />
+        return <Check sx={{ color: 'black' }} />
       case 'error':
-        return <CircleOutlined color="error" />
+        return <CircleOutlined sx={{ color: 'black' }} />
       case 'inactive':
-        return <LockOutlined />
+        return <LockOutlined sx={{ color: 'black' }} />
       default:
-        return <CircleOutlined />
+        return <CircleOutlined sx={{ color: 'black' }} />
     }
   }
 
-  /**
-   * Get the appropriate link for each step
-   * @param {Object} step - The step object
-   * @returns {string} The link for the step
-   */
-  const getStepLink = (step: CustomStepperProps['steps'][0]) => {
+  const getStepLink = (step: CustomStepperProps['steps'][0]): string => {
     if (step.statusLink) {
       return step.statusLink
     }
     return step.stepLink
   }
 
-  /**
-   * Determine if a step is clickable
-   * @param {Object} step - The step object
-   * @returns {boolean} Whether the step is clickable
-   */
-  const isStepClickable = (step: CustomStepperProps['steps'][0]) => {
+  const isStepClickable = (step: CustomStepperProps['steps'][0]): boolean => {
     return step.status !== 'inactive'
   }
 
@@ -99,23 +105,49 @@ const CustomStepper: React.FC<CustomStepperProps> = ({
     <StyledStepper {...rest} connector={<StepConnector />}>
       {steps.map(step => (
         <Step key={step.label} active={step.stepNumber === activeStep}>
-          <StepLabel StepIconComponent={() => getStepIcon(step.status)}>
-            <CustomButton
-              text={step.label}
-              variant="text"
-              fontcolor="black"
-              fontlocation="left"
-              href={isStepClickable(step) ? getStepLink(step) : undefined}
+          <StepLabel slots={{ stepIcon: () => getStepIcon(step.status) }}>
+            <Box
               sx={{
-                padding: 0,
-                minWidth: 0,
-                justifyContent: 'flex-start',
-                textTransform: 'none',
-                '&:hover': {
-                  backgroundColor: 'transparent',
-                },
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                gap: 1,
               }}
-            />
+            >
+              <CustomButton
+                text={step.label}
+                variant="text"
+                fontcolor="black"
+                fontlocation="left"
+                href={isStepClickable(step) ? getStepLink(step) : undefined}
+                sx={{
+                  padding: 0,
+                  minWidth: 0,
+                  flex: 1,
+                  justifyContent: 'flex-start',
+                  textTransform: 'none',
+                  '&:hover': {
+                    backgroundColor: 'transparent',
+                  },
+                }}
+              />
+              {step.description && (
+                <BlackTooltip title={step.description} arrow placement="right">
+                  <IconButton
+                    size="small"
+                    sx={{
+                      padding: 0,
+                      color: 'black',
+                      '&:hover': {
+                        backgroundColor: 'transparent',
+                      },
+                    }}
+                  >
+                    <InfoOutlined fontSize="small" />
+                  </IconButton>
+                </BlackTooltip>
+              )}
+            </Box>
           </StepLabel>
         </Step>
       ))}
@@ -123,4 +155,7 @@ const CustomStepper: React.FC<CustomStepperProps> = ({
   )
 }
 
-export { CustomStepper, Step, StepLabel }
+CustomStepper.displayName = 'CustomStepper'
+
+export { CustomStepper }
+export type { CustomStepperProps }

package/src/components/TextField/index.tsx

@@ -30,6 +30,7 @@ export type TextFieldProps = (
     top?: number
     left?: number
   }
+  backgroundcolor?: string
   sx?: MuiTextFieldProps['sx']
   slotProps?: MuiTextFieldProps['slotProps']
 }
@@ -79,18 +80,19 @@ const TextField = React.memo<TextFieldProps>(props => {
     endAdornment,
     textAlign = 'left',
     slotProps: customSlotProps = {},
+    backgroundcolor,
     ...restProps
   } = props
 
   const inputStyle = useMemo<React.CSSProperties>(
     () => ({
-      backgroundColor: 'inherit',
+      backgroundColor: backgroundcolor || 'inherit',
       width: '100%',
       cursor: 'text',
       boxSizing: 'border-box',
       borderRadius: 5,
     }),
-    []
+    [backgroundcolor]
   )
 
   const handleChange = useCallback(

package/src/index.ts

@@ -3,8 +3,6 @@ import React from 'react'
 // Components
 import CustomButton from './components/Button'
 import CustomGrid, {
-  Alignment,
-  BorderProp,
   columnconfig,
   gridconfig,
   cellconfig,
@@ -37,6 +35,9 @@ import CustomToolbar, { ToolbarProps } from './components/Toolbar'
 import TransferList, { TransferListProps } from './components/TransferList'
 import StyledTooltip, { CustomTooltipProps } from './components/Tooltip'
 import QRCodeComponent, { QRCodeProps } from './components/QRCode'
+import SearchableDropdown, {
+  SearchableDropdownProps,
+} from './components/SearchableDropdown'
 
 // New imports
 import DateField from './components/DateField'
@@ -208,6 +209,7 @@ export { TransferList }
 export { StyledTooltip }
 export { formContainerStyle }
 export { QRCodeComponent }
+export { SearchableDropdown }
 
 // New named exports
 export { DateField }
@@ -227,6 +229,7 @@ export type { FormDataGridProps }
 export type { DatagridProps }
 export type { ColumnDef, RowData }
 export type { CellParams, HeaderParams }
+export type { SearchableDropdownProps }
 
 // Exporting ExtendedButtonProps
 export type { ExtendedButtonProps }
@@ -250,7 +253,7 @@ export type { ExtendedComplexEditorProps }
 // Type exports
 export type { CustomButtonProps }
 export type { CustomGridProps }
-export type { Alignment, BorderProp, columnconfig, gridconfig, cellconfig }
+export type { columnconfig, gridconfig, cellconfig }
 export type { FontFamily, TypographyVariant, TypographyProps }
 export type { ConfirmationCodeInputsProps }
 export type { RadioOption, RadioGroupProps }