@platformatic/ui-components 0.4.0 → 0.5.0

package/src/components/TabbedWindow.module.css

@@ -1,4 +1,4 @@
-.tabbed-container {
+.tabContainerClassName {
   @apply bg-main-dark-blue;
 }
 .tabs-header {
@@ -8,10 +8,10 @@
   @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 hover:font-semibold;  
 }
 .selected-tab {
-  @apply underline text-main-green underline-offset-8 font-semibold;
+  @apply underline underline-offset-8 font-semibold;
 }
-.tabs-content {
-  @apply min-h-screen
+.tabContentClassName {
+  @apply max-h-[calc(100vH-10rem)] overflow-y-auto
 }
 .tab::before {
   display: block;

package/src/components/Tag.jsx

@@ -5,7 +5,15 @@ import commonStyles from './Common.module.css'
 import styles from './Tag.module.css'
 import { COLORS_BUTTON, OPACITY_100, OPACITY_20, OPACITY_30, OPACITY_60, WHITE } from './constants'
 
-function Tag ({ text, textClassName, color, backgroundColor, bordered, opaque, fullRounded }) {
+function Tag ({
+  text = '',
+  textClassName = '',
+  color = WHITE,
+  backgroundColor = '',
+  bordered = true,
+  opaque = OPACITY_100,
+  fullRounded = false
+}) {
   const stylesColor = textClassName || commonStyles[`text--${color}`]
   let stylesBorderColor = ''
   if (bordered) {
@@ -56,14 +64,4 @@ Tag.propTypes = {
 
 }
 
-Tag.defaultProps = {
-  backgroundColor: '',
-  color: WHITE,
-  text: '',
-  textClassName: '',
-  bordered: true,
-  opaque: OPACITY_100,
-  fullRounded: false
-}
-
 export default Tag

package/src/components/VerticalSeparator.jsx

@@ -5,7 +5,11 @@ import { DARK_GREEN, MAIN_DARK_BLUE, OPACITY_10, OPACITY_20, OPACITY_30, OPACITY
 import commonStyles from './Common.module.css'
 import styles from './VerticalSeparator.module.css'
 
-function VerticalSeparator ({ color, backgroundColorOpacity, classes }) {
+function VerticalSeparator ({
+  color = DARK_GREEN,
+  backgroundColorOpacity = OPACITY_100,
+  classes = ''
+}) {
   const backgroundColor = commonStyles[`background-color-${color}`]
   const backgroundOpacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
   const className = `${backgroundColor} ${backgroundOpacity} ${styles.fullHeight} ${classes}`
@@ -33,9 +37,7 @@ VerticalSeparator.propTypes = {
 }
 
 VerticalSeparator.defaultProps = {
-  color: DARK_GREEN,
-  backgroundColorOpacity: 100,
-  classes: ''
+
 }
 
 export default VerticalSeparator

package/src/components/icons/APIDocsIcon.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 APIDocsIcon = ({ color, size, disabled, inactive }) => {
+const APIDocsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -104,11 +109,5 @@ APIDocsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-APIDocsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default APIDocsIcon

package/src/components/icons/AddIcon.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 AddIcon = ({ color, size, disabled, inactive }) => {
+const AddIcon = ({
+  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 @@ AddIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AddIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AddIcon

package/src/components/icons/AlertIcon.jsx

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

package/src/components/icons/AllAppsIcon.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 AllAppsIcon = ({ color, size, disabled, inactive }) => {
+const AllAppsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -100,11 +105,5 @@ AllAppsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AllAppsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AllAppsIcon

package/src/components/icons/AllInOneIcon.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 AllInOneIcon = ({ color, size, disabled, inactive }) => {
+const AllInOneIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -117,11 +122,5 @@ AllInOneIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AllInOneIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AllInOneIcon

package/src/components/icons/ApiCloudIcon.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 ApiCloudIcon = ({ color, size, disabled, inactive }) => {
+const ApiCloudIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -99,11 +104,5 @@ ApiCloudIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiCloudIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiCloudIcon

package/src/components/icons/ApiEmptyIcon.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 ApiEmptyIcon = ({ color, size, disabled, inactive }) => {
+const ApiEmptyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -147,11 +152,5 @@ ApiEmptyIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiEmptyIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiEmptyIcon

package/src/components/icons/ApiIcon.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 ApiIcon = ({ color, size, disabled, inactive }) => {
+const ApiIcon = ({
+  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 @@ ApiIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiIcon

package/src/components/icons/ApiIconClosed.jsx

@@ -1,13 +1,21 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, MAIN_DARK_BLUE, MEDIUM, SIZES } from '../constants'
 
-const ApiIconClosed = ({ color, size, disabled }) => {
+const ApiIconClosed = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -51,9 +59,5 @@ ApiIconClosed.propTypes = {
    */
   disabled: PropTypes.bool
 }
-ApiIconClosed.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
-}
 
 export default ApiIconClosed

package/src/components/icons/ApiPerformanceIcon.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 ApiPerformanceIcon = ({ color, size, disabled, inactive }) => {
+const ApiPerformanceIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -105,11 +110,5 @@ ApiPerformanceIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiPerformanceIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiPerformanceIcon

package/src/components/icons/AppConfigurationIcon.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 AppConfigurationIcon = ({ color, size, disabled, inactive }) => {
+const AppConfigurationIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -108,11 +113,5 @@ AppConfigurationIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppConfigurationIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppConfigurationIcon

package/src/components/icons/AppDetailsIcon.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 AppDetailsIcon = ({ color, size, disabled, inactive }) => {
+const AppDetailsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -89,11 +94,5 @@ AppDetailsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppDetailsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppDetailsIcon

package/src/components/icons/AppEditIcon.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 AppEditIcon = ({ color, size, disabled, inactive }) => {
+const AppEditIcon = ({
+  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 @@ AppEditIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppEditIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppEditIcon

package/src/components/icons/AppEmptyIcon.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 AppEmptyIcon = ({ color, size, disabled, inactive }) => {
+const AppEmptyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -58,11 +63,5 @@ AppEmptyIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppEmptyIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppEmptyIcon

package/src/components/icons/AppIcon.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 AppIcon = ({ color, size, disabled, inactive }) => {
+const AppIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -82,11 +87,5 @@ AppIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppIcon

package/src/components/icons/AppListIcon.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 AppListIcon = ({ color, size, disabled, inactive }) => {
+const AppListIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -109,11 +114,5 @@ AppListIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppListIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppListIcon

package/src/components/icons/AppSettingsIcon.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 AppSettingsIcon = ({ color, size, disabled, inactive }) => {
+const AppSettingsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -87,11 +92,5 @@ AppSettingsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppSettingsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppSettingsIcon

package/src/components/icons/AppWorkspace.jsx

@@ -1,13 +1,21 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, LARGE, MEDIUM, SIZES, SMALL } from '../constants'
+import { COLORS_ICON, LARGE, MAIN_DARK_BLUE, MEDIUM, SIZES, SMALL } from '../constants'
 
-const AppWorkspace = ({ color, size, disabled }) => {
+const AppWorkspace = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -89,9 +97,4 @@ AppWorkspace.propTypes = {
   size: PropTypes.oneOf(SIZES)
 }
 
-AppWorkspace.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
-}
-
 export default AppWorkspace

package/src/components/icons/ApplicationTypeIcon.jsx

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

package/src/components/icons/ArrowDownFullIcon.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 ArrowDownFullIcon = ({ color, size, disabled, inactive }) => {
+const ArrowDownFullIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -82,11 +87,5 @@ ArrowDownFullIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowDownFullIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowDownFullIcon

package/src/components/icons/ArrowDownIcon.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 ArrowDownIcon = ({ color, size, disabled, inactive }) => {
+const ArrowDownIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -81,11 +86,5 @@ ArrowDownIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowDownIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowDownIcon

package/src/components/icons/ArrowLeftIcon.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 ArrowLeftIcon = ({ color, size, disabled, inactive }) => {
+const ArrowLeftIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -81,11 +86,5 @@ ArrowLeftIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowLeftIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowLeftIcon