goobs-frontend 0.8.12 → 0.8.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.12",
+  "version": "0.8.14",
   "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",
@@ -28,7 +28,7 @@
     "highlight.js": "^11.10.0",
     "jotai": "^2.10.3",
     "lodash": "^4.17.21",
-    "next": "15.1.0",
+    "next": "15.1.2",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15",
@@ -45,7 +45,7 @@
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
     "eslint": "^9.16.0",
-    "eslint-config-next": "^15.1.0",
+    "eslint-config-next": "^15.1.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.4.2",

package/src/components/Button/index.tsx

@@ -29,35 +29,52 @@ const StyledButton = styled(Button, {
   backgroundcolor?: string
   iconlocation?: 'left' | 'right' | 'above'
   fontlocation?: 'left' | 'center' | 'right'
-}>(({ backgroundcolor, iconlocation, fontlocation }) => ({
-  minWidth: 'auto',
-  width: '100%',
-  height: '40px',
-  padding: '8px 16px',
-  display: 'flex',
-  flexDirection: iconlocation === 'above' ? 'column' : 'row',
-  alignItems: 'center',
-  justifyContent:
-    fontlocation === 'left'
-      ? 'flex-start'
-      : fontlocation === 'right'
-        ? 'flex-end'
-        : 'center',
-  gap: '8px',
-  ...(backgroundcolor && {
-    backgroundColor: backgroundcolor,
-    '&:hover': {
+}>(({ backgroundcolor, iconlocation, fontlocation }) => {
+  // Determine styles based on backgroundcolor
+  let backgroundStyles = {}
+  if (backgroundcolor && backgroundcolor !== 'none') {
+    backgroundStyles = {
       backgroundColor: backgroundcolor,
-      opacity: 0.9,
+      '&:hover': {
+        backgroundColor: backgroundcolor,
+        opacity: 0.9,
+      },
+    }
+  } else if (backgroundcolor === 'none') {
+    // No background, behave like a text button
+    backgroundStyles = {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 0.9,
+      },
+    }
+  }
+
+  return {
+    minWidth: 'auto',
+    width: '100%',
+    height: '40px',
+    padding: '8px 16px',
+    display: 'flex',
+    flexDirection: iconlocation === 'above' ? 'column' : 'row',
+    alignItems: 'center',
+    justifyContent:
+      fontlocation === 'left'
+        ? 'flex-start'
+        : fontlocation === 'right'
+          ? 'flex-end'
+          : 'center',
+    gap: '8px',
+    ...backgroundStyles,
+    '& .MuiButton-startIcon': {
+      margin: 0,
     },
-  }),
-  '& .MuiButton-startIcon': {
-    margin: 0,
-  },
-  '& .MuiButton-endIcon': {
-    margin: 0,
-  },
-}))
+    '& .MuiButton-endIcon': {
+      margin: 0,
+    },
+  }
+})
 
 const StyledBox = styled(Box)({
   display: 'flex',

package/src/components/DataGrid/Footer/index.tsx

@@ -98,6 +98,7 @@ function CustomFooter({
               text="Manage Columns"
               fontvariant="merriparagraph"
               fontcolor="black"
+              backgroundcolor="none"
               icon={<ShowHideEyeIcon visible={true} />}
               iconcolor="black"
               iconlocation="left"

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

@@ -44,6 +44,7 @@ function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
             width: '100%',
             textAlign: 'left',
             fontFamily: 'Merriweather',
+            marginLeft: 2,
             fontSize: '1.5rem',
             fontWeight: 400,
             color: 'black',
@@ -57,6 +58,7 @@ function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
             textAlign: 'left',
             fontFamily: 'Merriweather',
             fontSize: '1.25rem',
+            marginLeft: 2,
             fontWeight: 400,
             color: 'black',
           }}

package/src/components/Grid/index.tsx

@@ -4,9 +4,6 @@ import React from 'react'
 import Grid2, { Grid2Props } from '@mui/material/Grid2'
 import { useMediaQuery } from '@mui/material'
 
-// Remove all theme creation and usage
-// We will manually define our media queries instead of using createTheme or ThemeProvider
-
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
 type BorderProp = 'none' | 'solid'
 type WrapProp = 'nowrap' | 'wrap'
@@ -24,16 +21,34 @@ interface ResponsiveObject<T> {
 
 type ResponsiveValue<T> = T | ResponsiveObject<T>
 
+type cellconfig = {
+  border?: BorderProp
+  minHeight?: string
+  maxHeight?: string
+  width?: string
+  mobilewidth?: string
+  tabletwidth?: string
+  computerwidth?: string
+  borderColor?: string
+  backgroundColor?: string
+  onClick?: () => void
+  wrap?: WrapProp
+}
+
 type columnconfig = {
   row: number
   column: number
   gridname?: string
   alignment?: Alignment
   margintop?: ResponsiveValue<number>
-  columnwidth?: string
   marginbottom?: ResponsiveValue<number>
   marginright?: ResponsiveValue<number>
   marginleft?: ResponsiveValue<number>
+  paddingtop?: ResponsiveValue<number>
+  paddingbottom?: ResponsiveValue<number>
+  paddingright?: ResponsiveValue<number>
+  paddingleft?: ResponsiveValue<number>
+  columnwidth?: string
   component?: React.ReactNode
   bordercolor?: string
   cellconfig?: cellconfig
@@ -49,24 +64,14 @@ type gridconfig = {
   marginbottom?: ResponsiveValue<number>
   marginright?: ResponsiveValue<number>
   marginleft?: ResponsiveValue<number>
+  paddingtop?: ResponsiveValue<number>
+  paddingbottom?: ResponsiveValue<number>
+  paddingright?: ResponsiveValue<number>
+  paddingleft?: ResponsiveValue<number>
   gridwidth?: string
   bordercolor?: string
 }
 
-type cellconfig = {
-  border?: BorderProp
-  minHeight?: string
-  maxHeight?: string
-  width?: string
-  mobilewidth?: string
-  tabletwidth?: string
-  computerwidth?: string
-  borderColor?: string
-  backgroundColor?: string
-  onClick?: () => void
-  wrap?: WrapProp
-}
-
 type CustomGridProps = Omit<Grid2Props, 'children'> & {
   gridconfig?: gridconfig
   columnconfig?: columnconfig[]
@@ -134,6 +139,41 @@ function CustomGrid({
         ? 'flex-end'
         : 'center'
 
+  // Get responsive margin and padding values for the overall grid
+  const gridMarginTop = getResponsiveValue(
+    gridConfigValues?.margintop,
+    currentBreakpoint
+  )
+  const gridMarginBottom = getResponsiveValue(
+    gridConfigValues?.marginbottom,
+    currentBreakpoint
+  )
+  const gridMarginLeft = getResponsiveValue(
+    gridConfigValues?.marginleft,
+    currentBreakpoint
+  )
+  const gridMarginRight = getResponsiveValue(
+    gridConfigValues?.marginright,
+    currentBreakpoint
+  )
+
+  const gridPaddingTop = getResponsiveValue(
+    gridConfigValues?.paddingtop,
+    currentBreakpoint
+  )
+  const gridPaddingBottom = getResponsiveValue(
+    gridConfigValues?.paddingbottom,
+    currentBreakpoint
+  )
+  const gridPaddingLeft = getResponsiveValue(
+    gridConfigValues?.paddingleft,
+    currentBreakpoint
+  )
+  const gridPaddingRight = getResponsiveValue(
+    gridConfigValues?.paddingright,
+    currentBreakpoint
+  )
+
   const rows = Math.max(...(columnconfig || []).map(c => c.row || 1))
 
   return (
@@ -148,10 +188,16 @@ function CustomGrid({
         padding: 0,
         margin: 0,
         gap: 0,
+        // Apply grid-level margins and paddings
+        marginTop: gridMarginTop ? `${gridMarginTop * 8}px` : 0,
+        marginBottom: gridMarginBottom ? `${gridMarginBottom * 8}px` : 0,
+        marginLeft: gridMarginLeft ? `${gridMarginLeft * 8}px` : 0,
+        marginRight: gridMarginRight ? `${gridMarginRight * 8}px` : 0,
+        paddingTop: gridPaddingTop ? `${gridPaddingTop * 8}px` : 0,
+        paddingBottom: gridPaddingBottom ? `${gridPaddingBottom * 8}px` : 0,
+        paddingLeft: gridPaddingLeft ? `${gridPaddingLeft * 8}px` : 0,
+        paddingRight: gridPaddingRight ? `${gridPaddingRight * 8}px` : 0,
         // Remove or adjust the child selector that sets margin:0
-        // If we must not remove code, we can make it more specific so it doesn't override column margins.
-        // Change '& > *' to a more specific selector that doesn't conflict with column Grid2 items:
-        // For example, limit it to direct child elements that are not Grid2:
         '& > *:not(.grid-column)': {
           border: 'none !important',
           padding: 0,
@@ -221,6 +267,7 @@ function CustomGrid({
                     ? 'flex-end'
                     : 'center'
 
+              // Get responsive margin and padding values for the column
               const marginTop = getResponsiveValue(
                 currentColumnConfig?.margintop,
                 currentBreakpoint
@@ -238,6 +285,23 @@ function CustomGrid({
                 currentBreakpoint
               )
 
+              const paddingTop = getResponsiveValue(
+                currentColumnConfig?.paddingtop,
+                currentBreakpoint
+              )
+              const paddingBottom = getResponsiveValue(
+                currentColumnConfig?.paddingbottom,
+                currentBreakpoint
+              )
+              const paddingLeft = getResponsiveValue(
+                currentColumnConfig?.paddingleft,
+                currentBreakpoint
+              )
+              const paddingRight = getResponsiveValue(
+                currentColumnConfig?.paddingright,
+                currentBreakpoint
+              )
+
               return (
                 <Grid2
                   key={`column-${columnIndex}`}
@@ -252,8 +316,8 @@ function CustomGrid({
                     flexShrink: hasFixedWidth ? 0 : 1,
                     flexBasis: hasFixedWidth ? columnWidth : 'auto',
                     height: 'fit-content',
-                    padding: 0,
-                    // Add !important to ensure we override any parent styles
+
+                    // Apply margin
                     marginLeft: marginLeft
                       ? `${marginLeft * 8}px !important`
                       : '0 !important',
@@ -266,6 +330,21 @@ function CustomGrid({
                     marginBottom: marginBottom
                       ? `${marginBottom * 8}px !important`
                       : '0 !important',
+
+                    // Apply padding
+                    paddingLeft: paddingLeft
+                      ? `${paddingLeft * 8}px !important`
+                      : '0 !important',
+                    paddingRight: paddingRight
+                      ? `${paddingRight * 8}px !important`
+                      : '0 !important',
+                    paddingTop: paddingTop
+                      ? `${paddingTop * 8}px !important`
+                      : '0 !important',
+                    paddingBottom: paddingBottom
+                      ? `${paddingBottom * 8}px !important`
+                      : '0 !important',
+
                     border: 'none',
                     backgroundColor: currentCellConfig?.backgroundColor,
                     minHeight: 'min-content',

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

@@ -1,6 +1,6 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import { Box, Tabs, Tab } from '@mui/material'
+import { AppBar, Toolbar, Box, Tabs, Tab } from '@mui/material'
 import { NavProps, SubNav, View } from '../index'
 import { usePathname } from 'next/navigation'
 
@@ -19,8 +19,7 @@ export interface HorizontalVariantProps {
 
 function HorizontalVariant({
   items,
-  height = '80px',
-  alignment = 'left',
+  height = '48px',
   navname = '',
 }: HorizontalVariantProps) {
   const [activeTabValues, setActiveTabValues] = useState<
@@ -63,83 +62,110 @@ function HorizontalVariant({
   }
 
   return (
-    <Box
+    <AppBar
+      position="sticky"
       sx={{
-        flexGrow: 1,
-        bgcolor: 'black',
-        display: 'flex',
-        height: height,
-        justifyContent: alignment,
-        paddingLeft: '5px',
-        paddingRight: '5px',
+        backgroundColor: 'black',
+        color: 'white',
       }}
     >
-      <Tabs
-        value={activeTabValues[navname]?.tabId || false}
-        onChange={handleTabChange}
-        aria-label="nav tabs"
+      <Toolbar
+        disableGutters
         sx={{
-          height: height,
-          '& .MuiTabs-flexContainer': {
-            height: '100%',
-          },
-          '& .MuiTab-root': {
-            height: '100%',
-            minHeight: 'unset',
-          },
+          paddingLeft: 0,
+          paddingRight: 0,
+          height: `${height} !important`,
+          minHeight: `${height} !important`,
+          borderTop: '1px solid white',
         }}
       >
-        {items.map((item: NavProps | SubNav | View) => {
-          if ('orientation' in item) {
-            const tab = item as NavProps
-            return (
-              <Tab
-                key={tab.title}
-                value={tab.title || ''}
-                label={tab.title || ''}
-                onClick={() => handleTabClick(tab)}
-                sx={{
-                  minHeight: 0,
-                  textTransform: 'none',
-                  border: 'none',
-                  boxSizing: 'border-box',
-                  backgroundColor: 'black',
-                  color: '#fff',
-                  fontWeight: 500,
-                  fontFamily: 'Merriweather',
-                  fontSize: 16,
-                  height: height,
-                  '&:hover': {
-                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                  },
-                  '& .MuiTouchRipple-root': {
-                    color: '#fff',
-                  },
-                  '&.Mui-selected': {
-                    color: '#fff',
-                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                  },
-                  '& .MuiSvgIcon-root': {
-                    color: '#fff',
-                  },
-                  ...(tab.hasleftborder === 'true' && {
-                    borderLeft: '1px solid white',
-                  }),
-                  ...(tab.hasrightborder === 'true' && {
-                    borderRight: '1px solid white',
-                  }),
-                  width: 'auto',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  px: 4,
-                }}
-              />
-            )
-          }
-          return null
-        })}
-      </Tabs>
-    </Box>
+        <Box
+          sx={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+          }}
+        >
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: 'flex',
+              height: height,
+              justifyContent: 'flex-start',
+              paddingLeft: 0,
+              paddingRight: 0,
+            }}
+          >
+            <Tabs
+              value={activeTabValues[navname]?.tabId || false}
+              onChange={handleTabChange}
+              aria-label="nav tabs"
+              sx={{
+                height: height,
+                '& .MuiTabs-flexContainer': {
+                  height: '100%',
+                },
+                '& .MuiTab-root': {
+                  height: '100%',
+                  minHeight: 'unset',
+                },
+              }}
+            >
+              {items.map((item: NavProps | SubNav | View) => {
+                if ('orientation' in item) {
+                  const tab = item as NavProps
+                  return (
+                    <Tab
+                      key={tab.title}
+                      value={tab.title || ''}
+                      label={tab.title || ''}
+                      onClick={() => handleTabClick(tab)}
+                      sx={{
+                        minHeight: 0,
+                        textTransform: 'none',
+                        border: 'none',
+                        boxSizing: 'border-box',
+                        backgroundColor: 'black',
+                        color: '#fff',
+                        fontWeight: 500,
+                        fontFamily: 'Merriweather',
+                        fontSize: 16,
+                        height: height,
+                        '&:hover': {
+                          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                        },
+                        '& .MuiTouchRipple-root': {
+                          color: '#fff',
+                        },
+                        '&.Mui-selected': {
+                          color: '#fff',
+                          backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                        },
+                        '& .MuiSvgIcon-root': {
+                          color: '#fff',
+                        },
+                        ...(tab.hasleftborder === 'true' && {
+                          borderLeft: '1px solid white',
+                        }),
+                        ...(tab.hasrightborder === 'true' && {
+                          borderRight: '1px solid white',
+                        }),
+                        width: 'auto',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        px: 4,
+                      }}
+                    />
+                  )
+                }
+                return null
+              })}
+            </Tabs>
+          </Box>
+        </Box>
+      </Toolbar>
+    </AppBar>
   )
 }
 

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

@@ -1,5 +1,4 @@
 'use client'
-
 import React, { useState, useCallback } from 'react'
 import {
   Drawer,
@@ -40,6 +39,9 @@ export interface VerticalVariantProps {
   mobileOpen?: boolean
   onClose?: () => void
   variant?: 'temporary' | 'permanent'
+  spacingfromtopofscreen?: string
+  marginabovetitle?: string
+  marginbelowtitle?: string
 }
 
 function VerticalVariant({
@@ -62,6 +64,9 @@ function VerticalVariant({
   mobileOpen = false,
   onClose,
   variant = 'permanent',
+  spacingfromtopofscreen = '0px',
+  marginabovetitle = '0px',
+  marginbelowtitle = '0px',
 }: VerticalVariantProps) {
   const router = useRouter()
   const [selectedNav, setSelectedNav] = useState<string | null>(null)
@@ -108,6 +113,7 @@ function VerticalVariant({
       activeAndHoverColor = semiTransparentWhite.main
     ) => {
       if ('title' in item && 'subnavs' in item) {
+        // This is a NavProps item (top-level nav)
         const nav = item as NavProps
         const isExpanded = expandedNavs.includes(nav.title ?? '')
         return (
@@ -190,9 +196,11 @@ function VerticalVariant({
           </MuiAccordion>
         )
       } else if ('title' in item && 'views' in item) {
+        // This is a SubNav item
         const subnav = item as SubNav
         const isExpanded = expandedSubnavs.includes(subnav.title ?? '')
-        if (subnav.views?.length === 0) {
+        if (!subnav.views || subnav.views.length === 0) {
+          // SubNav with no views, just a route
           return (
             <Link
               key={subnav.title}
@@ -213,6 +221,15 @@ function VerticalVariant({
                     backgroundColor: activeAndHoverColor,
                   },
                 }}
+                onClick={() => {
+                  if (
+                    subnav.trigger === 'route' &&
+                    variant === 'temporary' &&
+                    onClose
+                  ) {
+                    onClose()
+                  }
+                }}
               >
                 <Typography
                   fontvariant="merrih6"
@@ -223,6 +240,7 @@ function VerticalVariant({
             </Link>
           )
         } else {
+          // SubNav with views
           return (
             <MuiAccordion
               key={subnav.title}
@@ -301,6 +319,7 @@ function VerticalVariant({
           )
         }
       } else if ('title' in item && 'route' in item) {
+        // This is a View item
         const view = item as View
         return (
           <Link
@@ -310,7 +329,15 @@ function VerticalVariant({
               color: 'white',
             }}
             href={view.route ?? ''}
-            onClick={variant === 'temporary' ? onClose : undefined}
+            onClick={() => {
+              if (
+                view.trigger === 'route' &&
+                variant === 'temporary' &&
+                onClose
+              ) {
+                onClose()
+              }
+            }}
           >
             <MenuItem
               sx={{
@@ -350,7 +377,7 @@ function VerticalVariant({
     <>
       <Box px={`15px`}>
         {showTitle && (
-          <Box pt="0px" pb="0px">
+          <Box mt={marginabovetitle} mb={marginbelowtitle}>
             <Link
               href={titleUrl || '/'}
               passHref
@@ -432,6 +459,7 @@ function VerticalVariant({
           backgroundColor: ocean.main,
           pt: '17px',
           boxSizing: 'border-box',
+          marginTop: spacingfromtopofscreen,
         },
       }}
     >

package/src/components/Nav/index.tsx

@@ -36,6 +36,9 @@ export interface NavProps {
   mobileOpen?: boolean // Controls mobile drawer open state
   onClose?: () => void // Handler for closing mobile drawer
   variant?: 'temporary' | 'permanent' // Drawer variant for mobile/desktop
+  spacingfromtopofscreen?: string // Spacing from top of screen
+  marginabovetitle?: string // Margin above the title in vertical variant
+  marginbelowtitle?: string // Margin below the title in vertical variant
 }
 
 /**
@@ -47,6 +50,7 @@ export type SubNav = {
   subtitle?: string // Subtitle for the sub-nav
   views?: View[] // Views within the sub-nav
   navname?: string // Name of the sub-nav
+  trigger?: 'route' | 'onClick' | 'routeonhorizontal' // Trigger type for the sub-nav
 }
 
 /**
@@ -57,6 +61,7 @@ export type View = {
   title?: string // Title of the view
   subtitle?: string // Subtitle for the view
   navname?: string // Name of the view
+  trigger?: 'route' | 'onClick' | 'routeonhorizontal' // Trigger type for the view
 }
 
 /**
@@ -83,6 +88,9 @@ function Nav({
   mobileOpen = false,
   onClose,
   variant = 'permanent',
+  spacingfromtopofscreen,
+  marginabovetitle = '0px',
+  marginbelowtitle = '0px',
 }: NavProps): JSX.Element {
   // State for expanded navigation items
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
@@ -129,6 +137,9 @@ function Nav({
         mobileOpen={mobileOpen}
         onClose={onClose}
         variant={variant}
+        spacingfromtopofscreen={spacingfromtopofscreen}
+        marginabovetitle={marginabovetitle}
+        marginbelowtitle={marginbelowtitle}
       />
     )
   } else {

package/src/components/PricingTable/defaultconfig.tsx

@@ -2,13 +2,16 @@ import { PricingProps } from './index'
 
 /**
  * Default configuration for the PricingTable component
+ *
+ * All margin and padding values are now defined as ResponsiveObject<number> directly
+ * in the columnconfig, allowing you to edit each breakpoint value individually.
  */
+
 const defaultConfig: PricingProps = {
   // Configuration for the header grid
   headerGridConfig: {
     gridname: 'pricingtableheader',
     alignment: 'center' as const,
-    margintop: 1,
     gridwidth: '100%',
   },
   // Configuration for the table title
@@ -19,11 +22,27 @@ const defaultConfig: PricingProps = {
       column: 1,
       gridname: 'pricingtableheader',
       alignment: 'left' as const,
-      marginleft: 3,
-      marginbottom: 1,
+      paddingleft: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      paddingtop: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
       mobilewidth: '100%',
       tabletwidth: '100%',
-      computerwidth: '100%',
+      computerwidth: '50%',
     },
   },
   // Configuration for package columns
@@ -31,10 +50,46 @@ const defaultConfig: PricingProps = {
     packagenames: ['ThothOS', 'ThothOS Pro', 'ThothOS Enterprise'],
     columnconfig: {
       row: 1,
-      column: 2,
+      column: 1,
       gridname: 'pricingtableheader',
       alignment: 'center' as const,
-      mobilewidth: '80%',
+      paddingleft: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      paddingright: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      paddingtop: {
+        xs: 2.5,
+        sm: 2.5,
+        md: 2.5,
+        ms: 2.5,
+        ml: 2.5,
+        lg: 2.5,
+        xl: 2.5,
+      },
+      paddingbottom: {
+        xs: 1,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      mobilewidth: '100%',
       tabletwidth: '48%',
       computerwidth: '48%',
     },
@@ -250,10 +305,44 @@ const defaultConfig: PricingProps = {
     ],
     columnconfig: {
       row: 7,
-      column: 2,
+      column: 1,
       mobilewidth: '100%',
-      marginbottom: 1,
-      marginright: 1,
+      margintop: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      marginbottom: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
+      marginright: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
+      marginleft: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
       tabletwidth: '100%',
       computerwidth: '48%',
       gridname: 'pricingtablefeatures',

package/src/components/PricingTable/index.tsx

@@ -129,6 +129,9 @@ const PricingTable: React.FC<PricingProps> = props => {
     if (config.packagecolumns && config.packagecolumns.columnconfig) {
       headerColumnConfigs.push({
         ...config.packagecolumns.columnconfig,
+        // Add 5px margin above (margintop: 0.625) and to the right (marginright: 0.625)
+        margintop: 1,
+        marginright: 0.625,
         component: (
           <Dropdown
             label="Packages"
@@ -138,6 +141,7 @@ const PricingTable: React.FC<PricingProps> = props => {
             }))}
             defaultValue={selectedPackage}
             backgroundcolor={semiTransparentBlack.main}
+            shrunklabelposition="aboveNotch"
             outlinecolor={black.main}
             fontcolor={black.main}
             shrunkfontcolor={black.main}
@@ -177,6 +181,8 @@ const PricingTable: React.FC<PricingProps> = props => {
       if (feature.columnconfig) {
         featureColumnConfigs.push({
           ...feature.columnconfig,
+          margintop: 1,
+          paddingleft: 2,
           component: (
             <Box display="flex" alignItems="center">
               <Typography
@@ -207,6 +213,7 @@ const PricingTable: React.FC<PricingProps> = props => {
       if (feature.tiedtopackage && feature.tiedtopackage.columnconfig) {
         const tiedConfig: columnconfig = {
           ...feature.tiedtopackage.columnconfig,
+          margintop: 1,
           cellconfig: {
             minHeight: '40px',
           },
@@ -225,6 +232,8 @@ const PricingTable: React.FC<PricingProps> = props => {
         if (subFeature.columnconfig) {
           featureColumnConfigs.push({
             ...subFeature.columnconfig,
+            margintop: 1,
+            paddingleft: 3,
             component: (
               <Box display="flex" alignItems="center">
                 <Typography
@@ -255,6 +264,7 @@ const PricingTable: React.FC<PricingProps> = props => {
         if (subFeature.tiedtopackage && subFeature.tiedtopackage.columnconfig) {
           const tiedConfig: columnconfig = {
             ...subFeature.tiedtopackage.columnconfig,
+            margintop: 1,
             cellconfig: {
               minHeight: '40px',
             },
@@ -279,6 +289,7 @@ const PricingTable: React.FC<PricingProps> = props => {
 
       featureColumnConfigs.push({
         ...config.buttoncolumns.columnconfig,
+        margintop: 1,
         component: (
           <CustomButton
             variant="contained"