@platformatic/ui-components 0.1.111 → 0.1.113

package/dist/assets/{index-c6205205.css → index-d649dd46.css}

@@ -1 +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_7m1q2_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_7m1q2_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_7m1q2_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_7m1q2_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_7m1q2_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_7m1q2_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_7m1q2_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_7m1q2_22{border-color:#21fa90}._bordered--main-dark-blue-100_7m1q2_25{border-color:#00283d}._bordered--error-red-100_7m1q2_28{border-color:#fa2121}._bordered--warning-yellow-100_7m1q2_31{border-color:#feb928}._bordered--dark-blue-100_7m1q2_34{border-color:#00344f}._bordered--white-100_7m1q2_37{border-color:#fff}._bordered--main-green-20_7m1q2_41{border-color:#21fa9033}._bordered--main-dark-blue-20_7m1q2_44{border-color:#00283d33}._bordered--error-red-20_7m1q2_47{border-color:#fa212133}._bordered--warning-yellow-20_7m1q2_50{border-color:#feb92833}._bordered--dark-blue-20_7m1q2_53{border-color:#00344f33}._bordered--white-20_7m1q2_56{border-color:#fff3}._bordered--main-dark-blue-10_7m1q2_25{border-color:#00283d1a}._bordered--white-10_7m1q2_37{border-color:#ffffff1a}._error-message_7m1q2_68{position:absolute;bottom:-1.25rem;width:-moz-max-content;width:max-content;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_7m1q2_72{padding:.625rem .5rem}._text--error-red_7m1q2_76{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_7m1q2_79{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_7m1q2_82{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_7m1q2_85{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_7m1q2_88{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_7m1q2_91{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_7m1q2_94{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_7m1q2_98{font-size:1rem;line-height:1.5rem}._text--xs_7m1q2_101{font-size:.75rem;line-height:1rem}._background-color-main-green_7m1q2_105{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_7m1q2_108{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_7m1q2_111{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_7m1q2_114{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_7m1q2_117{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_7m1q2_120{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_7m1q2_123{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_7m1q2_126{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_7m1q2_129{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_7m1q2_132{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_7m1q2_135{background-color:transparent}._background-color-opaque-100_7m1q2_138{--tw-bg-opacity: 1 !important}._background-color-opaque-60_7m1q2_141{--tw-bg-opacity: .6 !important}._background-color-opaque-30_7m1q2_144{--tw-bg-opacity: .3 !important}._background-color-opaque-20_7m1q2_147{--tw-bg-opacity: .2 !important}._background-color-opaque-10_7m1q2_138{--tw-bg-opacity: .1 !important}._apply-opacity-30_7m1q2_153{opacity:.3}._padding--none_7m1q2_156{padding:0}._padding--small_7m1q2_159{padding:.25rem}._padding--medium_7m1q2_162{padding:.5rem}._padding--large_7m1q2_165{padding:1rem}._padding--extra-large_7m1q2_168{padding:1.5rem}._hover-background-color-opaque-main-green_7m1q2_171:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_7m1q2_174:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_7m1q2_177:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_7m1q2_180:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_7m1q2_183:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_7m1q2_186:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_7m1q2_189:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_7m1q2_192:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_7m1q2_195:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_7m1q2_198{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_7m1q2_201{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_7m1q2_204{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_7m1q2_207{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_7m1q2_210{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_7m1q2_213{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_7m1q2_216{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_7m1q2_219{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_7m1q2_222{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_7m1q2_226{font-weight:600}._fontLight_7m1q2_229{font-weight:300}._fullWidth_7m1q2_232{width:100%}._error-red_13cgh_1>circle,._error-red_13cgh_1>ellipse,._error-red_13cgh_1>rect,._error-red_13cgh_1>line,._error-red_13cgh_1>path{stroke:#fa2121}._main-dark-blue_13cgh_9>circle,._main-dark-blue_13cgh_9>ellipse,._main-dark-blue_13cgh_9>rect,._main-dark-blue_13cgh_9>line,._main-dark-blue_13cgh_9>path{stroke:#00283d}._main-green_13cgh_17>circle,._main-green_13cgh_17>ellipse,._main-green_13cgh_17>rect,._main-green_13cgh_17>line,._main-green_13cgh_17>path{stroke:#21fa90}._tertiary-blue_13cgh_25>circle,._tertiary-blue_13cgh_25>ellipse,._tertiary-blue_13cgh_25>rect,._tertiary-blue_13cgh_25>line,._tertiary-blue_13cgh_25>path{stroke:#2588e4}._warning-yellow_13cgh_33>circle,._warning-yellow_13cgh_33>ellipse,._warning-yellow_13cgh_33>rect,._warning-yellow_13cgh_33>line,._warning-yellow_13cgh_33>path{stroke:#feb928}._white_13cgh_41>circle,._white_13cgh_41>ellipse,._white_13cgh_41>rect,._white_13cgh_41>line,._white_13cgh_41>path{stroke:#fff}._filled-white_13cgh_49{fill:#fff}._filled-error-red_13cgh_52{fill:#fa2121}._filled-main-dark-blue_13cgh_55{fill:#00283d}._filled-main-green_13cgh_58{fill:#21fa90}._filled-warning-yellow_13cgh_61{fill:#feb928}._filled-tertiary-blue_13cgh_64{fill:#2588e4}._fill-circle-green_13cgh_68>circle{fill:#fff}._fill-circle-main-dark-blue_13cgh_71>circle{fill:#00283d}._noShrinkForFlex_13cgh_75{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_1rjlv_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1rjlv_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_1rjlv_4:hover{cursor:pointer}._tab_1rjlv_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_1rjlv_1:first-child{margin-left:0}._tab_1rjlv_1:last-child{margin-right:0}._tab_1rjlv_1:hover{font-weight:600}._selected-tab_1rjlv_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_1rjlv_13{min-height:100vh}._tab_1rjlv_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._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;font-feature-settings:normal;font-variation-settings:normal}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-feature-settings:inherit;font-variation-settings: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}dialog{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}[hidden]{display:none}*,: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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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}.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}.my-auto{margin-top:auto;margin-bottom:auto}.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-10{gap:2.5rem}.gap-2{gap:.5rem}.border{border-width:1px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.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-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / 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)}:root{background-color:transparent;font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.body--light-blue{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}.body--main-dark-blue{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}
+._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_7m1q2_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_7m1q2_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_7m1q2_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_7m1q2_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_7m1q2_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_7m1q2_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_7m1q2_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_7m1q2_22{border-color:#21fa90}._bordered--main-dark-blue-100_7m1q2_25{border-color:#00283d}._bordered--error-red-100_7m1q2_28{border-color:#fa2121}._bordered--warning-yellow-100_7m1q2_31{border-color:#feb928}._bordered--dark-blue-100_7m1q2_34{border-color:#00344f}._bordered--white-100_7m1q2_37{border-color:#fff}._bordered--main-green-20_7m1q2_41{border-color:#21fa9033}._bordered--main-dark-blue-20_7m1q2_44{border-color:#00283d33}._bordered--error-red-20_7m1q2_47{border-color:#fa212133}._bordered--warning-yellow-20_7m1q2_50{border-color:#feb92833}._bordered--dark-blue-20_7m1q2_53{border-color:#00344f33}._bordered--white-20_7m1q2_56{border-color:#fff3}._bordered--main-dark-blue-10_7m1q2_25{border-color:#00283d1a}._bordered--white-10_7m1q2_37{border-color:#ffffff1a}._error-message_7m1q2_68{position:absolute;bottom:-1.25rem;width:-moz-max-content;width:max-content;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_7m1q2_72{padding:.625rem .5rem}._text--error-red_7m1q2_76{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_7m1q2_79{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_7m1q2_82{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_7m1q2_85{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_7m1q2_88{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_7m1q2_91{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_7m1q2_94{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_7m1q2_98{font-size:1rem;line-height:1.5rem}._text--xs_7m1q2_101{font-size:.75rem;line-height:1rem}._background-color-main-green_7m1q2_105{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_7m1q2_108{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_7m1q2_111{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_7m1q2_114{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_7m1q2_117{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_7m1q2_120{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_7m1q2_123{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_7m1q2_126{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_7m1q2_129{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_7m1q2_132{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_7m1q2_135{background-color:transparent}._background-color-opaque-100_7m1q2_138{--tw-bg-opacity: 1 !important}._background-color-opaque-60_7m1q2_141{--tw-bg-opacity: .6 !important}._background-color-opaque-30_7m1q2_144{--tw-bg-opacity: .3 !important}._background-color-opaque-20_7m1q2_147{--tw-bg-opacity: .2 !important}._background-color-opaque-10_7m1q2_138{--tw-bg-opacity: .1 !important}._apply-opacity-30_7m1q2_153{opacity:.3}._padding--none_7m1q2_156{padding:0}._padding--small_7m1q2_159{padding:.25rem}._padding--medium_7m1q2_162{padding:.5rem}._padding--large_7m1q2_165{padding:1rem}._padding--extra-large_7m1q2_168{padding:1.5rem}._hover-background-color-opaque-main-green_7m1q2_171:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_7m1q2_174:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_7m1q2_177:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_7m1q2_180:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_7m1q2_183:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_7m1q2_186:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_7m1q2_189:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_7m1q2_192:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_7m1q2_195:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_7m1q2_198{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_7m1q2_201{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_7m1q2_204{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_7m1q2_207{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_7m1q2_210{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_7m1q2_213{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_7m1q2_216{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_7m1q2_219{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_7m1q2_222{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_7m1q2_226{font-weight:600}._fontLight_7m1q2_229{font-weight:300}._fullWidth_7m1q2_232{width:100%}._error-red_13cgh_1>circle,._error-red_13cgh_1>ellipse,._error-red_13cgh_1>rect,._error-red_13cgh_1>line,._error-red_13cgh_1>path{stroke:#fa2121}._main-dark-blue_13cgh_9>circle,._main-dark-blue_13cgh_9>ellipse,._main-dark-blue_13cgh_9>rect,._main-dark-blue_13cgh_9>line,._main-dark-blue_13cgh_9>path{stroke:#00283d}._main-green_13cgh_17>circle,._main-green_13cgh_17>ellipse,._main-green_13cgh_17>rect,._main-green_13cgh_17>line,._main-green_13cgh_17>path{stroke:#21fa90}._tertiary-blue_13cgh_25>circle,._tertiary-blue_13cgh_25>ellipse,._tertiary-blue_13cgh_25>rect,._tertiary-blue_13cgh_25>line,._tertiary-blue_13cgh_25>path{stroke:#2588e4}._warning-yellow_13cgh_33>circle,._warning-yellow_13cgh_33>ellipse,._warning-yellow_13cgh_33>rect,._warning-yellow_13cgh_33>line,._warning-yellow_13cgh_33>path{stroke:#feb928}._white_13cgh_41>circle,._white_13cgh_41>ellipse,._white_13cgh_41>rect,._white_13cgh_41>line,._white_13cgh_41>path{stroke:#fff}._filled-white_13cgh_49{fill:#fff}._filled-error-red_13cgh_52{fill:#fa2121}._filled-main-dark-blue_13cgh_55{fill:#00283d}._filled-main-green_13cgh_58{fill:#21fa90}._filled-warning-yellow_13cgh_61{fill:#feb928}._filled-tertiary-blue_13cgh_64{fill:#2588e4}._fill-circle-green_13cgh_68>circle{fill:#fff}._fill-circle-main-dark-blue_13cgh_71>circle{fill:#00283d}._noShrinkForFlex_13cgh_75{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_1rjlv_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1rjlv_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_1rjlv_4:hover{cursor:pointer}._tab_1rjlv_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_1rjlv_1:first-child{margin-left:0}._tab_1rjlv_1:last-child{margin-right:0}._tab_1rjlv_1:hover{font-weight:600}._selected-tab_1rjlv_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_1rjlv_13{min-height:100vh}._tab_1rjlv_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._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;font-feature-settings:normal;font-variation-settings:normal}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-feature-settings:inherit;font-variation-settings: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}dialog{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}[hidden]{display:none}*,: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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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}.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}.my-auto{margin-top:auto;margin-bottom:auto}.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-10{gap:2.5rem}.gap-2{gap:.5rem}.border{border-width:1px}.border-0{border-width:0px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.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-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / 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)}:root{background-color:transparent;font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.body--light-blue{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}.body--main-dark-blue{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}.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-72c60737.js"></script>
-    <link rel="stylesheet" href="/assets/index-c6205205.css">
+    <script type="module" crossorigin src="/assets/index-4434ad72.js"></script>
+    <link rel="stylesheet" href="/assets/index-d649dd46.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -650,6 +650,10 @@ video {
   border-width: 1px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;

package/package.json

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

package/src/components/ButtonFullRounded.jsx

@@ -20,9 +20,13 @@ function ButtonFullRounded ({
   selected
 }) {
   const padding = commonStyles[`padding--${paddingSize}`]
-  const containerClassName = `${className} ${styles.roundedFull}`
+  const containerClassName = `${className} border-0 ${styles.roundedFull}`
   let buttonClassName = `${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
-  if (bordered) buttonClassName += ' ' + commonStyles[`bordered--${iconColor}`]
+  if (bordered) {
+    buttonClassName += ` ${styles.applyBorder} ` + commonStyles[`bordered--${iconColor}`]
+  } else {
+    buttonClassName += ` ${styles.borderLess} `
+  }
   if (disabled) {
     buttonClassName += ` ${styles.disabled}`
   } else {
@@ -38,7 +42,7 @@ function ButtonFullRounded ({
 
   return (
     <div className={containerClassName}>
-      <button className={buttonClassName} disabled={disabled} onClick={onClick} alt={alt}>
+      <button className={buttonClassName} disabled={disabled} onClick={onClick} alt={alt} type='button'>
         <PlatformaticIcon iconName={iconName} size={iconSize} color={iconColor} data-testid='button-icon' onClick={null} tip={tip} />
       </button>
     </div>
@@ -94,6 +98,7 @@ ButtonFullRounded.propTypes = {
 }
 
 ButtonFullRounded.defaultProps = {
+  className: '',
   iconName: '',
   iconColor: WHITE,
   iconSize: SMALL,
@@ -102,7 +107,7 @@ ButtonFullRounded.defaultProps = {
   alt: 'ButtonFullRounded',
   onClick: () => {},
   hoverEffect: '',
-  bordered: true,
+  bordered: false,
   tip: '',
   selected: false
 }

package/src/components/ButtonFullRounded.module.css

@@ -1,5 +1,5 @@
 .buttonRoundedFull {
-  @apply flex justify-center cursor-pointer border-0 items-center;
+  @apply flex justify-center cursor-pointer items-center;
 }
 .disabled {
   @apply opacity-30 cursor-default;
@@ -7,3 +7,9 @@
 .roundedFull {
   @apply rounded-full 
 }
+.applyBorder {
+  @apply border
+}
+.borderLess {
+  @apply border-0
+}

package/src/components/forms/Select.jsx

@@ -3,10 +3,10 @@ import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Select.module.css'
 import commonStyles from '../Common.module.css'
-import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
+import { MAIN_DARK_BLUE, MAIN_GREEN, SMALL } from '../constants'
 import PlatformaticIcon from '../PlatformaticIcon'
 
-function Select ({ placeholder, name, value, options, borderColor, errorMessage, onChange, onSelect, disabled }) {
+function Select ({ placeholder, name, value, options, borderColor, errorMessage, onChange, onSelect, onClear, disabled, optionsIconColor }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
   const [isSelected, setIsSelected] = useState(false)
@@ -16,6 +16,11 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
   if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
   if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
 
+  function handleNotSelectable (callback = () => {}) {
+    setIsSelected(true)
+    setShowOptions(false)
+    callback()
+  }
   function setSelected ({ label, value }) {
     setIsSelected(true)
     setShowOptions(false)
@@ -38,14 +43,34 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
     }
   }, [value])
 
+  function renderLi (option, index) {
+    return (
+      <li
+        key={index} className={styles.option} onClick={() => {
+          if (option.notSelectable) {
+            return handleNotSelectable(option.onClick && option.onClick())
+          }
+          return setSelected(option)
+        }}
+      >
+        {option.iconName && <PlatformaticIcon iconName={option.iconName} color={optionsIconColor} size={SMALL} onClick={null} />}
+        <span>{option.label}</span>
+      </li>
+    )
+  }
+
   function renderOptions () {
     if (value.length === 0) {
-      return <></>
+      return (
+        <ul className={styles.options}>
+          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={styles.option}>No data found</li>}
+        </ul>
+      )
     }
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
     return (
       <ul className={styles.options}>
-        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => <li key={index} className={styles.option} onClick={() => setSelected(option)}>{option.label}</li>) : <li className={styles.option}>No data found</li>}
+        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={styles.option}>No data found</li>}
       </ul>
     )
   }
@@ -57,6 +82,7 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
     const ev2 = new Event('input', { bubbles: true })
     ev2.simulated = true
     inputRef.current.dispatchEvent(ev2)
+    onClear()
   }
 
   return (
@@ -65,7 +91,7 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
         <input type='text' name={name} value={value} className={inputClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} />
         <div className={styles.icons}>
           {value?.length > 0 && <PlatformaticIcon iconName='CloseIcon' color={borderColor} onClick={() => clearValue()} />}
-          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => setShowOptions(!showOptions)} />
+          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => disabled ? null : setShowOptions(!showOptions)} />
         </div>
       </div>
       {showOptions && !showError && renderOptions()}
@@ -82,7 +108,10 @@ Select.propTypes = {
   /**
    * name
    */
-  name: PropTypes.string,
+  name: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   /**
    * value
    */
@@ -91,8 +120,14 @@ Select.propTypes = {
    * options
    */
   options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    icon: PropTypes.string,
+    notSelectable: PropTypes.bool,
+    onClick: PropTypes.func
   })),
   /**
    * color of border
@@ -106,10 +141,18 @@ Select.propTypes = {
    * onSelect
    */
   onSelect: PropTypes.func,
+  /**
+   * onClear
+   */
+  onClear: PropTypes.func,
   /**
    * Disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * optionsIconColor
+   */
+  optionsIconColor: PropTypes.string
 }
 
 Select.defaultProps = {
@@ -122,7 +165,9 @@ Select.defaultProps = {
   errorMessage: '',
   onChange: () => {},
   onSelect: () => {},
-  disabled: false
+  onClear: () => {},
+  disabled: false,
+  optionsIconColor: MAIN_DARK_BLUE
 }
 
 export default Select

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

@@ -1,9 +1,9 @@
 .container {
-  @apply flex flex-col w-full relative z-10;
+  @apply flex flex-col w-full relative;
 }
 .selectContainer {
-  @apply w-full flex items-center h-10 relative;
-}
+  @apply w-full flex items-center h-10 relative z-10;
+} 
 .select {
   @apply px-2 h-full border border-solid box-border rounded-md ;
 }
@@ -12,11 +12,11 @@
   @apply shadow-main-dark-blue outline-none;
 }
 .options {
-  @apply absolute left-0 top-[42px] bg-white w-full max-h-[216px] overflow-y-scroll;
+  @apply absolute left-0 top-[42px] bg-white w-full max-h-[216px] overflow-y-scroll z-20;
   box-shadow: 0px 0px 10px rgb(0 40 61 / 25%);
 }
 .option {
-  @apply w-full px-4 py-2 border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10
+  @apply w-full px-4 py-2 border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10 inline-flex items-center gap-x-1
 }
 .icons {
   @apply absolute top-[50%] right-[0.5rem] translate-y-[-50%] flex gap-x-2;

package/src/components/icons/CircleCopyPasteIcon.jsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE } from '../constants'
+
+const CircleCopyPasteIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='9' cy='9' r='8' stroke='none' />
+          <path d='M7.3335 13.5V6.53746C7.3335 6.26132 7.55735 6.03746 7.8335 6.03746H11.0821C11.205 6.03746 11.3235 6.08269 11.4152 6.16453L13.8332 8.32396C13.9394 8.41882 14.0002 8.55448 14.0002 8.69689V13.5C14.0002 13.7761 13.7763 14 13.5002 14H7.8335C7.55735 14 7.3335 13.7761 7.3335 13.5Z' stroke='none' strokeLinecap='round' />
+          <path d='M11.0835 8.82435V6.03746L14.0002 8.82435H11.0835Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.25 5.63936L8.49695 4.12196C8.40607 4.0433 8.28991 4 8.16972 4H6.17803H4.5C4.22386 4 4 4.22386 4 4.50001L4 11.1112C4.00001 11.3874 4.22386 11.6112 4.5 11.6112H6.91667' stroke='none' strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CircleCopyPasteIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+CircleCopyPasteIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: SMALL
+}
+
+export default CircleCopyPasteIcon

package/src/components/icons/CircleEditIcon.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE } from '../constants'
+
+const CircleEditIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='9' cy='9' r='8' stroke='none' />
+          <rect x='11.0552' y='5.50607' width='2.11765' height='7.76471' transform='rotate(45 11.0552 5.50607)' stroke='none' strokeLinejoin='round' />
+          <path d='M7.06234 12.494L5.56494 10.9966L4.81624 13.2427L7.06234 12.494Z' stroke='none' strokeLinejoin='round' />
+          <path d='M11.8456 4.71577C12.2362 4.32525 12.8693 4.32525 13.2598 4.71577L13.343 4.79896C13.7336 5.18949 13.7336 5.82265 13.343 6.21318L12.5527 7.00347L11.0553 5.50607L11.8456 4.71577Z' stroke='none' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CircleEditIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+CircleEditIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: SMALL
+}
+
+export default CircleEditIcon

package/src/components/icons/CircleRestartIcon.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE } from '../constants'
+
+const CircleRestartIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='9' cy='9' r='8' stroke='none' />
+          <path d='M5.05117 6.23517C5.89557 4.88792 7.33948 4 8.97888 4C11.5819 4 13.6921 6.23858 13.6921 9C13.6921 9.50216 13.6224 9.98702 13.4925 10.4443M4.33079 8.16667C4.28793 8.43767 4.26562 8.71607 4.26562 9C4.26562 11.7614 6.37582 14 8.97888 14C10.3866 14 11.6502 13.3453 12.5138 12.3073' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.2388 8.87502L13.47 10.4981L15 9.19192' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.771 9.35161L4.29088 7.98235L3.00014 9.5525' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CircleRestartIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+CircleRestartIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: SMALL
+}
+
+export default CircleRestartIcon

package/src/components/icons/index.js

@@ -25,11 +25,14 @@ import CircleArrowLeftIcon from './CircleArrowLeftIcon'
 import CircleArrowRightIcon from './CircleArrowRightIcon'
 import CircleCheckMarkIcon from './CircleCheckMarkIcon'
 import CircleCheckMarkFullIcon from './CircleCheckMarkFullIcon'
+import CircleCopyPasteIcon from './CircleCopyPasteIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
+import CircleEditIcon from './CircleEditIcon'
 import CircleFullIcon from './CircleFullIcon'
 import CircleGearIcon from './CircleGearIcon'
+import CircleRestartIcon from './CircleRestartIcon'
 import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
 import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
@@ -123,10 +126,13 @@ export default {
   CircleCheckMarkIcon,
   CircleCheckMarkFullIcon,
   CircleExclamationIcon,
+  CircleCopyPasteIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
+  CircleEditIcon,
   CircleFullIcon,
   CircleGearIcon,
+  CircleRestartIcon,
   CircleTwoArrowsDownIcon,
   CircleTwoArrowsUpIcon,
   CloseIcon,

package/src/stories/ButtonFullRounded.stories.jsx

@@ -62,25 +62,25 @@ SingleButton.args = {
 }
 
 const AllCircleButtonsTemplate = (args) => {
-  const icons = Object.values(Icons).filter(icon => icon.name.indexOf('Circle') > -1)
+  const icons = Object.keys(Icons).filter(icon => icon.indexOf('Circle') > -1)
 
   return (
     <>
       <div style={divStyle}>
         <p style={paragraph}>All Buttons with Circle Icons: {icons.length} </p>
-        {icons.map((IconComponent, index) => (
+        {icons.map((icon, index) => (
           <div style={row} key={index}>
             <div style={col}>
-              <p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
+              <p style={paragraph}>#{index + 1}: {icon}</p>
             </div>
             <div style={col}>
-              <ButtonFullRounded key={IconComponent.name} iconName={IconComponent.name} iconSize={SMALL} {...args} />
+              <ButtonFullRounded key={icon} iconName={icon} iconSize={SMALL} {...args} />
             </div>
             <div style={col}>
-              <ButtonFullRounded key={IconComponent.name} iconName={IconComponent.name} iconSize={MEDIUM} {...args} />
+              <ButtonFullRounded key={icon} iconName={icon} iconSize={MEDIUM} {...args} />
             </div>
             <div style={col}>
-              <ButtonFullRounded key={IconComponent.name} iconName={IconComponent.name} iconSize={LARGE} {...args} />
+              <ButtonFullRounded key={icon} iconName={icon} iconSize={LARGE} {...args} />
             </div>
           </div>
         ))}

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

@@ -51,12 +51,36 @@ const TemplateBorderMainDarkBlue = (args) => {
   )
 }
 
+const TemplateBorderMainDarkBlue2 = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleSelect (event) {
+    setValue(event.detail.label)
+  }
+
+  return (
+    <>
+      <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
+        <p>Value of the input {value}</p>
+        <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+        <br />
+        <Select placeholder='Disabled' disabled />
+
+      </div>
+    </>
+  )
+}
+
 export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
 
 BorderMainDarkBlue.args = {
   name: 'test',
   placeholder: 'Defaul option',
-  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}` })),
+  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'SocialGitHubIcon' })),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -69,3 +93,27 @@ DefaultInvalid.args = {
   borderColor: MAIN_GREEN,
   errorMessage: 'This is an error message'
 }
+
+export const withDifferentOptions = TemplateBorderMainDarkBlue2.bind({})
+
+withDifferentOptions.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  options: [...Array(20).keys()].map(ele => ({
+    label: `Option ${ele}`,
+    value: `Value${ele}`,
+    iconName: 'SocialGitHubIcon'
+  })).concat({
+    label: 'Last but not least',
+    iconName: 'AddIcon',
+    value: 123123,
+    notSelectable: true,
+    onClick: () => alert('you clicked last but not least')
+  }).concat({
+    label: 'Play',
+    iconName: 'PlayIcon',
+    value: 123123,
+    notSelectable: true
+  }),
+  borderColor: MAIN_DARK_BLUE
+}