@platformatic/ui-components 0.1.85 → 0.1.86

package/dist/assets/index.bbcc19d7.css

@@ -0,0 +1 @@
+._input_1k1s3_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_1k1s3_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_1k1s3_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_1k1s3_10{fill:#21fa90}._fillWhite_1k1s3_13{fill:#fff}._input_1k1s3_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_1k1s3_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_1vc1b_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_1vc1b_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_1vc1b_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_1vc1b_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_1vc1b_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_1vc1b_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_1vc1b_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_1vc1b_23{position:absolute;bottom:-1.25rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._padded_1vc1b_27{padding:.625rem .5rem}._text--error-red_1vc1b_31{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_1vc1b_34{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_1vc1b_37{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_1vc1b_40{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_1vc1b_43{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--base_1vc1b_47{font-size:1rem;line-height:1.5rem}._text--xs_1vc1b_50{font-size:.75rem;line-height:1rem}._background-color-main-green_1vc1b_54{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_1vc1b_57{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_1vc1b_60{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_1vc1b_63{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_1vc1b_66{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_1vc1b_69{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_1vc1b_72{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_1vc1b_75{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_1vc1b_78{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_1vc1b_81{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_1vc1b_84{background-color:transparent}._background-color-opaque-100_1vc1b_87{--tw-bg-opacity: 1 !important}._background-color-opaque-60_1vc1b_90{--tw-bg-opacity: .6 !important}._background-color-opaque-30_1vc1b_93{--tw-bg-opacity: .3 !important}._background-color-opaque-20_1vc1b_96{--tw-bg-opacity: .2 !important}._background-color-opaque-10_1vc1b_87{--tw-bg-opacity: .1 !important}._apply-opacity-30_1vc1b_102{opacity:.3}._padding--none_1vc1b_105{padding:0}._padding--small_1vc1b_108{padding:.25rem}._padding--medium_1vc1b_111{padding:.5rem}._padding--large_1vc1b_114{padding:1rem}._padding--extra-large_1vc1b_117{padding:1.5rem}._hover-background-color-opaque-main-green_1vc1b_120:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_1vc1b_123:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_1vc1b_126:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_1vc1b_129:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_1vc1b_132:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_1vc1b_135:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_1vc1b_138:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_1vc1b_141:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_1vc1b_144:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_1vc1b_147{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_1vc1b_150{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_1vc1b_153{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_1vc1b_156{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_1vc1b_159{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_1vc1b_162{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_1vc1b_165{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_1vc1b_168{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_1vc1b_171{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._main-green_s6yir_1>circle,._main-green_s6yir_1>ellipse,._main-green_s6yir_1>rect,._main-green_s6yir_1>line,._main-green_s6yir_1>path{stroke:#21fa90}._error-red_s6yir_10>circle,._error-red_s6yir_10>ellipse,._error-red_s6yir_10>rect,._error-red_s6yir_10>line,._error-red_s6yir_10>path{stroke:#fa2121}._white_s6yir_18>circle,._white_s6yir_18>ellipse,._white_s6yir_18>rect,._white_s6yir_18>line,._white_s6yir_18>path{stroke:#fff}._main-dark-blue_s6yir_25>circle,._main-dark-blue_s6yir_25>ellipse,._main-dark-blue_s6yir_25>rect,._main-dark-blue_s6yir_25>line,._main-dark-blue_s6yir_25>path{stroke:#00283d}._warning-yellow_s6yir_32>circle,._warning-yellow_s6yir_32>ellipse,._warning-yellow_s6yir_32>rect,._warning-yellow_s6yir_32>line,._warning-yellow_s6yir_32>path{stroke:#feb928}._filled-white_s6yir_40{fill:#fff}._filled-error-red_s6yir_43{fill:#fa2121}._filled-main-dark-blue_s6yir_46{fill:#00283d}._filled-main-green_s6yir_49{fill:#21fa90}._filled-warning-yellow_s6yir_52{fill:#feb928}._fill-circle-green_s6yir_56>circle{fill:#fff}._fill-circle-main-dark-blue_s6yir_59>circle{fill:#00283d}._noShrinkForFlex_s6yir_63{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_b09u0_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_b09u0_4{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_b09u0_4:hover{cursor:pointer}._tab_b09u0_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_b09u0_1:first-child{margin-left:0}._tab_b09u0_1:last-child{margin-right:0}._tab_b09u0_1:hover{font-weight:600}._selected-tab_b09u0_10{font-weight:600;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_b09u0_14{min-height:100vh}._borderedBox_170cy_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.my-auto{margin-top:auto;margin-bottom:auto}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.border{border-width:1px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular.dcfe8df2.ttf) format("truetype");font-weight:400;font-style:normal}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}

package/dist/index.html

@@ -4,8 +4,8 @@
     <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.bd06830c.js"></script>
-    <link rel="stylesheet" href="/assets/index.a6b7ebf4.css">
+    <script type="module" crossorigin src="/assets/index.4ee166cb.js"></script>
+    <link rel="stylesheet" href="/assets/index.bbcc19d7.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -669,14 +669,14 @@ video {
   color: rgb(33 250 144 / var(--tw-text-opacity));
 }
 
-.text-dark-green {
+.text-error-red {
   --tw-text-opacity: 1;
-  color: rgb(2 120 63 / var(--tw-text-opacity));
+  color: rgb(250 33 33 / var(--tw-text-opacity));
 }
 
-.text-error-red {
+.text-dark-green {
   --tw-text-opacity: 1;
-  color: rgb(250 33 33 / var(--tw-text-opacity));
+  color: rgb(2 120 63 / var(--tw-text-opacity));
 }
 
 .blur {

package/index.js

@@ -38,6 +38,7 @@ import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
 
 export {
+  Backgrounds,
   BorderedBox,
   Box,
   Button,

package/package.json

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

package/src/components/BorderedBox.jsx

@@ -38,7 +38,7 @@ BorderedBox.propTypes = {
   /**
    * opaque
    */
-  opaque: PropTypes.oneOf([100, 60, 30, 20])
+  opaque: PropTypes.oneOf([100, 60, 30, 20, 10])
 }
 
 BorderedBox.defaultProps = {

package/src/components/Button.jsx

@@ -7,7 +7,7 @@ import PlatformaticIcon from './PlatformaticIcon'
 import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, LARGE } from './constants'
 
 function Button ({
-  icon,
+  classes,
   label,
   color,
   backgroundColor,
@@ -21,30 +21,31 @@ function Button ({
   selected,
   ...rest
 }) {
-  let className = `${styles.button} ${commonStyles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
-  if (!bordered) className += ` ${styles['no-border']}`
+  let buttonClassName = classes
+  buttonClassName += ` ${styles.button} ${commonStyles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
+  if (!bordered) buttonClassName += ` ${styles['no-border']}`
   if (disabled) {
-    className += ` ${styles.disabled}`
+    buttonClassName += ` ${styles.disabled}`
   } else {
     switch (hoverEffect) {
       case BACKGROUND_COLOR_OPAQUE:
-        className += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`]
+        buttonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`]
         break
       case BOX_SHADOW:
-        className += ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`]
+        buttonClassName += ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`]
         break
       case UNDERLINE:
-        className += ` ${styles['underline-effect']}`
+        buttonClassName += ` ${styles['underline-effect']}`
         break
       default:
         break
     }
   }
-  if (bold) className += ` ${styles.fontBold}`
-  if (fullWidth) className += ` ${styles.fullWidth}`
-  if (selected) className += ' ' + commonStyles[`selected-background-color-${color}`]
+  if (bold) buttonClassName += ` ${styles.fontBold}`
+  if (fullWidth) buttonClassName += ` ${styles.fullWidth}`
+  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
   return (
-    <button className={className} disabled={disabled} alt={label} {...rest}>
+    <button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
       {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
       <span className={styles.label}>{label}</span>
     </button>
@@ -53,9 +54,9 @@ function Button ({
 
 Button.propTypes = {
   /**
-   * Icon
+   * classes
    */
-  icon: PropTypes.object,
+  classes: PropTypes.string,
   /**
    * label
    */
@@ -106,6 +107,7 @@ Button.propTypes = {
 }
 
 Button.defaultProps = {
+  classes: '',
   label: '',
   color: MAIN_DARK_BLUE,
   backgroundColor: 'transparent',

package/src/components/Checkbox.jsx

@@ -1,11 +1,31 @@
 'use strict'
 import React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Checkbox.module.css'
-export default function Checkbox (props) {
-  const { disabled, ...rest } = props
-  let className = `${styles.checkbox}`
+import { MAIN_DARK_BLUE, WHITE } from './constants'
+function Checkbox ({ disabled, color, ...rest }) {
+  let className = `${styles.checkbox} `
+  className += styles[`checkbox--${color}`]
   if (disabled) className += ` ${styles.disabled}`
   return (
     <input type='checkbox' className={className} disabled={disabled} {...rest} />
   )
 }
+
+Checkbox.propTypes = {
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * color
+   */
+  color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE])
+}
+
+Checkbox.defaultProps = {
+  disabled: false,
+  color: MAIN_DARK_BLUE
+}
+
+export default Checkbox

package/src/components/Checkbox.module.css

@@ -1,9 +1,21 @@
 .checkbox {
-  @apply border border-light-green p-2 rounded-sm bg-main-dark-blue relative inline-block h-2 w-2;
+  @apply border p-2 rounded-sm relative inline-block h-2 w-2;
   -webkit-appearance: none;
 }
 
-.checkbox:checked {
+.checkbox--main-dark-blue {
+  @apply border-light-green bg-main-dark-blue
+}
+
+.checkbox--white {
+  @apply border-main-dark-blue bg-white
+}
+
+.checkbox--white:checked {
+  @apply bg-main-dark-blue text-white;
+}
+
+.checkbox--main-dark-blue:checked {
 	@apply bg-light-green text-main-dark-blue;
 }
 

package/src/components/Common.module.css

@@ -34,13 +34,23 @@
 .text--white {
   @apply text-white
 }
+.text--dark-green {
+  @apply text-dark-green;
+}
 .text--main-green {
-  @apply text-main-green
+  @apply text-main-green;
 }
 .text--main-dark-blue {
   @apply text-main-dark-blue;
 }
 
+.text--base {
+  @apply text-base
+}
+.text--xs {
+  @apply text-xs
+}
+
 .background-color-main-green {
   @apply bg-main-green !important;
 }
@@ -86,6 +96,9 @@
 .background-color-opaque-20 {
   @apply bg-opacity-20 !important;
 }
+.background-color-opaque-10 {
+  @apply bg-opacity-10 !important;
+}
 .apply-opacity-30 {
   @apply opacity-30;
 }

package/src/components/HorizontalSeparator.jsx

@@ -1,9 +1,12 @@
 'use strict'
 import React from 'react'
+import PropTypes from 'prop-types'
+import commonStyles from './Common.module.css'
+import { DARK_GREEN, MAIN_DARK_BLUE } from './constants'
 import styles from './HorizontalSeparator.module.css'
-export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4, color = 'dark-green', opacity = 1 }) {
+function HorizontalSeparator ({ marginTop, marginBottom, color, opacity }) {
   function getClassName () {
-    let className = `text-${color} `
+    let className = commonStyles[`text--${color}`] + ' '
     // margin
     className += (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
     // opacity
@@ -13,3 +16,31 @@ export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4,
 
   return <hr className={getClassName()} />
 }
+
+HorizontalSeparator.propTypes = {
+  /**
+   * marginTop
+   */
+  marginTop: PropTypes.number,
+  /**
+   * marginBottom
+   */
+  marginBottom: PropTypes.number,
+  /**
+   * color
+   */
+  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE]),
+  /**
+   * opacity
+   */
+  opacity: PropTypes.number
+}
+
+HorizontalSeparator.defaultProps = {
+  marginTop: 4,
+  marginBottom: 4,
+  color: DARK_GREEN,
+  opacity: 1
+}
+
+export default HorizontalSeparator

package/src/components/Sidebar.jsx

@@ -111,7 +111,7 @@ function Sidebar (props) {
                 {!collapsed && <span className={styles.item}>{addTitle}</span>}
               </button>
             </div>
-            <HorizontalSeparator marginBottom='2' marginTop='2' />
+            <HorizontalSeparator marginBottom={2} marginTop={2} />
 
             <div className={styles.bottom}>
               <Button label={labelButtonSettings} color={WHITE} onClick={onClickSettings} platformaticIcon={{ iconName: 'GearIcon', color: WHITE }} fullWidth bold size={MEDIUM} hoverEffect={BACKGROUND_COLOR_OPAQUE} />

package/src/components/TextWithLabel.jsx

@@ -1,11 +1,48 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import { FONT_BASE, FONT_XS, MAIN_DARK_BLUE, WHITE } from './constants'
+import commonStyles from './Common.module.css'
 import styles from './TextWithLabel.module.css'
-export default function TextWithLabel ({ label, text, children }) {
+function TextWithLabel ({ label, text, children, color, fontSize }) {
+  const className = commonStyles[`text--${color}`] + ' ' + commonStyles[`text--${fontSize}`]
   return (
-    <div className={styles.container}>
+    <div className={className}>
       <span className={styles.label}>{label}:</span>
       {text && <span className={styles.text}>{text}</span>}
       {children && <span>{children}</span>}
     </div>
   )
 }
+
+TextWithLabel.propTypes = {
+  /**
+   * label
+   */
+  label: PropTypes.string,
+  /**
+   * text
+   */
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * children
+   */
+  children: PropTypes.node,
+  /**
+   * white
+   */
+  color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE]),
+  /**
+   * Font Size
+   */
+  fontSize: PropTypes.oneOf([FONT_BASE, FONT_XS])
+}
+
+TextWithLabel.defaultProps = {
+  label: '',
+  text: '',
+  children: null,
+  color: WHITE,
+  fontSize: FONT_BASE
+}
+
+export default TextWithLabel

package/src/components/TextWithLabel.module.css

@@ -1,6 +1,3 @@
-.container {
-  @apply text-white
-}
 .label {
   @apply font-thin mr-2;
 }

package/src/components/VerticalSeparator.jsx

@@ -1,5 +1,23 @@
 'use strict'
 import React from 'react'
-export default function VerticalSeparator () {
-  return <span className='text-dark-green my-auto mx-5'> | </span>
+import PropTypes from 'prop-types'
+import { DARK_GREEN, MAIN_DARK_BLUE } from './constants'
+import commonStyles from './Common.module.css'
+
+function VerticalSeparator ({ color }) {
+  const className = commonStyles[`text--${color}`] + ' my-auto mx-5'
+  return <span className={className}> | </span>
 }
+
+VerticalSeparator.propTypes = {
+  /**
+   * color
+   */
+  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE])
+}
+
+VerticalSeparator.defaultProps = {
+  color: DARK_GREEN
+}
+
+export default VerticalSeparator

package/src/components/constants.js

@@ -1,5 +1,6 @@
 export const WHITE = 'white'
 export const MAIN_DARK_BLUE = 'main-dark-blue'
+export const DARK_GREEN = 'dark-green'
 export const MAIN_GREEN = 'main-green'
 export const ERROR_RED = 'error-red'
 export const WARNING_YELLOW = 'warning-yellow'
@@ -20,7 +21,7 @@ export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
 
 export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW]
 export const COLORS_BUTTON = [MAIN_GREEN, 'dark-green', 'light-green', MAIN_DARK_BLUE, 'dark-blue', 'light-blue', WHITE, ERROR_RED, 'tertiary-blue', 'transparent']
-export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, 'dark-blue', WARNING_YELLOW, 'transparent']
+export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, 'dark-blue', MAIN_DARK_BLUE, WARNING_YELLOW, 'transparent']
 
 export const MODAL_POPUP = 'popup'
 export const MODAL_COVER = 'cover'
@@ -29,3 +30,10 @@ export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER]
 export const FREE = 'free'
 export const BASIC = 'basic'
 export const PROFILE = ['', FREE, BASIC]
+
+export const FONT_BASE = 'base'
+export const FONT_XS = 'xs'
+
+export const ROLE_ADMIN = 'admin'
+export const ROLE_USER = 'user'
+export const ROLE_OWNER = 'owner'

package/src/components/forms/Input.jsx

@@ -4,14 +4,16 @@ import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
+import { MAIN_GREEN } from '../constants'
+import BorderedBox from '../BorderedBox'
 
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon }) {
+function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon, focused }) {
   let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
   const showError = errorMessage.length > 0
   if (showError) className += ' ' + commonStyles['bordered--error-red']
   if (disabled) className += ' ' + commonStyles['apply-opacity-30']
 
-  return (
+  const cmp = (
     <div className={styles.container}>
       <div className={className}>
         {beforeIcon && <PlatformaticIcon iconName={beforeIcon.iconName} classes={styles.beforeInputIcon} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} />}
@@ -21,6 +23,8 @@ function Input ({ placeholder, value, name, borderColor, errorMessage, onChange,
       {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
     </div>
   )
+
+  return focused ? (<BorderedBox classes={styles.paddingFocused} color={MAIN_GREEN} backgroundColor={MAIN_GREEN} opaque={10}>{cmp}</BorderedBox>) : cmp
 }
 
 Input.propTypes = {
@@ -63,7 +67,11 @@ Input.propTypes = {
     iconName: PropTypes.string,
     color: PropTypes.string,
     onClick: PropTypes.func
-  })
+  }),
+  /**
+   * addFocus
+   */
+  focused: PropTypes.bool
 }
 
 Input.defaultProps = {
@@ -75,7 +83,8 @@ Input.defaultProps = {
   onChange: () => {},
   disabled: false,
   beforeIcon: null,
-  afterIcon: null
+  afterIcon: null,
+  focused: false
 }
 
 export default Input

package/src/components/forms/Input.module.css

@@ -22,6 +22,9 @@
 .color-white{
   @apply text-white;
 }
+.paddingFocused {
+  @apply p-4;
+}
 
 [type='text']:focus {
   outline: none;

package/src/components/icons/GiveOwnershipIcon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const GiveOwnershipIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  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.50276 9.21851L2 10.0705L3.27801 13.798L5.72752 12.8395L4.50276 9.21851Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.6626 9.64452C5.03535 9.18301 6.01515 8.26001 6.95236 8.26001C7.88956 8.26001 8.54987 8.75701 8.76287 9.00551H10.1474C10.3781 9.02326 10.8396 9.20786 10.8396 9.80427M10.8396 9.80427L12.5969 8.63276C12.5969 8.63276 13.2792 8.12695 13.7684 8.68601C14.2576 9.24507 13.8394 9.60902 13.7151 9.80427C12.8631 10.532 10.9568 12.0301 10.1474 12.2005C9.33797 12.3709 6.75711 12.378 5.56785 12.3603M10.8396 9.80427C10.8396 10.3581 10.4846 10.532 10.3071 10.5498H8.12387' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.99401 3.47059C5.99401 4.28277 5.32378 4.94118 4.49701 4.94118C3.67023 4.94118 3 4.28277 3 3.47059C3 2.6584 3.67023 2 4.49701 2C5.32378 2 5.99401 2.6584 5.99401 3.47059ZM5.99401 3.47059H9.10778M13 3.47059H11.9222M11.9222 3.47059V5M11.9222 3.47059H10.485M10.485 3.47059V4.47059M10.485 3.47059H9.10778M9.10778 3.47059V5' 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.75414 13.8276L3 15.1056L4.91701 20.6969L8.59128 19.2592L6.75414 13.8276Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6.9939 14.4669C7.55302 13.7746 9.02273 12.3901 10.4285 12.3901C11.8343 12.3901 12.8248 13.1356 13.1443 13.5084H15.2211C15.5672 13.535 16.2594 13.8119 16.2594 14.7065M16.2594 14.7065L18.8953 12.9493C18.8953 12.9493 19.9188 12.1906 20.6526 13.0291C21.3864 13.8677 20.7591 14.4136 20.5727 14.7065C19.2947 15.7982 16.4352 18.0453 15.2211 18.3009C14.007 18.5565 10.1357 18.5672 8.35178 18.5405M16.2594 14.7065C16.2594 15.5372 15.7269 15.7982 15.4607 15.8248H12.1858' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.99102 5.20588C8.99102 6.42416 7.98567 7.41176 6.74551 7.41176C5.50535 7.41176 4.5 6.42416 4.5 5.20588C4.5 3.98761 5.50535 3 6.74551 3C7.98567 3 8.99102 3.98761 8.99102 5.20588ZM8.99102 5.20588H13.6617M19.5 5.20588H17.8832M17.8832 5.20588V7.5M17.8832 5.20588H15.7275M15.7275 5.20588V6.70588M15.7275 5.20588H13.6617M13.6617 5.20588V7.5' 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='M11.2569 23.0464L5 25.1764L8.19502 34.4952L14.3188 32.0989L11.2569 23.0464Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.6565 24.1112C12.5884 22.9574 15.0379 20.6499 17.3809 20.6499C19.7239 20.6499 21.3747 21.8924 21.9072 22.5137H25.3684C25.9453 22.558 27.0991 23.0195 27.0991 24.5105M27.0991 24.5105L31.4922 21.5818C31.4922 21.5818 33.198 20.3173 34.421 21.7149C35.6439 23.1126 34.5985 24.0224 34.2879 24.5105C32.1579 26.3299 27.392 30.0752 25.3684 30.5012C23.3449 30.9272 16.8928 30.945 13.9196 30.9006M27.0991 24.5105C27.0991 25.8951 26.2116 26.3299 25.7678 26.3743H20.3097' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.985 8.67647C14.985 10.7069 13.3094 12.3529 11.2425 12.3529C9.17558 12.3529 7.5 10.7069 7.5 8.67647C7.5 6.64601 9.17558 5 11.2425 5C13.3094 5 14.985 6.64601 14.985 8.67647ZM14.985 8.67647H22.7695M32.5 8.67647H29.8054M29.8054 8.67647V12.5M29.8054 8.67647H26.2126M26.2126 8.67647V11.1765M26.2126 8.67647H22.7695M22.7695 8.67647V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+GiveOwnershipIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+GiveOwnershipIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default GiveOwnershipIcon