@platformatic/ui-components 0.1.142 → 0.1.143

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

package/src/components/icons/AppEmptyIcon.jsx

@@ -3,11 +3,14 @@ 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 }) => {
+const AppEmptyIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -49,12 +52,17 @@ AppEmptyIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 AppEmptyIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default AppEmptyIcon

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

package/src/components/icons/AppListIcon.jsx

@@ -3,11 +3,14 @@ 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 }) => {
+const AppListIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -100,12 +103,17 @@ AppListIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 AppListIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default AppListIcon

package/src/components/icons/ApplicationTypeIcon.jsx

@@ -3,11 +3,14 @@ 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 }) => {
+const ApplicationTypeIcon = ({ 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 @@ ApplicationTypeIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 ApplicationTypeIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: LARGE,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default ApplicationTypeIcon

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

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

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

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

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

package/src/components/icons/ArrowRightIcon.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 ArrowRightIcon = ({ color, size, disabled }) => {
+const ArrowRightIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -72,12 +75,17 @@ ArrowRightIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 ArrowRightIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default ArrowRightIcon

package/src/components/icons/ArrowUpIcon.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 ArrowUpIcon = ({ color, size, disabled }) => {
+const ArrowUpIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -72,12 +75,17 @@ ArrowUpIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 ArrowUpIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default ArrowUpIcon

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

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

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

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

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

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

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