@platformatic/ui-components 0.1.124 → 0.1.125

package/dist/assets/index-89e9ad97.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_5vifr_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_5vifr_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_5vifr_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_5vifr_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_5vifr_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_5vifr_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_5vifr_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_5vifr_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_5vifr_25{border-color:#21fa90}._bordered--main-dark-blue-100_5vifr_28{border-color:#00283d}._bordered--tertiary-blue-100_5vifr_31{border-color:#2588e4}._bordered--error-red-100_5vifr_34{border-color:#fa2121}._bordered--warning-yellow-100_5vifr_37{border-color:#feb928}._bordered--dark-blue-100_5vifr_40{border-color:#00344f}._bordered--white-100_5vifr_43{border-color:#fff}._bordered--main-green-30_5vifr_46{border-color:#21fa904d}._bordered--main-dark-blue-30_5vifr_49{border-color:#00283d4d}._bordered--error-red-30_5vifr_52{border-color:#fa21214d}._bordered--warning-yellow-30_5vifr_55{border-color:#feb9284d}._bordered--dark-blue-30_5vifr_58{border-color:#00344f4d}._bordered--white-30_5vifr_61{border-color:#ffffff4d}._bordered--tertiary-blue-30_5vifr_64{border-color:#2588e44d}._bordered--main-green-20_5vifr_67{border-color:#21fa9033}._bordered--main-dark-blue-20_5vifr_70{border-color:#00283d33}._bordered--error-red-20_5vifr_73{border-color:#fa212133}._bordered--warning-yellow-20_5vifr_76{border-color:#feb92833}._bordered--dark-blue-20_5vifr_79{border-color:#00344f33}._bordered--white-20_5vifr_82{border-color:#fff3}._bordered--tertiary-blue-20_5vifr_85{border-color:#2588e433}._bordered--main-dark-blue-15_5vifr_88{border-color:#00283d26}._bordered--white-15_5vifr_91{border-color:#ffffff26}._bordered--tertiary-blue-15_5vifr_94{border-color:#2588e426}._bordered--main-dark-blue-10_5vifr_28{border-color:#00283d1a}._bordered--white-10_5vifr_43{border-color:#ffffff1a}._bordered--tertiary-blue-10_5vifr_31{border-color:#2588e41a}._error-message_5vifr_108{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_5vifr_112{padding:.625rem .5rem}._text--error-red_5vifr_116{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_5vifr_119{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_5vifr_122{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_5vifr_125{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_5vifr_128{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_5vifr_131{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_5vifr_134{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_5vifr_138{font-size:1rem;line-height:1.5rem}._text--xs_5vifr_141{font-size:.75rem;line-height:1rem}._background-color-main-green_5vifr_145{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_5vifr_148{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_5vifr_151{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_5vifr_154{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_5vifr_157{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_5vifr_160{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_5vifr_163{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_5vifr_166{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_5vifr_169{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_5vifr_172{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-rich-black_5vifr_175{--tw-bg-opacity: 1 !important;background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important}._background-color-transparent_5vifr_178{background-color:transparent}._background-color-opaque-100_5vifr_181{--tw-bg-opacity: 1 !important}._background-color-opaque-60_5vifr_184{--tw-bg-opacity: .6 !important}._background-color-opaque-30_5vifr_187{--tw-bg-opacity: .3 !important}._background-color-opaque-20_5vifr_190{--tw-bg-opacity: .2 !important}._background-color-opaque-10_5vifr_181{--tw-bg-opacity: .1 !important}._apply-opacity-30_5vifr_196{opacity:.3}._padding--none_5vifr_199{padding:0}._padding--small_5vifr_202{padding:.25rem}._padding--medium_5vifr_205{padding:.5rem}._padding--large_5vifr_208{padding:1rem}._padding--extra-large_5vifr_211{padding:1.5rem}._hover-background-color-opaque-main-green_5vifr_214:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_5vifr_217:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_5vifr_220:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_5vifr_223:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_5vifr_226:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_5vifr_229:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_5vifr_232:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_5vifr_235:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_5vifr_238:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_5vifr_241{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_5vifr_244{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_5vifr_247{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_5vifr_250{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_5vifr_253{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_5vifr_256{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_5vifr_259{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_5vifr_262{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_5vifr_265{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_5vifr_269{font-weight:600}._fontLight_5vifr_272{font-weight:300}._fullWidth_5vifr_275{width:100%}._error-red_ulad8_1>circle,._error-red_ulad8_1>ellipse,._error-red_ulad8_1>rect,._error-red_ulad8_1>line,._error-red_ulad8_1>path{stroke:#fa2121}._main-dark-blue_ulad8_9>circle,._main-dark-blue_ulad8_9>ellipse,._main-dark-blue_ulad8_9>rect,._main-dark-blue_ulad8_9>line,._main-dark-blue_ulad8_9>path{stroke:#00283d}._main-green_ulad8_17>circle,._main-green_ulad8_17>ellipse,._main-green_ulad8_17>rect,._main-green_ulad8_17>line,._main-green_ulad8_17>path{stroke:#21fa90}._tertiary-blue_ulad8_25>circle,._tertiary-blue_ulad8_25>ellipse,._tertiary-blue_ulad8_25>rect,._tertiary-blue_ulad8_25>line,._tertiary-blue_ulad8_25>path{stroke:#2588e4}._warning-yellow_ulad8_33>circle,._warning-yellow_ulad8_33>ellipse,._warning-yellow_ulad8_33>rect,._warning-yellow_ulad8_33>line,._warning-yellow_ulad8_33>path{stroke:#feb928}._white_ulad8_41>circle,._white_ulad8_41>ellipse,._white_ulad8_41>rect,._white_ulad8_41>line,._white_ulad8_41>path{stroke:#fff}._filled-white_ulad8_49{fill:#fff}._filled-error-red_ulad8_52{fill:#fa2121}._filled-main-dark-blue_ulad8_55{fill:#00283d}._filled-main-green_ulad8_58{fill:#21fa90}._filled-warning-yellow_ulad8_61{fill:#feb928}._filled-tertiary-blue_ulad8_64{fill:#2588e4}._fill-circle-green_ulad8_68>circle{fill:#fff}._fill-circle-main-dark-blue_ulad8_71>circle{fill:#00283d}._svgClassName_ulad8_75{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_ulad8_80{opacity:.3}._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_ljsv8_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))}._clickable_ljsv8_4{cursor:pointer}*,: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: 350px){.container{max-width:350px}}@media (min-width: 390px){.container{max-width:390px}}@media (min-width: 744px){.container{max-width:744px}}@media (min-width: 1240px){.container{max-width:1240px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1920px){.container{max-width:1920px}}.relative{position:relative}.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-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-8f6ac36c.js"></script>
-    <link rel="stylesheet" href="/assets/index-3a61658e.css">
+    <script type="module" crossorigin src="/assets/index-78f54889.js"></script>
+    <link rel="stylesheet" href="/assets/index-89e9ad97.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -580,11 +580,6 @@ video {
   position: relative;
 }
 
-.mx-5 {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -595,11 +590,6 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }

package/fonts/Inter/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/Inter/README.txt

@@ -0,0 +1,72 @@
+Inter Variable Font
+===================
+
+This download contains Inter as both a variable font and static fonts.
+
+Inter is a variable font with these axes:
+  slnt
+  wght
+
+This means all the styles are contained in a single file:
+  Inter-VariableFont_slnt,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+  static/Inter-Thin.ttf
+  static/Inter-ExtraLight.ttf
+  static/Inter-Light.ttf
+  static/Inter-Regular.ttf
+  static/Inter-Medium.ttf
+  static/Inter-SemiBold.ttf
+  static/Inter-Bold.ttf
+  static/Inter-ExtraBold.ttf
+  static/Inter-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

package/fonts/{Montserrat/fonts.css → fonts.css}

@@ -4,3 +4,10 @@
   font-weight: 400;
   font-style: normal;
 }
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/Inter/static/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}

package/index.js

@@ -21,18 +21,22 @@ import List from './src/components/List'
 import ListElement from './src/components/ListElement'
 import Loadable from './src/components/Loadable'
 import LoadingSpinner from './src/components/LoadingSpinner'
+import LoadingSpinnerV2 from './src/components/LoadingSpinnerV2'
 import LoginButton from './src/components/LoginButton'
 import Logo from './src/components/Logo'
 import LogoDropDown from './src/components/LogoDropDown'
 import Logos from './src/components/logos'
 import Modal from './src/components/Modal'
+import ModalDirectional from './src/components/ModalDirectional'
 import ModalStepsForward from './src/components/ModalStepsForward'
 import PlatformaticIcon from './src/components/PlatformaticIcon'
 import Playground from './src/components/Playground'
 import SearchBar from './src/components/SearchBar'
+import SearchBarV2 from './src/components/SearchBarV2'
 import SimpleMetric from './src/components/SimpleMetric'
 import Status from './src/components/Status'
 import TabbedWindow from './src/components/TabbedWindow'
+import TabbedWindowV2 from './src/components/TabbedWindowV2'
 import Tag from './src/components/Tag'
 import TextWithLabel from './src/components/TextWithLabel'
 import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
@@ -62,17 +66,21 @@ export {
   ListElement,
   Loadable,
   LoadingSpinner,
+  LoadingSpinnerV2,
   LoginButton,
   Logo,
   LogoDropDown,
   Modal,
+  ModalDirectional,
   ModalStepsForward,
   PlatformaticIcon,
   Playground,
   SearchBar,
+  SearchBarV2,
   SimpleMetric,
   Status,
   TabbedWindow,
+  TabbedWindowV2,
   Tag,
   TextWithLabel,
   TwoColumnsLayout,

package/package.json

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

package/src/components/BorderedBox.jsx

@@ -4,15 +4,24 @@ import styles from './BorderedBox.module.css'
 import commonStyles from './Common.module.css'
 import React from 'react'
 import { COLORS_BORDERED_BOX } from './constants'
-function BorderedBox (props) {
-  const { classes, color, children, backgroundColor, backgroundColorOpacity, borderColorOpacity } = props
+function BorderedBox ({
+  classes,
+  color,
+  children,
+  backgroundColor,
+  backgroundColorOpacity,
+  borderColorOpacity,
+  clickable,
+  onClick
+}) {
   const borderColor = commonStyles[`bordered--${color}-${borderColorOpacity}`]
   const styledBackgroundColor = commonStyles[`background-color-${backgroundColor}`]
   const opacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
-  const className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
+  let className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
+  className += clickable ? ` ${styles.clickable}` : ''
 
   return (
-    <div className={className}>
+    <div className={className} onClick={() => clickable ? onClick() : {}}>
       {children}
     </div>
   )
@@ -42,7 +51,15 @@ BorderedBox.propTypes = {
   /**
    * borderColorOpacity
    */
-  borderColorOpacity: PropTypes.oneOf([100, 60, 30, 20, 10])
+  borderColorOpacity: PropTypes.oneOf([100, 60, 30, 20, 10]),
+  /**
+   * clickable
+   */
+  clickable: PropTypes.bool,
+  /**
+   * onClick
+   */
+  onClick: PropTypes.func
 }
 
 BorderedBox.defaultProps = {
@@ -51,7 +68,9 @@ BorderedBox.defaultProps = {
   backgroundColor: 'dark-blue',
   classes: '',
   backgroundColorOpacity: 100,
-  borderColorOpacity: 100
+  borderColorOpacity: 100,
+  clickable: false,
+  onClick: () => {}
 }
 
 export default BorderedBox

package/src/components/BorderedBox.module.css

@@ -1,3 +1,6 @@
 .borderedBox {
   @apply rounded-md p-5 text-white flex-1 gap-y-4;
+}
+.clickable {
+  @apply cursor-pointer;
 }

package/src/components/Common.module.css

@@ -43,7 +43,27 @@
 .bordered--white-100 {
   @apply border-white/100;
 }
-
+.bordered--main-green-30 {
+  @apply border-main-green/30;
+}
+.bordered--main-dark-blue-30 {
+  @apply border-main-dark-blue/30;
+}
+.bordered--error-red-30 {
+  @apply border-error-red/30;
+}
+.bordered--warning-yellow-30 {
+  @apply border-warning-yellow/30;
+}
+.bordered--dark-blue-30 {
+  @apply border-dark-blue/30;
+}
+.bordered--white-30 {
+  @apply border-white/30;
+}
+.bordered--tertiary-blue-30 {
+  @apply border-tertiary-blue/30;
+}
 .bordered--main-green-20 {
   @apply border-main-green/20;
 }
@@ -65,7 +85,15 @@
 .bordered--tertiary-blue-20 {
   @apply border-tertiary-blue/20;
 }
-
+.bordered--main-dark-blue-15 {
+  @apply border-main-dark-blue/15;
+}
+.bordered--white-15 {
+  @apply border-white/15;
+}
+.bordered--tertiary-blue-15 {
+  @apply border-tertiary-blue/15;
+}
 .bordered--main-dark-blue-10 {
   @apply border-main-dark-blue/10;
 }
@@ -141,9 +169,12 @@
 .background-color-tertiary-blue{
   @apply bg-tertiary-blue !important;
 }
-.background-color-warning-yellow{
+.background-color-warning-yellow {
   @apply bg-warning-yellow !important ;
 }
+.background-color-rich-black {
+  @apply bg-rich-black !important ;
+}
 .background-color-transparent{
   @apply bg-transparent;
 }

package/src/components/HorizontalSeparator.jsx

@@ -6,7 +6,8 @@ import { DARK_GREEN, MAIN_DARK_BLUE, WHITE } from './constants'
 import styles from './HorizontalSeparator.module.css'
 function HorizontalSeparator ({ marginTop, marginBottom, color, opacity }) {
   function getClassName () {
-    let className = commonStyles[`text--${color}`] + ' '
+    let className = `${styles.style} `
+    className += commonStyles[`text--${color}`] + ' '
     // margin
     className += (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
     // opacity

package/src/components/HorizontalSeparator.module.css

@@ -1,3 +1,6 @@
+.style {
+  @apply border-b-0 border-t w-full;
+}
 .marginY-4 {
   @apply my-4;
 }
@@ -10,6 +13,18 @@
   @apply mb-4;
 }
 
+.marginY-8 {
+  @apply my-8;
+}
+
+.marginT-8 {
+  @apply mt-8;
+}
+
+.marginB-8 {
+  @apply mb-8;
+}
+
 .marginY-10 {
   @apply my-10;
 }
@@ -24,4 +39,8 @@
 
 .apply-opacity-20 {
   @apply opacity-20;
+}
+
+.apply-opacity-30 {
+  @apply opacity-30;
 }

package/src/components/LoadingSpinnerV2.jsx

@@ -0,0 +1,45 @@
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './LoadingSpinnerV2.module.css'
+import { SpinnerCircular } from 'spinners-react'
+
+function LoadingSpinnerV2 ({ loading, applySentences, color }) {
+  // If null then loading not started, if true then loading, if false then done loading
+  return loading
+    ? (
+      <div className={styles.container} data-testid='loading-spinner'>
+        <div className={styles.content}>
+          <SpinnerCircular thickness={180} size={80} color={color} />
+          {applySentences?.sentences.length > 0 && (
+            <div className={applySentences.containerClassName}>
+              {applySentences.sentences.map((sentence, index) => (<p key={index} className={sentence.style}>{sentence.text}</p>))}
+            </div>)}
+        </div>
+      </div>
+      )
+    : <></>
+}
+
+LoadingSpinnerV2.propTypes = {
+  /**
+   * loading
+   */
+  loading: PropTypes.bool,
+  /**
+   * applySentences
+   */
+  applySentences: PropTypes.object,
+  /**
+   * color
+   */
+  color: PropTypes.string
+}
+
+LoadingSpinnerV2.defaultProps = {
+  loading: false,
+  applySentences: {},
+  color: '#FFFFFF'
+}
+
+export default LoadingSpinnerV2

package/src/components/LoadingSpinnerV2.module.css

@@ -0,0 +1,8 @@
+.container {
+  @apply fixed top-0 left-0 h-screen w-full min-h-screen min-w-full overflow-y-auto z-50;
+}
+.content {
+  @apply h-full flex flex-col justify-center items-center
+}
+
+

package/src/components/Modal.jsx

@@ -13,6 +13,7 @@ import {
   MODAL_LAYOUTS,
   MODAL_COVER,
   MODAL_POPUP,
+  MODAL_POPUP_V2,
   MAIN_DARK_BLUE,
   BACKGROUND_COLOR_OPAQUE,
   LARGE,
@@ -25,7 +26,16 @@ import {
 } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 
-function Modal ({ setIsOpen, title, layout, children, size, profile, backgroundClassName }) {
+function Modal ({
+  setIsOpen,
+  title,
+  layout,
+  children,
+  size,
+  profile,
+  backgroundClassName,
+  titleClassName
+}) {
   let contentFullscreen
   let titleFullscreen
   let modalClassName = `${styles.modal}`
@@ -71,6 +81,24 @@ function Modal ({ setIsOpen, title, layout, children, size, profile, backgroundC
   }
 
   switch (layout) {
+    case MODAL_POPUP_V2:
+      whichModal = (
+        <>
+          <div className={`${styles['blur-absolute']}`} onClick={() => setIsOpen(false)} />
+          <div className={`${styles.container} ${styles.centered}`}>
+            <div className={modalClassName}>
+              <div className={headerClassName}>
+                <div className={titleClassName}>{title}</div>
+                <PlatformaticIcon iconName='CloseIcon' color={WHITE} size={SMALL} onClick={() => setIsOpen(false)} />
+              </div>
+              <div>
+                {children}
+              </div>
+            </div>
+          </div>
+        </>
+      )
+      break
     case MODAL_POPUP:
       whichModal = (
         <>
@@ -172,7 +200,11 @@ Modal.propTypes = {
   /**
    * backgroundClassName
    */
-  backgroundClassName: PropTypes.string
+  backgroundClassName: PropTypes.string,
+  /**
+   * titleClassName
+   */
+  titleClassName: PropTypes.string
 }
 
 Modal.defaultProps = {
@@ -182,7 +214,8 @@ Modal.defaultProps = {
   layout: MODAL_POPUP,
   size: SMALL,
   profile: '',
-  backgroundClassName: ''
+  backgroundClassName: '',
+  titleClassName: ''
 }
 
 export default Modal

package/src/components/Modal.module.css

@@ -2,21 +2,29 @@
   @apply fixed top-[50%] left-[50%] w-full h-screen translate-x-[-50%] translate-y-[-50%] z-10;
   background-color: rgba(0, 0, 0, 0.75);
 }
+.blur-absolute {
+  @apply absolute top-0 left-0 w-full h-full z-10 bg-rich-black/75;
+}
 .container {
   @apply z-20;
 }
 .centered {
-  @apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
+  @apply fixed top-[50%] left-[50%];
+  transform: translate(-50%, -50%);
 }
 .modal {
   @apply p-4 rounded-md mx-auto my-auto max-h-[85vh] overflow-y-auto;
 }
+.modal--popup-v2 {
+  @apply bg-rich-black border border-solid border-white/30 flex flex-col gap-y-4;
+}
 .modal--popup {
   @apply bg-light-blue;
 }
 .fullscreen {
   @apply fixed top-0 left-0 h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
 }
+.header--popup-v2,
 .header--popup {
   @apply flex justify-between items-center;
 }