npm - @platformatic/ui-components - Versions diffs - 0.2.16 → 0.2.19 - Mend

@platformatic/ui-components 0.2.16 → 0.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/assets/{index-C7qZkR7V.js → index-DBEXX1ja.js} +1 -1
package/dist/index.html +1 -1
package/package.json +1 -1
package/src/components/LoginButton.jsx +1 -1
package/src/components/TooltipV2.jsx +0 -1
package/src/components/forms/Select.jsx +7 -58
package/src/components/forms/Select.module.css +5 -2
package/src/components/forms/SelectWithInput.jsx +327 -0
package/src/components/forms/SelectWithInput.module.css +40 -0
package/src/components/forms/index.js +2 -0
package/src/components/icons/ServiceIcon.jsx +13 -14
package/src/stories/forms/Select.stories.jsx +3 -16
package/src/stories/forms/SelectWithInput.stories.jsx +176 -0

package/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Platformatic UI Components</title>
-    <script type="module" crossorigin src="/assets/index-C7qZkR7V.js"></script>
+    <script type="module" crossorigin src="/assets/index-DBEXX1ja.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.2.16",
+  "version": "0.2.19",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/LoginButton.jsx CHANGED Viewed

@@ -3,6 +3,6 @@ import Button from './Button'
 export default function LoginButton ({ iconName, label, onClick, ...props }) {
   return (
-    <Button backgroundColor='main-green' alt={label} label={label} platformaticIcon={{ iconName, size: 'medium', color: 'main-dark-blue' }} data-testid='login-button' size='extra-large' onClick={onClick} {...props} bold />
+    <Button backgroundColor='main-green' alt={label} label={label} platformaticIcon={{ iconName, size: 'medium', color: 'main-dark-blue' }} data-testid='login-button' size='extra-large' onClick={onClick} {...props} />
   )
 }

package/src/components/TooltipV2.jsx CHANGED Viewed

@@ -13,7 +13,6 @@ function TooltipV2 ({ tooltipClassName, text, visible, alignment, elementClassNa
     if (visible) {
       setClassName(visibleClassName())
       if (ref.current) {
-        console.log('elementClassName', elementClassName)
         const referenceBoundingClientRect = document.getElementsByClassName(elementClassName)[0]?.getBoundingClientRect()
         if (referenceBoundingClientRect) {
           const topPosition = referenceBoundingClientRect.y - (referenceBoundingClientRect.height)

package/src/components/forms/Select.jsx CHANGED Viewed

@@ -17,12 +17,9 @@ function Select ({
   borderColor,
   borderListColor,
   errorMessage,
-  onChange,
   onSelect,
-  onClear,
   disabled,
   mainColor,
-  optionSelected,
   dataAttrName,
   dataAttrValue,
   backgroundColor,
@@ -30,6 +27,7 @@ function Select ({
 }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
+  // eslint-disable-next-line  no-unused-vars
   const [isSelected, setIsSelected] = useState(false)
   const [isOnFocus, setIsOnFocus] = useState(false)
@@ -41,6 +39,7 @@ function Select ({
   let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
   inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
   optionsClassName += commonStyles[`background-color-${backgroundColor}`]
+  const optionSelectedClassName = styles.optionSelected
   if (borderListColor) {
     optionsClassName += ' ' + styles['bordered-options']
@@ -94,20 +93,11 @@ function Select ({
   }
   useEffect(() => {
-    if (value.length > 0 && !showOptions && !isSelected) {
-      setShowOptions(true)
-    }
     if (value.length === 0) {
       setIsSelected(false)
     }
   }, [value])
-  useEffect(() => {
-    if (optionSelected) {
-      setSelected(optionSelected)
-    }
-  }, [optionSelected])
   useEffect(() => {
     if (disabled) {
       const className = normalClassName() + ' ' + commonStyles['apply-opacity-30']
@@ -117,10 +107,10 @@ function Select ({
     }
   }, [disabled])
-  function renderLi (option, index) {
+  function renderLi (option, index, isOptionSelected) {
     return (
       <li
-        key={index} className={singleOptionClassName} onClick={() => {
+        key={index} className={`${isOptionSelected ? optionSelectedClassName : singleOptionClassName}`} onClick={() => {
           if (option.notSelectable) {
             return handleNotSelectable(option.onClick && option.onClick())
           }
@@ -137,34 +127,15 @@ function Select ({
   }
   function renderOptions () {
-    if (value.length === 0) {
-      return (
-        <ul className={optionsClassName}>
-          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
-        </ul>
-      )
-    }
     const notFilterableOptions = options.filter(option => option.notFilterable)
-    const filteredOptions = options.filter(option => !option.notFilterable).filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
     return (
       <ul className={optionsClassName}>
-        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
         {notFilterableOptions.length > 0 && notFilterableOptions.map((option, index) => renderLi(option, index))}
+        {options.length > 0 ? options.map((option, index) => renderLi(option, index, option.label === value)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
       </ul>
     )
   }
-  // https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
-  function clearValue () {
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set
-    nativeInputValueSetter.call(inputRef.current, '')
-    const ev2 = new Event('input', { bubbles: true })
-    ev2.simulated = true
-    inputRef.current.dispatchEvent(ev2)
-    onClear()
-  }
   function handleFocus () {
     if (!isOnFocus) {
       setIsOnFocus(true)
@@ -177,7 +148,7 @@ function Select ({
     event.preventDefault()
     setTimeout(() => {
       if (showOptions) {
-        setShowOptions(false)
+        // setShowOptions(false)
         setIsOnFocus(false)
         setWrapperClassName(normalClassName())
       }
@@ -187,9 +158,8 @@ function Select ({
   return (
     <div className={containerClassName} {...dataProps}>
       <div className={styles.selectContainer}>
-        <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
+        <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} readOnly />
         <div className={styles.icons}>
-          {value?.length > 0 && !disabled && <PlatformaticIcon iconName='CircleCloseIcon' color={borderColor} onClick={() => clearValue()} size={SMALL} />}
           <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} disabled={disabled} onClick={() => setShowOptions(!showOptions)} size={SMALL} />
         </div>
       </div>
@@ -252,18 +222,10 @@ Select.propTypes = {
    * color of border UL
    */
   borderListColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
-  /**
-   * onChange
-   */
-  onChange: PropTypes.func,
   /**
    * onSelect
    */
   onSelect: PropTypes.func,
-  /**
-   * onClear
-   */
-  onClear: PropTypes.func,
   /**
    * Disabled
    */
@@ -272,16 +234,6 @@ Select.propTypes = {
    * mainColor
    */
   mainColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
-  /**
-   * optionSelected
-   */
-  optionSelected: PropTypes.shape({
-    label: PropTypes.string,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ])
-  }),
   /**
    * dataAttrName
   */
@@ -312,12 +264,9 @@ Select.defaultProps = {
   borderColor: MAIN_GREEN,
   borderListColor: '',
   errorMessage: '',
-  onChange: () => {},
   onSelect: () => {},
-  onClear: () => {},
   disabled: false,
   mainColor: MAIN_DARK_BLUE,
-  optionSelected: null,
   dataAttrName: '',
   dataAttrValue: '',
   backgroundColor: WHITE,

package/src/components/forms/Select.module.css CHANGED Viewed

@@ -17,7 +17,7 @@
   @apply outline-none;
 }
 .options {
-  @apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-scroll z-20;
+  @apply absolute left-0 top-[42px] w-[calc(100%-1rem)] max-h-[216px] overflow-y-auto z-20 p-2;
 }
 .bordered-options {
   @apply border border-solid rounded
@@ -25,6 +25,9 @@
 .option {
   @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
 }
+.optionSelected {
+  @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 bg-white/15;
+}
 .bordered-bottom {
   @apply border-b
 }
@@ -33,7 +36,7 @@
   transform: translateY(-50%);
 }
 .liContent {
-  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
+  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-full;
 }
 .descriptionValue {
   @apply opacity-70

package/src/components/forms/SelectWithInput.jsx ADDED Viewed

@@ -0,0 +1,327 @@
+'use strict'
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import styles from './SelectWithInput.module.css'
+import commonStyles from '../Common.module.css'
+import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, SMALL, WHITE } from '../constants'
+import PlatformaticIcon from '../PlatformaticIcon'
+function SelectWithInput ({
+  defaultContainerClassName,
+  placeholder,
+  name,
+  value,
+  options,
+  defaultOptionsClassName,
+  optionsBorderedBottom,
+  borderColor,
+  borderListColor,
+  errorMessage,
+  onChange,
+  onSelect,
+  onClear,
+  disabled,
+  mainColor,
+  optionSelected,
+  dataAttrName,
+  dataAttrValue,
+  backgroundColor,
+  inputTextClassName
+}) {
+  const inputRef = useRef()
+  const [showOptions, setShowOptions] = useState(false)
+  const [isSelected, setIsSelected] = useState(false)
+  const [isOnFocus, setIsOnFocus] = useState(false)
+  const showError = errorMessage.length > 0
+  const containerClassName = `${styles.container} ${defaultContainerClassName} `
+  let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
+  inputClassName += ' ' + styles[`select-${mainColor}`]
+  inputClassName += ' ' + commonStyles[`text--${borderColor}`]
+  let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
+  inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
+  optionsClassName += commonStyles[`background-color-${backgroundColor}`]
+  if (borderListColor) {
+    optionsClassName += ' ' + styles['bordered-options']
+    optionsClassName += ' ' + commonStyles[`bordered--${borderListColor}-30`]
+  }
+  let singleOptionClassName = `${styles.option} ` + commonStyles[`bordered--${mainColor}-70`] + ' ' + commonStyles[`hover-background-color-opaque-${mainColor}`]
+  if (optionsBorderedBottom) {
+    singleOptionClassName += ` ${styles['bordered-bottom']}`
+  }
+  const optionSpanClassName = commonStyles[`text--${mainColor}`]
+  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+  function onFocusClassName () {
+    return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-100`]
+  }
+  function normalClassName () {
+    const baseClassName = inputClassName
+    if (showError) {
+      inputClassName += ' ' + commonStyles['bordered--error-red']
+    } else {
+      inputClassName += ' ' + commonStyles[`bordered--${borderColor}-70`]
+    }
+    if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
+    return baseClassName
+  }
+  const dataProps = {}
+  if (dataAttrName && dataAttrValue) {
+    dataProps[`data-${dataAttrName}`] = dataAttrValue
+  }
+  function handleNotSelectable (callback = () => {}) {
+    setIsSelected(true)
+    setShowOptions(false)
+    callback()
+  }
+  function setSelected ({ label, value }) {
+    setIsSelected(true)
+    setShowOptions(false)
+    /* eslint-disable-next-line no-undef */
+    onSelect(new CustomEvent('valueSelected', {
+      detail: {
+        name,
+        label,
+        value
+      }
+    }))
+  }
+  useEffect(() => {
+    if (value.length > 0 && !showOptions && !isSelected) {
+      setShowOptions(true)
+    }
+    if (value.length === 0) {
+      setIsSelected(false)
+    }
+  }, [value])
+  useEffect(() => {
+    if (optionSelected) {
+      setSelected(optionSelected)
+    }
+  }, [optionSelected])
+  useEffect(() => {
+    if (disabled) {
+      const className = normalClassName() + ' ' + commonStyles['apply-opacity-30']
+      setWrapperClassName(className)
+    } else {
+      setWrapperClassName(normalClassName())
+    }
+  }, [disabled])
+  function renderLi (option, index) {
+    return (
+      <li
+        key={index} className={singleOptionClassName} onClick={() => {
+          if (option.notSelectable) {
+            return handleNotSelectable(option.onClick && option.onClick())
+          }
+          return setSelected(option)
+        }}
+      >
+        <div className={styles.liContent}>
+          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={option.iconColor || mainColor} size={option.iconSize ?? SMALL} onClick={null} />}
+          <span className={optionSpanClassName}>{option.label}</span>
+        </div>
+        {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
+      </li>
+    )
+  }
+  function renderOptions () {
+    if (value.length === 0) {
+      return (
+        <ul className={optionsClassName}>
+          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
+        </ul>
+      )
+    }
+    const notFilterableOptions = options.filter(option => option.notFilterable)
+    const filteredOptions = options.filter(option => !option.notFilterable).filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
+    return (
+      <ul className={optionsClassName}>
+        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
+        {notFilterableOptions.length > 0 && notFilterableOptions.map((option, index) => renderLi(option, index))}
+      </ul>
+    )
+  }
+  // https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
+  function clearValue () {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set
+    nativeInputValueSetter.call(inputRef.current, '')
+    const ev2 = new Event('input', { bubbles: true })
+    ev2.simulated = true
+    inputRef.current.dispatchEvent(ev2)
+    onClear()
+  }
+  function handleFocus () {
+    if (!isOnFocus) {
+      setIsOnFocus(true)
+      setWrapperClassName(onFocusClassName())
+    }
+    setShowOptions(true)
+  }
+  function handleBlur (event) {
+    event.preventDefault()
+    setTimeout(() => {
+      if (showOptions) {
+        setShowOptions(false)
+        setIsOnFocus(false)
+        setWrapperClassName(normalClassName())
+      }
+    }, 250)
+  }
+  return (
+    <div className={containerClassName} {...dataProps}>
+      <div className={styles.selectContainer}>
+        <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
+        <div className={styles.icons}>
+          {value?.length > 0 && !disabled && <PlatformaticIcon iconName='CircleCloseIcon' color={borderColor} onClick={() => clearValue()} size={SMALL} />}
+          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} disabled={disabled} onClick={() => setShowOptions(!showOptions)} size={SMALL} />
+        </div>
+      </div>
+      {showOptions && !showError && renderOptions()}
+      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </div>
+  )
+}
+SelectWithInput.propTypes = {
+  /**
+   * defaultContainerClassName
+   */
+  defaultContainerClassName: PropTypes.string,
+  /**
+   * placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * name
+   */
+  name: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  /**
+   * value
+   */
+  value: PropTypes.string,
+  /**
+   * options
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    iconName: PropTypes.string,
+    iconSize: PropTypes.string,
+    iconColor: PropTypes.string,
+    notSelectable: PropTypes.bool,
+    notFilterable: PropTypes.bool,
+    onClick: PropTypes.func,
+    descriptionValue: PropTypes.string
+  })),
+  /**
+   * defaultOptionsClassName
+   */
+  defaultOptionsClassName: PropTypes.string,
+  /**
+   * optionsBorderedBottom
+   */
+  optionsBorderedBottom: PropTypes.bool,
+  /**
+   * color of border
+   */
+  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
+  /**
+   * color of border UL
+   */
+  borderListColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
+  /**
+   * onChange
+   */
+  onChange: PropTypes.func,
+  /**
+   * onSelect
+   */
+  onSelect: PropTypes.func,
+  /**
+   * onClear
+   */
+  onClear: PropTypes.func,
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * mainColor
+   */
+  mainColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
+  /**
+   * optionSelected
+   */
+  optionSelected: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ])
+  }),
+  /**
+   * dataAttrName
+  */
+  dataAttrName: PropTypes.string,
+  /**
+   * dataAttrValue
+  */
+  dataAttrValue: PropTypes.string,
+  /**
+   * backgroundColor
+  */
+  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
+  /**
+   * inputTextClassName
+  */
+  inputTextClassName: PropTypes.string
+}
+SelectWithInput.defaultProps = {
+  defaultContainerClassName: '',
+  placeholder: 'this is the default',
+  name: '',
+  value: '',
+  id: '',
+  options: [],
+  defaultOptionsClassName: '',
+  optionsBorderedBottom: true,
+  borderColor: MAIN_GREEN,
+  borderListColor: '',
+  errorMessage: '',
+  onChange: () => {},
+  onSelect: () => {},
+  onClear: () => {},
+  disabled: false,
+  mainColor: MAIN_DARK_BLUE,
+  optionSelected: null,
+  dataAttrName: '',
+  dataAttrValue: '',
+  backgroundColor: WHITE,
+  inputTextClassName: ''
+}
+export default SelectWithInput

package/src/components/forms/SelectWithInput.module.css ADDED Viewed

@@ -0,0 +1,40 @@
+.container {
+  @apply flex flex-col w-full relative
+}
+.selectContainer {
+  @apply w-full flex items-center relative z-10;
+}
+.select {
+  @apply py-1.5 px-2 md:px-3 md:py-[10.5px] h-full border border-solid box-border rounded;
+}
+.select-main-dark-blue.active,
+.select-main-dark-blue:focus {
+  @apply shadow-main-dark-blue outline-none;
+}
+.select-white.active,
+.select-white:focus {
+  @apply outline-none;
+}
+.options {
+  @apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-scroll z-20;
+}
+.bordered-options {
+  @apply border border-solid rounded
+}
+.option {
+  @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
+}
+.bordered-bottom {
+  @apply border-b
+}
+.icons {
+  @apply absolute top-[50%] right-[0.5rem] flex gap-x-2;
+  transform: translateY(-50%);
+}
+.liContent {
+  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
+}
+.descriptionValue {
+  @apply opacity-70
+}

package/src/components/forms/index.js CHANGED Viewed

@@ -5,6 +5,7 @@ import Password from './Password'
 import Preview from './Preview'
 import RadioGroup from './RadioGroup'
 import Select from './Select'
+import SelectWithInput from './SelectWithInput'
 import TextArea from './TextArea'
 import ToggleSwitch from './ToggleSwitch'
@@ -16,6 +17,7 @@ export default {
   Preview,
   RadioGroup,
   Select,
+  SelectWithInput,
   TextArea,
   ToggleSwitch
 }

package/src/components/icons/ServiceIcon.jsx CHANGED Viewed

@@ -24,12 +24,11 @@ const ServiceIcon = ({ color, size, disabled, inactive }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M10.0006 7.37331C10.8371 7.37331 11.5152 6.72811 11.5152 5.93221C11.5152 5.13631 10.8371 4.49111 10.0006 4.49111C9.16416 4.49111 8.48608 5.13631 8.48608 5.93221C8.48608 6.72811 9.16416 7.37331 10.0006 7.37331Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
           <path d='M10.813 2.22453V2.71361C10.813 2.80669 10.874 2.89079 10.9658 2.92345L11.6214 3.15941C11.7106 3.19126 11.8119 3.16921 11.8771 3.10226L12.192 2.78056C12.2847 2.68585 12.4426 2.68503 12.5361 2.77975L13.2964 3.54561C13.3813 3.63134 13.3822 3.76443 13.2989 3.85098L12.8939 4.27392C12.8296 4.34087 12.8141 4.43803 12.8544 4.51968L13.129 5.08306C13.1676 5.16226 13.2517 5.2137 13.3436 5.2137H13.764C13.8945 5.2137 14 5.31412 14 5.43823V6.38372C14 6.50783 13.8945 6.60826 13.764 6.60826H13.3221C13.22 6.60826 13.129 6.67113 13.0973 6.76339L12.8742 7.41413C12.8476 7.49088 12.8665 7.57498 12.924 7.63458L13.2869 8.01588C13.3753 8.10896 13.3667 8.25348 13.2672 8.33594L12.4305 9.03241C12.3344 9.11242 12.1886 9.10508 12.1019 9.01608L11.8101 8.71724C11.7466 8.65193 11.648 8.62825 11.5596 8.65764L10.9503 8.86013C10.8551 8.89197 10.7916 8.97689 10.7916 9.07242V9.5174C10.7916 9.64151 10.686 9.74194 10.5556 9.74194H9.44353C9.3131 9.74194 9.20755 9.64151 9.20755 9.5174V9.07242C9.20755 8.97689 9.14405 8.89197 9.0488 8.86013L8.43956 8.65764C8.35117 8.62825 8.25249 8.65111 8.18899 8.71724L7.89724 9.01608C7.81058 9.10508 7.6647 9.11242 7.56859 9.03241L6.73195 8.33594C6.63241 8.25348 6.62383 8.10896 6.71222 8.01588L7.07519 7.63458C7.13182 7.57498 7.1507 7.49088 7.12496 7.41413L6.90186 6.76339C6.87011 6.67113 6.77915 6.60826 6.67704 6.60826H6.23598C6.10555 6.60826 6 6.50783 6 6.38372V5.43823C6 5.31412 6.10555 5.2137 6.23598 5.2137H6.65644C6.74826 5.2137 6.83235 5.16307 6.87096 5.08306L7.14555 4.51968C7.18588 4.43722 7.16958 4.34087 7.10608 4.27392L6.70106 3.85098C6.61783 3.76443 6.61868 3.63053 6.70364 3.54561L7.46391 2.77975C7.55744 2.68585 7.71533 2.68585 7.808 2.78056L8.12292 3.10226C8.18814 3.16921 8.28939 3.19126 8.37863 3.15941L9.03422 2.92345C9.12603 2.89079 9.18696 2.80669 9.18696 2.71361V2.22453C9.18696 2.10043 9.2925 2 9.42293 2H10.5771C10.7075 2 10.813 2.10043 10.813 2.22453Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
-          <path d='M4 5.09678H2V11.2903H11.6V11.129' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
-          <rect x={5.19995} y={11.2903} width={3.2} height={1.54839} stroke='none' />
-          <path d='M3.6001 12.8387H10.0001V14H3.6001V12.8387Z' stroke='none' strokeLinejoin='round' />
+          <path d='M11.5 7H8.5L10 4L11.5 7Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4 5.09668H2V11.2902H11.6V11.1289' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='5.2002' y='11.2903' width='3.2' height='1.54839' stroke='none' />
+          <path d='M3.6001 12.8386H10.0001V13.9999H3.6001V12.8386Z' stroke='none' strokeLinejoin='round' />
         </svg>
       )
       break
@@ -43,12 +42,11 @@ const ServiceIcon = ({ color, size, disabled, inactive }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M15.0008 11.06C16.2555 11.06 17.2726 10.0922 17.2726 8.89832C17.2726 7.70448 16.2555 6.73667 15.0008 6.73667C13.7461 6.73667 12.729 7.70448 12.729 8.89832C12.729 10.0922 13.7461 11.06 15.0008 11.06Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
           <path d='M16.2196 3.3368V4.07042C16.2196 4.21003 16.311 4.33618 16.4487 4.38517L17.4321 4.73912C17.5659 4.78688 17.7178 4.75382 17.8156 4.65339L18.288 4.17084C18.427 4.02877 18.6638 4.02755 18.8041 4.16962L19.9445 5.31842C20.072 5.44701 20.0733 5.64664 19.9484 5.77647L19.3409 6.41088C19.2443 6.51131 19.2212 6.65705 19.2817 6.77952L19.6936 7.62459C19.7515 7.74338 19.8776 7.82054 20.0153 7.82054H20.646C20.8417 7.82054 21 7.97118 21 8.15734V9.57558C21 9.76174 20.8417 9.91238 20.646 9.91238H19.9832C19.83 9.91238 19.6936 10.0067 19.6459 10.1451L19.3113 11.1212C19.2714 11.2363 19.2997 11.3625 19.3859 11.4519L19.9304 12.0238C20.063 12.1634 20.0501 12.3802 19.9008 12.5039L18.6458 13.5486C18.5017 13.6686 18.2828 13.6576 18.1528 13.5241L17.7152 13.0759C17.62 12.9779 17.472 12.9424 17.3394 12.9865L16.4255 13.2902C16.2826 13.338 16.1874 13.4653 16.1874 13.6086V14.2761C16.1874 14.4623 16.0291 14.6129 15.8334 14.6129H14.1653C13.9696 14.6129 13.8113 14.4623 13.8113 14.2761V13.6086C13.8113 13.4653 13.7161 13.338 13.5732 13.2902L12.6593 12.9865C12.5268 12.9424 12.3787 12.9767 12.2835 13.0759L11.8459 13.5241C11.7159 13.6576 11.4971 13.6686 11.3529 13.5486L10.0979 12.5039C9.94862 12.3802 9.93575 12.1634 10.0683 12.0238L10.6128 11.4519C10.6977 11.3625 10.7261 11.2363 10.6874 11.1212L10.3528 10.1451C10.3052 10.0067 10.1687 9.91238 10.0156 9.91238H9.35396C9.15832 9.91238 9 9.76174 9 9.57558V8.15734C9 7.97118 9.15832 7.82054 9.35396 7.82054H9.98466C10.1224 7.82054 10.2485 7.74461 10.3064 7.62459L10.7183 6.77952C10.7788 6.65582 10.7544 6.51131 10.6591 6.41088L10.0516 5.77647C9.92674 5.64664 9.92803 5.44579 10.0555 5.31842L11.1959 4.16962C11.3362 4.02877 11.573 4.02877 11.712 4.17084L12.1844 4.65339C12.2822 4.75382 12.4341 4.78688 12.568 4.73912L13.5513 4.38517C13.689 4.33618 13.7804 4.21003 13.7804 4.07042V3.3368C13.7804 3.15064 13.9388 3 14.1344 3H15.8656C16.0612 3 16.2196 3.15064 16.2196 3.3368Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
-          <path d='M6.5 7.64516H3V16.9355H17.4V16.1936' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
-          <rect x={7.80005} y={16.9355} width={4.8} height={2.32258} stroke='none' strokeWidth={1.5} />
-          <path d='M5.3999 19.258H14.9999V21H5.3999V19.258Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M17.25 10.5H12.75L15 6L17.25 10.5Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 7.64502H3V16.9353H17.4V16.6934' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='7.7998' y='16.9353' width='4.8' height='2.32258' stroke='none' strokeWidth={1.5} />
+          <path d='M5.3999 19.2578H14.9999V20.9997H5.3999V19.2578Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
         </svg>
       )
       break
@@ -62,11 +60,12 @@ const ServiceIcon = ({ color, size, disabled, inactive }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M25.0014 18.4333C27.0926 18.4333 28.7878 16.8203 28.7878 14.8305C28.7878 12.8408 27.0926 11.2278 25.0014 11.2278C22.9103 11.2278 21.2151 12.8408 21.2151 14.8305C21.2151 16.8203 22.9103 18.4333 25.0014 18.4333Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
           <path d='M27.0326 5.56134V6.78403C27.0326 7.01672 27.1849 7.22697 27.4145 7.30862L29.0534 7.89853C29.2765 7.97814 29.5297 7.92303 29.6927 7.75565L30.48 6.95141C30.7117 6.71462 31.1064 6.71258 31.3402 6.94936L33.2409 8.86403C33.4533 9.07836 33.4554 9.41107 33.2473 9.62744L32.2348 10.6848C32.0739 10.8522 32.0353 11.0951 32.1361 11.2992L32.8226 12.7076C32.9191 12.9056 33.1294 13.0342 33.3589 13.0342H34.4101C34.7361 13.0342 35 13.2853 35 13.5956V15.9593C35 16.2696 34.7361 16.5206 34.4101 16.5206H33.3053C33.05 16.5206 32.8226 16.6778 32.7432 16.9085L32.1855 18.5353C32.119 18.7272 32.1661 18.9374 32.3099 19.0865L33.2173 20.0397C33.4383 20.2724 33.4168 20.6337 33.168 20.8399L31.0764 22.581C30.8361 22.7811 30.4714 22.7627 30.2547 22.5402L29.5254 21.7931C29.3666 21.6298 29.1199 21.5706 28.899 21.6441L27.3758 22.1503C27.1377 22.2299 26.979 22.4422 26.979 22.681V23.7935C26.979 24.1038 26.7151 24.3548 26.389 24.3548H23.6088C23.2827 24.3548 23.0189 24.1038 23.0189 23.7935V22.681C23.0189 22.4422 22.8601 22.2299 22.622 22.1503L21.0989 21.6441C20.8779 21.5706 20.6312 21.6278 20.4725 21.7931L19.7431 22.5402C19.5264 22.7627 19.1618 22.7811 18.9215 22.581L16.8299 20.8399C16.581 20.6337 16.5596 20.2724 16.7805 20.0397L17.688 19.0865C17.8296 18.9374 17.8768 18.7272 17.8124 18.5353L17.2546 16.9085C17.1753 16.6778 16.9479 16.5206 16.6926 16.5206H15.5899C15.2639 16.5206 15 16.2696 15 15.9593V13.5956C15 13.2853 15.2639 13.0342 15.5899 13.0342H16.6411C16.8706 13.0342 17.0809 12.9077 17.1774 12.7076L17.8639 11.2992C17.9647 11.093 17.924 10.8522 17.7652 10.6848L16.7527 9.62744C16.5446 9.41107 16.5467 9.07631 16.7591 8.86403L18.6598 6.94936C18.8936 6.71462 19.2883 6.71462 19.52 6.95141L20.3073 7.75565C20.4703 7.92303 20.7235 7.97814 20.9466 7.89853L22.5855 7.30862C22.8151 7.22697 22.9674 7.01672 22.9674 6.78403V5.56134C22.9674 5.25107 23.2313 5 23.5573 5H26.4427C26.7687 5 27.0326 5.25107 27.0326 5.56134Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
-          <path d='M10.8333 12.7419H5V28.2258H29V26.9893' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
-          <rect x={13} y={28.2258} width={8} height={3.87097} stroke='none' strokeWidth={2} />
-          <path d='M9 32.0967H25V35H9V32.0967Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M28.75 17.5H21.25L25 10L28.75 17.5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 12.7417H5V28.2256H29V27.8223' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='13' y='28.2256' width='8' height='3.87097' stroke='none' strokeWidth={2} />
+          <path d='M9 32.0964H25V34.9997H9V32.0964Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
         </svg>
       )
       break