@platformatic/ui-components 0.1.108 → 0.1.110

package/dist/assets/index-c6205205.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_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}

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-3bf7863a.js"></script>
-    <link rel="stylesheet" href="/assets/index-6fadf156.css">
+    <script type="module" crossorigin src="/assets/index-72c60737.js"></script>
+    <link rel="stylesheet" href="/assets/index-c6205205.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -30,6 +30,8 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -44,6 +46,10 @@ html {
   /* 3 */
   font-family: Montserrat;
   /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
 }
 
 /*
@@ -185,6 +191,10 @@ select,
 textarea {
   font-family: inherit;
   /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
   font-size: 100%;
   /* 1 */
   font-weight: inherit;
@@ -335,6 +345,14 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -410,6 +428,12 @@ video {
   height: auto;
 }
 
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -424,6 +448,9 @@ video {
   --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:  ;
@@ -471,6 +498,9 @@ video {
   --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:  ;
@@ -544,11 +574,6 @@ video {
   position: relative;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .mx-5 {
   margin-left: 1.25rem;
   margin-right: 1.25rem;
@@ -564,6 +589,11 @@ video {
   margin-bottom: 1.25rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -608,14 +638,14 @@ video {
   align-items: center;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-10 {
   gap: 2.5rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -630,11 +660,6 @@ video {
   line-height: 2rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -655,28 +680,33 @@ video {
   line-height: 1;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
-.text-white {
+.text-dark-green {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(2 120 63 / var(--tw-text-opacity));
 }
 
-.text-main-green {
+.text-error-red {
   --tw-text-opacity: 1;
-  color: rgb(33 250 144 / var(--tw-text-opacity));
+  color: rgb(250 33 33 / var(--tw-text-opacity));
 }
 
-.text-error-red {
+.text-main-green {
   --tw-text-opacity: 1;
-  color: rgb(250 33 33 / var(--tw-text-opacity));
+  color: rgb(33 250 144 / var(--tw-text-opacity));
 }
 
-.text-dark-green {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(2 120 63 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .blur {
@@ -688,16 +718,6 @@ 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);
 }
 
-@font-face {
-  font-family: 'Montserrat';
-
-  src: url('/fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
-
-  font-weight: 400;
-
-  font-style: normal;
-}
-
 :root {
   background-color: transparent;
   font-family: 'Montserrat';

package/fonts/Montserrat/fonts.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Montserrat';
+  src: url('/fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.108",
+  "version": "0.1.110",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -45,7 +45,7 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^4.0.0",
     "babel-loader": "^9.0.0",
-    "happy-dom": "^9.0.0",
+    "happy-dom": "^10.0.0",
     "jsdom": "^22.0.0",
     "react-test-renderer": "^18.2.0",
     "snazzy": "^9.0.0",
@@ -53,7 +53,7 @@
     "storybook": "^7.0.20",
     "tailwindcss": "^3.1.8",
     "vite": "^4.0.0",
-    "vitest": "^0.32.0"
+    "vitest": "^0.33.0"
   },
   "standard": {
     "globals": [

package/src/components/Common.module.css

@@ -57,6 +57,14 @@
   @apply border-white/20;
 }
 
+.bordered--main-dark-blue-10 {
+  @apply border-main-dark-blue/10;
+}
+.bordered--white-10 {
+  @apply border-white/10;
+}
+
+
 .error-message {
   @apply absolute -bottom-5 text-error-red text-xs px-2 w-max;
 }

package/src/components/DropDown.jsx

@@ -4,17 +4,26 @@ import PropTypes from 'prop-types'
 import styles from './DropDown.module.css'
 import commonStyles from './Common.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
-import { LIGHT_BLUE, MAIN_DARK_BLUE, WHITE } from './constants'
-function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColor, borderColor, headerColor }) {
+import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, WHITE } from './constants'
+function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColor, borderColor, headerColor, lastButton }) {
   const [open, setOpen] = useState(false)
+  const borderClass = commonStyles[`bordered--${borderColor}-10`]
 
   let classNameMenu = `${styles.menu} `
   classNameMenu += commonStyles[`background-color-${backgroundColor}`]
-  classNameMenu += ' ' + commonStyles[`bordered--${borderColor}`]
+  classNameMenu += ' ' + borderClass
 
   let classNameItem = `${styles.item} `
   classNameItem += commonStyles[`text--${textColor}`]
 
+  if (backgroundColor === DARK_BLUE) {
+    classNameItem += ' ' + styles[`hover--${WHITE}`]
+  } else {
+    classNameItem += ' ' + styles[`hover--${MAIN_DARK_BLUE}`]
+  }
+
+  const lastButtonClassName = styles.lastButton + ' ' + borderClass
+
   let headerClassNamme = `${styles.header} `
   headerClassNamme += commonStyles[`text--${headerColor}`]
 
@@ -39,6 +48,7 @@ function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColo
               </div>
             )
           })}
+          {lastButton ? (<div className={lastButtonClassName} key='last'>{lastButton}</div>) : <></>}
         </div>
       )}
     </div>
@@ -65,7 +75,7 @@ DropDown.propTypes = {
   /**
    * backgroundColor
    */
-  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, LIGHT_BLUE]),
+  backgroundColor: PropTypes.oneOf([DARK_BLUE, LIGHT_BLUE]),
   /**
    * textColor
    */
@@ -77,7 +87,11 @@ DropDown.propTypes = {
   /**
    * headerColor
    */
-  headerColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE])
+  headerColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
+  /**
+   * lastButton
+   */
+  lastButton: PropTypes.node
 }
 
 DropDown.defaultProps = {
@@ -85,9 +99,10 @@ DropDown.defaultProps = {
   header: '',
   align: 'left',
   items: [],
-  backgroundColor: LIGHT_BLUE,
+  backgroundColor: DARK_BLUE,
   textColor: MAIN_DARK_BLUE,
   headerColor: WHITE,
-  borderColor: WHITE
+  borderColor: WHITE,
+  lastButton: null
 }
 export default DropDown

package/src/components/DropDown.module.css

@@ -17,8 +17,20 @@
   @apply border border-transparent rounded-full mr-2;
 }
 .menu {
-  @apply absolute border-solid border p-0  mt-8 rounded-md z-10 text-sm min-w-[190px];
+  @apply absolute border-solid border p-0 mt-8 rounded-md z-10 text-sm min-w-[190px];
 }
 .item {
-  @apply py-2 px-3 first:border-t-0 text-sm leading-4 uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest border-t;
+  @apply py-2 px-3 text-sm leading-4 hover:cursor-pointer;
+}
+.lastButton {
+  @apply border-t py-2 text-center mx-auto;
+  width: calc(100% - 1.5rem);
+}
+
+.hover--main-dark-blue {
+  @apply hover:bg-main-dark-blue hover:bg-opacity-10;
+}
+
+.hover--white {
+  @apply hover:bg-white hover:bg-opacity-10;
 }

package/src/components/forms/Select.jsx

@@ -39,7 +39,10 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
   }, [value])
 
   function renderOptions () {
-    const filteredOptions = value.length > 0 ? options.filter(option => option.label.toLowerCase().includes(value.toLowerCase())) : options
+    if (value.length === 0) {
+      return <></>
+    }
+    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>}

package/src/components/icons/index.js

@@ -19,7 +19,6 @@ import BillingIcon from './BillingIcon'
 import CalendarIcon from './CalendarIcon'
 import Calendar1DayIcon from './Calendar1DayIcon'
 import Calendar7DaysIcon from './Calendar7DaysIcon'
-import ChatGPTIcon from './ChatGPTIcon'
 import CheckListIcon from './CheckListIcon'
 import CircleAddIcon from './CircleAddIcon'
 import CircleArrowLeftIcon from './CircleArrowLeftIcon'
@@ -62,7 +61,6 @@ import MetricsIcon from './MetricsIcon'
 import MetricsLoadingIcon from './MetricsLoadingIcon'
 import NameAppIcon from './NameAppIcon'
 import OrganizationIcon from './OrganizationIcon'
-import OpenAIIcon from './OpenAIIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
 import PullRequestLoadingIcon from './PullRequestLoadingIcon'
@@ -118,7 +116,6 @@ export default {
   CalendarIcon,
   Calendar1DayIcon,
   Calendar7DaysIcon,
-  ChatGPTIcon,
   CheckListIcon,
   CircleAddIcon,
   CircleArrowLeftIcon,
@@ -161,7 +158,6 @@ export default {
   MetricsLoadingIcon,
   NameAppIcon,
   OrganizationIcon,
-  OpenAIIcon,
   PlayIcon,
   PullRequestIcon,
   PullRequestLoadingIcon,

package/src/stories/DropDown.stories.jsx

@@ -1,8 +1,10 @@
 'use strict'
 import DropDown from '../components/DropDown'
 import BorderedBox from '../components/BorderedBox'
+import Button from '../components/Button'
 import HorizontalSeparator from '../components/HorizontalSeparator'
 import { useState } from 'react'
+import { BOX_SHADOW, LIGHT_BLUE, MAIN_DARK_BLUE, WHITE } from '../components/constants'
 export default {
   title: 'Platformatic/DropDown',
   component: DropDown,
@@ -31,9 +33,9 @@ export const DefaultAlignment = Template.bind({})
 DefaultAlignment.args = {
   header: 'My Menu',
   items: [
-    <span key='1'>Menu 1</span>,
-    <span key='2'>Menu 2</span>,
-    <span key='3'>This is a very long menu item</span>
+    <span className='text-white' key='1'>Menu 1</span>,
+    <span className='text-white' key='2'>Menu 2</span>,
+    <span className='text-white' key='3'>This is a very long menu item</span>
   ]
 }
 
@@ -46,17 +48,30 @@ AlignRight.args = {
     <span key='1'>Menu 1</span>,
     <span key='2'>Menu 2</span>,
     <span key='3'>This is a very long menu item</span>
-  ]
+  ],
+  backgroundColor: LIGHT_BLUE
 }
 
-export const AlignLeft = Template.bind({})
+export const withButton = Template.bind({})
 
-AlignLeft.args = {
+withButton.args = {
   header: 'My Menu',
-  align: 'left',
+  backgroundColor: LIGHT_BLUE,
   items: [
     <span key='1'>Menu 1</span>,
     <span key='2'>Menu 2</span>,
     <span key='3'>This is a very long menu item</span>
-  ]
+  ],
+  lastButton: <Button
+    backgroundColor={MAIN_DARK_BLUE}
+    color={WHITE}
+    label='Test'
+    platformaticIcon={{ iconName: 'WorkspaceStaticIcon', color: WHITE }}
+    fullWidth
+    bold
+    bordered={false}
+    hoverEffect={BOX_SHADOW}
+              />,
+  borderColor: MAIN_DARK_BLUE
+
 }

package/src/styles/main.css

@@ -2,13 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'Montserrat';
-  src: url('/fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
 :root {
   @apply bg-transparent;
   font-family: 'Montserrat';