@platformatic/ui-components 0.1.124 → 0.1.126

package/src/components/icons/TrashIcon.jsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+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 }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M4.08381 6.50611C4.03861 5.92502 4.49795 5.42857 5.0808 5.42857H10.9192C11.502 5.42857 11.9614 5.92502 11.9162 6.50611L11.4051 13.0775C11.3646 13.5982 10.9303 14 10.4081 14H5.59191C5.0697 14 4.63541 13.5982 4.59492 13.0775L4.08381 6.50611Z' stroke='none' />
+          <path d='M4 3.71429L12 3.71429' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.60015 3.71429C9.60015 2.76751 8.8838 2 8.00015 2C7.11649 2 6.40015 2.76751 6.40015 3.71429' stroke='none' />
+          <path d='M5.6001 7.14285L6.4001 12.2857M10.4001 7.14285L10.0001 12.2857M8.0001 7.14285V12.2857' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M6.08381 9.2204C6.03861 8.63931 6.49795 8.14286 7.0808 8.14286H16.9192C17.502 8.14286 17.9614 8.63931 17.9162 9.2204L17.0717 20.0775C17.0313 20.5982 16.597 21 16.0748 21H7.92524C7.40303 21 6.96875 20.5982 6.92825 20.0775L6.08381 9.2204Z' stroke='none' strokeWidth={1.5} />
+          <path d='M6 5.57143L18 5.57143' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.4001 5.57143C14.4001 4.15127 13.3256 3 12.0001 3C10.6746 3 9.6001 4.15127 9.6001 5.57143' stroke='none' strokeWidth={1.5} />
+          <path d='M8.40015 10.7143L9.60015 18.4286M15.6001 10.7143L15.0001 18.4286M12.0001 10.7143V18.4286' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M10.0838 14.649C10.0386 14.0679 10.498 13.5714 11.0808 13.5714H28.9192C29.5021 13.5714 29.9614 14.0679 29.9162 14.649L28.4051 34.0775C28.3646 34.5982 27.9303 35 27.4081 35H12.5919C12.0697 35 11.6354 34.5982 11.5949 34.0775L10.0838 14.649Z' stroke='none' strokeWidth={2} />
+          <path d='M10 9.28571L30 9.28571' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M24.0002 9.28571C24.0002 6.91878 22.2094 5 20.0002 5C17.7911 5 16.0002 6.91878 16.0002 9.28571' stroke='none' strokeWidth={2} />
+          <path d='M14.0002 17.8571L16.0002 30.7143M26.0002 17.8571L25.0002 30.7143M20.0002 17.8571V30.7143' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+TrashIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
+}
+
+TrashIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM,
+  disabled: false
+}
+
+export default TrashIcon

package/src/components/icons/TwoUsersIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const TwoUsersIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -74,12 +77,16 @@ TwoUsersIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 TwoUsersIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default TwoUsersIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const UpgradeIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -107,12 +110,16 @@ UpgradeIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 UpgradeIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default UpgradeIcon

package/src/components/icons/UserIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const UserIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -69,12 +72,16 @@ UserIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 UserIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default UserIcon

package/src/components/icons/UserRemoveIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const UserRemoveIcon = ({ color, size, tip, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {

package/src/components/icons/UserRoleIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const UserRoleIcon = ({ color, size, tip, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const WorkspaceDynamicIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -77,12 +80,16 @@ WorkspaceDynamicIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 WorkspaceDynamicIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default WorkspaceDynamicIcon

package/src/components/icons/WorkspaceEmptyIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const WorkspaceEmptyIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -44,12 +47,16 @@ WorkspaceEmptyIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 WorkspaceEmptyIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default WorkspaceEmptyIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const WorkspaceFailIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -102,12 +105,16 @@ WorkspaceFailIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 WorkspaceFailIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default WorkspaceFailIcon

package/src/components/icons/WorkspaceGitHubIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const WorkspaceGitHubIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -121,12 +124,16 @@ WorkspaceGitHubIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 WorkspaceGitHubIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default WorkspaceGitHubIcon

package/src/components/icons/WorkspaceLoadingIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const WorkspaceLoadingIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   const filledClassName = styles[`filled-${color}`]
 
   let icon = <></>
@@ -46,12 +49,16 @@ WorkspaceLoadingIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 WorkspaceLoadingIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default WorkspaceLoadingIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const WorkspaceReadyIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -134,12 +137,16 @@ WorkspaceReadyIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 WorkspaceReadyIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -3,8 +3,11 @@ 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 }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const WorkspaceStaticIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -74,12 +77,16 @@ WorkspaceStaticIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 WorkspaceStaticIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default WorkspaceStaticIcon

package/src/components/icons/index.js

@@ -14,8 +14,9 @@ import AppWorkspace from './AppWorkspace'
 import ArrowDownFullIcon from './ArrowDownFullIcon'
 import ArrowDownIcon from './ArrowDownIcon'
 import ArrowLeftIcon from './ArrowLeftIcon'
-import ArrowRightIcon from './ArrowRightIcon'
+import ArrowLongLeftIcon from './ArrowLongLeftIcon'
 import ArrowLongRightIcon from './ArrowLongRightIcon'
+import ArrowRightIcon from './ArrowRightIcon'
 import ArrowUpIcon from './ArrowUpIcon'
 import BellIcon from './BellIcon'
 import BillingIcon from './BillingIcon'
@@ -50,13 +51,16 @@ import CreatingAppIcon from './CreatingAppIcon'
 import DatabaseIcon from './DatabaseIcon'
 import DatabaseMigrationIcon from './DatabaseMigrationIcon'
 import DepencenciesReloadIcon from './DepencenciesReloadIcon'
-import EyeClosedIcon from './EyeClosedIcon'
-import EyeOpenedIcon from './EyeOpenedIcon'
 import EditDocumentIcon from './EditDocumentIcon'
 import EditIcon from './EditIcon'
-import ExploreDocIcon from './ExploreDocIcon'
 import EnlargeIcon from './EnlargeIcon'
 import EntryIcon from './EntryIcon'
+import ExpandIcon from './ExpandIcon'
+import ExploreDocIcon from './ExploreDocIcon'
+import EyeClosedIcon from './EyeClosedIcon'
+import EyeOpenedIcon from './EyeOpenedIcon'
+import FolderIcon from './FolderIcon'
+import FoldersIcon from './FoldersIcon'
 import GearIcon from './GearIcon'
 import GenerationLoadingIcon from './GenerationLoadingIcon'
 import GiveOwnershipIcon from './GiveOwnershipIcon'
@@ -98,10 +102,14 @@ import SocialGitLabIcon from './SocialGitLabIcon'
 import SocialLinkedInIcon from './SocialLinkedInIcon'
 import SocialNPMIcon from './SocialNPMIcon'
 import SocialXIcon from './SocialXIcon'
+import SortableIcon from './SortableIcon'
+import StackablesPluginIcon from './StackablesPluginIcon'
+import StackablesTemplateIcon from './StackablesTemplateIcon'
 import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
 import TwoUsersIcon from './TwoUsersIcon'
 import TeamsIcon from './TeamsIcon'
+import TrashIcon from './TrashIcon'
 import UpgradeIcon from './UpgradeIcon'
 import UserIcon from './UserIcon'
 import UserRemoveIcon from './UserRemoveIcon'
@@ -131,8 +139,9 @@ export default {
   ArrowDownFullIcon,
   ArrowDownIcon,
   ArrowLeftIcon,
-  ArrowRightIcon,
+  ArrowLongLeftIcon,
   ArrowLongRightIcon,
+  ArrowRightIcon,
   ArrowUpIcon,
   BellIcon,
   BillingIcon,
@@ -171,9 +180,12 @@ export default {
   EditIcon,
   EyeClosedIcon,
   EyeOpenedIcon,
+  ExpandIcon,
   ExploreDocIcon,
   EnlargeIcon,
   EntryIcon,
+  FolderIcon,
+  FoldersIcon,
   GearIcon,
   GenerationLoadingIcon,
   GiveOwnershipIcon,
@@ -208,6 +220,8 @@ export default {
   SendIcon,
   ServiceIcon,
   StopIcon,
+  StackablesPluginIcon,
+  StackablesTemplateIcon,
   SlotIcon,
   SwitchIcon,
   SocialDiscordIcon,
@@ -216,13 +230,15 @@ export default {
   SocialLinkedInIcon,
   SocialNPMIcon,
   SocialXIcon,
+  SortableIcon,
   TerminalIcon,
+  TeamsIcon,
+  TwoUsersIcon,
+  TrashIcon,
   UpgradeIcon,
   UserIcon,
   UserRemoveIcon,
   UserRoleIcon,
-  TeamsIcon,
-  TwoUsersIcon,
   WorkspaceDynamicIcon,
   WorkspaceEmptyIcon,
   WorkspaceFailIcon,

package/src/stories/ModalDirectional.stories.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import ModalDirectional from '../components/ModalDirectional'
+import Button from '../components/Button'
+import { MAIN_DARK_BLUE, MAIN_GREEN } from '../components/constants'
+export default {
+  title: 'Platformatic/ModalDirectional',
+  component: ModalDirectional,
+  argTypes: {
+    title: {
+      type: 'string'
+    },
+    titleClassName: {
+      type: 'string'
+    },
+    smallLayout: {
+      type: 'bool'
+    }
+  }
+}
+
+const divStyle = {
+  width: '100%',
+  height: '100vH',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative'
+}
+
+const Template = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { text, ...rest } = args
+  return (
+    <div style={divStyle}>
+      <div>
+        <Button type='button' color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen(true)} label='Open Modal' />
+      </div>
+      {isOpen && <ModalDirectional setIsOpen={setIsOpen} {...rest}>{text}</ModalDirectional>}
+    </div>
+  )
+}
+
+export const Lefty = Template.bind({})
+Lefty.args = {
+  title: 'Close me'
+}

package/src/stories/forms/Select.stories.jsx

@@ -1,7 +1,7 @@
 'use strict'
 import React, { useState } from 'react'
 import Select from '../../components/forms/Select'
-import { MAIN_DARK_BLUE, MAIN_GREEN } from '../../components/constants'
+import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, WHITE } from '../../components/constants'
 
 const divStyle = {
   width: '100%',
@@ -142,3 +142,35 @@ githubRepoExample.args = {
   }),
   borderColor: MAIN_DARK_BLUE
 }
+
+const TemplateTransparent = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleSelect (event) {
+    setValue(event.detail.label)
+  }
+
+  return (
+    <div style={{ padding: '20px 10px' }}>
+      <p>Value of the input {value}</p>
+      <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+    </div>
+  )
+}
+
+export const TemplateBackgroundTransparent = TemplateTransparent.bind({})
+
+TemplateBackgroundTransparent.args = {
+  name: 'test',
+  placeholder: 'Defaul option',
+  optionsBorderedBottom: false,
+  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'OrganizationIcon' })),
+  borderColor: WHITE,
+  mainColor: WHITE,
+  backgroundColor: RICH_BLACK,
+  borderListColor: WHITE
+}

package/tailwind.config.cjs

@@ -40,10 +40,13 @@ module.exports = {
       'error-red': '#FA2121',
       'tertiary-blue': '#2588E4',
       transparent: 'transparent',
-      'warning-yellow': '#FEB928'
+      'warning-yellow': '#FEB928',
+      'rich-black': '#00050B',
+      'electric-purple': '#C61BE2'
     },
     fontFamily: {
-      sans: ['Montserrat']
+      sans: ['Montserrat'],
+      inter: ['Inter']
     },
     letterSpacing: {
       tighter: '-.05em',