goobs-frontend 0.7.55 → 0.7.56

package/package.json

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

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'

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)
         }
       })
     }