@platformatic/ui-components 0.8.1 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/assets/index-DFooB5Gh.js +40 -0
  2. package/dist/assets/index-UjO_DhXJ.css +1 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Button.module.css +6 -0
  6. package/src/components/ButtonOnlyIcon.module.css +6 -0
  7. package/src/components/Common.module.css +36 -0
  8. package/src/components/CopyAndPaste.jsx +43 -7
  9. package/src/components/constants.js +4 -3
  10. package/src/components/icons/AllAppsIcon.jsx +31 -21
  11. package/src/components/icons/AppConfigurationIcon.jsx +27 -29
  12. package/src/components/icons/AppDetailsIcon.jsx +13 -10
  13. package/src/components/icons/AppEditIcon.jsx +15 -15
  14. package/src/components/icons/AppIcon.jsx +7 -4
  15. package/src/components/icons/AppListIcon.jsx +60 -62
  16. package/src/components/icons/AppMissingIcon.jsx +97 -0
  17. package/src/components/icons/AppSettingsIcon.jsx +13 -9
  18. package/src/components/icons/{StoppedAppIcon.jsx → AppStoppedIcon.jsx} +15 -15
  19. package/src/components/icons/CreateAppIcon.jsx +13 -7
  20. package/src/components/icons/CreatingAppIcon.jsx +104 -0
  21. package/src/components/icons/Icons.module.css +21 -0
  22. package/src/components/icons/ImportAppIcon.jsx +9 -10
  23. package/src/components/icons/PodDetailsIcon.jsx +12 -21
  24. package/src/components/icons/PodLogsIcon.jsx +26 -27
  25. package/src/components/icons/PodPerformanceIcon.jsx +20 -18
  26. package/src/components/icons/RemoveAppIcon.jsx +101 -0
  27. package/src/components/icons/index.js +9 -3
  28. package/tailwind.config.cjs +3 -1
  29. package/dist/assets/index-BiRNzolW.css +0 -1
  30. package/dist/assets/index-CLtNOpBw.js +0 -40
@@ -0,0 +1 @@
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_1pto5_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_1pto5_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_1pto5_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_1pto5_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_1pto5_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_1pto5_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_1pto5_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_1pto5_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--rich-black_1pto5_25{--tw-border-opacity: 1;border-color:rgb(0 5 11 / var(--tw-border-opacity))}._bordered--black-russian_1pto5_28{--tw-border-opacity: 1;border-color:rgb(9 14 23 / var(--tw-border-opacity))}._bordered--fluorescent-cyan_1pto5_31{--tw-border-opacity: 1;border-color:rgb(68 255 236 / var(--tw-border-opacity))}._bordered--transparent_1pto5_34{border-style:none}._bordered--main-green-100_1pto5_37{border-color:#21fa90}._bordered--main-dark-blue-100_1pto5_40{border-color:#00283d}._bordered--tertiary-blue-100_1pto5_43{border-color:#2588e4}._bordered--error-red-100_1pto5_46{border-color:#fa2121}._bordered--warning-yellow-100_1pto5_49{border-color:#feb928}._bordered--dark-blue-100_1pto5_52{border-color:#00344f}._bordered--white-100_1pto5_55{border-color:#fff}._bordered--rich-black-100_1pto5_58{border-color:#00050b}._bordered--black-russian-100_1pto5_61{border-color:#090e17}._bordered--fluorescent-cyan-100_1pto5_64{border-color:#44ffec}._bordered--main-green-70_1pto5_67{border-color:#21fa90b3}._bordered--main-dark-blue-70_1pto5_70{border-color:#00283db3}._bordered--tertiary-blue-70_1pto5_73{border-color:#2588e4b3}._bordered--error-red-70_1pto5_76{border-color:#fa2121b3}._bordered--warning-yellow-70_1pto5_79{border-color:#feb928b3}._bordered--dark-blue-70_1pto5_82{border-color:#00344fb3}._bordered--white-70_1pto5_85{border-color:#ffffffb3}._bordered--rich-black-70_1pto5_88{border-color:#00050bb3}._bordered--black-russian-70_1pto5_91{border-color:#090e17b3}._bordered--fluorescent-cyan-70_1pto5_94{border-color:#44ffecb3}._bordered--main-green-30_1pto5_97{border-color:#21fa904d}._bordered--main-dark-blue-30_1pto5_100{border-color:#00283d4d}._bordered--error-red-30_1pto5_103{border-color:#fa21214d}._bordered--warning-yellow-30_1pto5_106{border-color:#feb9284d}._bordered--dark-blue-30_1pto5_109{border-color:#00344f4d}._bordered--white-30_1pto5_112{border-color:#ffffff4d}._bordered--rich-black-30_1pto5_115{border-color:#00050b4d}._bordered--black-russian-30_1pto5_118{border-color:#090e174d}._bordered--fluorescent-cyan-30_1pto5_121{border-color:#44ffec4d}._bordered--tertiary-blue-30_1pto5_124{border-color:#2588e44d}._bordered--main-green-20_1pto5_127{border-color:#21fa9033}._bordered--main-dark-blue-20_1pto5_130{border-color:#00283d33}._bordered--error-red-20_1pto5_133{border-color:#fa212133}._bordered--warning-yellow-20_1pto5_136{border-color:#feb92833}._bordered--dark-blue-20_1pto5_139{border-color:#00344f33}._bordered--white-20_1pto5_142{border-color:#fff3}._bordered--rich-black-20_1pto5_145{border-color:#00050b33}._bordered--black-russian-20_1pto5_148{border-color:#090e1733}._bordered--fluorescent-cyan-20_1pto5_151{border-color:#44ffec33}._bordered--tertiary-blue-20_1pto5_154{border-color:#2588e433}._bordered--main-dark-blue-15_1pto5_157{border-color:#00283d26}._bordered--white-15_1pto5_160{border-color:#ffffff26}._bordered--rich-black-15_1pto5_163{border-color:#00050b26}._bordered--black-russian-15_1pto5_166{border-color:#090e1726}._bordered--fluorescent-cyan-15_1pto5_169{border-color:#44ffec26}._bordered--tertiary-blue-15_1pto5_172{border-color:#2588e426}._bordered--main-dark-blue-10_1pto5_40{border-color:#00283d1a}._bordered--white-10_1pto5_55{border-color:#ffffff1a}._bordered--rich-black-10_1pto5_58{border-color:#00050b1a}._bordered--black-russian-10_1pto5_61{border-color:#090e171a}._bordered--fluorescent-cyan-10_1pto5_64{border-color:#44ffec1a}._bordered--tertiary-blue-10_1pto5_43{border-color:#2588e41a}._error-message_1pto5_193{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_1pto5_197{padding:.625rem .5rem}._text--error-red_1pto5_200{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--error-red-70_1pto5_203{color:#fa2121b3}._text--white_1pto5_206{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--white-70_1pto5_209{color:#ffffffb3}._text--dark-green_1pto5_212{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--dark-green-70_1pto5_215{color:#02783fb3}._text--main-green_1pto5_218{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-green-70_1pto5_221{color:#21fa90b3}._text--light-green_1pto5_224{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--light-green-70_1pto5_227{color:#21f190b3}._text--main-dark-blue_1pto5_230{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--main-dark-blue-70_1pto5_233{color:#00283db3}._text--light-blue_1pto5_236{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--light-blue-70_1pto5_239{color:#e9f7ffb3}._text--rich-black_1pto5_242{--tw-text-opacity: 1;color:rgb(0 5 11 / var(--tw-text-opacity))}._text--black-russian_1pto5_245{--tw-text-opacity: 1;color:rgb(9 14 23 / var(--tw-text-opacity))}._text--fluorescent-cyan_1pto5_248{--tw-text-opacity: 1;color:rgb(68 255 236 / var(--tw-text-opacity))}._text--rich-black-70_1pto5_251{color:#00050bb3}._text--black-russian-70_1pto5_254{color:#090e17b3}._text--fluorescent-cyan-70_1pto5_257{color:#44ffecb3}._text--base_1pto5_261{font-size:1rem;line-height:1.5rem}._text--xs_1pto5_264{font-size:.75rem;line-height:1rem}._background-color-main-green_1pto5_268{--tw-bg-opacity: 1;background-color:rgb(33 250 144 / var(--tw-bg-opacity))}._background-color-light-green_1pto5_271{--tw-bg-opacity: 1;background-color:rgb(33 241 144 / var(--tw-bg-opacity))}._background-color-dark-green_1pto5_274{--tw-bg-opacity: 1;background-color:rgb(2 120 63 / var(--tw-bg-opacity))}._background-color-main-dark-blue_1pto5_277{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._background-color-dark-blue_1pto5_280{--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity))}._background-color-light-blue_1pto5_283{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}._background-color-white_1pto5_286{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}._background-color-error-red_1pto5_289{--tw-bg-opacity: 1;background-color:rgb(250 33 33 / var(--tw-bg-opacity))}._background-color-tertiary-blue_1pto5_292{--tw-bg-opacity: 1;background-color:rgb(37 136 228 / var(--tw-bg-opacity))}._background-color-warning-yellow_1pto5_295{--tw-bg-opacity: 1;background-color:rgb(254 185 40 / var(--tw-bg-opacity))}._background-color-rich-black_1pto5_298{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}._background-color-fluorescent-cyan_1pto5_301{--tw-bg-opacity: 1;background-color:rgb(68 255 236 / var(--tw-bg-opacity))}._background-color-black-russian_1pto5_304{--tw-bg-opacity: 1;background-color:rgb(9 14 23 / var(--tw-bg-opacity))}._background-color-night_1pto5_307{--tw-bg-opacity: 1;background-color:rgb(15 17 20 / var(--tw-bg-opacity))}._background-color-anti-flash-white_1pto5_310{--tw-bg-opacity: 1;background-color:rgb(237 237 237 / var(--tw-bg-opacity))}._background-color-fire-engine-red_1pto5_313{--tw-bg-opacity: 1;background-color:rgb(215 25 25 / var(--tw-bg-opacity))}._background-color-alternate-rich-black_1pto5_316{--tw-bg-opacity: 1;background-color:rgb(18 23 29 / var(--tw-bg-opacity))}._background-color-transparent_1pto5_319{background-color:transparent}._background-color-opaque-100_1pto5_322{--tw-bg-opacity: 1 !important}._background-color-opaque-70_1pto5_325{--tw-bg-opacity: .7 !important}._background-color-opaque-60_1pto5_328{--tw-bg-opacity: .6 !important}._background-color-opaque-30_1pto5_331{--tw-bg-opacity: .3 !important}._background-color-opaque-20_1pto5_334{--tw-bg-opacity: .2 !important}._background-color-opaque-15_1pto5_337{--tw-bg-opacity: .15 !important}._background-color-opaque-10_1pto5_322{--tw-bg-opacity: .1 !important}._apply-opacity-30_1pto5_343{opacity:.3}._padding--none_1pto5_346{padding:0}._padding--small_1pto5_349{padding:.25rem}._padding--medium_1pto5_352{padding:.5rem}._padding--large_1pto5_355{padding:1rem}._padding--extra-large_1pto5_358{padding:1.5rem}._hover-background-color-opaque-main-green_1pto5_361:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_1pto5_364:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_1pto5_367:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_1pto5_370:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_1pto5_373:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_1pto5_376:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_1pto5_379:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_1pto5_382:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_1pto5_385:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-rich-black_1pto5_388:hover{background-color:rgb(0 5 11 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-black-russian_1pto5_391:hover{background-color:rgb(9 14 23 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-fluorescent-cyan_1pto5_394:hover{background-color:rgb(68 255 236 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-night_1pto5_397:hover{background-color:rgb(15 17 20 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_1pto5_400{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_1pto5_403{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_1pto5_406{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_1pto5_409{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_1pto5_412{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_1pto5_415{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-rich-black_1pto5_418{background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-black-russian_1pto5_421{background-color:rgb(9 14 23 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-fluorescent-cyan_1pto5_424{background-color:rgb(68 255 236 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-night_1pto5_427{background-color:rgb(15 17 20 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_1pto5_430{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_1pto5_433{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_1pto5_436{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_1pto5_440{font-weight:600}._fontLight_1pto5_443{font-weight:300}._fullWidth_1pto5_446{width:100%}._rich-black_1q7sg_1>circle,._rich-black_1q7sg_1>ellipse,._rich-black_1q7sg_1>rect,._rich-black_1q7sg_1>line,._rich-black_1q7sg_1>path{stroke:#00050b}._important-rich-black_1q7sg_9>circle,._important-rich-black_1q7sg_9>ellipse,._important-rich-black_1q7sg_9>rect,._important-rich-black_1q7sg_9>line,._important-rich-black_1q7sg_9>path{stroke:#00050b!important}._error-red_1q7sg_17>circle,._error-red_1q7sg_17>ellipse,._error-red_1q7sg_17>rect,._error-red_1q7sg_17>line,._error-red_1q7sg_17>path{stroke:#fa2121}._important-error-red_1q7sg_25>circle,._important-error-red_1q7sg_25>ellipse,._important-error-red_1q7sg_25>rect,._important-error-red_1q7sg_25>line,._important-error-red_1q7sg_25>path{stroke:#fa2121!important}._main-dark-blue_1q7sg_33>circle,._main-dark-blue_1q7sg_33>ellipse,._main-dark-blue_1q7sg_33>rect,._main-dark-blue_1q7sg_33>line,._main-dark-blue_1q7sg_33>path{stroke:#00283d}._important-main-dark-blue_1q7sg_41>circle,._important-main-dark-blue_1q7sg_41>ellipse,._important-main-dark-blue_1q7sg_41>rect,._important-main-dark-blue_1q7sg_41>line,._important-main-dark-blue_1q7sg_41>path{stroke:#00283d!important}._main-green_1q7sg_49>circle,._main-green_1q7sg_49>ellipse,._main-green_1q7sg_49>rect,._main-green_1q7sg_49>line,._main-green_1q7sg_49>path{stroke:#21fa90}._important-main-green_1q7sg_57>circle,._important-main-green_1q7sg_57>ellipse,._important-main-green_1q7sg_57>rect,._important-main-green_1q7sg_57>line,._important-main-green_1q7sg_57>path{stroke:#21fa90!important}._tertiary-blue_1q7sg_65>circle,._tertiary-blue_1q7sg_65>ellipse,._tertiary-blue_1q7sg_65>rect,._tertiary-blue_1q7sg_65>line,._tertiary-blue_1q7sg_65>path{stroke:#2588e4}._important-tertiary-blue_1q7sg_73>circle,._important-tertiary-blue_1q7sg_73>ellipse,._important-tertiary-blue_1q7sg_73>rect,._important-tertiary-blue_1q7sg_73>line,._important-tertiary-blue_1q7sg_73>path{stroke:#2588e4!important}._warning-yellow_1q7sg_81>circle,._warning-yellow_1q7sg_81>ellipse,._warning-yellow_1q7sg_81>rect,._warning-yellow_1q7sg_81>line,._warning-yellow_1q7sg_81>path{stroke:#feb928}._important-warning-yellow_1q7sg_89>circle,._important-warning-yellow_1q7sg_89>ellipse,._important-warning-yellow_1q7sg_89>rect,._important-warning-yellow_1q7sg_89>line,._important-warning-yellow_1q7sg_89>path{stroke:#feb928!important}._white_1q7sg_97>circle,._white_1q7sg_97>ellipse,._white_1q7sg_97>rect,._white_1q7sg_97>line,._white_1q7sg_97>path{stroke:#fff}._important-white_1q7sg_105>circle,._important-white_1q7sg_105>ellipse,._important-white_1q7sg_105>rect,._important-white_1q7sg_105>line,._important-white_1q7sg_105>path{stroke:#fff!important}._fluorescent-cyan_1q7sg_113>circle,._fluorescent-cyan_1q7sg_113>ellipse,._fluorescent-cyan_1q7sg_113>rect,._fluorescent-cyan_1q7sg_113>line,._fluorescent-cyan_1q7sg_113>path{stroke:#44ffec}._important-fluorescent-cyan_1q7sg_121>circle,._important-fluorescent-cyan_1q7sg_121>ellipse,._important-fluorescent-cyan_1q7sg_121>rect,._important-fluorescent-cyan_1q7sg_121>line,._important-fluorescent-cyan_1q7sg_121>path{stroke:#44ffec!important}._filled-rich-black_1q7sg_130{fill:#00050b}._filled-white_1q7sg_133{fill:#fff}._filled-error-red_1q7sg_136{fill:#fa2121}._filled-main-dark-blue_1q7sg_139{fill:#00283d}._filled-main-green_1q7sg_142{fill:#21fa90}._filled-warning-yellow_1q7sg_145{fill:#feb928}._filled-tertiary-blue_1q7sg_148{fill:#2588e4}._filled-fluorescent-cyan_1q7sg_151{fill:#44ffec}._fill-circle-green_1q7sg_156>circle{fill:#fff}._fill-circle-main-dark-blue_1q7sg_159>circle{fill:#00283d}._svgClassName_1q7sg_162{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_1q7sg_167{opacity:.3}._iconInactive_1q7sg_171{opacity:.7}._strokeTransparent_1q7sg_175{stroke:transparent!important}._cursorPointer_xwn7e_1{cursor:pointer}._pltTooltip_xwn7e_4{position:relative}._tabContainerClassName_116ak_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_116ak_4{position:relative;display:flex;height:1.5rem;align-items:center;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_116ak_4:hover{cursor:pointer}._tab_116ak_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_116ak_1:first-child{margin-left:0}._tab_116ak_1:last-child{margin-right:0}._tab_116ak_1:hover{opacity:1}._selected-tab_116ak_10{text-decoration-line:underline;text-underline-offset:8px;opacity:1}._tabContentClassName_116ak_13{max-height:calc(100vH - 10rem);overflow-y:auto}._tab_116ak_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._divider_116ak_24{position:absolute;bottom:-1px;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 CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index-CLtNOpBw.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-BiRNzolW.css">
7
+ <script type="module" crossorigin src="/assets/index-DFooB5Gh.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-UjO_DhXJ.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.8.1",
4
+ "version": "0.8.3",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -69,6 +69,9 @@
69
69
  .color-black-russian {
70
70
  @apply text-black-russian border-black-russian;
71
71
  }
72
+ .color-fluorescent-cyan {
73
+ @apply text-fluorescent-cyan border-fluorescent-cyan;
74
+ }
72
75
  .no-border {
73
76
  @apply border-0;
74
77
  }
@@ -108,6 +111,9 @@
108
111
  .hover-box-shadow-black-russian {
109
112
  @apply hover:shadow-black-russian;
110
113
  }
114
+ .hover-box-shadow-fluorescent-cyan {
115
+ @apply hover:shadow-fluorescent-cyan;
116
+ }
111
117
 
112
118
  .underline-effect {
113
119
  @apply hover:underline;
@@ -69,6 +69,9 @@
69
69
  .color-black-russian{
70
70
  @apply text-black-russian border-black-russian;
71
71
  }
72
+ .color-fluorescent-cyan{
73
+ @apply text-fluorescent-cyan border-fluorescent-cyan;
74
+ }
72
75
 
73
76
  .no-border {
74
77
  @apply border-0;
@@ -109,6 +112,9 @@
109
112
  .hover-box-shadow-black-russian {
110
113
  @apply hover:shadow-black-russian;
111
114
  }
115
+ .hover-box-shadow-fluorescent-cyan {
116
+ @apply hover:shadow-fluorescent-cyan;
117
+ }
112
118
 
113
119
  .underline-effect {
114
120
  @apply hover:underline;
@@ -28,6 +28,9 @@
28
28
  .bordered--black-russian {
29
29
  @apply border-black-russian;
30
30
  }
31
+ .bordered--fluorescent-cyan {
32
+ @apply border-fluorescent-cyan;
33
+ }
31
34
  .bordered--transparent {
32
35
  @apply border-none;
33
36
  }
@@ -58,6 +61,9 @@
58
61
  .bordered--black-russian-100 {
59
62
  @apply border-black-russian/100;
60
63
  }
64
+ .bordered--fluorescent-cyan-100 {
65
+ @apply border-fluorescent-cyan/100;
66
+ }
61
67
  .bordered--main-green-70 {
62
68
  @apply border-main-green/70;
63
69
  }
@@ -85,6 +91,9 @@
85
91
  .bordered--black-russian-70 {
86
92
  @apply border-black-russian/70;
87
93
  }
94
+ .bordered--fluorescent-cyan-70 {
95
+ @apply border-fluorescent-cyan/70;
96
+ }
88
97
  .bordered--main-green-30 {
89
98
  @apply border-main-green/30;
90
99
  }
@@ -109,6 +118,9 @@
109
118
  .bordered--black-russian-30 {
110
119
  @apply border-black-russian/30;
111
120
  }
121
+ .bordered--fluorescent-cyan-30 {
122
+ @apply border-fluorescent-cyan/30;
123
+ }
112
124
  .bordered--tertiary-blue-30 {
113
125
  @apply border-tertiary-blue/30;
114
126
  }
@@ -136,6 +148,9 @@
136
148
  .bordered--black-russian-20 {
137
149
  @apply border-black-russian/20;
138
150
  }
151
+ .bordered--fluorescent-cyan-20 {
152
+ @apply border-fluorescent-cyan/20;
153
+ }
139
154
  .bordered--tertiary-blue-20 {
140
155
  @apply border-tertiary-blue/20;
141
156
  }
@@ -151,6 +166,9 @@
151
166
  .bordered--black-russian-15 {
152
167
  @apply border-black-russian/15;
153
168
  }
169
+ .bordered--fluorescent-cyan-15 {
170
+ @apply border-fluorescent-cyan/15;
171
+ }
154
172
  .bordered--tertiary-blue-15 {
155
173
  @apply border-tertiary-blue/15;
156
174
  }
@@ -166,6 +184,9 @@
166
184
  .bordered--black-russian-10 {
167
185
  @apply border-black-russian/10;
168
186
  }
187
+ .bordered--fluorescent-cyan-10 {
188
+ @apply border-fluorescent-cyan/10;
189
+ }
169
190
  .bordered--tertiary-blue-10 {
170
191
  @apply border-tertiary-blue/10;
171
192
  }
@@ -224,12 +245,18 @@
224
245
  .text--black-russian {
225
246
  @apply text-black-russian;
226
247
  }
248
+ .text--fluorescent-cyan {
249
+ @apply text-fluorescent-cyan;
250
+ }
227
251
  .text--rich-black-70 {
228
252
  @apply text-rich-black/70;
229
253
  }
230
254
  .text--black-russian-70 {
231
255
  @apply text-black-russian/70;
232
256
  }
257
+ .text--fluorescent-cyan-70 {
258
+ @apply text-fluorescent-cyan/70;
259
+ }
233
260
 
234
261
  .text--base {
235
262
  @apply text-base
@@ -271,6 +298,9 @@
271
298
  .background-color-rich-black {
272
299
  @apply bg-rich-black ;
273
300
  }
301
+ .background-color-fluorescent-cyan {
302
+ @apply bg-fluorescent-cyan ;
303
+ }
274
304
  .background-color-black-russian {
275
305
  @apply bg-black-russian ;
276
306
  }
@@ -361,6 +391,9 @@
361
391
  .hover-background-color-opaque-black-russian{
362
392
  @apply hover:bg-black-russian hover:bg-opacity-15;
363
393
  }
394
+ .hover-background-color-opaque-fluorescent-cyan{
395
+ @apply hover:bg-fluorescent-cyan hover:bg-opacity-15;
396
+ }
364
397
  .hover-background-color-opaque-night{
365
398
  @apply hover:bg-night hover:bg-opacity-15;
366
399
  }
@@ -388,6 +421,9 @@
388
421
  .selected-background-color-black-russian {
389
422
  @apply !bg-black-russian bg-opacity-15;
390
423
  }
424
+ .selected-background-color-fluorescent-cyan {
425
+ @apply !bg-fluorescent-cyan bg-opacity-15;
426
+ }
391
427
  .selected-background-color-night {
392
428
  @apply !bg-night bg-opacity-15;
393
429
  }
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER, MAIN_DARK_BLUE } from './constants'
5
5
  import PlatformaticIcon from './PlatformaticIcon'
6
6
  import TooltipAbsolute from './TooltipAbsolute'
7
+ import Tooltip from './Tooltip'
7
8
 
8
9
  function CopyAndPaste ({
9
10
  value = 'app',
@@ -13,7 +14,8 @@ function CopyAndPaste ({
13
14
  size = MEDIUM,
14
15
  tooltipClassName = '',
15
16
  position = POSITION_CENTER,
16
- internalOverHandling = false
17
+ internalOverHandling = false,
18
+ tooltipFixed = false
17
19
  }) {
18
20
  const [copied, setCopied] = useState(false)
19
21
 
@@ -25,9 +27,30 @@ function CopyAndPaste ({
25
27
  }, timeout)
26
28
  }
27
29
 
28
- return !copied
29
- ? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} internalOverHandling={internalOverHandling} />)
30
- : (
30
+ function renderTooltip () {
31
+ if (tooltipFixed) {
32
+ return (
33
+ <Tooltip
34
+ tooltipClassName={tooltipClassName}
35
+ content={(<span>{tooltipLabel}</span>)}
36
+ delay={100}
37
+ direction={DIRECTION_TOP}
38
+ offset={24}
39
+ activeDependsOnVisible
40
+ visible={copied}
41
+ position={position}
42
+ >
43
+ <PlatformaticIcon
44
+ size={size}
45
+ iconName={!copied ? 'CopyPasteIcon' : 'CircleCheckMarkIcon'}
46
+ color={color}
47
+ onClick={() => !copied ? copy() : {}}
48
+ internalOverHandling={internalOverHandling}
49
+ />
50
+ </Tooltip>
51
+ )
52
+ }
53
+ return (
31
54
  <TooltipAbsolute
32
55
  tooltipClassName={tooltipClassName}
33
56
  content={(<span>{tooltipLabel}</span>)}
@@ -38,9 +61,18 @@ function CopyAndPaste ({
38
61
  visible={copied}
39
62
  position={position}
40
63
  >
41
- <PlatformaticIcon size={size} iconName='CircleCheckMarkIcon' color={color} onClick={null} />
64
+ <PlatformaticIcon
65
+ size={size}
66
+ iconName={!copied ? 'CopyPasteIcon' : 'CircleCheckMarkIcon'}
67
+ color={color}
68
+ onClick={() => !copied ? copy() : {}}
69
+ internalOverHandling={internalOverHandling}
70
+ />
42
71
  </TooltipAbsolute>
43
- )
72
+ )
73
+ }
74
+
75
+ return renderTooltip()
44
76
  }
45
77
 
46
78
  CopyAndPaste.propTypes = {
@@ -75,7 +107,11 @@ CopyAndPaste.propTypes = {
75
107
  /**
76
108
  * position
77
109
  */
78
- position: PropTypes.oneOf(POSITIONS)
110
+ position: PropTypes.oneOf(POSITIONS),
111
+ /**
112
+ * tooltipFixed
113
+ */
114
+ tooltipFixed: PropTypes.bool
79
115
  }
80
116
 
81
117
  export default CopyAndPaste
@@ -15,6 +15,7 @@ export const NIGHT = 'night'
15
15
  export const ANTI_FLASH_WHITE = 'anti-flash-white'
16
16
  export const FIRE_ENGINE_RED = 'fire-engine-red'
17
17
  export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
18
+ export const FLUORESCENT_CYAN = 'fluorescent-cyan'
18
19
 
19
20
  export const NONE = 'none'
20
21
  export const MINI = 'mini'
@@ -37,9 +38,9 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERL
37
38
  export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
38
39
  export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
39
40
 
40
- export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK]
41
- export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
42
- export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN]
41
+ export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK, FLUORESCENT_CYAN]
42
+ export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN]
43
+ export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN]
43
44
 
44
45
  export const MODAL_POPUP = 'popup'
45
46
  export const MODAL_POPUP_V2 = 'popup-v2'
@@ -29,13 +29,17 @@ const AllAppsIcon = ({
29
29
  xmlns='http://www.w3.org/2000/svg'
30
30
  className={className}
31
31
  >
32
- <path d='M5 2L6.73205 3V5L5 6L3.26795 5V3L5 2Z' stroke='none' strokeLinejoin='round' />
33
- <path d='M5 10L6.73205 11V13L5 14L3.26795 13V11L5 10Z' stroke='none' strokeLinejoin='round' />
34
- <path d='M8 6L9.73205 7V9L8 10L6.26795 9V7L8 6Z' stroke='none' strokeLinejoin='round' />
35
- <path d='M2 6L3.73205 7V9L2 10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
- <path d='M13.7319 6L11.9999 7V9L13.7319 10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37
- <path d='M11 2L12.7321 3V5L11 6L9.26795 5V3L11 2Z' stroke='none' strokeLinejoin='round' />
38
- <path d='M11 10L12.7321 11V13L11 14L9.26795 13V11L11 10Z' stroke='none' strokeLinejoin='round' />
32
+ <path d='M2.5 3.32227V5.91083L4.18212 6.91605M7.11442 3.32227V3.91718' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M4.80721 4.51891L2.5 3.25946L4.80721 2L7.11442 3.25946L4.80721 4.51891ZM4.80721 4.51891V5.35508' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <path d='M13.5002 3.32227V5.91083L11.8181 6.91605M8.88582 3.32227V3.91718' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
+ <path d='M11.223 4.51891V5.35508M13.5 3.25946L11.1928 4.51891L8.88558 3.25946L11.1928 2L13.5 3.25946Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
+ <path d='M8.88574 12.0653V12.621L11.193 13.9998M11.193 13.9998L13.5002 12.621V10.0325M11.193 13.9998V11.3549' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37
+ <path d='M11.9246 9.10938L13.5005 9.96963L11.1933 11.2291L10.7104 10.9655' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
38
+ <path d='M7.1145 12.0653V12.621L4.80729 13.9998M4.80729 13.9998L2.50008 12.621V10.0325M4.80729 13.9998V11.3549' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
39
+ <path d='M4.07591 9.10938L2.5 9.96963L4.80721 11.2291L5.29004 10.9655' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
40
+ <path d='M7.97351 11.1067L5.23682 9.48268V6.43359L7.97351 7.99132M7.97351 11.1067L10.7102 9.48268V6.43359L7.97351 7.99132M7.97351 11.1067V7.99132' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
41
+ <path d='M7.97351 7.84302L5.23682 6.3595L7.97351 4.87598L10.7102 6.3595L7.97351 7.84302Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
42
+
39
43
  </svg>
40
44
  )
41
45
  break
@@ -49,13 +53,16 @@ const AllAppsIcon = ({
49
53
  xmlns='http://www.w3.org/2000/svg'
50
54
  className={className}
51
55
  >
52
- <path d='M7.5 3L10.0981 4.5V7.5L7.5 9L4.90192 7.5V4.5L7.5 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
53
- <path d='M7.5 15L10.0981 16.5V19.5L7.5 21L4.90192 19.5V16.5L7.5 15Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
54
- <path d='M12 9L14.5981 10.5V13.5L12 15L9.40192 13.5V10.5L12 9Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
55
- <path d='M3 9L5.59808 10.5V13.5L3 15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
56
- <path d='M20.5977 9L17.9996 10.5V13.5L20.5977 15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
57
- <path d='M16.5 3L19.0981 4.5V7.5L16.5 9L13.9019 7.5V4.5L16.5 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
58
- <path d='M16.5 15L19.0981 16.5V19.5L16.5 21L13.9019 19.5V16.5L16.5 15Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
56
+ <path d='M3.75 4.9834V8.86624L6.27318 10.3741M10.6716 4.9834V5.87576' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
57
+ <path d='M7.21082 6.77837L3.75 4.88918L7.21082 3L10.6716 4.88918L7.21082 6.77837ZM7.21082 6.77837V8.03263' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
58
+ <path d='M20.2502 4.9834V8.86624L17.7271 10.3741M13.3286 4.9834V5.87576' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
59
+ <path d='M16.8345 6.77837V8.03263M20.25 4.88918L16.7892 6.77837L13.3284 4.88918L16.7892 3L20.25 4.88918Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
60
+ <path d='M13.3284 18.0979V18.9315L16.7892 20.9997M16.7892 20.9997L20.25 18.9315V15.0487M16.7892 20.9997V17.0324' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
61
+ <path d='M17.8866 13.6641L20.2505 14.9544L16.7897 16.8436L16.0654 16.4483' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
62
+ <path d='M10.6719 18.0979V18.9315L7.21106 20.9997M7.21106 20.9997L3.75024 18.9315V15.0487M7.21106 20.9997V17.0324' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
63
+ <path d='M6.11411 13.6641L3.75025 14.9544L7.21107 16.8436L7.9353 16.4483' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
64
+ <path d='M11.9603 16.6601L7.85522 14.224V9.65039L11.9603 11.987M11.9603 16.6601L16.0653 14.224V9.65039L11.9603 11.987M11.9603 16.6601V11.987' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
65
+ <path d='M11.9603 11.7645L7.85522 9.53925L11.9603 7.31396L16.0653 9.53925L11.9603 11.7645Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
59
66
 
60
67
  </svg>
61
68
  )
@@ -90,13 +97,16 @@ const AllAppsIcon = ({
90
97
  xmlns='http://www.w3.org/2000/svg'
91
98
  className={className}
92
99
  >
93
- <path d='M12.5 5L16.8301 7.5V12.5L12.5 15L8.16987 12.5V7.5L12.5 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
94
- <path d='M12.5 25L16.8301 27.5V32.5L12.5 35L8.16987 32.5V27.5L12.5 25Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
95
- <path d='M20 15L24.3301 17.5V22.5L20 25L15.6699 22.5V17.5L20 15Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
96
- <path d='M5 15L9.33013 17.5V22.5L5 25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
97
- <path d='M34.3301 15L30 17.5V22.5L34.3301 25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
98
- <path d='M27.5 5L31.8301 7.5V12.5L27.5 15L23.1699 12.5V7.5L27.5 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
99
- <path d='M27.5 25L31.8301 27.5V32.5L27.5 35L23.1699 32.5V27.5L27.5 25Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
100
+ <path d='M6.25 8.30566V14.7771L10.4553 17.2901M17.7861 8.30566V9.79294' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
101
+ <path d='M12.018 11.2973L6.25 8.14864L12.018 5L17.7861 8.14864L12.018 11.2973ZM12.018 11.2973V13.3877' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
102
+ <path d='M33.7505 8.30566V14.7771L29.5452 17.2901M22.2144 8.30566V9.79294' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
103
+ <path d='M28.0577 11.2973V13.3877M33.7502 8.14864L27.9822 11.2973L22.2142 8.14864L27.9822 5L33.7502 8.14864Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
104
+ <path d='M22.2141 30.1632V31.5526L27.9821 34.9995M27.9821 34.9995L33.7502 31.5526V25.0812M27.9821 34.9995V28.3873' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
105
+ <path d='M29.8112 22.7734L33.751 24.9241L27.9829 28.0727L26.7759 27.4138' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
106
+ <path d='M17.7864 30.1632V31.5526L12.0183 34.9995M12.0183 34.9995L6.25032 31.5526V25.0812M12.0183 34.9995V28.3873' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
107
+ <path d='M10.19 22.7734L6.25025 24.9241L12.0183 28.0727L13.2253 27.4138' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
108
+ <path d='M19.9343 27.7669L13.0925 23.7067V16.084L19.9343 19.9783M19.9343 27.7669L26.776 23.7067V16.084L19.9343 19.9783M19.9343 27.7669V19.9783' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
109
+ <path d='M19.934 19.6076L13.0923 15.8987L19.934 12.1899L26.7757 15.8987L19.934 19.6076Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
100
110
  </svg>
101
111
  )
102
112
  break
@@ -30,15 +30,15 @@ const AppConfigurationIcon = ({
30
30
  xmlns='http://www.w3.org/2000/svg'
31
31
  className={className}
32
32
  >
33
- <path d='M10.5 7L13.5311 8.75V12.25L10.5 14L7.46891 12.25V8.75L10.5 7Z' stroke='none' strokeLinejoin='round' />
34
- <path d='M11 5.5V3C11 2.44772 10.5523 2 10 2H3C2.44772 2 2 2.44772 2 3V10C2 10.5523 2.44772 11 3 11H5.5' stroke='none' strokeLinecap='round' />
35
- <path d='M2 4.25H11' stroke='none' />
36
- <circle cx='3.125' cy='3.125' r='0.375' fill='none' className={filledClassName} />
37
- <circle cx='4.25' cy='3.125' r='0.375' fill='none' className={filledClassName} />
38
- <circle cx='5.375' cy='3.125' r='0.375' fill='none' className={filledClassName} />
39
- <path d='M3.5 5.75H7.25' stroke='none' strokeLinecap='round' />
40
- <path d='M4.25 7.25H7.5' stroke='none' strokeLinecap='round' />
41
- <path d='M4.25 8.75H6' stroke='none' strokeLinecap='round' />
33
+ <path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <path d='M4.5 6L2.5 4.85711L8 2L13.5 4.85711L11.4538 5.79253' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
+ <rect x='5' y='5' width='6' height='6' rx='1' stroke='none' />
36
+ <path d='M5 7H11' stroke='none' />
37
+ <circle cx='6.25' cy='6' r='0.25' fill='none' className={filledClassName} />
38
+ <circle cx='7' cy='6' r='0.25' fill='none' className={filledClassName} />
39
+ <circle cx='7.75' cy='6' r='0.25' fill='none' className={filledClassName} />
40
+ <path d='M6.5 8.25H8.25' stroke='none' strokeLinecap='round' />
41
+ <path d='M6.5 9.5H9.5' stroke='none' strokeLinecap='round' />
42
42
  </svg>
43
43
  )
44
44
  break
@@ -52,16 +52,15 @@ const AppConfigurationIcon = ({
52
52
  xmlns='http://www.w3.org/2000/svg'
53
53
  className={className}
54
54
  >
55
- <path d='M15.75 10.5L20.2966 13.125V18.375L15.75 21L11.2034 18.375V13.125L15.75 10.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
56
- <path d='M16.5 8.25V4C16.5 3.44772 16.0523 3 15.5 3H4C3.44772 3 3 3.44772 3 4V15.5C3 16.0523 3.44772 16.5 4 16.5H8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
57
- <path d='M3 6.375H16.5' stroke='none' strokeWidth={1.5} />
58
- <circle cx='4.6875' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
59
- <circle cx='6.375' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
60
- <circle cx='8.0625' cy='4.6875' r='0.5625' fill='none' className={filledClassName} />
61
- <path d='M5.25 8.625H10.875' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
62
- <path d='M6.375 10.875H11.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
63
- <path d='M6.375 13.125H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
64
-
55
+ <path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
56
+ <path d='M6.75 9L3.75 7.28567L12 3L20.25 7.28567L17.1807 8.6888' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
57
+ <rect x='7.5' y='7.5' width='9' height='9' rx='1' stroke='none' strokeWidth={1.5} />
58
+ <path d='M7.5 10.5H16.5' stroke='none' strokeWidth={1.5} />
59
+ <circle cx='9.375' cy='9' r='0.375' fill='none' className={filledClassName} />
60
+ <circle cx='10.5' cy='9' r='0.375' fill='none' className={filledClassName} />
61
+ <circle cx='11.625' cy='9' r='0.375' fill='none' className={filledClassName} />
62
+ <path d='M9.75 12.375H12.375' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
63
+ <path d='M9.75 14.25H14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
65
64
  </svg>
66
65
  )
67
66
  break
@@ -75,16 +74,15 @@ const AppConfigurationIcon = ({
75
74
  xmlns='http://www.w3.org/2000/svg'
76
75
  className={className}
77
76
  >
78
- <path d='M26.25 17.5L33.8277 21.875V30.625L26.25 35L18.6723 30.625V21.875L26.25 17.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
79
- <path d='M27.5 13.75V6C27.5 5.44772 27.0523 5 26.5 5H6C5.44772 5 5 5.44772 5 6V26.5C5 27.0523 5.44772 27.5 6 27.5H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
80
- <path d='M5 10.625H27.5' stroke='none' strokeWidth={2} />
81
- <circle cx='7.8125' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
82
- <circle cx='10.625' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
83
- <circle cx='13.4375' cy='7.8125' r='0.9375' fill='none' className={filledClassName} />
84
- <path d='M8.75 14.375H18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
85
- <path d='M10.625 18.125H18.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
86
- <path d='M10.625 21.875H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
87
-
77
+ <path d='M6.25 12.4999V27.1805L20 35M20 35L33.75 27.1805V12.4999M20 35V27.4999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
78
+ <path d='M11.25 15L6.25 12.1428L20 5L33.75 12.1428L28.6345 14.4813' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
79
+ <rect x='12.5' y='12.5' width='15' height='15' rx='1' stroke='none' strokeWidth={2} />
80
+ <path d='M12.5 17.5H27.5' stroke='none' strokeWidth={2} />
81
+ <circle cx='15.625' cy='15' r='0.625' fill='none' className={filledClassName} />
82
+ <circle cx='17.5' cy='15' r='0.625' fill='none' className={filledClassName} />
83
+ <circle cx='19.375' cy='15' r='0.625' fill='none' className={filledClassName} />
84
+ <path d='M16.25 20.625H20.625' stroke='none' strokeWidth={2} strokeLinecap='round' />
85
+ <path d='M16.25 23.75H23.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
88
86
  </svg>
89
87
  )
90
88
  break
@@ -29,9 +29,10 @@ const AppDetailsIcon = ({
29
29
  xmlns='http://www.w3.org/2000/svg'
30
30
  className={className}
31
31
  >
32
- <path d='M10.6603 6V4.5L6.33013 2L2 4.5V9.5L5.33008 11.4226' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
- <circle cx='9.24675' cy='9.91667' r='2.91667' stroke='none' />
34
- <path d='M13.3301 14L11.5801 12.25' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
32
+ <path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V10.8722' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M4 5.71428L2.5 4.85711L8 2L13.5 4.85711L11.625 5.71428' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <circle cx='7.58333' cy='7.08333' r='2.08333' stroke='none' />
35
+ <path d='M10.5 10L9.25 8.75' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35
36
  </svg>
36
37
  )
37
38
  break
@@ -45,9 +46,11 @@ const AppDetailsIcon = ({
45
46
  xmlns='http://www.w3.org/2000/svg'
46
47
  className={className}
47
48
  >
48
- <path d='M15.9904 9V6.75L9.49519 3L3 6.75V14.25L7.99512 17.1339' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49
- <circle cx='13.8701' cy='14.875' r='4.375' stroke='none' strokeWidth={1.5} />
50
- <path d='M19.9951 21L17.3701 18.375' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49
+ <path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V16.3083' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+ <path d='M6 8.57142L3.75 7.28567L12 3L20.25 7.28567L17.4375 8.57142' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <circle cx='11.375' cy='10.625' r='3.125' stroke='none' strokeWidth={1.5} />
52
+ <path d='M15.75 15L13.875 13.125' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
+
51
54
  </svg>
52
55
  )
53
56
  break
@@ -64,7 +67,6 @@ const AppDetailsIcon = ({
64
67
  <path d='M21.3205 12V9L12.6603 4L4 9V19L10.6602 22.8452' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
65
68
  <circle cx='18.4935' cy='19.8333' r='5.83333' stroke='none' strokeWidth={1.5} />
66
69
  <path d='M26.6602 28L23.1602 24.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
67
-
68
70
  </svg>
69
71
  )
70
72
  break
@@ -78,9 +80,10 @@ const AppDetailsIcon = ({
78
80
  xmlns='http://www.w3.org/2000/svg'
79
81
  className={className}
80
82
  >
81
- <path d='M26.6506 15V11.25L15.8253 5L5 11.25V23.75L13.3252 28.5566' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
82
- <circle cx='23.1169' cy='24.7917' r='7.29167' stroke='none' strokeWidth={2} />
83
- <path d='M33.3252 35L28.9502 30.625' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
83
+ <path d='M6.25 12.5V27.1806L20 35M20 35L33.75 27.1806V12.5M20 35V27.1806' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
84
+ <path d='M10 14.2857L6.25 12.1428L20 5L33.75 12.1428L29.0625 14.2857' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
85
+ <circle cx='18.9583' cy='17.7083' r='5.20833' stroke='none' strokeWidth={2} />
86
+ <path d='M26.25 25L23.125 21.875' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
84
87
 
85
88
  </svg>
86
89
  )