@prokodo/ui 0.0.42 → 0.0.44

package/dist/ui.css

@@ -4887,7 +4887,8 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
 }
 .prokodo-DynamicList__helperText__content--is-error {
   color: var(--color-error);
-}/* stylelint-disable */
+}
+/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
  */
@@ -5036,71 +5037,352 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-Form__label {
-  padding-bottom: 1.5rem;
+/* fade-in / out for the popup ------------------------------------------------ */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.95, 0.8);
+  }
+  100% {
+    opacity: 1;
+  }
 }
-.prokodo-Form__label--is-hidden {
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95, 0.8);
+  }
+}
+.prokodo-Select {
+  position: relative;
+  /* ───────────────── field (container for button + listbox) */
+  /* ───────────────── toggle button */
+  /* ───────────────── listbox (popup) */
+  /* ───────────────── option item */
+  /* ───────────────── checkbox for multi-select */
+  /* ───────────────── helper / error text */
+}
+.prokodo-Select--fullWidth {
+  width: 100%;
+}
+.prokodo-Select__label {
   position: absolute;
-  top: auto;
-  left: -99999px;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
+  left: 1.5rem;
+  top: 1.75rem;
+  transform-origin: top left;
+  /* start centered vertically, at full size */
+  transform: translateY(-150%) scale(0.75);
+  padding: 0 0.25rem;
+  font-size: 1rem;
+  color: var(--color-primary-500);
+  z-index: 1;
+  pointer-events: none;
+  background-color: var(--color-white);
 }
-.prokodo-Form__grid {
-  padding: 0 !important;
+.prokodo-Select__field {
+  position: relative;
+  box-shadow: var(--elevation-1);
+  border-radius: 1.5rem;
+  /*   ‘expanded’ state is now driven by a class your JS toggles */
 }
-.prokodo-Form__hp {
-  display: none !important;
+.prokodo-Select__field--expanded {
+  box-shadow: none;
 }
-.prokodo-Form__footer {
+.prokodo-Select__button {
+  box-sizing: border-box;
+  width: calc(100% - 0.25rem + 4px);
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  color: var(--color-grey-900);
+  border-radius: 1.5rem;
+  position: relative;
+  background: var(--gradient-border-7);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-over;
+          mask-composite: add;
+  /* hover / focus */
+  /* open state — JS toggles .Select__button--expanded **and**
+     .Select__field--expanded plus aria-expanded="true"          */
+  /* caret / icon (if you still have one) */
+  /* inner text */
+}
+.prokodo-Select__button:hover {
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__button:focus {
+  outline: 0;
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__button:disabled {
+  color: var(--color-grey-300);
+  cursor: default;
+  background: var(--gradient-border-8);
+}
+.prokodo-Select__button:disabled:hover {
+  background: var(--gradient-border-8);
+}
+.prokodo-Select__button--expanded {
+  border-top-left-radius: 1.6875rem;
+  border-top-right-radius: 1.6875rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__button--expanded > .Select__button__inner {
+  border-top-left-radius: 1.5625rem;
+  border-top-right-radius: 1.5625rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.prokodo-Select__button > svg {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  font-size: 1rem;
+  height: 100%;
+}
+.prokodo-Select__button__inner {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  padding: 0.875rem 1rem;
+  margin: 2px;
+  background: var(--color-white);
+  border-radius: 1.5rem;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
 }
-.prokodo-Form__footer__submit {
-  text-align: center !important;
-}/* stylelint-disable */
-/**
- * Calculates a rem-based value by a given pixel size.
- */
-/* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
+@media screen and (min-width: 480px) {
+  .prokodo-Select__button__inner {
+    font-size: 1rem;
+    line-height: 1.45;
   }
-  to {
-    background-position: 100% 50%;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__button__inner {
+    font-size: 1rem;
+    line-height: 1.45;
   }
 }
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
+html[data-theme=dark] .prokodo-Select__button__inner {
+  background: var(--color-grey-200);
+}
+.prokodo-Select__button__inner--expanded {
+  border-top-left-radius: 1.5625rem;
+  border-top-right-radius: 1.5625rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.prokodo-Select__button__inner--is-placeholder {
+  color: var(--color-grey-500);
+}
+.prokodo-Select__button__inner--is-placeholder--disabled {
+  color: var(--color-grey-300);
+}
+.prokodo-Select__listbox {
+  position: absolute;
+  box-sizing: border-box;
+  padding: 2px;
+  margin: -2px 0 0 0;
+  overflow: auto;
+  outline: 0;
+  max-height: 225px;
+  width: 100%;
+  color: var(--color-grey-900);
+  border-bottom-left-radius: 1.5625rem;
+  border-bottom-right-radius: 1.5625rem;
+  background: var(--gradient-border-4);
+  box-shadow: var(--elevation-3);
+  scrollbar-width: none;
+  z-index: 10;
+  /* animation – your JS toggles .is-open / .is-closed */
+}
+.prokodo-Select__listbox--is-open {
+  animation: fade-in 200ms ease-out forwards;
+}
+.prokodo-Select__listbox--is-closed {
+  animation: fade-out 200ms ease-in forwards;
+}
+.prokodo-Select__item {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  background: var(--color-white);
+  position: relative;
+  backface-visibility: hidden;
+  margin-top: -2px;
+  perspective: 1000px;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+  /* hover / focus */
+  /* selected */
+  /* disabled (if you add aria-disabled) */
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Select__item {
+    font-size: 1rem;
+    line-height: 1.45;
   }
-  100% {
-    opacity: 1;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__item {
+    font-size: 1rem;
+    line-height: 1.45;
   }
 }
-/* stylelint-disable */
-/**
- * Applies flex-column and gap.
- */
-/*
-    As example (light, primary)
-    See defined modes in designsystem/config/gradients
-*/
-/**
- * Mixin that renders a media query that target screens that are larger than the
- * given size.
- */
-/**
- * Mixin that renders a media query that target screens that are smaller than the
- * given size.
+.prokodo-Select__item:last-child {
+  border-bottom-left-radius: 1.5625rem;
+  border-bottom-right-radius: 1.5625rem;
+}
+.prokodo-Select__item:hover {
+  background-color: var(--color-grey-50);
+}
+.prokodo-Select__item:focus-visible {
+  outline: 0;
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--selected {
+  background-color: var(--color-primary-50);
+}
+.prokodo-Select__item[aria-disabled=true] {
+  color: var(--color-grey-400);
+  cursor: not-allowed;
+}
+.prokodo-Select__checkbox {
+  width: 18px;
+  height: 18px;
+  margin-right: 0.75rem;
+  position: relative;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-over;
+          mask-composite: add;
+  background: var(--gradient-border-7);
+}
+.prokodo-Select__checkbox:before { /* white inner square */
+  content: "";
+  position: absolute;
+  inset: 2px;
+  background: var(--color-white);
+}
+.prokodo-Select__checkbox--checked { /* gradient + tick mark */
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__checkbox--checked::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--gradient-background-primary-grey-secondary);
+  -webkit-mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
+  mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
+}
+.prokodo-Select__helperText {
+  padding-left: 1.5rem;
+  padding-top: 0.75rem;
+  display: flex;
+  color: var(--color-grey-300);
+  width: 80%;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Select__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Select__helperText {
+  color: var(--color-grey-700);
+}
+.prokodo-Select__helperText__content {
+  width: 100%;
+}
+.prokodo-Select__helperText__content--is-error {
+  color: var(--color-error);
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Gradient move, mainly for text
+ */
+@keyframes gradientMove {
+  from {
+    background-position: 0% 50%;
+  }
+  to {
+    background-position: 100% 50%;
+  }
+}
+/**
+ * Fade in
+ */
+@keyframes fadeInKeyframe {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
  */
 /**
  * Mixin that renders a media query that target screens in between the given range.
@@ -5208,10 +5490,30 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-FormField {
-  padding-bottom: 1rem;
+.prokodo-Form__label {
+  padding-bottom: 1.5rem;
 }
-/* stylelint-disable */
+.prokodo-Form__label--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Form__grid {
+  padding: 0 !important;
+}
+.prokodo-Form__hp {
+  display: none !important;
+}
+.prokodo-Form__footer {
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Form__footer__submit {
+  text-align: center !important;
+}/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
  */
@@ -5360,307 +5662,8 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-/* fade-in / out for the popup ------------------------------------------------ */
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.95, 0.8);
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.95, 0.8);
-  }
-}
-.prokodo-Select {
-  position: relative;
-  /* ───────────────── field (container for button + listbox) */
-  /* ───────────────── toggle button */
-  /* ───────────────── listbox (popup) */
-  /* ───────────────── option item */
-  /* ───────────────── checkbox for multi-select */
-  /* ───────────────── helper / error text */
-}
-.prokodo-Select__label {
-  position: absolute;
-  left: 1.5rem;
-  top: 1.75rem;
-  transform-origin: top left;
-  /* start centered vertically, at full size */
-  transform: translateY(-150%) scale(0.75);
-  padding: 0 0.25rem;
-  font-size: 1rem;
-  color: var(--color-primary-500);
-  z-index: 1;
-  pointer-events: none;
-  background-color: var(--color-white);
-}
-.prokodo-Select__field {
-  position: relative;
-  box-shadow: var(--elevation-1);
-  border-radius: 1.5rem;
-  /*   ‘expanded’ state is now driven by a class your JS toggles */
-}
-.prokodo-Select__field--expanded {
-  box-shadow: none;
-}
-.prokodo-Select__button {
-  box-sizing: border-box;
-  width: calc(100% - 0.25rem + 4px);
-  padding: 0;
-  text-align: left;
-  cursor: pointer;
-  border: none;
-  color: var(--color-grey-900);
-  border-radius: 1.5rem;
-  position: relative;
-  background: var(--gradient-border-7);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: source-over;
-          mask-composite: add;
-  /* hover / focus */
-  /* open state — JS toggles .Select__button--expanded **and**
-     .Select__field--expanded plus aria-expanded="true"          */
-  /* caret / icon (if you still have one) */
-  /* inner text */
-}
-.prokodo-Select__button:hover {
-  background: var(--gradient-border-4);
-}
-.prokodo-Select__button:focus {
-  outline: 0;
-  background: var(--gradient-border-4);
-}
-.prokodo-Select__button:disabled {
-  color: var(--color-grey-300);
-  cursor: default;
-  background: var(--gradient-border-8);
-}
-.prokodo-Select__button:disabled:hover {
-  background: var(--gradient-border-8);
-}
-.prokodo-Select__button--expanded {
-  border-top-left-radius: 1.6875rem;
-  border-top-right-radius: 1.6875rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  background: var(--gradient-border-4);
-}
-.prokodo-Select__button--expanded > .Select__button__inner {
-  border-top-left-radius: 1.5625rem;
-  border-top-right-radius: 1.5625rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.prokodo-Select__button > svg {
-  position: absolute;
-  top: 0;
-  right: 10px;
-  font-size: 1rem;
-  height: 100%;
-}
-.prokodo-Select__button__inner {
-  display: flex;
-  align-items: center;
-  padding: 0.875rem 1rem;
-  margin: 2px;
-  background: var(--color-white);
-  border-radius: 1.5rem;
-  font-weight: 400;
-  font-size: 1.125rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__button__inner {
-    font-size: 1rem;
-    line-height: 1.45;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__button__inner {
-    font-size: 1rem;
-    line-height: 1.45;
-  }
-}
-html[data-theme=dark] .prokodo-Select__button__inner {
-  background: var(--color-grey-200);
-}
-.prokodo-Select__button__inner--expanded {
-  border-top-left-radius: 1.5625rem;
-  border-top-right-radius: 1.5625rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.prokodo-Select__button__inner--is-placeholder {
-  color: var(--color-grey-500);
-}
-.prokodo-Select__button__inner--is-placeholder--disabled {
-  color: var(--color-grey-300);
-}
-.prokodo-Select__listbox {
-  position: absolute;
-  box-sizing: border-box;
-  padding: 2px;
-  margin: -2px 0 0 0;
-  overflow: auto;
-  outline: 0;
-  max-height: 225px;
-  width: 100%;
-  color: var(--color-grey-900);
-  border-bottom-left-radius: 1.5625rem;
-  border-bottom-right-radius: 1.5625rem;
-  background: var(--gradient-border-4);
-  box-shadow: var(--elevation-3);
-  scrollbar-width: none;
-  z-index: 10;
-  /* animation – your JS toggles .is-open / .is-closed */
-}
-.prokodo-Select__listbox--is-open {
-  animation: fade-in 200ms ease-out forwards;
-}
-.prokodo-Select__listbox--is-closed {
-  animation: fade-out 200ms ease-in forwards;
-}
-.prokodo-Select__item {
-  list-style: none;
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  cursor: pointer;
-  background: var(--color-white);
-  position: relative;
-  backface-visibility: hidden;
-  margin-top: -2px;
-  perspective: 1000px;
-  font-weight: 400;
-  font-size: 1.125rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-  /* hover / focus */
-  /* selected */
-  /* disabled (if you add aria-disabled) */
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__item {
-    font-size: 1rem;
-    line-height: 1.45;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__item {
-    font-size: 1rem;
-    line-height: 1.45;
-  }
-}
-.prokodo-Select__item:last-child {
-  border-bottom-left-radius: 1.5625rem;
-  border-bottom-right-radius: 1.5625rem;
-}
-.prokodo-Select__item:hover {
-  background-color: var(--color-grey-50);
-}
-.prokodo-Select__item:focus-visible {
-  outline: 0;
-  background: var(--color-primary-100);
-}
-.prokodo-Select__item--selected {
-  background-color: var(--color-primary-50);
-}
-.prokodo-Select__item[aria-disabled=true] {
-  color: var(--color-grey-400);
-  cursor: not-allowed;
-}
-.prokodo-Select__checkbox {
-  width: 18px;
-  height: 18px;
-  margin-right: 0.75rem;
-  position: relative;
-  transform: scale(1.2);
-  cursor: pointer;
-  border: none;
-  border-radius: 5px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-       appearance: none;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: source-over;
-          mask-composite: add;
-  background: var(--gradient-border-7);
-}
-.prokodo-Select__checkbox:before { /* white inner square */
-  content: "";
-  position: absolute;
-  inset: 2px;
-  background: var(--color-white);
-}
-.prokodo-Select__checkbox--checked { /* gradient + tick mark */
-  background: var(--gradient-border-4);
-}
-.prokodo-Select__checkbox--checked::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: var(--gradient-background-primary-grey-secondary);
-  -webkit-mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
-  mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
-}
-.prokodo-Select__helperText {
-  padding-left: 1.5rem;
-  padding-top: 0.75rem;
-  display: flex;
-  color: var(--color-grey-300);
-  width: 80%;
-  font-weight: 400;
-  font-size: 1rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.45;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__helperText {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__helperText {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-html[data-theme=dark] .prokodo-Select__helperText {
-  color: var(--color-grey-700);
-}
-.prokodo-Select__helperText__content {
-  width: 100%;
-}
-.prokodo-Select__helperText__content--is-error {
-  color: var(--color-error);
+.prokodo-FormField {
+  padding-bottom: 1rem;
 }/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.