@platformatic/ui-components 0.1.141 → 0.1.143

package/src/components/icons/CircleArrowLeftIcon.jsx

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

package/src/components/icons/CircleArrowRightIcon.jsx

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

package/src/components/icons/CircleCheckMarkButtonIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const CircleCheckMarkButtonIcon = ({ color, size, disabled }) => {
+const CircleCheckMarkButtonIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -47,7 +50,8 @@ CircleCheckMarkButtonIcon.propTypes = {
 CircleCheckMarkButtonIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleCheckMarkButtonIcon

package/src/components/icons/CircleCheckMarkFullIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const CircleCheckMarkFullIcon = ({ color, size, disabled }) => {
+const CircleCheckMarkFullIcon = ({ color, size, disabled, inactive }) => {
   let className = styles.svgClassName
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -46,12 +49,17 @@ CircleCheckMarkFullIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleCheckMarkFullIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleCheckMarkFullIcon

package/src/components/icons/CircleCheckMarkIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleCheckMarkIcon = ({ color, size, checked, disabled }) => {
+const CircleCheckMarkIcon = ({ color, size, checked, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -75,7 +78,11 @@ CircleCheckMarkIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleCheckMarkIcon.defaultProps = {
   color: MAIN_DARK_BLUE,

package/src/components/icons/CircleCloseHoverIcon.jsx

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

package/src/components/icons/CircleCloseIcon.jsx

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

package/src/components/icons/CircleCopyPasteIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE, MEDIUM } from '../constants'
 
-const CircleCopyPasteIcon = ({ color, size, disabled }) => {
+const CircleCopyPasteIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -65,12 +68,17 @@ CircleCopyPasteIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleCopyPasteIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: SMALL,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleCopyPasteIcon

package/src/components/icons/CircleDownloadIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const CircleDownloadIcon = ({ color, size, disabled }) => {
+const CircleDownloadIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -47,12 +50,17 @@ CircleDownloadIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleDownloadIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleDownloadIcon

package/src/components/icons/CircleEditIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE, MEDIUM } from '../constants'
 
-const CircleEditIcon = ({ color, size, disabled }) => {
+const CircleEditIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -67,12 +70,17 @@ CircleEditIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleEditIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: SMALL,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleEditIcon

package/src/components/icons/CircleExclamationIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleExclamationIcon = ({ color, size, tip, disabled }) => {
+const CircleExclamationIcon = ({ color, size, tip, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 

package/src/components/icons/CircleFullIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, EXTRA_SMALL, LARGE, MEDIUM, SIZES, SMALL, MAIN_DARK_BLUE } from '../constants'
 
-const CircleFullIcon = ({ color, size, disabled }) => {
+const CircleFullIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -87,12 +90,17 @@ CircleFullIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleFullIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleFullIcon

package/src/components/icons/CircleGearIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleGearIcon = ({ color, size, disabled }) => {
+const CircleGearIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -80,12 +83,17 @@ CircleGearIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleGearIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleGearIcon

package/src/components/icons/CircleRestartIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE, MEDIUM } from '../constants'
 
-const CircleRestartIcon = ({ color, size, disabled }) => {
+const CircleRestartIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -65,12 +68,17 @@ CircleRestartIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleRestartIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: SMALL,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleRestartIcon

package/src/components/icons/CircleSubtractIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleSubtractIcon = ({ color, size, disabled }) => {
+const CircleSubtractIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -75,12 +78,17 @@ CircleSubtractIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CircleSubtractIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CircleSubtractIcon

package/src/components/icons/CircleTwoArrowsDownIcon.jsx

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

package/src/components/icons/CircleTwoArrowsUpIcon.jsx

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

package/src/components/icons/CloseIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CloseIcon = ({ color, size, disabled }) => {
+const CloseIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -76,12 +79,17 @@ CloseIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CloseIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CloseIcon

package/src/components/icons/CloudIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CloudIcon = ({ color, size, disabled }) => {
+const CloudIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -73,12 +76,17 @@ CloudIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 CloudIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default CloudIcon

package/src/components/icons/ComputerIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const ComputerIcon = ({ color, size, disabled }) => {
+const ComputerIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -78,12 +81,17 @@ ComputerIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 ComputerIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default ComputerIcon