goobs-frontend 0.7.54 → 0.7.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.54",
+  "version": "0.7.56",
   "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",
@@ -28,7 +28,6 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@types/lodash": "^4.17.5",
-    "async-lock": "^1.4.1",
     "goobs-cache": "^1.2.1",
     "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
@@ -36,7 +35,6 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.4",
-    "@types/async-lock": "^1.4.2",
     "@types/node": "^20.14.9",
     "@types/react": "18.3.0",
     "@types/react-dom": "^18.3.0",

package/src/components/Content/Structure/button/useButton.tsx

@@ -5,7 +5,7 @@ import { columnconfig, cellconfig } from '../../../Grid'
 import { TypographyPropsVariantOverrides } from '@mui/material'
 
 export interface ExtendedButtonProps extends CustomButtonProps {
-  columnconfig?: columnconfig
+  columnconfig?: Partial<columnconfig>
   cellconfig?: cellconfig
 }
 
@@ -39,8 +39,19 @@ const useButton = (grid: {
       ...restProps
     } = buttonItem
 
+    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,
+      ...(itemColumnConfig as columnconfig),
       cellconfig: {
         ...cellconfig,
       },

package/src/components/Content/Structure/card/useCard.tsx

@@ -3,8 +3,12 @@ import React from 'react'
 import { columnconfig, cellconfig } from '../../../Grid'
 import Card, { CardProps } from './../../../../components/Card'
 
-export interface ExtendedCardProps extends CardProps {
-  columnconfig?: columnconfig
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedCardProps extends Omit<CardProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
@@ -23,6 +27,17 @@ const useCard = (grid: {
       ...restProps
     } = cardProps
 
+    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'
+      )
+    }
+
     // Merge the existing columnconfig with the new props
     const mergedConfig: columnconfig = {
       ...itemColumnConfig,

package/src/components/Content/Structure/codecopy/useCodeCopy.tsx

@@ -3,8 +3,13 @@ import React from 'react'
 import CodeCopy, { CodeCopyProps } from './../../../../components/CodeCopy'
 import { columnconfig, cellconfig } from '../../../Grid'
 
-export interface ExtendedCodeCopyProps extends CodeCopyProps {
-  columnconfig?: columnconfig
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedCodeCopyProps
+  extends Omit<CodeCopyProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
@@ -25,6 +30,17 @@ const useCodeCopy = (grid: {
       ...restProps
     } = codeCopyProps
 
+    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'
+      )
+    }
+
     // Merge the existing columnconfig with the new props
     const mergedConfig: columnconfig = {
       ...itemColumnConfig,

package/src/components/Content/Structure/confirmationinput/useConfirmationInput.tsx

@@ -5,9 +5,13 @@ import ConfirmationCodeInputs, {
 } from '../../../ConfirmationCodeInput'
 import { columnconfig, cellconfig } from '../../../Grid'
 
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
 export interface ExtendedConfirmationCodeInputsProps
-  extends ConfirmationCodeInputsProps {
-  columnconfig?: columnconfig
+  extends Omit<ConfirmationCodeInputsProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
@@ -30,6 +34,17 @@ const useConfirmationInput = (grid: {
       ...restProps
     } = confirmationCodeInputProps
 
+    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'
+      )
+    }
+
     return {
       ...itemColumnConfig,
       cellconfig: {

package/src/components/Content/Structure/image/useImage.tsx

@@ -3,6 +3,10 @@ import React from 'react'
 import Image from 'next/image'
 import { columnconfig, cellconfig } from '../../../Grid'
 
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
 type ImageProps = {
   url: string
   alt?: string
@@ -11,13 +15,13 @@ type ImageProps = {
 }
 
 export interface ExtendedImageProps extends Omit<ImageProps, 'columnconfig'> {
-  columnconfig?: columnconfig
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
 const useImage = (grid: {
   image?: ExtendedImageProps | ExtendedImageProps[]
-}) => {
+}): columnconfig | columnconfig[] | null => {
   if (!grid.image) return null
 
   const renderImage = (
@@ -32,7 +36,20 @@ const useImage = (grid: {
       ...restProps
     } = imageItem
 
-    if (!url) return itemColumnConfig || {}
+    if (!url) {
+      throw new Error('URL is required for image')
+    }
+
+    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'
+      )
+    }
 
     return {
       ...itemColumnConfig,
@@ -55,7 +72,7 @@ const useImage = (grid: {
   if (Array.isArray(grid.image)) {
     return grid.image.map(renderImage)
   } else {
-    return [renderImage(grid.image, 0)]
+    return renderImage(grid.image, 0)
   }
 }
 

package/src/components/Content/Structure/link/useLink.tsx

@@ -4,15 +4,20 @@ import Link from 'next/link'
 import { Typography, TypographyProps } from '../../../Typography'
 import { columnconfig, cellconfig } from '../../../Grid'
 
-export interface ExtendedTypographyProps extends TypographyProps {
-  columnconfig?: columnconfig
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedTypographyProps
+  extends Omit<TypographyProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
-  link?: string
+  link: string
 }
 
 const useLink = (grid: {
   link?: ExtendedTypographyProps | ExtendedTypographyProps[]
-}) => {
+}): columnconfig | columnconfig[] | null => {
   if (!grid.link) return null
 
   const renderLink = (
@@ -33,6 +38,17 @@ const useLink = (grid: {
       throw new Error('Link property is required in ExtendedTypographyProps')
     }
 
+    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'
+      )
+    }
+
     return {
       ...itemColumnConfig,
       cellconfig: {
@@ -53,7 +69,7 @@ const useLink = (grid: {
   if (Array.isArray(grid.link)) {
     return grid.link.map(renderLink)
   } else {
-    return [renderLink(grid.link, 0)]
+    return renderLink(grid.link, 0)
   }
 }
 

package/src/components/Content/Structure/pricing/usePricing.tsx

@@ -4,8 +4,13 @@ import PricingTable from './../../../../components/PricingTable'
 import { columnconfig, cellconfig } from '../../../Grid'
 import { PricingProps } from './../../../../components/PricingTable'
 
-export interface ExtendedPricingProps extends PricingProps {
-  columnconfig?: columnconfig
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedPricingProps
+  extends Omit<PricingProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
@@ -22,6 +27,17 @@ const usePricing = (pricing?: ExtendedPricingProps): columnconfig | null => {
       ...restProps
     } = pricingItem
 
+    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'
+      )
+    }
+
     // Merge the existing columnconfig with the new props
     const mergedConfig: columnconfig = {
       ...itemColumnConfig,

package/src/components/Content/Structure/radiogroup/{useGridRadioGroup.tsx → useRadioGroup.tsx}

@@ -3,15 +3,19 @@ import RadioGroup from '../../../RadioGroup'
 import { columnconfig, cellconfig } from '../../../Grid'
 import { RadioGroupProps as BaseRadioGroupProps } from '../../../../components/RadioGroup'
 
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
 export interface ExtendedRadioGroupProps
   extends Omit<BaseRadioGroupProps, 'columnconfig'> {
-  columnconfig?: columnconfig
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
 const useGridRadioGroup = (grid: {
   radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
-}) => {
+}): columnconfig | columnconfig[] | null => {
   if (!grid.radiogroup) return null
 
   const renderRadioGroup = (
@@ -31,6 +35,17 @@ const useGridRadioGroup = (grid: {
       ...restProps
     } = radiogroup
 
+    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'
+      )
+    }
+
     return {
       ...itemColumnConfig,
       cellconfig: {
@@ -55,7 +70,7 @@ const useGridRadioGroup = (grid: {
   if (Array.isArray(grid.radiogroup)) {
     return grid.radiogroup.map(renderRadioGroup)
   } else {
-    return [renderRadioGroup(grid.radiogroup, 0)]
+    return renderRadioGroup(grid.radiogroup, 0)
   }
 }
 

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

@@ -7,25 +7,50 @@ import {
 import { columnconfig, cellconfig } from '../../../Grid'
 import { CustomStepperProps as BaseCustomStepperProps } from './../../../../components/Stepper'
 
-export interface ExtendedStepperProps extends BaseCustomStepperProps {
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedStepperProps
+  extends Omit<BaseCustomStepperProps, 'columnconfig'> {
   cellconfig?: cellconfig
-  columnconfig?: columnconfig
+  columnconfig?: ExtendedColumnConfig
 }
 
 const useStepper = (grid: {
   stepper?: ExtendedStepperProps | ExtendedStepperProps[]
-}) => {
+}): columnconfig | columnconfig[] | null => {
   if (!grid.stepper) return null
 
-  const renderStepper = (stepperProps: ExtendedStepperProps): columnconfig => {
-    const { steps, columnconfig, cellconfig, ...restProps } = stepperProps
-    const mergedConfig = {
-      ...columnconfig,
+  const renderStepper = (
+    stepperProps: ExtendedStepperProps,
+    index: number
+  ): columnconfig => {
+    const {
+      steps,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = stepperProps
+
+    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,
       cellconfig: {
         ...cellconfig,
       },
       component: (
-        <CustomStepper steps={steps} {...restProps}>
+        <CustomStepper key={`stepper-${index}`} steps={steps} {...restProps}>
           {steps.map(step => (
             <Step key={step.label}>
               <StepLabel>{step.label}</StepLabel>
@@ -38,9 +63,9 @@ const useStepper = (grid: {
   }
 
   if (Array.isArray(grid.stepper)) {
-    return grid.stepper.map(renderStepper)
+    return grid.stepper.map((stepper, index) => renderStepper(stepper, index))
   } else {
-    return renderStepper(grid.stepper)
+    return renderStepper(grid.stepper, 0)
   }
 }
 

package/src/components/Content/Structure/styledcomponent/useStyledComponent.tsx

@@ -4,8 +4,13 @@ import StyledComponent, {
 } from '../../../../components/StyledComponent'
 import { columnconfig, cellconfig } from '../../../Grid'
 
-export interface ExtendedStyledComponentProps extends StyledComponentProps {
-  columnconfig?: columnconfig
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedStyledComponentProps
+  extends Omit<StyledComponentProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
@@ -13,7 +18,7 @@ const useStyledComponent = (grid: {
   styledcomponent?:
     | ExtendedStyledComponentProps
     | ExtendedStyledComponentProps[]
-}) => {
+}): columnconfig | columnconfig[] | null => {
   if (!grid.styledcomponent) return null
 
   const renderStyledComponent = (
@@ -40,16 +45,27 @@ const useStyledComponent = (grid: {
       onChange,
       defaultValue,
       inputRef,
-      columnconfig,
+      columnconfig: itemColumnConfig,
       valuestatus,
       cellconfig,
       required,
       ...restProps
     } = component
 
+    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'
+      )
+    }
+
     // Merge the cellconfig with the columnconfig
     const mergedConfig: columnconfig = {
-      ...columnconfig,
+      ...itemColumnConfig,
       cellconfig: {
         ...cellconfig,
       },
@@ -87,7 +103,7 @@ const useStyledComponent = (grid: {
   if (Array.isArray(grid.styledcomponent)) {
     return grid.styledcomponent.map(renderStyledComponent)
   } else {
-    return [renderStyledComponent(grid.styledcomponent, 0)]
+    return renderStyledComponent(grid.styledcomponent, 0)
   }
 }
 

package/src/components/Content/Structure/transferlist/useTransferList.tsx

@@ -2,35 +2,53 @@ import React from 'react'
 import TransferList, { TransferListProps } from '../../../TransferList'
 import { columnconfig, cellconfig } from '../../../Grid'
 
-export interface ExtendedTransferListProps extends TransferListProps {
-  columnconfig?: columnconfig
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedTransferListProps
+  extends Omit<TransferListProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
 const useTransferList = (grid: {
   transferlist?: ExtendedTransferListProps | ExtendedTransferListProps[]
-}) => {
+}): columnconfig | columnconfig[] | null => {
   if (!grid.transferlist) return null
 
   const renderTransferList = (
-    transferListItem: ExtendedTransferListProps
+    transferListItem: ExtendedTransferListProps,
+    index: number
   ): columnconfig => {
     const {
       leftItems,
       rightItems,
       onChange,
-      columnconfig,
+      columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
     } = transferListItem
 
+    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 = {
-      ...columnconfig,
+      ...itemColumnConfig,
       cellconfig: {
         ...cellconfig,
       },
       component: (
         <TransferList
+          key={`transferlist-${index}`}
           leftItems={leftItems}
           rightItems={rightItems}
           onChange={onChange}
@@ -38,14 +56,15 @@ const useTransferList = (grid: {
         />
       ),
     }
-
     return mergedConfig
   }
 
   if (Array.isArray(grid.transferlist)) {
-    return grid.transferlist.map(renderTransferList)
+    return grid.transferlist.map((item, index) =>
+      renderTransferList(item, index)
+    )
   } else {
-    return renderTransferList(grid.transferlist)
+    return renderTransferList(grid.transferlist, 0)
   }
 }
 

package/src/components/Content/Structure/typography/useGridTypography.tsx

@@ -2,14 +2,19 @@ import React from 'react'
 import { Typography, TypographyProps } from '../../../Typography'
 import { columnconfig, cellconfig } from '../../../Grid'
 
-export interface ExtendedTypographyProps extends TypographyProps {
-  columnconfig?: columnconfig
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedTypographyProps
+  extends Omit<TypographyProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
 
 const useGridTypography = (grid: {
   typography?: ExtendedTypographyProps | ExtendedTypographyProps[]
-}) => {
+}): columnconfig | columnconfig[] | null => {
   if (!grid.typography) return null
 
   const renderTypography = (
@@ -25,6 +30,17 @@ const useGridTypography = (grid: {
       ...restProps
     } = typographyItem
 
+    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'
+      )
+    }
+
     return {
       ...itemColumnConfig,
       cellconfig: {

package/src/components/Content/index.tsx

@@ -10,7 +10,7 @@ import useStyledComponent, {
 } from '../../components/Content/Structure/styledcomponent/useStyledComponent'
 import useGridRadioGroup, {
   ExtendedRadioGroupProps,
-} from '../../components/Content/Structure/radiogroup/useGridRadioGroup'
+} from './Structure/radiogroup/useRadioGroup'
 import useConfirmationInput, {
   ExtendedConfirmationCodeInputsProps,
 } from '../../components/Content/Structure/confirmationinput/useConfirmationInput'
@@ -44,44 +44,35 @@ import useCodeCopy, {
  * Includes configuration for various content elements.
  */
 export interface ContentSectionProps {
-  /** Grid configuration */
-  gridconfig?: gridconfig
-  /** Configuration for confirmation code input */
-  confirmationcodeinput?:
-    | ExtendedConfirmationCodeInputsProps
-    | ExtendedConfirmationCodeInputsProps[]
-  /** Typography configuration */
-  typography?: TypographyProps | TypographyProps[]
-  /** Styled component configuration */
-  styledcomponent?:
-    | ExtendedStyledComponentProps
-    | ExtendedStyledComponentProps[]
-  /** Radio group configuration */
-  radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
-  /** Link configuration */
-  link?: LinkProps | LinkProps[]
-  /** Button configuration */
-  button?: ExtendedButtonProps | ExtendedButtonProps[]
-  /** Image configuration */
-  image?: ExtendedImageProps | ExtendedImageProps[]
-  /** Pricing configuration */
-  pricing?: ExtendedPricingProps
-  /** Stepper configuration */
-  stepper?: ExtendedStepperProps | ExtendedStepperProps[]
-  /** Transfer list configuration */
-  transferlist?: ExtendedTransferListProps | ExtendedTransferListProps[]
-  /** Card configuration */
-  card?: ExtendedCardProps | ExtendedCardProps[]
-  /** Code copy configuration */
-  codecopy?: ExtendedCodeCopyProps | ExtendedCodeCopyProps[]
+  grids: Array<{
+    grid: {
+      gridconfig?: gridconfig
+    }
+    confirmationcodeinput?:
+      | ExtendedConfirmationCodeInputsProps
+      | ExtendedConfirmationCodeInputsProps[]
+    typography?: TypographyProps | TypographyProps[]
+    styledcomponent?:
+      | ExtendedStyledComponentProps
+      | ExtendedStyledComponentProps[]
+    radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
+    link?: LinkProps | LinkProps[]
+    button?: ExtendedButtonProps | ExtendedButtonProps[]
+    image?: ExtendedImageProps | ExtendedImageProps[]
+    pricing?: ExtendedPricingProps
+    stepper?: ExtendedStepperProps | ExtendedStepperProps[]
+    transferlist?: ExtendedTransferListProps | ExtendedTransferListProps[]
+    card?: ExtendedCardProps | ExtendedCardProps[]
+    codecopy?: ExtendedCodeCopyProps | ExtendedCodeCopyProps[]
+  }>
 }
 
 /**
  * RenderContent component handles the rendering of various content elements
  * based on the provided configuration.
  */
-const RenderContent: React.FC<ContentSectionProps> = ({
-  gridconfig,
+const RenderContent: React.FC<ContentSectionProps['grids'][0]> = ({
+  grid,
   ...props
 }) => {
   let columnConfigs: columnconfig[] = []
@@ -113,22 +104,20 @@ const RenderContent: React.FC<ContentSectionProps> = ({
   addToColumnConfigs(useCard(props))
   addToColumnConfigs(useCodeCopy(props))
 
-  return <CustomGrid gridconfig={gridconfig} columnconfig={columnConfigs} />
+  return (
+    <CustomGrid gridconfig={grid.gridconfig} columnconfig={columnConfigs} />
+  )
 }
 
 /**
  * ContentSection component renders multiple grids based on the provided configuration.
  * @param grids An array of ContentSectionProps, each representing a grid to be rendered.
  */
-export default function ContentSection({
-  grids,
-}: {
-  grids: ContentSectionProps[]
-}) {
+export default function ContentSection({ grids }: ContentSectionProps) {
   return (
     <>
-      {grids.map((grid, index) => (
-        <RenderContent key={index} {...grid} />
+      {grids.map((gridProps, index) => (
+        <RenderContent key={index} {...gridProps} />
       ))}
     </>
   )

package/src/components/Form/Popup/index.tsx

@@ -1,11 +1,11 @@
 'use client'
-
-import React from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import { Close } from '@mui/icons-material'
 import { Dialog, IconButton, Box } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
 import { formContainerStyle } from './../../../styles/Form'
 import { ExtendedTypographyProps } from '../../Content/Structure/typography/useGridTypography'
+import Typography from '../../Typography'
 
 /**
  * Props for the PopupForm component.
@@ -19,103 +19,137 @@ export interface PopupFormProps {
   open: boolean
   /** Function to call when closing the dialog */
   onClose: () => void
-  /** Array of ContentSectionProps to render the form content */
-  grids: ContentSectionProps[]
+  /** ContentSectionProps to render the form content */
+  grids: ContentSectionProps['grids']
+  /** Optional function to handle form submission */
+  onSubmit?: () => void
 }
 
 /**
  * PopupForm component renders a popup form with a title, description, and content sections.
  * It uses the ContentSection component to render the form content within a Material-UI Dialog.
+ * Handles form submission and displays submitted data internally.
  *
  * @param props The props for the PopupForm component.
+ * @param ref Ref forwarded to the form element.
  * @returns The rendered popup form.
  */
-function PopupForm({
-  title,
-  description,
-  open,
-  onClose,
-  grids,
-}: PopupFormProps) {
-  /**
-   * headerGrid contains the grid configuration for the form header.
-   * It includes the title and description as typography items.
-   */
-  const headerGrid: ContentSectionProps = {
-    gridconfig: {
-      gridname: 'formHeader',
-      margintop: 0,
-      marginbottom: 1,
-      marginleft: 0,
-      marginright: 0,
-      gridwidth: '100%',
-    },
-    typography: [
-      {
-        text: title,
-        fontvariant: 'merrih5',
-        fontcolor: 'black',
-        columnconfig: {
-          row: 1,
-          column: 1,
+const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
+  ({ title, description, open, onClose, grids, onSubmit }, ref) => {
+    const [submittedData, setSubmittedData] = React.useState<
+      Record<string, string>
+    >({})
+    const internalFormRef = useRef<HTMLFormElement>(null)
+
+    useImperativeHandle(ref, () => internalFormRef.current as HTMLFormElement)
+
+    /**
+     * headerGrid contains the grid configuration for the form header.
+     * It includes the title and description as typography items.
+     */
+    const headerGrid: ContentSectionProps['grids'][0] = {
+      grid: {
+        gridconfig: {
           gridname: 'formHeader',
-          columnwidth: '100%',
-          alignment: 'left',
-          marginbottom: 0.5,
-        },
-        cellconfig: {
-          border: 'none',
+          marginbottom: 1,
+          gridwidth: '100%',
         },
       },
-      {
-        text: description,
-        fontvariant: 'merriparagraph',
-        fontcolor: 'black',
-        columnconfig: {
-          row: 2,
-          column: 1,
-          gridname: 'formHeader',
-          columnwidth: '100%',
-          marginbottom: 0,
+      typography: [
+        {
+          text: title,
+          fontvariant: 'merrih5',
+          fontcolor: 'black',
+          columnconfig: {
+            column: 1,
+            gridname: 'formHeader',
+            columnwidth: '100%',
+            alignment: 'left',
+            marginbottom: 0.5,
+          },
         },
-        cellconfig: {
-          border: 'none',
+        {
+          text: description,
+          fontvariant: 'merriparagraph',
+          fontcolor: 'black',
+          columnconfig: {
+            column: 1,
+            gridname: 'formHeader',
+            columnwidth: '100%',
+          },
         },
-      },
-    ] as ExtendedTypographyProps[],
-  }
+      ] as ExtendedTypographyProps[],
+    }
 
-  /** Combine the header grid with the provided content grids */
-  const contentSectionGrids: ContentSectionProps[] = [headerGrid, ...grids]
+    /** Combine the header grid with the provided content grids */
+    const contentSectionGrids: ContentSectionProps['grids'] = [
+      headerGrid,
+      ...grids,
+    ]
 
-  return (
-    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
-      {/* Close button */}
-      <IconButton
-        size="small"
-        onClick={onClose}
-        sx={{
-          position: 'absolute',
-          right: 8,
-          top: 8,
-          color: theme => theme.palette.grey[500],
-        }}
-      >
-        <Close />
-      </IconButton>
+    /**
+     * Handles form submission and processes form data internally.
+     * @param event - The form submission event
+     */
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      const formData = new FormData(event.currentTarget)
+      const data: Record<string, string> = {}
 
-      {/* Form container */}
-      <Box
-        // @ts-ignore
-        sx={formContainerStyle}
-      >
-        <form>
-          {/* Render the form content using ContentSection */}
-          <ContentSection grids={contentSectionGrids} />
-        </form>
-      </Box>
-    </Dialog>
-  )
-}
+      formData.forEach((value, key) => {
+        data[key] = value.toString()
+      })
+
+      setSubmittedData(data)
+
+      if (onSubmit) {
+        onSubmit()
+      }
+    }
+
+    return (
+      <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+        {/* Close button */}
+        <IconButton
+          size="small"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: theme => theme.palette.grey[500],
+          }}
+        >
+          <Close />
+        </IconButton>
+        {/* Form container */}
+        <Box
+          // @ts-ignore
+          sx={formContainerStyle}
+        >
+          <form onSubmit={handleSubmit} ref={internalFormRef}>
+            {/* Render the form content using ContentSection */}
+            <ContentSection grids={contentSectionGrids} />
+          </form>
+          {/* Display submitted data */}
+          {Object.keys(submittedData).length > 0 && (
+            <Box mt={2}>
+              <Typography fontvariant="merrih6" text="Submitted Data:" />
+              {Object.entries(submittedData).map(([key, value]) => (
+                <Typography
+                  key={key}
+                  fontvariant="merriparagraph"
+                  text={`${key}: ${value}`}
+                />
+              ))}
+            </Box>
+          )}
+        </Box>
+      </Dialog>
+    )
+  }
+)
+
+PopupForm.displayName = 'PopupForm'
 
 export default PopupForm

package/src/components/Grid/index.tsx

@@ -13,8 +13,8 @@ export type BorderProp = 'none' | 'solid'
  * Configuration for individual columns within the grid
  */
 export interface columnconfig {
-  row?: number
-  column?: number
+  row: number
+  column: number
   gridname?: string
   alignment?: Alignment
   margintop?: number

package/src/components/PricingTable/defaultconfig.tsx

@@ -116,12 +116,20 @@ const defaultConfig: PricingProps = {
         },
       },
       tiedtopackage: {
-        row: 1,
-        column: 2,
         tiedtopackages: 'true',
-        mobilewidth: '20%',
-        tabletwidth: '50%',
-        computerwidth: '50%',
+        columnconfig: {
+          row: 1,
+          column: 2,
+          mobilewidth: '20%',
+          tabletwidth: '50%',
+          computerwidth: '50%',
+          gridname: 'pricingtablefeatures',
+          alignment: 'center' as Alignment,
+          cellconfig: {
+            border: 'solid',
+            minHeight: '40px',
+          },
+        },
       },
       subfeatures: [
         {
@@ -143,12 +151,20 @@ const defaultConfig: PricingProps = {
             },
           },
           tiedtopackage: {
-            row: 2,
-            column: 2,
             tiedtopackages: 'true',
-            mobilewidth: '20%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            columnconfig: {
+              row: 2,
+              column: 2,
+              mobilewidth: '20%',
+              tabletwidth: '50%',
+              computerwidth: '50%',
+              gridname: 'pricingtablefeatures',
+              alignment: 'center' as Alignment,
+              cellconfig: {
+                border: 'solid',
+                minHeight: '40px',
+              },
+            },
           },
         },
         {
@@ -170,12 +186,20 @@ const defaultConfig: PricingProps = {
             },
           },
           tiedtopackage: {
-            row: 3,
-            column: 2,
             tiedtopackages: 'true',
-            mobilewidth: '20%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            columnconfig: {
+              row: 3,
+              column: 2,
+              mobilewidth: '20%',
+              tabletwidth: '50%',
+              computerwidth: '50%',
+              gridname: 'pricingtablefeatures',
+              alignment: 'center' as Alignment,
+              cellconfig: {
+                border: 'solid',
+                minHeight: '40px',
+              },
+            },
           },
         },
       ],
@@ -198,12 +222,20 @@ const defaultConfig: PricingProps = {
         },
       },
       tiedtopackage: {
-        row: 4,
-        column: 2,
         tiedtopackages: 'true',
-        mobilewidth: '20%',
-        tabletwidth: '50%',
-        computerwidth: '50%',
+        columnconfig: {
+          row: 4,
+          column: 2,
+          mobilewidth: '20%',
+          tabletwidth: '50%',
+          computerwidth: '50%',
+          gridname: 'pricingtablefeatures',
+          alignment: 'center' as Alignment,
+          cellconfig: {
+            border: 'solid',
+            minHeight: '40px',
+          },
+        },
       },
       subfeatures: [
         {
@@ -225,12 +257,20 @@ const defaultConfig: PricingProps = {
             },
           },
           tiedtopackage: {
-            row: 5,
-            column: 2,
             tiedtopackages: 'true',
-            mobilewidth: '20%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            columnconfig: {
+              row: 5,
+              column: 2,
+              mobilewidth: '20%',
+              tabletwidth: '50%',
+              computerwidth: '50%',
+              gridname: 'pricingtablefeatures',
+              alignment: 'center' as Alignment,
+              cellconfig: {
+                border: 'solid',
+                minHeight: '40px',
+              },
+            },
           },
         },
         {
@@ -252,12 +292,20 @@ const defaultConfig: PricingProps = {
             },
           },
           tiedtopackage: {
-            row: 6,
-            column: 2,
             tiedtopackages: 'true',
-            mobilewidth: '20%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            columnconfig: {
+              row: 6,
+              column: 2,
+              mobilewidth: '20%',
+              tabletwidth: '50%',
+              computerwidth: '50%',
+              gridname: 'pricingtablefeatures',
+              alignment: 'center' as Alignment,
+              cellconfig: {
+                border: 'solid',
+                minHeight: '40px',
+              },
+            },
           },
         },
       ],

package/src/components/PricingTable/index.tsx

@@ -7,8 +7,8 @@ import { Typography } from '../Typography'
 import StyledTooltip from '../Tooltip'
 import CustomButton from '../Button'
 import StyledComponent from '../StyledComponent'
-import CustomGrid from '@/components/Grid'
-import { columnconfig, gridconfig } from '@/components/Grid/'
+import CustomGrid from './../../components/Grid'
+import { columnconfig, gridconfig } from './../../components/Grid/'
 import defaultConfig from './defaultconfig'
 import { useRouter } from 'next/navigation'
 import {
@@ -19,6 +19,11 @@ import {
   aqua,
 } from '../../styles/palette'
 
+type TiedToPackage = {
+  tiedtopackages?: string
+  columnconfig?: Omit<columnconfig, 'component'>
+}
+
 /**
  * Interface for sub-features in the pricing table
  */
@@ -26,15 +31,8 @@ interface SubFeature {
   title: string
   titlelink?: string
   infopopuptext?: string
-  columnconfig?: columnconfig
-  tiedtopackage?: {
-    row?: number
-    column?: number
-    tiedtopackages?: string
-    mobilewidth?: string
-    tabletwidth?: string
-    computerwidth?: string
-  }
+  columnconfig?: Omit<columnconfig, 'component'>
+  tiedtopackage?: TiedToPackage
 }
 
 /**
@@ -45,15 +43,8 @@ interface Feature {
   infopopuptext?: string
   titlelink?: string
   subfeatures: SubFeature[]
-  columnconfig?: columnconfig
-  tiedtopackage?: {
-    row?: number
-    column?: number
-    tiedtopackages?: string
-    mobilewidth?: string
-    tabletwidth?: string
-    computerwidth?: string
-  }
+  columnconfig?: Omit<columnconfig, 'component'>
+  tiedtopackage?: TiedToPackage
 }
 
 /**
@@ -184,11 +175,7 @@ const PricingTable: React.FC<PricingProps> = props => {
         featureColumnConfigs.push({
           ...feature.columnconfig,
           component: (
-            <Box
-              // @ts-ignore
-              display="flex"
-              alignItems="center"
-            >
+            <Box display="flex" alignItems="center">
               <Typography
                 text={feature.title}
                 fontcolor={black.main}
@@ -211,13 +198,13 @@ const PricingTable: React.FC<PricingProps> = props => {
               )}
             </Box>
           ),
-        })
+        } as columnconfig)
       }
 
       // Render feature checkbox
-      if (feature.tiedtopackage) {
-        featureColumnConfigs.push({
-          ...feature.tiedtopackage,
+      if (feature.tiedtopackage && feature.tiedtopackage.columnconfig) {
+        const tiedConfig: columnconfig = {
+          ...feature.tiedtopackage.columnconfig,
           cellconfig: {
             border: 'solid',
             minHeight: '40px',
@@ -225,12 +212,10 @@ const PricingTable: React.FC<PricingProps> = props => {
           component: feature.tiedtopackage.tiedtopackages ? (
             <CheckCircleIcon />
           ) : (
-            <Box
-              // @ts-ignore
-              sx={{ width: '24px', height: '24px' }}
-            />
+            <Box sx={{ width: '24px', height: '24px' }} />
           ),
-        })
+        }
+        featureColumnConfigs.push(tiedConfig)
       }
 
       // Render subfeatures
@@ -262,13 +247,13 @@ const PricingTable: React.FC<PricingProps> = props => {
                 )}
               </Box>
             ),
-          })
+          } as columnconfig)
         }
 
         // Render subfeature checkbox
-        if (subFeature.tiedtopackage) {
-          featureColumnConfigs.push({
-            ...subFeature.tiedtopackage,
+        if (subFeature.tiedtopackage && subFeature.tiedtopackage.columnconfig) {
+          const tiedConfig: columnconfig = {
+            ...subFeature.tiedtopackage.columnconfig,
             cellconfig: {
               border: 'solid',
               minHeight: '40px',
@@ -278,7 +263,8 @@ const PricingTable: React.FC<PricingProps> = props => {
             ) : (
               <Box sx={{ width: '24px', height: '24px' }} />
             ),
-          })
+          }
+          featureColumnConfigs.push(tiedConfig)
         }
       })
     }

package/src/index.ts

@@ -38,6 +38,7 @@ import PricingTable, { PricingProps } from './components/PricingTable'
 import { CustomStepper, CustomStepperProps } from './components/Stepper'
 import CustomToolbar, { ToolbarProps } from './components/Toolbar'
 import TransferList, { TransferListProps } from './components/TransferList'
+import StyledTooltip, { CustomTooltipProps } from './components/Tooltip'
 import React from 'react'
 
 // Animations
@@ -139,6 +140,9 @@ declare type CustomToolbarComponentProps = React.ComponentProps<
 declare type TransferListComponentProps = React.ComponentProps<
   typeof TransferList
 >
+declare type StyledTooltipComponentProps = React.ComponentProps<
+  typeof StyledTooltip
+>
 
 // Named exports
 export { CustomButton }
@@ -157,6 +161,7 @@ export { PricingTable }
 export { CustomStepper }
 export { CustomToolbar }
 export { TransferList }
+export { StyledTooltip }
 export { formContainerStyle }
 
 // Exporting ExtendedButtonProps
@@ -185,6 +190,7 @@ export type { PricingProps }
 export type { CustomStepperProps }
 export type { ToolbarProps }
 export type { TransferListProps }
+export type { CustomTooltipProps }
 
 // Additional type exports for the newly declared types
 export type { TypographyComponentProps }
@@ -200,6 +206,7 @@ export type { PricingTableComponentProps }
 export type { CustomStepperComponentProps }
 export type { CustomToolbarComponentProps }
 export type { TransferListComponentProps }
+export type { StyledTooltipComponentProps }
 
 // Animation type export
 export type { Animation }