@platformatic/ui-components 0.1.79 → 0.1.81

package/dist/assets/index.3f984270.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_7p6ei_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_7p6ei_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_7p6ei_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_7p6ei_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_7p6ei_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_7p6ei_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_7p6ei_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_7p6ei_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_7p6ei_27{padding:.625rem .5rem}._text--error-red_7p6ei_31{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_7p6ei_34{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--main-green_7p6ei_37{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_7p6ei_40{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._background-color-main-green_7p6ei_44{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_7p6ei_47{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_7p6ei_50{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_7p6ei_53{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_7p6ei_56{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_7p6ei_59{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_7p6ei_62{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_7p6ei_65{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_7p6ei_68{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_7p6ei_71{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_7p6ei_74{background-color:transparent}._background-color-opaque-100_7p6ei_77{--tw-bg-opacity: 1 !important}._background-color-opaque-60_7p6ei_80{--tw-bg-opacity: .6 !important}._background-color-opaque-30_7p6ei_83{--tw-bg-opacity: .3 !important}._background-color-opaque-20_7p6ei_86{--tw-bg-opacity: .2 !important}._apply-opacity-30_7p6ei_89{opacity:.3}._padding--none_7p6ei_92{padding:0}._padding--small_7p6ei_95{padding:.25rem}._padding--medium_7p6ei_98{padding:.5rem}._padding--large_7p6ei_101{padding:1rem}._padding--extra-large_7p6ei_104{padding:1.5rem}._hover-background-color-opaque-main-green_7p6ei_107:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_7p6ei_110:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_7p6ei_113:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_7p6ei_116:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_7p6ei_119:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_7p6ei_122:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_7p6ei_125:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_7p6ei_128:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_7p6ei_131:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_7p6ei_134{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-light-green_7p6ei_137{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-dark-green_7p6ei_140{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-dark-blue_7p6ei_143{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._selected-background-color-dark-blue_7p6ei_146{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-light-blue_7p6ei_149{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-white_7p6ei_152{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-error-red_7p6ei_155{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_7p6ei_158{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--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}.m-3{margin:.75rem}.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-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))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / 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.25ff4fb9.js"></script>
-    <link rel="stylesheet" href="/assets/index.8666e478.css">
+    <script type="module" crossorigin src="/assets/index.2eadedb2.js"></script>
+    <link rel="stylesheet" href="/assets/index.3f984270.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -678,6 +678,10 @@ video {
   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';
 

package/package.json

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

package/src/components/Button.jsx

@@ -6,8 +6,21 @@ import commonStyles from './Common.module.css'
 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 (props) {
-  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, platformaticIcon, ...rest } = props
+function Button ({
+  icon,
+  label,
+  color,
+  backgroundColor,
+  size,
+  disabled,
+  bold,
+  hoverEffect,
+  bordered,
+  fullWidth,
+  platformaticIcon,
+  selected,
+  ...rest
+}) {
   let className = `${styles.button} ${commonStyles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
   if (!bordered) className += ` ${styles['no-border']}`
   if (disabled) {
@@ -29,6 +42,7 @@ function Button (props) {
   }
   if (bold) className += ` ${styles.fontBold}`
   if (fullWidth) className += ` ${styles.fullWidth}`
+  if (selected) className += ' ' + commonStyles[`selected-background-color-${color}`]
   return (
     <button className={className} disabled={disabled} alt={label} {...rest}>
       {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
@@ -84,7 +98,11 @@ Button.propTypes = {
   platformaticIcon: PropTypes.shape({
     iconName: PropTypes.string,
     color: PropTypes.string
-  })
+  }),
+  /**
+   * Selected: default false
+   */
+  selected: PropTypes.bool
 }
 
 Button.defaultProps = {
@@ -97,7 +115,8 @@ Button.defaultProps = {
   hoverEffect: BACKGROUND_COLOR_OPAQUE,
   bordered: true,
   fullWidth: false,
-  platformaticIcon: null
+  platformaticIcon: null,
+  selected: false
 }
 
 export default Button

package/src/components/ButtonFullRounded.jsx

@@ -5,7 +5,20 @@ import commonStyles from './Common.module.css'
 import styles from './ButtonFullRounded.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { COLORS_ICON, SIZES, BACKGROUND_COLOR_OPAQUE, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
-function ButtonFullRounded ({ className, iconName, iconSize, iconColor, disabled, paddingSize, alt, onClick, hoverEffect, bordered, tip }) {
+function ButtonFullRounded ({
+  className,
+  iconName,
+  iconSize,
+  iconColor,
+  disabled,
+  paddingSize,
+  alt,
+  onClick,
+  hoverEffect,
+  bordered,
+  tip,
+  selected
+}) {
   const padding = commonStyles[`padding--${paddingSize}`]
   const containerClassName = `${className} ${styles.roundedFull}`
   let buttonClassName = `${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
@@ -21,6 +34,7 @@ function ButtonFullRounded ({ className, iconName, iconSize, iconColor, disabled
         break
     }
   }
+  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${iconColor}`]
 
   return (
     <div className={containerClassName}>
@@ -71,7 +85,11 @@ ButtonFullRounded.propTypes = {
   /**
    * tip
    */
-  tip: PropTypes.string
+  tip: PropTypes.string,
+  /**
+   * Selected: default false
+   */
+  selected: PropTypes.bool
 
 }
 
@@ -85,7 +103,8 @@ ButtonFullRounded.defaultProps = {
   onClick: () => {},
   hoverEffect: '',
   bordered: true,
-  tip: ''
+  tip: '',
+  selected: false
 }
 
 export default ButtonFullRounded

package/src/components/Common.module.css

@@ -131,4 +131,31 @@
 .hover-background-color-opaque-tertiary-blue{
   @apply hover:bg-tertiary-blue hover:bg-opacity-15;
 }
+.selected-background-color-main-green {
+  @apply bg-main-green bg-opacity-15;
+}
+.selected-background-color-light-green {
+  @apply bg-light-green bg-opacity-15;
+}
+.selected-background-color-dark-green {
+  @apply bg-dark-green bg-opacity-15;
+}
+.selected-background-color-main-dark-blue{
+  @apply bg-main-dark-blue bg-opacity-10;
+}
+.selected-background-color-dark-blue {
+  @apply bg-dark-blue bg-opacity-15;
+}
+.selected-background-color-light-blue {
+  @apply bg-light-blue bg-opacity-15;
+}
+.selected-background-color-white{
+  @apply bg-white bg-opacity-15;
+}
+.selected-background-color-error-red{
+  @apply bg-error-red bg-opacity-15;
+}
+.selected-background-color-tertiary-blue{
+  @apply bg-tertiary-blue bg-opacity-15;
+}
 

package/src/components/DropDown.module.css

@@ -17,10 +17,10 @@
   @apply border border-transparent rounded-full mr-2;
 }
 .menu {
-  @apply absolute border-solid border border-white px-0 py-1 bg-light-blue mt-8 rounded-md z-10 text-sm min-w-[175px];
+  @apply absolute border-solid border border-white p-0 bg-light-blue mt-8 rounded-md z-10 text-sm min-w-[175px];
 }
 .item {
-  @apply py-3 px-3 text-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest; 
+  @apply py-2 px-3 text-main-dark-blue first:border-t-0 text-sm leading-4 uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest; 
   /* it's a workaround due to opacity... */
   border-top: 1px solid rgba(0, 40, 61, 0.2);;
 }

package/src/components/Sidebar.jsx

@@ -100,7 +100,7 @@ function Sidebar (props) {
                   </React.Fragment>
                 )
               })}
-              <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton}`} onClick={onClickAdd} disabled={disableClickAdd}>
+              <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton} ${!disableClickAdd && styles.hoverSemibold}`} onClick={onClickAdd} disabled={disableClickAdd}>
                 <PlatformaticIcon
                   iconName='CircleAddIcon'
                   color='white'

package/src/components/Sidebar.module.css

@@ -26,7 +26,10 @@
   @apply flex items-center justify-start border-0 rounded-md w-full py-1 hover:bg-white hover:bg-opacity-20;
 }
 .buttonCreate {
-  @apply flex items-center justify-start border-0 w-full pt-1 pb-4 cursor-pointer hover:font-semibold whitespace-nowrap;
+  @apply flex items-center justify-start border-0 w-full pt-1 pb-4 cursor-pointer whitespace-nowrap;
+}
+.hoverSemibold {
+  @apply hover:font-semibold;
 }
 .disabled {
   @apply opacity-30 cursor-default;

package/src/components/Status.jsx

@@ -2,13 +2,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import PlatformaticIcon from './PlatformaticIcon'
-import { COLORS_ICON } from './constants'
+import { COLORS_ICON, EXTRA_SMALL } from './constants'
 
 function Status ({ color, status }) {
   const className = `inline-flex items-center text-${color}`
   return (
     <div className={className}>
-      <PlatformaticIcon iconName='CircleFullIcon' size='small' color={color} />
+      <PlatformaticIcon iconName='CircleFullIcon' size={EXTRA_SMALL} color={color} />
       <span className='ml-2'>{status}</span>
     </div>
   )

package/src/components/TabbedWindow.module.css

@@ -1,15 +1,14 @@
 .tabbed-container {
   @apply bg-main-dark-blue;
 }
-
 .tabs-header {
   @apply flex justify-start text-white uppercase hover:cursor-pointer mb-4 tracking-super-widest h-[2rem];
 }
 .tab {
-  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0;  
+  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 hover:font-semibold;  
 }
 .selected-tab {
-  @apply underline text-main-green underline-offset-8 font-bold;
+  @apply underline text-main-green underline-offset-8 font-semibold;
 }
 
 .tabs-content {

package/src/components/constants.js

@@ -4,11 +4,12 @@ export const MAIN_GREEN = 'main-green'
 export const ERROR_RED = 'error-red'
 export const WARNING_YELLOW = 'warning-yellow'
 export const NONE = 'none'
+export const EXTRA_SMALL = 'extra-small'
 export const SMALL = 'small'
 export const MEDIUM = 'medium'
 export const LARGE = 'large'
 export const EXTRA_LARGE = 'extra-large'
-export const SIZES = [SMALL, MEDIUM, LARGE, EXTRA_LARGE]
+export const SIZES = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE]
 export const PADDING_SIZES = [NONE, ...SIZES]
 export const BOX_SHADOW = 'box-shadow'
 export const BACKGROUND_COLOR_OPAQUE = 'background-color-opaque'

package/src/components/icons/AppWorkspace.jsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, LARGE, MEDIUM, SIZES, SMALL } from '../constants'
+
+const AppWorkspace = ({ 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}
+        >
+          <rect x={4.5} y={2} width={2.33333} height={2.93706} rx={0.5} stroke='none' />
+          <rect x={8} y={2} width={3.5} height={2.93706} rx={0.5} stroke='none' />
+          <rect x={11.5} y={9} width={2.33333} height={2.93706} rx={0.5} transform='rotate(-180 11.5 9)' stroke='none' />
+          <rect x={8} y={9} width={3.5} height={2.93706} rx={0.5} transform='rotate(-180 8 9)' stroke='none' />
+          <path d='M2.8 2.95996V2.95996C2.35817 2.95996 2 3.31813 2 3.75996V9.63996C2 10.1922 2.44772 10.64 3 10.64H13C13.5523 10.64 14 10.1922 14 9.63996V3.98701C14 3.42427 13.5359 2.97235 12.9733 2.98737L12.8804 2.98985' stroke='none' strokeLinecap='round' />
+          <rect x={6} y={10.6399} width={4} height={1.92} stroke='none' />
+          <path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' stroke='none' />
+        </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}
+        >
+          <rect x={6.75} y={3} width={3.5} height={4.40559} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={3} width={5.25} height={4.40559} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <rect x={17.25} y={13.5} width={3.5} height={4.40559} rx={0.5} transform='rotate(-180 17.25 13.5)' stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={13.5} width={5.25} height={4.40559} rx={0.5} transform='rotate(-180 12 13.5)' stroke='none' strokeWidth={1.5} />
+          <path d='M4.2 4.43994H4C3.44772 4.43994 3 4.88766 3 5.43994V14.9599C3 15.5122 3.44772 15.9599 4 15.9599H20C20.5523 15.9599 21 15.5122 21 14.9599V5.46699C21 4.90425 20.5359 4.45233 19.9733 4.46735L19.3205 4.48477' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <rect x={9} y={15.96} width={6} height={2.88} stroke='none' strokeWidth={1.5} />
+          <path d='M6 19.8401C6 19.2878 6.44772 18.8401 7 18.8401H17C17.5523 18.8401 18 19.2878 18 19.8401V21.0001H6V19.8401Z' stroke='none' strokeWidth={1.5} />
+        </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}
+        >
+          <rect x={11.25} y={5} width={5.83333} height={7.34266} rx={0.5} stroke='none' strokeWidth={2} />
+          <rect x={20} y={5} width={8.75} height={7.34266} rx={0.5} stroke='none' strokeWidth={2} />
+          <rect x={28.75} y={22.5} width={5.83333} height={7.34266} rx={0.5} transform='rotate(-180 28.75 22.5)' stroke='none' strokeWidth={2} />
+          <rect x={20} y={22.5} width={8.75} height={7.34266} rx={0.5} transform='rotate(-180 20 22.5)' stroke='none' strokeWidth={2} />
+          <path d='M7 7.3999H6C5.44772 7.3999 5 7.84762 5 8.3999V25.5999C5 26.1522 5.44772 26.5999 6 26.5999H34C34.5523 26.5999 35 26.1522 35 25.5999V8.42695C35 7.86422 34.5359 7.41229 33.9733 7.42731L32.2009 7.47462' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <rect x={15} y={26.5996} width={10} height={4.8} stroke='none' strokeWidth={2} />
+          <path d='M10 32.4001C10 31.8479 10.4477 31.4001 11 31.4001H29C29.5523 31.4001 30 31.8479 30 32.4001V35.0001H10V32.4001Z' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+AppWorkspace.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+AppWorkspace.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default AppWorkspace

package/src/components/icons/CircleFullIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, EXTRA_SMALL, LARGE, MEDIUM, SIZES, SMALL } from '../constants'
 
 const CircleFullIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -9,7 +9,21 @@ const CircleFullIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case EXTRA_SMALL:
+      icon = (
+        <svg
+          width={8}
+          height={8}
+          viewBox='0 0 8 8'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={4} cy={4} r={3} fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -23,7 +37,7 @@ const CircleFullIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -37,7 +51,7 @@ const CircleFullIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}

package/src/components/icons/GenerationLoadingIcon.jsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, EXTRA_LARGE, SIZES } from '../constants'
+
+const GenerationLoadingIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+
+  let icon = <></>
+
+  switch (size) {
+    case EXTRA_LARGE:
+      icon = (
+        <svg
+          width={105}
+          height={104}
+          viewBox='0 0 105 104'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={4.5} y={84} width={96} height={16} rx={8} stroke='none' strokeWidth={3} />
+          <rect x={8.5} y={88} width={68} height={8} rx={4} fill='none' className={filledClassName} />
+          <path d='M16.5 57.882L15.9114 56.5023C15.3713 56.7327 15.0153 57.2571 15.0005 57.8442C14.9857 58.4312 15.3148 58.9729 15.8426 59.2303L16.5 57.882ZM53.6613 75.9999L53.0039 77.3482C53.4311 77.5565 53.9317 77.55 54.3534 77.3307L53.6613 75.9999ZM61.7122 73.5038C62.4471 73.1216 62.7331 72.2159 62.3509 71.4809C61.9686 70.7459 61.063 70.46 60.328 70.8422L61.7122 73.5038ZM15.8426 59.2303L53.0039 77.3482L54.3186 74.6516L17.1574 56.5337L15.8426 59.2303ZM38.8994 46.6955L15.9114 56.5023L17.0886 59.2617L40.0765 49.4549L38.8994 46.6955ZM54.3534 77.3307L61.7122 73.5038L60.328 70.8422L52.9692 74.6691L54.3534 77.3307Z' fill='none' className={filledClassName} />
+          <circle cx={71.5325} cy={59.0305} r={11.0305} stroke='none' strokeWidth={3} />
+          <path d='M86.9757 74.4733L80.3574 67.855' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M53.6613 55.5231L16.5 37.4051L35.0806 29.4785M71.0806 29.4785L88.5 37.4051L76.5 43.6457' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M53.6613 37.9712L16.5 19.8532L53.6613 4L88.5 19.8532L53.6613 37.9712Z' stroke='none' strokeWidth={3} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+GenerationLoadingIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+GenerationLoadingIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default GenerationLoadingIcon

package/src/components/icons/PullRequestLoadingIcon.jsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const PullRequestLoadingIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+
+  let icon = <></>
+
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={105}
+          height={104}
+          viewBox='0 0 105 104'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={4.5} y={84} width={96} height={16} rx={8} stroke='none' strokeWidth={3} />
+          <rect x={8.5} y={88} width={68} height={8} rx={4} fill='none' className={filledClassName} />
+          <ellipse cx={48.776} cy={48.6901} rx={4.9655} ry={4.96554} stroke='none' strokeWidth={3} />
+          <ellipse cx={48.776} cy={18.8977} rx={4.9655} ry={4.96554} stroke='none' strokeWidth={3} />
+          <path d='M48.7754 43.7254V23.8633' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
+          <ellipse cx={68.6393} cy={48.6901} rx={4.9655} ry={4.96554} stroke='none' strokeWidth={3} />
+          <path d='M68.638 43.725V21.3626C68.638 19.3884 67.0377 17.7881 65.0636 17.7881H58.707' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M61.2956 13.1924L56.3301 18.1579L61.2956 23.1235' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
+          <ellipse cx={58.7071} cy={33.7932} rx={29.793} ry={29.7932} stroke='none' strokeWidth={3} />
+          <path d='M36.588 55.9116L16.5 75.9995' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+PullRequestLoadingIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+PullRequestLoadingIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default PullRequestLoadingIcon

package/src/components/icons/{WorkpaceLoadingIcon.jsx → WorkspaceLoadingIcon.jsx}

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES } from '../constants'
 
-const WorkpaceLoadingIcon = ({ color, size }) => {
+const WorkspaceLoadingIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   const filledClassName = styles[`filled-${color}`]
 
@@ -38,7 +38,7 @@ const WorkpaceLoadingIcon = ({ color, size }) => {
   return icon
 }
 
-WorkpaceLoadingIcon.propTypes = {
+WorkspaceLoadingIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
@@ -49,9 +49,9 @@ WorkpaceLoadingIcon.propTypes = {
   size: PropTypes.oneOf(SIZES)
 }
 
-WorkpaceLoadingIcon.defaultProps = {
+WorkspaceLoadingIcon.defaultProps = {
   color: 'main-dark-blue',
   size: 'medium'
 }
 
-export default WorkpaceLoadingIcon
+export default WorkspaceLoadingIcon

package/src/components/icons/index.js

@@ -8,6 +8,7 @@ import ApiEmptyIcon from './ApiEmptyIcon'
 import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
+import AppWorkspace from './AppWorkspace'
 import ArrowDownFullIcon from './ArrowDownFullIcon'
 import ArrowDownIcon from './ArrowDownIcon'
 import ArrowLeftIcon from './ArrowLeftIcon'
@@ -37,6 +38,7 @@ import ExploreDocIcon from './ExploreDocIcon'
 import EnlargeIcon from './EnlargeIcon'
 import EntryIcon from './EntryIcon'
 import GearIcon from './GearIcon'
+import GenerationLoadingIcon from './GenerationLoadingIcon'
 import GraphQLIcon from './GraphQLIcon'
 import KeyIcon from './KeyIcon'
 import LayersIcon from './LayersIcon'
@@ -48,6 +50,7 @@ import MetricsIcon from './MetricsIcon'
 import RestartIcon from './RestartIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
+import PullRequestLoadingIcon from './PullRequestLoadingIcon'
 import SendIcon from './SendIcon'
 import SocialDiscordIcon from './SocialDiscordIcon'
 import SocialGitHubIcon from './SocialGitHubIcon'
@@ -63,7 +66,7 @@ import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
 import WorkspaceEmptyIcon from './WorkspaceEmptyIcon'
 import WorkspaceGitHubIcon from './WorkspaceGitHubIcon'
 import WorkspaceFailIcon from './WorkspaceFailIcon'
-import WorkpaceLoadingIcon from './WorkpaceLoadingIcon'
+import WorkspaceLoadingIcon from './WorkspaceLoadingIcon'
 import WorkspaceReadyIcon from './WorkspaceReadyIcon'
 import WorkspaceStaticIcon from './WorkspaceStaticIcon'
 
@@ -78,6 +81,7 @@ export default {
   AppIcon,
   AppListIcon,
   AppEmptyIcon,
+  AppWorkspace,
   ArrowDownFullIcon,
   ArrowDownIcon,
   ArrowLeftIcon,
@@ -107,6 +111,7 @@ export default {
   EnlargeIcon,
   EntryIcon,
   GearIcon,
+  GenerationLoadingIcon,
   GraphQLIcon,
   KeyIcon,
   LayersIcon,
@@ -117,6 +122,7 @@ export default {
   MetricsIcon,
   PlayIcon,
   PullRequestIcon,
+  PullRequestLoadingIcon,
   RestartIcon,
   SendIcon,
   StopIcon,
@@ -133,7 +139,7 @@ export default {
   WorkspaceEmptyIcon,
   WorkspaceFailIcon,
   WorkspaceGitHubIcon,
-  WorkpaceLoadingIcon,
+  WorkspaceLoadingIcon,
   WorkspaceReadyIcon,
   WorkspaceStaticIcon
 }

package/src/stories/Button.stories.jsx

@@ -61,6 +61,9 @@ export default {
     },
     fullWidth: {
       type: 'boolean'
+    },
+    selected: {
+      type: 'boolean'
     }
   }
 }