@platformatic/ui-components 0.1.81 → 0.1.83

package/dist/assets/index.a6b7ebf4.css

@@ -0,0 +1 @@
+._input_1k1s3_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_1k1s3_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_1k1s3_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_1k1s3_10{fill:#21fa90}._fillWhite_1k1s3_13{fill:#fff}._input_1k1s3_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_1k1s3_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_gvhmf_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_gvhmf_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_gvhmf_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_gvhmf_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_gvhmf_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_gvhmf_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_gvhmf_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_gvhmf_23{position:absolute;bottom:-1.25rem;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_gvhmf_27{padding:.625rem .5rem}._text--error-red_gvhmf_31{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_gvhmf_34{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--main-green_gvhmf_37{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_gvhmf_40{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._background-color-main-green_gvhmf_44{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_gvhmf_47{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_gvhmf_50{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_gvhmf_53{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_gvhmf_56{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_gvhmf_59{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_gvhmf_62{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_gvhmf_65{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_gvhmf_68{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_gvhmf_71{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_gvhmf_74{background-color:transparent}._background-color-opaque-100_gvhmf_77{--tw-bg-opacity: 1 !important}._background-color-opaque-60_gvhmf_80{--tw-bg-opacity: .6 !important}._background-color-opaque-30_gvhmf_83{--tw-bg-opacity: .3 !important}._background-color-opaque-20_gvhmf_86{--tw-bg-opacity: .2 !important}._apply-opacity-30_gvhmf_89{opacity:.3}._padding--none_gvhmf_92{padding:0}._padding--small_gvhmf_95{padding:.25rem}._padding--medium_gvhmf_98{padding:.5rem}._padding--large_gvhmf_101{padding:1rem}._padding--extra-large_gvhmf_104{padding:1.5rem}._hover-background-color-opaque-main-green_gvhmf_107:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_gvhmf_110:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_gvhmf_113:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_gvhmf_116:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_gvhmf_119:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_gvhmf_122:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_gvhmf_125:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_gvhmf_128:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_gvhmf_131:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_gvhmf_134{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_gvhmf_137{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_gvhmf_140{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_gvhmf_143{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_gvhmf_146{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_gvhmf_149{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_gvhmf_152{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_gvhmf_155{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_gvhmf_158{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._main-green_s6yir_1>circle,._main-green_s6yir_1>ellipse,._main-green_s6yir_1>rect,._main-green_s6yir_1>line,._main-green_s6yir_1>path{stroke:#21fa90}._error-red_s6yir_10>circle,._error-red_s6yir_10>ellipse,._error-red_s6yir_10>rect,._error-red_s6yir_10>line,._error-red_s6yir_10>path{stroke:#fa2121}._white_s6yir_18>circle,._white_s6yir_18>ellipse,._white_s6yir_18>rect,._white_s6yir_18>line,._white_s6yir_18>path{stroke:#fff}._main-dark-blue_s6yir_25>circle,._main-dark-blue_s6yir_25>ellipse,._main-dark-blue_s6yir_25>rect,._main-dark-blue_s6yir_25>line,._main-dark-blue_s6yir_25>path{stroke:#00283d}._warning-yellow_s6yir_32>circle,._warning-yellow_s6yir_32>ellipse,._warning-yellow_s6yir_32>rect,._warning-yellow_s6yir_32>line,._warning-yellow_s6yir_32>path{stroke:#feb928}._filled-white_s6yir_40{fill:#fff}._filled-error-red_s6yir_43{fill:#fa2121}._filled-main-dark-blue_s6yir_46{fill:#00283d}._filled-main-green_s6yir_49{fill:#21fa90}._filled-warning-yellow_s6yir_52{fill:#feb928}._fill-circle-green_s6yir_56>circle{fill:#fff}._fill-circle-main-dark-blue_s6yir_59>circle{fill:#00283d}._noShrinkForFlex_s6yir_63{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_b09u0_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_b09u0_4{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_b09u0_4:hover{cursor:pointer}._tab_b09u0_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_b09u0_1:first-child{margin-left:0}._tab_b09u0_1:last-child{margin-right:0}._tab_b09u0_1:hover{font-weight:600}._selected-tab_b09u0_10{font-weight:600;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_b09u0_14{min-height:100vh}._borderedBox_170cy_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}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}*,: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-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.my-auto{margin-top:auto;margin-bottom:auto}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.border{border-width:1px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.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-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular.dcfe8df2.ttf) format("truetype");font-weight:400;font-style:normal}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.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.2eadedb2.js"></script>
-    <link rel="stylesheet" href="/assets/index.3f984270.css">
+    <script type="module" crossorigin src="/assets/index.01fc1888.js"></script>
+    <link rel="stylesheet" href="/assets/index.a6b7ebf4.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -544,8 +544,14 @@ video {
   position: relative;
 }
 
-.m-3 {
-  margin: 0.75rem;
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
 }
 
 .mx-auto {

package/package.json

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

package/src/components/Common.module.css

@@ -132,30 +132,30 @@
   @apply hover:bg-tertiary-blue hover:bg-opacity-15;
 }
 .selected-background-color-main-green {
-  @apply bg-main-green bg-opacity-15;
+  @apply !bg-main-green bg-opacity-15 !important;
 }
 .selected-background-color-light-green {
-  @apply bg-light-green bg-opacity-15;
+  @apply !bg-light-green bg-opacity-15 !important;
 }
 .selected-background-color-dark-green {
-  @apply bg-dark-green bg-opacity-15;
+  @apply !bg-dark-green bg-opacity-15 !important;
 }
 .selected-background-color-main-dark-blue{
-  @apply bg-main-dark-blue bg-opacity-10;
+  @apply !bg-main-dark-blue bg-opacity-10;
 }
 .selected-background-color-dark-blue {
-  @apply bg-dark-blue bg-opacity-15;
+  @apply !bg-dark-blue bg-opacity-15;
 }
 .selected-background-color-light-blue {
-  @apply bg-light-blue bg-opacity-15;
+  @apply !bg-light-blue bg-opacity-15;
 }
 .selected-background-color-white{
-  @apply bg-white bg-opacity-15;
+  @apply !bg-white bg-opacity-15;
 }
 .selected-background-color-error-red{
-  @apply bg-error-red bg-opacity-15;
+  @apply !bg-error-red bg-opacity-15;
 }
 .selected-background-color-tertiary-blue{
-  @apply bg-tertiary-blue bg-opacity-15;
+  @apply !bg-tertiary-blue bg-opacity-15;
 }
 

package/src/components/Status.jsx

@@ -2,13 +2,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import PlatformaticIcon from './PlatformaticIcon'
-import { COLORS_ICON, EXTRA_SMALL } from './constants'
+import { COLORS_ICON, EXTRA_SMALL, SIZES, WHITE } from './constants'
 
-function Status ({ color, status }) {
+function Status ({ color, status, size }) {
   const className = `inline-flex items-center text-${color}`
   return (
     <div className={className}>
-      <PlatformaticIcon iconName='CircleFullIcon' size={EXTRA_SMALL} color={color} />
+      <PlatformaticIcon iconName='CircleFullIcon' size={size} color={color} />
       <span className='ml-2'>{status}</span>
     </div>
   )
@@ -22,12 +22,18 @@ Status.propTypes = {
   /**
    * status
    */
-  status: PropTypes.string
+  status: PropTypes.string,
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+
 }
 
 Status.defaultProps = {
-  color: 'white',
-  status: ''
+  color: WHITE,
+  status: '',
+  size: EXTRA_SMALL
 }
 
 export default Status

package/src/components/VerticalSeparator.jsx

@@ -1,5 +1,5 @@
 'use strict'
 import React from 'react'
 export default function VerticalSeparator () {
-  return <span className='text-dark-green m-3'> | </span>
+  return <span className='text-dark-green my-auto mx-5'> | </span>
 }

package/src/components/icons/LabelIcon.jsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, LARGE, MEDIUM, SIZES, SMALL } from '../constants'
+
+const LabelIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  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='M3.05518 8.18267C3.01573 7.89342 3.10464 7.60137 3.29858 7.38318L8.30775 1.74751C8.67466 1.33472 9.30673 1.29752 9.71952 1.66443L13.4567 4.98613C13.8695 5.35304 13.9067 5.98511 13.5398 6.3979L8.53058 12.0336C8.33665 12.2518 8.05705 12.3743 7.76517 12.3691L4.47301 12.3098C3.97985 12.301 3.56682 11.9339 3.50017 11.4452L3.05518 8.18267Z' stroke='none' />
+          <circle cx={6.60545} cy={8.93103} r={1.5} transform='rotate(-48.3682 6.60545 8.93103)' stroke='none' />
+
+        </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='M4.55169 12.0459C4.51224 11.7566 4.60115 11.4646 4.79509 11.2464L12.7938 2.24731C13.1607 1.83452 13.7928 1.79732 14.2056 2.16422L20.5587 7.81112C20.9715 8.17803 21.0087 8.8101 20.6418 9.22289L12.6431 18.222C12.4492 18.4402 12.1696 18.5627 11.8777 18.5575L6.28101 18.4568C5.78786 18.4479 5.37482 18.0808 5.30817 17.5921L4.55169 12.0459Z' stroke='none' strokeWidth={1.5} />
+          <circle cx={9.90817} cy={13.3963} r={2.25} transform='rotate(-48.3682 9.90817 13.3963)' stroke='none' strokeWidth={1.5} />
+
+        </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='M7.54472 19.7728C7.50526 19.4836 7.59417 19.1916 7.78811 18.9734L21.7659 3.2474C22.1328 2.8346 22.7649 2.7974 23.1777 3.16431L34.7628 13.4616C35.1756 13.8285 35.2128 14.4606 34.8459 14.8734L20.8681 30.5993C20.6742 30.8175 20.3946 30.9401 20.1027 30.9348L9.89701 30.7513C9.40386 30.7424 8.99083 30.3753 8.92417 29.8866L7.54472 19.7728Z' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+LabelIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+LabelIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default LabelIcon

package/src/components/icons/index.js

@@ -41,6 +41,7 @@ import GearIcon from './GearIcon'
 import GenerationLoadingIcon from './GenerationLoadingIcon'
 import GraphQLIcon from './GraphQLIcon'
 import KeyIcon from './KeyIcon'
+import LabelIcon from './LabelIcon'
 import LayersIcon from './LayersIcon'
 import LensIcon from './LensIcon'
 import LiveIcon from './LiveIcon'
@@ -114,6 +115,7 @@ export default {
   GenerationLoadingIcon,
   GraphQLIcon,
   KeyIcon,
+  LabelIcon,
   LayersIcon,
   LensIcon,
   LiveIcon,

package/dist/assets/index.3f984270.css

@@ -1 +0,0 @@
-._input_1k1s3_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_1k1s3_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_1k1s3_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_1k1s3_10{fill:#21fa90}._fillWhite_1k1s3_13{fill:#fff}._input_1k1s3_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_1k1s3_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_7p6ei_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_7p6ei_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_7p6ei_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_7p6ei_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_7p6ei_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_7p6ei_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_7p6ei_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_7p6ei_23{position:absolute;bottom:-1.25rem;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_7p6ei_27{padding:.625rem .5rem}._text--error-red_7p6ei_31{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_7p6ei_34{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--main-green_7p6ei_37{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_7p6ei_40{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._background-color-main-green_7p6ei_44{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_7p6ei_47{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_7p6ei_50{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_7p6ei_53{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_7p6ei_56{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_7p6ei_59{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_7p6ei_62{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_7p6ei_65{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_7p6ei_68{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_7p6ei_71{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_7p6ei_74{background-color:transparent}._background-color-opaque-100_7p6ei_77{--tw-bg-opacity: 1 !important}._background-color-opaque-60_7p6ei_80{--tw-bg-opacity: .6 !important}._background-color-opaque-30_7p6ei_83{--tw-bg-opacity: .3 !important}._background-color-opaque-20_7p6ei_86{--tw-bg-opacity: .2 !important}._apply-opacity-30_7p6ei_89{opacity:.3}._padding--none_7p6ei_92{padding:0}._padding--small_7p6ei_95{padding:.25rem}._padding--medium_7p6ei_98{padding:.5rem}._padding--large_7p6ei_101{padding:1rem}._padding--extra-large_7p6ei_104{padding:1.5rem}._hover-background-color-opaque-main-green_7p6ei_107:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_7p6ei_110:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_7p6ei_113:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_7p6ei_116:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_7p6ei_119:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_7p6ei_122:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_7p6ei_125:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_7p6ei_128:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_7p6ei_131:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_7p6ei_134{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-light-green_7p6ei_137{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-dark-green_7p6ei_140{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-dark-blue_7p6ei_143{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._selected-background-color-dark-blue_7p6ei_146{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-light-blue_7p6ei_149{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-white_7p6ei_152{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-error-red_7p6ei_155{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_7p6ei_158{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._main-green_s6yir_1>circle,._main-green_s6yir_1>ellipse,._main-green_s6yir_1>rect,._main-green_s6yir_1>line,._main-green_s6yir_1>path{stroke:#21fa90}._error-red_s6yir_10>circle,._error-red_s6yir_10>ellipse,._error-red_s6yir_10>rect,._error-red_s6yir_10>line,._error-red_s6yir_10>path{stroke:#fa2121}._white_s6yir_18>circle,._white_s6yir_18>ellipse,._white_s6yir_18>rect,._white_s6yir_18>line,._white_s6yir_18>path{stroke:#fff}._main-dark-blue_s6yir_25>circle,._main-dark-blue_s6yir_25>ellipse,._main-dark-blue_s6yir_25>rect,._main-dark-blue_s6yir_25>line,._main-dark-blue_s6yir_25>path{stroke:#00283d}._warning-yellow_s6yir_32>circle,._warning-yellow_s6yir_32>ellipse,._warning-yellow_s6yir_32>rect,._warning-yellow_s6yir_32>line,._warning-yellow_s6yir_32>path{stroke:#feb928}._filled-white_s6yir_40{fill:#fff}._filled-error-red_s6yir_43{fill:#fa2121}._filled-main-dark-blue_s6yir_46{fill:#00283d}._filled-main-green_s6yir_49{fill:#21fa90}._filled-warning-yellow_s6yir_52{fill:#feb928}._fill-circle-green_s6yir_56>circle{fill:#fff}._fill-circle-main-dark-blue_s6yir_59>circle{fill:#00283d}._noShrinkForFlex_s6yir_63{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_b09u0_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_b09u0_4{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_b09u0_4:hover{cursor:pointer}._tab_b09u0_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_b09u0_1:first-child{margin-left:0}._tab_b09u0_1:last-child{margin-right:0}._tab_b09u0_1:hover{font-weight:600}._selected-tab_b09u0_10{font-weight:600;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_b09u0_14{min-height:100vh}._borderedBox_170cy_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}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}*,: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-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.border{border-width:1px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.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-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular.dcfe8df2.ttf) format("truetype");font-weight:400;font-style:normal}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}