@platformatic/ui-components 0.4.0 → 0.5.0

package/src/components/icons/StackablesPluginIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const StackablesPluginIcon = ({ color, size, disabled, inactive }) => {
+const StackablesPluginIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   const filledClassName = styles[`filled-${color}`]
   if (disabled) {
@@ -133,11 +138,5 @@ StackablesPluginIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-StackablesPluginIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default StackablesPluginIcon

package/src/components/icons/StackablesTemplateIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const StackablesTemplateIcon = ({ color, size, disabled, inactive }) => {
+const StackablesTemplateIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -131,11 +136,5 @@ StackablesTemplateIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-StackablesTemplateIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default StackablesTemplateIcon

package/src/components/icons/StopIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const StopIcon = ({ color, size, disabled, inactive }) => {
+const StopIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -84,11 +89,5 @@ StopIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-StopIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default StopIcon

package/src/components/icons/StoppedAppIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const StoppedAppIcon = ({ color, size, disabled, inactive }) => {
+const StoppedAppIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -91,11 +96,5 @@ StoppedAppIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-StoppedAppIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default StoppedAppIcon

package/src/components/icons/SwitchIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SwitchIcon = ({ color, size, disabled, inactive }) => {
+const SwitchIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -86,11 +91,5 @@ SwitchIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-SwitchIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default SwitchIcon

package/src/components/icons/TeamsIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const TeamsIcon = ({ color, size, disabled, inactive }) => {
+const TeamsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -96,11 +101,5 @@ TeamsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-TeamsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default TeamsIcon

package/src/components/icons/TerminalIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const TerminalIcon = ({ color, size, disabled, inactive }) => {
+const TerminalIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -88,11 +93,5 @@ TerminalIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-TerminalIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default TerminalIcon

package/src/components/icons/TrashIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const TrashIcon = ({ color, size, disabled, inactive }) => {
+const TrashIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -93,11 +98,4 @@ TrashIcon.propTypes = {
   inactive: PropTypes.bool
 }
 
-TrashIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
-
 export default TrashIcon

package/src/components/icons/TwoUsersIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const TwoUsersIcon = ({ color, size, disabled, inactive }) => {
+const TwoUsersIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -90,11 +95,5 @@ TwoUsersIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-TwoUsersIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default TwoUsersIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const UpgradeIcon = ({ color, size, disabled, inactive }) => {
+const UpgradeIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -123,11 +128,5 @@ UpgradeIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-UpgradeIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default UpgradeIcon

package/src/components/icons/UserComputerIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const UserComputerIcon = ({ color, size, disabled, inactive }) => {
+const UserComputerIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -96,11 +101,5 @@ UserComputerIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-UserComputerIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default UserComputerIcon

package/src/components/icons/UserIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const UserIcon = ({ color, size, disabled, inactive }) => {
+const UserIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -85,11 +90,5 @@ UserIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-UserIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default UserIcon

package/src/components/icons/UserRemoveIcon.jsx

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const UserRemoveIcon = ({ color, size, tip, disabled, inactive }) => {
+const UserRemoveIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  tip = '',
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -94,10 +100,4 @@ UserRemoveIcon.propTypes = {
   tip: PropTypes.string
 }
 
-UserRemoveIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  tip: ''
-}
-
 export default UserRemoveIcon

package/src/components/icons/UserRoleIcon.jsx

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const UserRoleIcon = ({ color, size, tip, disabled, inactive }) => {
+const UserRoleIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  tip = '',
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -93,10 +99,4 @@ UserRoleIcon.propTypes = {
   tip: PropTypes.string
 }
 
-UserRoleIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  tip: ''
-}
-
 export default UserRoleIcon

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceDynamicIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceDynamicIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -93,11 +98,5 @@ WorkspaceDynamicIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceDynamicIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceDynamicIcon

package/src/components/icons/WorkspaceEmptyIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceEmptyIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceEmptyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -60,11 +65,5 @@ WorkspaceEmptyIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceEmptyIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceEmptyIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceFailIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceFailIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -118,11 +123,5 @@ WorkspaceFailIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceFailIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceFailIcon

package/src/components/icons/WorkspaceGitHubIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceGitHubIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceGitHubIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -137,11 +142,5 @@ WorkspaceGitHubIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceGitHubIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceGitHubIcon

package/src/components/icons/WorkspaceLoadingIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, EXTRA_LARGE, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceLoadingIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceLoadingIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -62,11 +67,5 @@ WorkspaceLoadingIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceLoadingIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceLoadingIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceReadyIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceReadyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -150,11 +155,5 @@ WorkspaceReadyIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceReadyIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceStaticIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceStaticIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -90,11 +95,5 @@ WorkspaceStaticIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceStaticIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceStaticIcon

package/src/components/layouts/Layout.jsx

@@ -2,7 +2,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-function Layout ({ className, children }) {
+function Layout ({
+  className = 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
+  children = null
+}) {
   return (
     <div className={className}>
       {children}
@@ -22,9 +25,4 @@ Layout.propTypes = {
   children: PropTypes.node
 }
 
-Layout.defaultProps = {
-  className: 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
-  children: null
-}
-
 export default Layout

package/src/components/logos/AdvancedLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function AdvancedLogo ({ backgroundColor, width, height }) {
+function AdvancedLogo ({
+  backgroundColor = WHITE,
+  width = 539,
+  height = 182
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 539 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M186.81 64.7676H502.742C522.767 64.7676 539 81.0007 539 101.025V101.025C539 121.05 522.767 137.283 502.742 137.283H186.81L213.978 122.78L222.859 96.8815L207.708 75.1269L186.81 64.7676Z' fill='#00283D' />
@@ -50,10 +54,4 @@ AdvancedLogo.propTypes = {
   height: PropTypes.number
 }
 
-AdvancedLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 539,
-  height: 182
-}
-
 export default AdvancedLogo

package/src/components/logos/BasicLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function BasicLogo ({ backgroundColor, width, height }) {
+function BasicLogo ({
+  backgroundColor = WHITE,
+  width = 423,
+  height = 182
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 423 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M187.436 64.9733H385.39C405.484 64.9733 421.773 81.2622 421.773 101.356V101.356C421.773 121.449 405.484 137.738 385.39 137.738H187.436L214.697 123.185L223.609 97.1977L208.406 75.3682L187.436 64.9733Z' fill='#00283D' />
@@ -53,10 +57,4 @@ BasicLogo.propTypes = {
   height: PropTypes.number
 }
 
-BasicLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 423,
-  height: 182
-}
-
 export default BasicLogo

package/src/components/logos/FreeLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function FreeLogo ({ backgroundColor, width, height }) {
+function FreeLogo ({
+  backgroundColor = WHITE,
+  width = 399,
+  height = 183
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 399 183' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M187.725 65.0947H354.562C374.696 65.0947 391.018 81.4167 391.018 101.551V101.551C391.018 121.685 374.696 138.007 354.562 138.007H187.725L215.041 123.424L223.971 97.3844L208.737 75.5107L187.725 65.0947Z' fill='#00283D' />
@@ -51,10 +55,4 @@ FreeLogo.propTypes = {
   height: PropTypes.number
 }
 
-FreeLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 399,
-  height: 183
-}
-
 export default FreeLogo

package/src/components/logos/ProLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function ProLogo ({ backgroundColor, width, height }) {
+function ProLogo ({
+  backgroundColor = WHITE,
+  width = 370,
+  height = 182
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 370 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M187.437 64.9734H332.966C353.06 64.9734 369.349 81.2623 369.349 101.356V101.356C369.349 121.449 353.06 137.738 332.966 137.738H187.437L214.697 123.185L223.609 97.1978L208.406 75.3684L187.437 64.9734Z' fill='#00283D' />
@@ -51,10 +55,4 @@ ProLogo.propTypes = {
   height: PropTypes.number
 }
 
-ProLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 370,
-  height: 182
-}
-
 export default ProLogo

package/vitest.config.js

@@ -8,7 +8,8 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'happy-dom',
-    exclude: ['node_modules']
+    exclude: ['node_modules'],
+    setupFiles: ['./setupTests.js']
   }
 
 })