robobyte-front-builder 1.0.17 → 1.0.21

package/src/@core/theme/shadows/index.js

@@ -1,61 +0,0 @@
-const shadows = mode => {
-  if (mode === 'light') {
-    return [
-      'none',
-      '0px 2px 1px -1px rgba(76, 78, 100, 0.2), 0px 1px 1px 0px rgba(76, 78, 100, 0.14), 0px 1px 3px 0px rgba(76, 78, 100, 0.12)',
-      '0px 3px 1px -2px rgba(76, 78, 100, 0.2), 0px 2px 2px 0px rgba(76, 78, 100, 0.14), 0px 1px 5px 0px rgba(76, 78, 100, 0.12)',
-      '0px 4px 8px -4px rgba(76, 78, 100, 0.42)',
-      '0px 6px 18px -8px rgba(76, 78, 100, 0.56)',
-      '0px 3px 5px -1px rgba(76, 78, 100, 0.2), 0px 5px 8px 0px rgba(76, 78, 100, 0.14), 0px 1px 14px 0px rgba(76, 78, 100, 0.12)',
-      '0px 2px 10px 0px rgba(76, 78, 100, 0.22)',
-      '0px 4px 5px -2px rgba(76, 78, 100, 0.2), 0px 7px 10px 1px rgba(76, 78, 100, 0.14), 0px 2px 16px 1px rgba(76, 78, 100, 0.12)',
-      '0px 5px 5px -3px rgba(76, 78, 100, 0.2), 0px 8px 10px 1px rgba(76, 78, 100, 0.14), 0px 3px 14px 2px rgba(76, 78, 100, 0.12)',
-      '0px 5px 6px -3px rgba(76, 78, 100, 0.2), 0px 9px 12px 1px rgba(76, 78, 100, 0.14), 0px 3px 16px 2px rgba(76, 78, 100, 0.12)',
-      '0px 6px 6px -3px rgba(76, 78, 100, 0.2), 0px 10px 14px 1px rgba(76, 78, 100, 0.14), 0px 4px 18px 3px rgba(76, 78, 100, 0.12)',
-      '0px 6px 7px -4px rgba(76, 78, 100, 0.2), 0px 11px 15px 1px rgba(76, 78, 100, 0.14), 0px 4px 20px 3px rgba(76, 78, 100, 0.12)',
-      '0px 7px 8px -4px rgba(76, 78, 100, 0.2), 0px 12px 17px 2px rgba(76, 78, 100, 0.14), 0px 5px 22px 4px rgba(76, 78, 100, 0.12)',
-      '0px 7px 8px -4px rgba(76, 78, 100, 0.2), 0px 13px 19px 2px rgba(76, 78, 100, 0.14), 0px 5px 24px 4px rgba(76, 78, 100, 0.12)',
-      '0px 7px 9px -4px rgba(76, 78, 100, 0.2), 0px 14px 21px 2px rgba(76, 78, 100, 0.14), 0px 5px 26px 4px rgba(76, 78, 100, 0.12)',
-      '0px 8px 9px -5px rgba(76, 78, 100, 0.2), 0px 15px 22px 2px rgba(76, 78, 100, 0.14), 0px 6px 28px 5px rgba(76, 78, 100, 0.12)',
-      '0px 8px 10px -5px rgba(76, 78, 100, 0.2), 0px 16px 24px 2px rgba(76, 78, 100, 0.14), 0px 6px 30px 5px rgba(76, 78, 100, 0.12)',
-      '0px 8px 11px -5px rgba(76, 78, 100, 0.2), 0px 17px 26px 2px rgba(76, 78, 100, 0.14), 0px 6px 32px 5px rgba(76, 78, 100, 0.12)',
-      '0px 9px 11px -5px rgba(76, 78, 100, 0.2), 0px 18px 28px 2px rgba(76, 78, 100, 0.14), 0px 7px 34px 6px rgba(76, 78, 100, 0.12)',
-      '0px 9px 12px -6px rgba(76, 78, 100, 0.2), 0px 19px 29px 2px rgba(76, 78, 100, 0.14), 0px 7px 36px 6px rgba(76, 78, 100, 0.12)',
-      '0px 10px 13px -6px rgba(76, 78, 100, 0.2), 0px 20px 31px 3px rgba(76, 78, 100, 0.14), 0px 8px 38px 7px rgba(76, 78, 100, 0.12)',
-      '0px 10px 13px -6px rgba(76, 78, 100, 0.2), 0px 21px 33px 3px rgba(76, 78, 100, 0.14), 0px 8px 40px 7px rgba(76, 78, 100, 0.12)',
-      '0px 10px 14px -6px rgba(76, 78, 100, 0.2), 0px 22px 35px 3px rgba(76, 78, 100, 0.14), 0px 8px 42px 7px rgba(76, 78, 100, 0.12)',
-      '0px 11px 14px -7px rgba(76, 78, 100, 0.2), 0px 23px 36px 3px rgba(76, 78, 100, 0.14), 0px 9px 44px 8px rgba(76, 78, 100, 0.12)',
-      '0px 11px 15px -7px rgba(76, 78, 100, 0.2), 0px 24px 38px 3px rgba(76, 78, 100, 0.14), 0px 9px 46px 8px rgba(76, 78, 100, 0.12)'
-    ]
-  } else {
-    return [
-      'none',
-      '0px 2px 1px -1px rgba(20, 21, 33, 0.2), 0px 1px 1px 0px rgba(20, 21, 33, 0.14), 0px 1px 3px 0px rgba(20, 21, 33, 0.12)',
-      '0px 3px 1px -2px rgba(20, 21, 33, 0.2), 0px 2px 2px 0px rgba(20, 21, 33, 0.14), 0px 1px 5px 0px rgba(20, 21, 33, 0.12)',
-      '0px 4px 8px -4px rgba(20, 21, 33, 0.42)',
-      '0px 6px 18px -8px rgba(20, 21, 33, 0.56)',
-      '0px 3px 5px -1px rgba(20, 21, 33, 0.2), 0px 5px 8px 0px rgba(20, 21, 33, 0.14), 0px 1px 14px 0px rgba(20, 21, 33, 0.12)',
-      '0px 2px 10px 0px rgba(20, 21, 33,  0.18)',
-      '0px 4px 5px -2px rgba(20, 21, 33, 0.2), 0px 7px 10px 1px rgba(20, 21, 33, 0.14), 0px 2px 16px 1px rgba(20, 21, 33, 0.12)',
-      '0px 5px 5px -3px rgba(20, 21, 33, 0.2), 0px 8px 10px 1px rgba(20, 21, 33, 0.14), 0px 3px 14px 2px rgba(20, 21, 33, 0.12)',
-      '0px 5px 6px -3px rgba(20, 21, 33, 0.2), 0px 9px 12px 1px rgba(20, 21, 33, 0.14), 0px 3px 16px 2px rgba(20, 21, 33, 0.12)',
-      '0px 6px 6px -3px rgba(20, 21, 33, 0.2), 0px 10px 14px 1px rgba(20, 21, 33, 0.14), 0px 4px 18px 3px rgba(20, 21, 33, 0.12)',
-      '0px 6px 7px -4px rgba(20, 21, 33, 0.2), 0px 11px 15px 1px rgba(20, 21, 33, 0.14), 0px 4px 20px 3px rgba(20, 21, 33, 0.12)',
-      '0px 7px 8px -4px rgba(20, 21, 33, 0.2), 0px 12px 17px 2px rgba(20, 21, 33, 0.14), 0px 5px 22px 4px rgba(20, 21, 33, 0.12)',
-      '0px 7px 8px -4px rgba(20, 21, 33, 0.2), 0px 13px 19px 2px rgba(20, 21, 33, 0.14), 0px 5px 24px 4px rgba(20, 21, 33, 0.12)',
-      '0px 7px 9px -4px rgba(20, 21, 33, 0.2), 0px 14px 21px 2px rgba(20, 21, 33, 0.14), 0px 5px 26px 4px rgba(20, 21, 33, 0.12)',
-      '0px 8px 9px -5px rgba(20, 21, 33, 0.2), 0px 15px 22px 2px rgba(20, 21, 33, 0.14), 0px 6px 28px 5px rgba(20, 21, 33, 0.12)',
-      '0px 8px 10px -5px rgba(20, 21, 33, 0.2), 0px 16px 24px 2px rgba(20, 21, 33, 0.14), 0px 6px 30px 5px rgba(20, 21, 33, 0.12)',
-      '0px 8px 11px -5px rgba(20, 21, 33, 0.2), 0px 17px 26px 2px rgba(20, 21, 33, 0.14), 0px 6px 32px 5px rgba(20, 21, 33, 0.12)',
-      '0px 9px 11px -5px rgba(20, 21, 33, 0.2), 0px 18px 28px 2px rgba(20, 21, 33, 0.14), 0px 7px 34px 6px rgba(20, 21, 33, 0.12)',
-      '0px 9px 12px -6px rgba(20, 21, 33, 0.2), 0px 19px 29px 2px rgba(20, 21, 33, 0.14), 0px 7px 36px 6px rgba(20, 21, 33, 0.12)',
-      '0px 10px 13px -6px rgba(20, 21, 33, 0.2), 0px 20px 31px 3px rgba(20, 21, 33, 0.14), 0px 8px 38px 7px rgba(20, 21, 33, 0.12)',
-      '0px 10px 13px -6px rgba(20, 21, 33, 0.2), 0px 21px 33px 3px rgba(20, 21, 33, 0.14), 0px 8px 40px 7px rgba(20, 21, 33, 0.12)',
-      '0px 10px 14px -6px rgba(20, 21, 33, 0.2), 0px 22px 35px 3px rgba(20, 21, 33, 0.14), 0px 8px 42px 7px rgba(20, 21, 33, 0.12)',
-      '0px 11px 14px -7px rgba(20, 21, 33, 0.2), 0px 23px 36px 3px rgba(20, 21, 33, 0.14), 0px 9px 44px 8px rgba(20, 21, 33, 0.12)',
-      '0px 11px 15px -7px rgba(20, 21, 33, 0.2), 0px 24px 38px 3px rgba(20, 21, 33, 0.14), 0px 9px 46px 8px rgba(20, 21, 33, 0.12)'
-    ]
-  }
-}
-
-export default shadows

package/src/@core/theme/shadows.js

@@ -1,12 +0,0 @@
-const Shadows = mode => {
-  const color = mode === 'light' ? 'rgba(76, 78, 100, 0.15)' : 'rgba(0,0,0,0.3)'
-
-  return [
-    'none',
-    `0px 2px 1px -1px ${color}, 0px 1px 1px 0px ${color}, 0px 1px 3px 0px ${color}`,
-    `0px 3px 1px -2px ${color}, 0px 2px 2px 0px ${color}, 0px 1px 5px 0px ${color}`,
-    ...Array(22).fill(`0px 2px 6px ${color}`) // just filler to hit 25
-  ]
-}
-
-export default Shadows

package/src/@core/theme/spacing/index.js

@@ -1,3 +0,0 @@
-export default {
-  spacing: factor => `${0.25 * factor}rem`
-}

package/src/@core/theme/spacing.js

@@ -1,5 +0,0 @@
-const spacing = {
-  spacing: factor => `${0.25 * factor}rem`
-}
-
-export default spacing

package/src/@core/theme/typography/index.js

@@ -1,65 +0,0 @@
-const Typography = theme => {
-  return {
-    h1: {
-      fontWeight: 500,
-      letterSpacing: '-1.5px',
-      color: theme.palette.text.primary
-    },
-    h2: {
-      fontWeight: 500,
-      letterSpacing: '-0.5px',
-      color: theme.palette.text.primary
-    },
-    h3: {
-      fontWeight: 500,
-      letterSpacing: 0,
-      color: theme.palette.text.primary
-    },
-    h4: {
-      fontWeight: 500,
-      letterSpacing: '0.25px',
-      color: theme.palette.text.primary
-    },
-    h5: {
-      fontWeight: 500,
-      letterSpacing: 0,
-      color: theme.palette.text.primary
-    },
-    h6: {
-      letterSpacing: '0.15px',
-      color: theme.palette.text.primary
-    },
-    subtitle1: {
-      letterSpacing: '0.15px',
-      color: theme.palette.text.primary
-    },
-    subtitle2: {
-      letterSpacing: '0.1px',
-      color: theme.palette.text.secondary
-    },
-    body1: {
-      letterSpacing: '0.15px',
-      color: theme.palette.text.primary
-    },
-    body2: {
-      lineHeight: 1.429,
-      letterSpacing: '0.15px',
-      color: theme.palette.text.secondary
-    },
-    button: {
-      letterSpacing: '0.4px',
-      color: theme.palette.text.primary
-    },
-    caption: {
-      lineHeight: 1.25,
-      letterSpacing: '0.4px',
-      color: theme.palette.text.secondary
-    },
-    overline: {
-      letterSpacing: '1px',
-      color: theme.palette.text.secondary
-    }
-  }
-}
-
-export default Typography

package/src/@core/theme/typography.js

@@ -1,84 +0,0 @@
-const typography = fontFamily => ({
-  fontFamily:
-    typeof fontFamily === 'undefined' || fontFamily === ''
-      ? [
-          'Inter',
-          'sans-serif',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          'sans-serif',
-          '"Apple Color Emoji"',
-          '"Segoe UI Emoji"',
-          '"Segoe UI Symbol"'
-        ].join(',')
-      : fontFamily,
-  fontSize: 13.125,
-  h1: {
-    fontSize: '2.875rem',
-    fontWeight: 500,
-    lineHeight: 1.478261
-  },
-  h2: {
-    fontSize: '2.375rem',
-    fontWeight: 500,
-    lineHeight: 1.47368421
-  },
-  h3: {
-    fontSize: '1.75rem',
-    fontWeight: 500,
-    lineHeight: 1.5
-  },
-  h4: {
-    fontSize: '1.5rem',
-    fontWeight: 500,
-    lineHeight: 1.58334
-  },
-  h5: {
-    fontSize: '1.125rem',
-    fontWeight: 500,
-    lineHeight: 1.5556
-  },
-  h6: {
-    fontSize: '0.9375rem',
-    fontWeight: 500,
-    lineHeight: 1.46667
-  },
-  subtitle1: {
-    fontSize: '0.9375rem',
-    lineHeight: 1.46667
-  },
-  subtitle2: {
-    fontSize: '0.8125rem',
-    fontWeight: 400,
-    lineHeight: 1.53846154
-  },
-  body1: {
-    fontSize: '0.9375rem',
-    lineHeight: 1.46667
-  },
-  body2: {
-    fontSize: '0.8125rem',
-    lineHeight: 1.53846154
-  },
-  button: {
-    fontSize: '0.9375rem',
-    lineHeight: 1.46667,
-    textTransform: 'none'
-  },
-  caption: {
-    fontSize: '0.8125rem',
-    lineHeight: 1.38462,
-    letterSpacing: '0.4px'
-  },
-  overline: {
-    fontSize: '0.75rem',
-    lineHeight: 1.16667,
-    letterSpacing: '0.8px'
-  }
-})
-
-export default typography

package/src/@core/utils/create-emotion-cache.js

@@ -1,5 +0,0 @@
-import createCache from '@emotion/cache'
-
-export const createEmotionCache = () => {
-  return createCache({ key: 'css' })
-}

package/src/@core/utils/hex-to-rgba.js

@@ -1,11 +0,0 @@
-export const hexToRGBA = (hexCode, opacity) => {
-  let hex = hexCode.replace('#', '')
-  if (hex.length === 3) {
-    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
-  }
-  const r = parseInt(hex.substring(0, 2), 16)
-  const g = parseInt(hex.substring(2, 4), 16)
-  const b = parseInt(hex.substring(4, 6), 16)
-
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`
-}

package/src/@core/utils/serverHelpers.js

@@ -1,45 +0,0 @@
-// Next Imports
-import { cookies } from 'next/headers'
-
-// Third-party Imports
-import 'server-only'
-
-// Config Imports
-import themeConfig from 'src/configs/themeConfig'
-
-export const getSettingsFromCookie = async () => {
-  const cookieStore = await cookies()
-  const cookieName = themeConfig.settingsCookieName
-
-  return JSON.parse(cookieStore.get(cookieName)?.value || '{}')
-}
-
-export const getMode = async () => {
-  const settingsCookie = await getSettingsFromCookie()
-
-  // Get mode from cookie or fallback to theme config
-  const _mode = settingsCookie.mode || themeConfig.mode
-
-  return _mode
-}
-
-export const getSystemMode = async () => {
-  const cookieStore = await cookies()
-  const mode = await getMode()
-  const colorPrefCookie = cookieStore.get('colorPref')?.value || 'light'
-
-  return (mode === 'system' ? colorPrefCookie : mode) || 'light'
-}
-
-export const getServerMode = async () => {
-  const mode = await getMode()
-  const systemMode = await getSystemMode()
-
-  return mode === 'system' ? systemMode : mode
-}
-
-export const getSkin = async () => {
-  const settingsCookie = await getSettingsFromCookie()
-
-  return settingsCookie.skin || 'default'
-}

package/src/@menu/components/RouterLink.jsx

@@ -1,18 +0,0 @@
-'use client'
-
-// React Imports
-import { forwardRef } from 'react'
-
-// Next Imports
-import Link from 'next/link'
-
-export const RouterLink = forwardRef((props, ref) => {
-  // Props
-  const { href, className, ...other } = props
-
-  return (
-    <Link ref={ref} href={href} className={className} {...other}>
-      {props.children}
-    </Link>
-  )
-})

package/src/@menu/components/horizontal-menu/HorizontalNav.jsx

@@ -1,88 +0,0 @@
-'use client'
-
-// React Imports
-import { useEffect, useRef } from 'react'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Component Imports
-import VerticalNavInHorizontal from './VerticalNavInHorizontal'
-
-// Hook Imports
-import useMediaQuery from '../../hooks/useMediaQuery'
-import useHorizontalNav from '../../hooks/useHorizontalNav'
-
-// Util Imports
-import { horizontalNavClasses } from '../../utils/menuClasses'
-
-// Styled Component Imports
-import StyledHorizontalNav from '../../styles/horizontal/StyledHorizontalNav'
-
-// Default Config Imports
-import { defaultBreakpoints } from '../../defaultConfigs'
-
-const HorizontalNav = props => {
-  // Props
-  const {
-    switchToVertical = false,
-    hideMenu = false,
-    breakpoint = 'lg',
-    customBreakpoint,
-    breakpoints,
-    customStyles,
-    className,
-    children,
-    verticalNavProps,
-    verticalNavContent: VerticalNavContent
-  } = props
-
-  // Vars
-  const mergedBreakpoints = { ...defaultBreakpoints, ...breakpoints }
-  const horizontalMenuClasses = classnames(horizontalNavClasses.root, className)
-
-  // Refs
-  const prevBreakpoint = useRef(false)
-
-  // Hooks
-  const { updateIsBreakpointReached } = useHorizontalNav()
-
-  // Find the breakpoint from which screen size responsive behavior should enable and if its reached or not
-  const breakpointReached = useMediaQuery(customBreakpoint ?? (breakpoint ? mergedBreakpoints[breakpoint] : breakpoint))
-
-  // Set the breakpointReached value in the state
-  useEffect(() => {
-    if (prevBreakpoint.current === breakpointReached) return
-    updateIsBreakpointReached(breakpointReached)
-    prevBreakpoint.current = breakpointReached
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [breakpointReached])
-
-  // If switchToVertical is true, then render the VerticalNav component if breakpoint is reached
-  if (switchToVertical && breakpointReached) {
-    return (
-      <VerticalNavInHorizontal
-        breakpoint={breakpoint}
-        className={horizontalMenuClasses}
-        customBreakpoint={customBreakpoint}
-        verticalNavProps={verticalNavProps}
-      >
-        {VerticalNavContent && <VerticalNavContent>{children}</VerticalNavContent>}
-      </VerticalNavInHorizontal>
-    )
-  }
-
-  // If hideMenu is true, then hide the HorizontalNav component if breakpoint is reached
-  if (hideMenu && breakpointReached) {
-    return null
-  }
-
-  // If switchToVertical & hideMenu are false, then render the HorizontalNav component
-  return (
-    <StyledHorizontalNav customStyles={customStyles} className={horizontalMenuClasses}>
-      {children}
-    </StyledHorizontalNav>
-  )
-}
-
-export default HorizontalNav

package/src/@menu/components/horizontal-menu/Menu.jsx

@@ -1,83 +0,0 @@
-'use client'
-
-// React Imports
-import { createContext, forwardRef, useMemo } from 'react'
-
-// Third-party Imports
-import classnames from 'classnames'
-import { FloatingTree } from '@floating-ui/react'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-// Styled Component Imports
-import StyledHorizontalMenu from '../../styles/horizontal/StyledHorizontalMenu'
-
-// Style Imports
-import styles from '../../styles/horizontal/horizontalUl.module.css'
-
-// Default Config Imports
-import { horizontalSubMenuToggleDuration } from '../../defaultConfigs'
-
-export const HorizontalMenuContext = createContext({})
-
-const Menu = (props, ref) => {
-  // Props
-  const {
-    children,
-    className,
-    rootStyles,
-    menuItemStyles,
-    triggerPopout = 'hover',
-    browserScroll = false,
-    transitionDuration = horizontalSubMenuToggleDuration,
-    renderExpandIcon,
-    renderExpandedMenuItemIcon,
-    popoutMenuOffset = { mainAxis: 0 },
-    textTruncate = true,
-    verticalMenuProps,
-    ...rest
-  } = props
-
-  const providerValue = useMemo(
-    () => ({
-      triggerPopout,
-      browserScroll,
-      menuItemStyles,
-      renderExpandIcon,
-      renderExpandedMenuItemIcon,
-      transitionDuration,
-      popoutMenuOffset,
-      textTruncate,
-      verticalMenuProps
-    }),
-    [
-      triggerPopout,
-      browserScroll,
-      menuItemStyles,
-      renderExpandIcon,
-      renderExpandedMenuItemIcon,
-      transitionDuration,
-      popoutMenuOffset,
-      textTruncate,
-      verticalMenuProps
-    ]
-  )
-
-  return (
-    <HorizontalMenuContext.Provider value={providerValue}>
-      <FloatingTree>
-        <StyledHorizontalMenu
-          ref={ref}
-          className={classnames(menuClasses.root, className)}
-          rootStyles={rootStyles}
-          {...rest}
-        >
-          <ul className={styles.root}>{children}</ul>
-        </StyledHorizontalMenu>
-      </FloatingTree>
-    </HorizontalMenuContext.Provider>
-  )
-}
-
-export default forwardRef(Menu)

package/src/@menu/components/horizontal-menu/MenuButton.jsx

@@ -1,100 +0,0 @@
-// React Imports
-import { cloneElement, createElement, forwardRef } from 'react'
-
-// Third-party Imports
-import classnames from 'classnames'
-import { css } from '@emotion/react'
-
-// Component Imports
-import { RouterLink } from '../RouterLink'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-export const menuButtonStyles = props => {
-  // Props
-  const { level, disabled, children } = props
-
-  return css({
-    display: 'flex',
-    alignItems: 'center',
-    minBlockSize: '30px',
-    textDecoration: 'none',
-    color: 'inherit',
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    paddingInline: '20px',
-    '&:hover': {
-      backgroundColor: '#f3f3f3'
-    },
-    '&:focus-visible': {
-      outline: 'none',
-      backgroundColor: '#f3f3f3'
-    },
-    ...(disabled && {
-      pointerEvents: 'none',
-      cursor: 'default',
-      color: '#adadad'
-    }),
-
-    // All the active styles are applied to the button including menu items or submenu
-    [`&.${menuClasses.active}`]: {
-      ...(level === 0
-        ? {
-            color: 'white',
-            backgroundColor: '#765feb'
-          }
-        : {
-            ...(children ? { backgroundColor: '#f3f3f3' } : { color: '#765feb', backgroundColor: '#765feb1f' })
-          })
-    }
-  })
-}
-
-const MenuButton = ({ className, component, children, ...rest }, ref) => {
-  if (component) {
-    // If component is a string, create a new element of that type
-    if (typeof component === 'string') {
-      return createElement(
-        component,
-        {
-          className: classnames(className),
-          ...rest,
-          ref
-        },
-        children
-      )
-    } else {
-      // Otherwise, clone the element
-      const { className: classNameProp, ...props } = component.props
-
-      return cloneElement(
-        component,
-        {
-          className: classnames(className, classNameProp),
-          ...rest,
-          ...props,
-          ref
-        },
-        children
-      )
-    }
-  } else {
-    // If there is no component but href is defined, render RouterLink
-    if (rest.href) {
-      return (
-        <RouterLink ref={ref} className={className} href={rest.href} {...rest}>
-          {children}
-        </RouterLink>
-      )
-    } else {
-      return (
-        <a ref={ref} className={className} {...rest}>
-          {children}
-        </a>
-      )
-    }
-  }
-}
-
-export default forwardRef(MenuButton)