@platformatic/ui-components 0.7.30 → 0.7.31

package/dist/assets/index-Dc2uZTON.css

@@ -0,0 +1 @@
+._input_9kufh_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.25rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_9kufh_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_9kufh_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_9kufh_10{fill:#21fa90}._fillWhite_9kufh_13{fill:#fff}._input_9kufh_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_9kufh_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_hv2z2_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_hv2z2_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_hv2z2_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_hv2z2_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_hv2z2_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_hv2z2_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_hv2z2_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_hv2z2_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--rich-black_hv2z2_25{--tw-border-opacity: 1;border-color:rgb(0 5 11 / var(--tw-border-opacity))}._bordered--black-russian_hv2z2_28{--tw-border-opacity: 1;border-color:rgb(9 14 23 / var(--tw-border-opacity))}._bordered--transparent_hv2z2_31{border-style:none}._bordered--main-green-100_hv2z2_34{border-color:#21fa90}._bordered--main-dark-blue-100_hv2z2_37{border-color:#00283d}._bordered--tertiary-blue-100_hv2z2_40{border-color:#2588e4}._bordered--error-red-100_hv2z2_43{border-color:#fa2121}._bordered--warning-yellow-100_hv2z2_46{border-color:#feb928}._bordered--dark-blue-100_hv2z2_49{border-color:#00344f}._bordered--white-100_hv2z2_52{border-color:#fff}._bordered--rich-black-100_hv2z2_55{border-color:#00050b}._bordered--black-russian-100_hv2z2_58{border-color:#090e17}._bordered--main-green-70_hv2z2_61{border-color:#21fa90b3}._bordered--main-dark-blue-70_hv2z2_64{border-color:#00283db3}._bordered--tertiary-blue-70_hv2z2_67{border-color:#2588e4b3}._bordered--error-red-70_hv2z2_70{border-color:#fa2121b3}._bordered--warning-yellow-70_hv2z2_73{border-color:#feb928b3}._bordered--dark-blue-70_hv2z2_76{border-color:#00344fb3}._bordered--white-70_hv2z2_79{border-color:#ffffffb3}._bordered--rich-black-70_hv2z2_82{border-color:#00050bb3}._bordered--black-russian-70_hv2z2_85{border-color:#090e17b3}._bordered--main-green-30_hv2z2_88{border-color:#21fa904d}._bordered--main-dark-blue-30_hv2z2_91{border-color:#00283d4d}._bordered--error-red-30_hv2z2_94{border-color:#fa21214d}._bordered--warning-yellow-30_hv2z2_97{border-color:#feb9284d}._bordered--dark-blue-30_hv2z2_100{border-color:#00344f4d}._bordered--white-30_hv2z2_103{border-color:#ffffff4d}._bordered--rich-black-30_hv2z2_106{border-color:#00050b4d}._bordered--black-russian-30_hv2z2_109{border-color:#090e174d}._bordered--tertiary-blue-30_hv2z2_112{border-color:#2588e44d}._bordered--main-green-20_hv2z2_115{border-color:#21fa9033}._bordered--main-dark-blue-20_hv2z2_118{border-color:#00283d33}._bordered--error-red-20_hv2z2_121{border-color:#fa212133}._bordered--warning-yellow-20_hv2z2_124{border-color:#feb92833}._bordered--dark-blue-20_hv2z2_127{border-color:#00344f33}._bordered--white-20_hv2z2_130{border-color:#fff3}._bordered--rich-black-20_hv2z2_133{border-color:#00050b33}._bordered--black-russian-20_hv2z2_136{border-color:#090e1733}._bordered--tertiary-blue-20_hv2z2_139{border-color:#2588e433}._bordered--main-dark-blue-15_hv2z2_142{border-color:#00283d26}._bordered--white-15_hv2z2_145{border-color:#ffffff26}._bordered--rich-black-15_hv2z2_148{border-color:#00050b26}._bordered--black-russian-15_hv2z2_151{border-color:#090e1726}._bordered--tertiary-blue-15_hv2z2_154{border-color:#2588e426}._bordered--main-dark-blue-10_hv2z2_37{border-color:#00283d1a}._bordered--white-10_hv2z2_52{border-color:#ffffff1a}._bordered--rich-black-10_hv2z2_55{border-color:#00050b1a}._bordered--black-russian-10_hv2z2_58{border-color:#090e171a}._bordered--tertiary-blue-10_hv2z2_40{border-color:#2588e41a}._error-message_hv2z2_172{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_hv2z2_176{padding:.625rem .5rem}._text--error-red_hv2z2_179{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--error-red-70_hv2z2_182{color:#fa2121b3}._text--white_hv2z2_185{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--white-70_hv2z2_188{color:#ffffffb3}._text--dark-green_hv2z2_191{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--dark-green-70_hv2z2_194{color:#02783fb3}._text--main-green_hv2z2_197{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-green-70_hv2z2_200{color:#21fa90b3}._text--light-green_hv2z2_203{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--light-green-70_hv2z2_206{color:#21f190b3}._text--main-dark-blue_hv2z2_209{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--main-dark-blue-70_hv2z2_212{color:#00283db3}._text--light-blue_hv2z2_215{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--light-blue-70_hv2z2_218{color:#e9f7ffb3}._text--rich-black_hv2z2_221{--tw-text-opacity: 1;color:rgb(0 5 11 / var(--tw-text-opacity))}._text--black-russian_hv2z2_224{--tw-text-opacity: 1;color:rgb(9 14 23 / var(--tw-text-opacity))}._text--rich-black-70_hv2z2_227{color:#00050bb3}._text--black-russian-70_hv2z2_230{color:#090e17b3}._text--base_hv2z2_234{font-size:1rem;line-height:1.5rem}._text--xs_hv2z2_237{font-size:.75rem;line-height:1rem}._background-color-main-green_hv2z2_241{--tw-bg-opacity: 1;background-color:rgb(33 250 144 / var(--tw-bg-opacity))}._background-color-light-green_hv2z2_244{--tw-bg-opacity: 1;background-color:rgb(33 241 144 / var(--tw-bg-opacity))}._background-color-dark-green_hv2z2_247{--tw-bg-opacity: 1;background-color:rgb(2 120 63 / var(--tw-bg-opacity))}._background-color-main-dark-blue_hv2z2_250{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._background-color-dark-blue_hv2z2_253{--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity))}._background-color-light-blue_hv2z2_256{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}._background-color-white_hv2z2_259{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}._background-color-error-red_hv2z2_262{--tw-bg-opacity: 1;background-color:rgb(250 33 33 / var(--tw-bg-opacity))}._background-color-tertiary-blue_hv2z2_265{--tw-bg-opacity: 1;background-color:rgb(37 136 228 / var(--tw-bg-opacity))}._background-color-warning-yellow_hv2z2_268{--tw-bg-opacity: 1;background-color:rgb(254 185 40 / var(--tw-bg-opacity))}._background-color-rich-black_hv2z2_271{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}._background-color-black-russian_hv2z2_274{--tw-bg-opacity: 1;background-color:rgb(9 14 23 / var(--tw-bg-opacity))}._background-color-night_hv2z2_277{--tw-bg-opacity: 1;background-color:rgb(15 17 20 / var(--tw-bg-opacity))}._background-color-anti-flash-white_hv2z2_280{--tw-bg-opacity: 1;background-color:rgb(237 237 237 / var(--tw-bg-opacity))}._background-color-fire-engine-red_hv2z2_283{--tw-bg-opacity: 1;background-color:rgb(215 25 25 / var(--tw-bg-opacity))}._background-color-alternate-rich-black_hv2z2_286{--tw-bg-opacity: 1;background-color:rgb(18 23 29 / var(--tw-bg-opacity))}._background-color-transparent_hv2z2_289{background-color:transparent}._background-color-opaque-100_hv2z2_292{--tw-bg-opacity: 1 !important}._background-color-opaque-70_hv2z2_295{--tw-bg-opacity: .7 !important}._background-color-opaque-60_hv2z2_298{--tw-bg-opacity: .6 !important}._background-color-opaque-30_hv2z2_301{--tw-bg-opacity: .3 !important}._background-color-opaque-20_hv2z2_304{--tw-bg-opacity: .2 !important}._background-color-opaque-15_hv2z2_307{--tw-bg-opacity: .15 !important}._background-color-opaque-10_hv2z2_292{--tw-bg-opacity: .1 !important}._apply-opacity-30_hv2z2_313{opacity:.3}._padding--none_hv2z2_316{padding:0}._padding--small_hv2z2_319{padding:.25rem}._padding--medium_hv2z2_322{padding:.5rem}._padding--large_hv2z2_325{padding:1rem}._padding--extra-large_hv2z2_328{padding:1.5rem}._hover-background-color-opaque-main-green_hv2z2_331:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_hv2z2_334:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_hv2z2_337:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_hv2z2_340:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_hv2z2_343:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_hv2z2_346:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_hv2z2_349:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_hv2z2_352:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_hv2z2_355:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-rich-black_hv2z2_358:hover{background-color:rgb(0 5 11 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-black-russian_hv2z2_361:hover{background-color:rgb(9 14 23 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-night_hv2z2_364:hover{background-color:rgb(15 17 20 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_hv2z2_367{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_hv2z2_370{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_hv2z2_373{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_hv2z2_376{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_hv2z2_379{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_hv2z2_382{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-rich-black_hv2z2_385{background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-black-russian_hv2z2_388{background-color:rgb(9 14 23 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-night_hv2z2_391{background-color:rgb(15 17 20 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_hv2z2_394{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_hv2z2_397{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_hv2z2_400{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_hv2z2_404{font-weight:600}._fontLight_hv2z2_407{font-weight:300}._fullWidth_hv2z2_410{width:100%}._rich-black_thi2h_1>circle,._rich-black_thi2h_1>ellipse,._rich-black_thi2h_1>rect,._rich-black_thi2h_1>line,._rich-black_thi2h_1>path{stroke:#00050b}._important-rich-black_thi2h_9>circle,._important-rich-black_thi2h_9>ellipse,._important-rich-black_thi2h_9>rect,._important-rich-black_thi2h_9>line,._important-rich-black_thi2h_9>path{stroke:#00050b!important}._error-red_thi2h_17>circle,._error-red_thi2h_17>ellipse,._error-red_thi2h_17>rect,._error-red_thi2h_17>line,._error-red_thi2h_17>path{stroke:#fa2121}._important-error-red_thi2h_25>circle,._important-error-red_thi2h_25>ellipse,._important-error-red_thi2h_25>rect,._important-error-red_thi2h_25>line,._important-error-red_thi2h_25>path{stroke:#fa2121!important}._main-dark-blue_thi2h_33>circle,._main-dark-blue_thi2h_33>ellipse,._main-dark-blue_thi2h_33>rect,._main-dark-blue_thi2h_33>line,._main-dark-blue_thi2h_33>path{stroke:#00283d}._important-main-dark-blue_thi2h_41>circle,._important-main-dark-blue_thi2h_41>ellipse,._important-main-dark-blue_thi2h_41>rect,._important-main-dark-blue_thi2h_41>line,._important-main-dark-blue_thi2h_41>path{stroke:#00283d!important}._main-green_thi2h_49>circle,._main-green_thi2h_49>ellipse,._main-green_thi2h_49>rect,._main-green_thi2h_49>line,._main-green_thi2h_49>path{stroke:#21fa90}._important-main-green_thi2h_57>circle,._important-main-green_thi2h_57>ellipse,._important-main-green_thi2h_57>rect,._important-main-green_thi2h_57>line,._important-main-green_thi2h_57>path{stroke:#21fa90!important}._tertiary-blue_thi2h_65>circle,._tertiary-blue_thi2h_65>ellipse,._tertiary-blue_thi2h_65>rect,._tertiary-blue_thi2h_65>line,._tertiary-blue_thi2h_65>path{stroke:#2588e4}._important-tertiary-blue_thi2h_73>circle,._important-tertiary-blue_thi2h_73>ellipse,._important-tertiary-blue_thi2h_73>rect,._important-tertiary-blue_thi2h_73>line,._important-tertiary-blue_thi2h_73>path{stroke:#2588e4!important}._warning-yellow_thi2h_81>circle,._warning-yellow_thi2h_81>ellipse,._warning-yellow_thi2h_81>rect,._warning-yellow_thi2h_81>line,._warning-yellow_thi2h_81>path{stroke:#feb928}._important-warning-yellow_thi2h_89>circle,._important-warning-yellow_thi2h_89>ellipse,._important-warning-yellow_thi2h_89>rect,._important-warning-yellow_thi2h_89>line,._important-warning-yellow_thi2h_89>path{stroke:#feb928!important}._white_thi2h_97>circle,._white_thi2h_97>ellipse,._white_thi2h_97>rect,._white_thi2h_97>line,._white_thi2h_97>path{stroke:#fff}._important-white_thi2h_105>circle,._important-white_thi2h_105>ellipse,._important-white_thi2h_105>rect,._important-white_thi2h_105>line,._important-white_thi2h_105>path{stroke:#fff!important}._filled-rich-black_thi2h_113{fill:#00050b}._filled-white_thi2h_116{fill:#fff}._filled-error-red_thi2h_119{fill:#fa2121}._filled-main-dark-blue_thi2h_122{fill:#00283d}._filled-main-green_thi2h_125{fill:#21fa90}._filled-warning-yellow_thi2h_128{fill:#feb928}._filled-tertiary-blue_thi2h_131{fill:#2588e4}._fill-circle-green_thi2h_135>circle{fill:#fff}._fill-circle-main-dark-blue_thi2h_138>circle{fill:#00283d}._svgClassName_thi2h_141{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_thi2h_146{opacity:.3}._iconInactive_thi2h_150{opacity:.7}._strokeTransparent_thi2h_154{stroke:transparent!important}._cursorPointer_xwn7e_1{cursor:pointer}._pltTooltip_xwn7e_4{position:relative}._tabContainerClassName_5g46h_1{display:flex;width:100%;flex-direction:column;row-gap:.5rem;--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_5g46h_4{position:relative;display:flex;height:1.5rem;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_5g46h_4:hover{cursor:pointer}._tab_5g46h_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:300;opacity:.7}._tab_5g46h_1:first-child{margin-left:0}._tab_5g46h_1:last-child{margin-right:0}._tab_5g46h_1:hover{opacity:1}._selected-tab_5g46h_10{text-decoration-line:underline;text-underline-offset:8px;opacity:1}._tabContentClassName_5g46h_13{max-height:calc(100vH - 10rem);overflow-y:auto}._tab_5g46h_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._divider_5g46h_24{position:absolute;bottom:0;height:1px;width:100%;border-radius:.375rem;border-width:1px;border-style:none;background-color:#ffffff26;margin-block-start:0;margin-block-end:0}._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,:host{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;-webkit-tap-highlight-color:transparent}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-feature-settings:normal;font-variation-settings:normal;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;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.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}}.visible{visibility:visible}.relative{position:relative}.col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.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-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.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}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.border{border-width:1px}.border-0{border-width:0px}.bg-rich-black{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:.5rem}.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))}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.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-bdsQmI5i.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-i07-ljlS.css">
+    <script type="module" crossorigin src="/assets/index-CFnGah3k.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Dc2uZTON.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

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

package/src/components/Common.module.css

@@ -304,6 +304,9 @@
 .background-color-opaque-20 {
   @apply bg-opacity-20 !important;
 }
+.background-color-opaque-15 {
+  @apply bg-opacity-15 !important;
+}
 .background-color-opaque-10 {
   @apply bg-opacity-10 !important;
 }

package/src/components/icons/APIKeyIcon.jsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const APIKeyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M11.9579 14.0001L12.9828 12.9752L11.4454 11.4379M11.4454 11.4379L10.4205 12.4628M11.4454 11.4379L9.37427 9.3667' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.83791 9.49882C8.96757 9.49882 9.88333 8.59841 9.88333 7.48769C9.88333 6.37698 8.96757 5.47656 7.83791 5.47656C6.70825 5.47656 5.79248 6.37698 5.79248 7.48769C5.79248 8.59841 6.70825 9.49882 7.83791 9.49882Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.7186 9.55569L12.0199 8.64755C12.0628 8.51879 12.1856 8.43105 12.3236 8.43105H12.9204C13.0965 8.43105 13.2391 8.2909 13.2391 8.1177V6.79822C13.2391 6.62502 13.0965 6.48487 12.9204 6.48487H12.3525C12.2285 6.48487 12.115 6.41309 12.0628 6.30256L11.692 5.51634C11.6375 5.40239 11.6584 5.2668 11.7453 5.17337L12.2923 4.58313C12.4047 4.46235 12.4035 4.27662 12.2888 4.15698L11.262 3.08817C11.1357 2.956 10.9225 2.95714 10.7973 3.08931L10.372 3.53826C10.2839 3.63169 10.1472 3.66246 10.0267 3.61802L9.14126 3.28872C9.01726 3.24314 8.93498 3.12578 8.93498 2.99588V2.31335C8.93498 2.14015 8.79244 2 8.61629 2H7.05759C6.88144 2 6.7389 2.14015 6.7389 2.31335V2.99588C6.7389 3.12578 6.65662 3.24314 6.53262 3.28872L5.64724 3.61802C5.52671 3.66246 5.38996 3.63169 5.30189 3.53826L4.87658 3.08931C4.75142 2.95714 4.53819 2.95714 4.41187 3.08817L3.3851 4.15698C3.27037 4.27548 3.26921 4.46235 3.38162 4.58313L3.92861 5.17337C4.01437 5.2668 4.03639 5.40126 3.98192 5.51634L3.61108 6.30256C3.55893 6.41423 3.44536 6.48487 3.32136 6.48487H2.75351C2.57736 6.48487 2.43481 6.62502 2.43481 6.79822V8.1177C2.43481 8.2909 2.57736 8.43105 2.75351 8.43105H3.34917C3.48708 8.43105 3.60992 8.51879 3.6528 8.64755L3.95411 9.55569C3.98888 9.6628 3.96338 9.78016 3.88689 9.86334L3.39669 10.3955C3.27732 10.5254 3.28891 10.727 3.42334 10.8421L4.55325 11.8141C4.68305 11.9257 4.88006 11.9155 4.9971 11.7913L5.39112 11.3742C5.47688 11.282 5.61015 11.25 5.72952 11.2911L6.55232 11.5737C6.68096 11.6181 6.76671 11.7366 6.76671 11.8699V12.4909C6.76671 12.6641 6.90926 12.8043 7.08541 12.8043H8.58732C8.76347 12.8043 8.90601 12.6641 8.90601 12.4909V11.8699C8.90601 11.7366 8.99177 11.6181 9.1204 11.5737' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M17.937 21L19.4743 19.4626L17.1683 17.1566M17.1683 17.1566L15.6309 18.6939M17.1683 17.1566L14.0615 14.0498' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.7569 14.2482C13.4513 14.2482 14.825 12.8976 14.825 11.2315C14.825 9.56546 13.4513 8.21484 11.7569 8.21484C10.0624 8.21484 8.68872 9.56546 8.68872 11.2315C8.68872 12.8976 10.0624 14.2482 11.7569 14.2482Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.5778 14.3335L18.0298 12.9713C18.0941 12.7782 18.2783 12.6466 18.4852 12.6466H19.3804C19.6447 12.6466 19.8585 12.4363 19.8585 12.1766V10.1973C19.8585 9.93754 19.6447 9.72731 19.3804 9.72731H18.5287C18.3427 9.72731 18.1723 9.61963 18.0941 9.45384L17.5378 8.27451C17.4561 8.10359 17.4874 7.9002 17.6178 7.76005L18.4383 6.8747C18.6069 6.69352 18.6052 6.41493 18.4331 6.23547L16.8929 4.63226C16.7034 4.434 16.3836 4.43571 16.1958 4.63397L15.5579 5.30738C15.4258 5.44754 15.2206 5.49368 15.0399 5.42703L13.7118 4.93308C13.5258 4.86471 13.4024 4.68866 13.4024 4.49382V3.47002C13.4024 3.21023 13.1885 3 12.9243 3H10.5863C10.322 3 10.1082 3.21023 10.1082 3.47002V4.49382C10.1082 4.68866 9.98481 4.86471 9.79881 4.93308L8.47073 5.42703C8.28994 5.49368 8.08482 5.44754 7.95271 5.30738L7.31475 4.63397C7.12701 4.43571 6.80716 4.43571 6.61768 4.63226L5.07752 6.23547C4.90543 6.41322 4.90369 6.69352 5.07231 6.8747L5.8928 7.76005C6.02143 7.9002 6.05446 8.10188 5.97276 8.27451L5.4165 9.45384C5.33827 9.62134 5.16792 9.72731 4.98192 9.72731H4.13014C3.86591 9.72731 3.6521 9.93754 3.6521 10.1973V12.1766C3.6521 12.4363 3.86591 12.6466 4.13014 12.6466H5.02364C5.2305 12.6466 5.41476 12.7782 5.47908 12.9713L5.93104 14.3335C5.98319 14.4942 5.94495 14.6702 5.83022 14.795L5.09491 15.5932C4.91586 15.788 4.93324 16.0906 5.13489 16.2632L6.82975 17.7211C7.02445 17.8886 7.31996 17.8732 7.49553 17.6869L8.08656 17.0614C8.2152 16.9229 8.4151 16.8751 8.59415 16.9366L9.82836 17.3605C10.0213 17.4271 10.1499 17.6049 10.1499 17.8049V18.7364C10.1499 18.9962 10.3638 19.2064 10.628 19.2064H12.8809C13.1451 19.2064 13.3589 18.9962 13.3589 18.7364V17.8049C13.3589 17.6049 13.4875 17.4271 13.6805 17.3605' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M29.8949 35.0001L32.4571 32.4378L28.6137 28.5944M28.6137 28.5944L26.0514 31.1567M28.6137 28.5944L23.4358 23.4165' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.5945 23.7466C22.4187 23.7466 24.7081 21.4955 24.7081 18.7187C24.7081 15.9419 22.4187 13.6909 19.5945 13.6909C16.7704 13.6909 14.481 15.9419 14.481 18.7187C14.481 21.4955 16.7704 23.7466 19.5945 23.7466Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M29.2962 23.8892L30.0494 21.6189C30.1566 21.297 30.4637 21.0776 30.8085 21.0776H32.3006C32.741 21.0776 33.0973 20.7272 33.0973 20.2943V16.9955C33.0973 16.5626 32.741 16.2122 32.3006 16.2122H30.8809C30.5709 16.2122 30.287 16.0327 30.1566 15.7564L29.2295 13.7908C29.0934 13.506 29.1455 13.167 29.3628 12.9334L30.7303 11.4578C31.0113 11.1559 31.0084 10.6915 30.7216 10.3924L28.1547 7.72043C27.8389 7.38999 27.3058 7.39284 26.9929 7.72328L25.9296 8.84564C25.7094 9.07923 25.3676 9.15614 25.0663 9.04504L22.8528 8.22179C22.5428 8.10785 22.3371 7.81444 22.3371 7.4897V5.78337C22.3371 5.35038 21.9807 5 21.5404 5H17.6436C17.2032 5 16.8469 5.35038 16.8469 5.78337V7.4897C16.8469 7.81444 16.6412 8.10785 16.3312 8.22179L14.1177 9.04504C13.8164 9.15614 13.4745 9.07923 13.2544 8.84564L12.1911 7.72328C11.8782 7.39284 11.3451 7.39284 11.0293 7.72043L8.46238 10.3924C8.17555 10.6887 8.17266 11.1559 8.45369 11.4578L9.82117 12.9334C10.0356 13.167 10.0906 13.5031 9.95444 13.7908L9.02733 15.7564C8.89696 16.0356 8.61303 16.2122 8.30303 16.2122H6.8834C6.44303 16.2122 6.08667 16.5626 6.08667 16.9955V20.2943C6.08667 20.7272 6.44303 21.0776 6.8834 21.0776H8.37256C8.71733 21.0776 9.02444 21.297 9.13163 21.6189L9.88491 23.8892C9.97182 24.157 9.90808 24.4504 9.71687 24.6583L8.49135 25.9887C8.19294 26.3134 8.22191 26.8176 8.55799 27.1053L11.3828 29.5352C11.7072 29.8144 12.1998 29.7887 12.4924 29.4782L13.4774 28.4356C13.6918 28.2049 14.025 28.1251 14.3234 28.2277L16.3804 28.9341C16.702 29.0452 16.9164 29.3415 16.9164 29.6748V31.2273C16.9164 31.6603 17.2728 32.0106 17.7132 32.0106H21.4679C21.9083 32.0106 22.2647 31.6603 22.2647 31.2273V29.6748C22.2647 29.3415 22.4791 29.0452 22.8006 28.9341' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+APIKeyIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default APIKeyIcon

package/src/components/icons/NoResultsIcon.jsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const NoResultsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='7' cy='7' r='5' stroke='none' />
+          <path d='M14 14L11 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6.31265 8.21544V8.14109C6.31471 7.796 6.34988 7.52145 6.41815 7.31745C6.48849 7.11344 6.58779 6.94948 6.71606 6.82555C6.84432 6.69971 7.00052 6.58437 7.18464 6.4795C7.31084 6.40705 7.42358 6.32793 7.52289 6.24214C7.62426 6.15443 7.7039 6.0572 7.76183 5.95043C7.81976 5.84175 7.84872 5.72069 7.84872 5.58723C7.84872 5.43661 7.81045 5.30601 7.7339 5.19542C7.65736 5.08484 7.55392 4.99905 7.42358 4.93804C7.29532 4.87703 7.15154 4.84652 6.99224 4.84652C6.84536 4.84652 6.70571 4.87607 6.57331 4.93518C6.44298 4.99237 6.33437 5.08008 6.24748 5.19828C6.16266 5.31459 6.11508 5.46235 6.10473 5.64156H5C5.01034 5.27931 5.10551 4.97617 5.28549 4.73213C5.46755 4.48808 5.70753 4.30505 6.00543 4.18303C6.3054 4.06101 6.63641 4 6.99845 4C7.39359 4 7.74114 4.06387 8.04112 4.19161C8.34316 4.31935 8.57797 4.50143 8.74554 4.73785C8.91518 4.97235 9 5.25072 9 5.57293C9 5.79028 8.96173 5.98475 8.88518 6.15634C8.81071 6.32793 8.70416 6.48046 8.56555 6.61392C8.42695 6.74738 8.26248 6.86654 8.07215 6.9714C7.90458 7.06673 7.767 7.16587 7.65943 7.26883C7.55392 7.37178 7.4753 7.49285 7.42358 7.63203C7.37393 7.7693 7.34807 7.93899 7.346 8.14109V8.21544H6.31265ZM6.8526 10C6.66641 10 6.50608 9.93899 6.37161 9.81697C6.23713 9.69495 6.1699 9.54623 6.1699 9.37083C6.1699 9.19924 6.23713 9.05243 6.37161 8.93041C6.50608 8.80839 6.66641 8.74738 6.8526 8.74738C7.03672 8.74738 7.19602 8.80839 7.33049 8.93041C7.46703 9.05243 7.5353 9.19924 7.5353 9.37083C7.5353 9.48713 7.50323 9.59295 7.4391 9.68827C7.37704 9.7836 7.29429 9.85987 7.19085 9.91706C7.08948 9.97235 6.97673 10 6.8526 10Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='10.5' cy='10.5' r='7.5' stroke='none' strokeWidth={1.5} />
+          <path d='M21 21L16.5 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.46897 12.3232V12.2116C9.47207 11.694 9.52483 11.2822 9.62723 10.9762C9.73274 10.6702 9.88169 10.4242 10.0741 10.2383C10.2665 10.0496 10.5008 9.87655 10.777 9.71926C10.9663 9.61058 11.1354 9.4919 11.2843 9.3632C11.4364 9.23165 11.5559 9.0858 11.6427 8.92564C11.7296 8.76263 11.7731 8.58103 11.7731 8.38084C11.7731 8.15491 11.7157 7.95901 11.6009 7.79314C11.486 7.62726 11.3309 7.49857 11.1354 7.40705C10.943 7.31554 10.7273 7.26978 10.4884 7.26978C10.268 7.26978 10.0586 7.31411 9.85997 7.40276C9.66447 7.48856 9.50155 7.62011 9.37122 7.79743C9.24399 7.97188 9.17261 8.19352 9.1571 8.46235H7.5C7.51552 7.91897 7.65826 7.46425 7.92824 7.09819C8.20132 6.73213 8.56129 6.45758 9.00815 6.27455C9.45811 6.09152 9.95462 6 10.4977 6C11.0904 6 11.6117 6.09581 12.0617 6.28742C12.5147 6.47903 12.867 6.75214 13.1183 7.10677C13.3728 7.45853 13.5 7.87607 13.5 8.35939C13.5 8.68541 13.4426 8.97712 13.3278 9.23451C13.2161 9.4919 13.0562 9.72069 12.8483 9.92088C12.6404 10.1211 12.3937 10.2998 12.1082 10.4571C11.8569 10.6001 11.6505 10.7488 11.4891 10.9032C11.3309 11.0577 11.213 11.2393 11.1354 11.448C11.0609 11.654 11.0221 11.9085 11.019 12.2116V12.3232H9.46897ZM10.2789 15C9.99961 15 9.75912 14.9085 9.55741 14.7255C9.3557 14.5424 9.25485 14.3194 9.25485 14.0562C9.25485 13.7989 9.3557 13.5786 9.55741 13.3956C9.75912 13.2126 9.99961 13.1211 10.2789 13.1211C10.5551 13.1211 10.794 13.2126 10.9957 13.3956C11.2005 13.5786 11.3029 13.7989 11.3029 14.0562C11.3029 14.2307 11.2548 14.3894 11.1587 14.5324C11.0656 14.6754 10.9414 14.7898 10.7863 14.8756C10.6342 14.9585 10.4651 15 10.2789 15Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='17.5' cy='17.5' r='12.5' stroke='none' strokeWidth={2} />
+          <path d='M35 35L27.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.7816 20.5386V20.3527C15.7868 19.49 15.8747 18.8036 16.0454 18.2936C16.2212 17.7836 16.4695 17.3737 16.7901 17.0639C17.1108 16.7493 17.5013 16.4609 17.9616 16.1988C18.2771 16.0176 18.559 15.8198 18.8072 15.6053C19.0606 15.3861 19.2598 15.143 19.4046 14.8761C19.5494 14.6044 19.6218 14.3017 19.6218 13.9681C19.6218 13.5915 19.5261 13.265 19.3348 12.9886C19.1434 12.7121 18.8848 12.4976 18.559 12.3451C18.2383 12.1926 17.8788 12.1163 17.4806 12.1163C17.1134 12.1163 16.7643 12.1902 16.4333 12.3379C16.1074 12.4809 15.8359 12.7002 15.6187 12.9957C15.4066 13.2865 15.2877 13.6559 15.2618 14.1039H12.5C12.5259 13.1983 12.7638 12.4404 13.2137 11.8303C13.6689 11.2202 14.2688 10.7626 15.0136 10.4576C15.7635 10.1525 16.591 10 17.4961 10C18.484 10 19.3529 10.1597 20.1028 10.479C20.8579 10.7984 21.4449 11.2536 21.8638 11.8446C22.2879 12.4309 22.5 13.1268 22.5 13.9323C22.5 14.4757 22.4043 14.9619 22.213 15.3908C22.0268 15.8198 21.7604 16.2011 21.4139 16.5348C21.0674 16.8684 20.6562 17.1663 20.1804 17.4285C19.7614 17.6668 19.4175 17.9147 19.1486 18.1721C18.8848 18.4295 18.6883 18.7321 18.559 19.0801C18.4348 19.4233 18.3702 19.8475 18.365 20.3527V20.5386H15.7816ZM17.1315 25C16.666 25 16.2652 24.8475 15.929 24.5424C15.5928 24.2374 15.4247 23.8656 15.4247 23.4271C15.4247 22.9981 15.5928 22.6311 15.929 22.326C16.2652 22.021 16.666 21.8684 17.1315 21.8684C17.5918 21.8684 17.99 22.021 18.3262 22.326C18.6676 22.6311 18.8382 22.9981 18.8382 23.4271C18.8382 23.7178 18.7581 23.9824 18.5978 24.2207C18.4426 24.459 18.2357 24.6497 17.9771 24.7927C17.7237 24.9309 17.4418 25 17.1315 25Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+NoResultsIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default NoResultsIcon

package/src/components/icons/index.js

@@ -7,6 +7,7 @@ import AllAppsIcon from './AllAppsIcon'
 import AllInOneIcon from './AllInOneIcon'
 import APIDocsIcon from './APIDocsIcon'
 import ApiCloudIcon from './ApiCloudIcon'
+import APIKeyIcon from './APIKeyIcon'
 import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
@@ -122,6 +123,7 @@ import NodeJSMetricsIcon from './NodeJSMetricsIcon'
 import NoActivitiesIcon from './NoActivitiesIcon'
 import NoDeploymentsIcon from './NoDeploymentsIcon'
 import NoMetricsIcon from './NoMetricsIcon'
+import NoResultsIcon from './NoResultsIcon'
 import NotCompliantServiceIcon from './NotCompliantServiceIcon'
 import OpenAPIEditsIcon from './OpenAPIEditsIcon'
 import OrganizationIcon from './OrganizationIcon'
@@ -205,6 +207,7 @@ export default {
   AllInOneIcon,
   APIDocsIcon,
   ApiCloudIcon,
+  APIKeyIcon,
   ApiIcon,
   ApiIconClosed,
   ApiEmptyIcon,
@@ -320,6 +323,7 @@ export default {
   NoActivitiesIcon,
   NoDeploymentsIcon,
   NoMetricsIcon,
+  NoResultsIcon,
   NotCompliantServiceIcon,
   OpenAPIEditsIcon,
   OrganizationIcon,