@prokodo/ui 0.1.12 → 0.1.14

package/dist/theme.css

@@ -160,7 +160,7 @@
   --color-secondary-700: #2393a2;
   --color-secondary-800: #236c77;
   --color-secondary-900: #1e484e;
-  --color-success: #2e7d32;
+  --color-success: #20E381;
   --color-warning: #f7b529;
   --color-error: #f0453a;
   --elevation-1: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
@@ -192,6 +192,10 @@
   --gradient-border-6: linear-gradient(90deg, var(--color-secondary-500) 4.63%, var(--color-primary-500) 100%);
   --gradient-border-7: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
   --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
   --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
   --gradient-text-primary-secondary-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 50%, var(--color-primary-500) 100%);
   --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-400) 100%);
@@ -236,7 +240,7 @@
   --color-secondary-700: #AFF3FF;
   --color-secondary-800: #CCF7FF;
   --color-secondary-900: #E6FBFF;
-  --color-success: #2e7d32;
+  --color-success: #20E381;
   --color-warning: #f7b529;
   --color-error: #f0453a;
   --elevation-1: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.08);
@@ -266,6 +270,11 @@
   --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
   --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
   --gradient-border-7: linear-gradient(180deg, var(--color-grey-400) 0%, var(--color-grey-600) 100%);
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
   --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
   --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-700) 100%);
   --gradient-text-grey: linear-gradient(90deg, var(--color-grey-700) 0%, var(--color-grey-900) 100%);
@@ -287,6 +296,9 @@
   display: flex;
   flex-direction: column;
 }
+.prokodo-Accordion--panel {
+  gap: 0;
+}
 .prokodo-Accordion__item {
   border: 1px solid var(--color-grey-200);
   border-radius: 0.75rem;
@@ -298,6 +310,12 @@
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
 }
+.prokodo-Accordion__item--panel {
+  border-radius: 0;
+  margin-bottom: 0;
+  box-shadow: none;
+  border: none;
+}
 .prokodo-Accordion__header {
   display: flex;
   align-items: center;
@@ -358,6 +376,43 @@
   animation: none !important;
   box-shadow: var(--elevation-1);
 }
+.prokodo-Accordion__header__wrapper--panel {
+  position: relative;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white)));
+  border-radius: 0;
+}
+.prokodo-Accordion__header__wrapper--panel::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  background-size: 0% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  transition: background-size 0.35s ease;
+}
+.prokodo-Accordion__header__wrapper--panel:hover, .prokodo-Accordion__header__wrapper--panel:focus-visible {
+  animation: none;
+}
+.prokodo-Accordion__header__wrapper--panel:hover::after, .prokodo-Accordion__header__wrapper--panel:focus-visible::after {
+  background-size: 200% 100%;
+  animation: accordionBorderShift 2s linear;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded {
+  border-radius: 0;
+  box-shadow: none;
+  animation: none !important;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded::after {
+  background-size: 100% 100%;
+  background-position: 100% 0;
+  animation: none !important;
+}
 .prokodo-Accordion__title {
   width: calc(100% - 20px);
   margin: 0;
@@ -473,6 +528,197 @@ html[data-theme=dark] .prokodo-Accordion__icon {
   transition: opacity 1500ms ease-out, transform 500ms ease-out, visibility 1500ms ease-out;
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.prokodo-Autocomplete {
+  position: relative;
+}
+.prokodo-Autocomplete__inputWrap {
+  position: relative;
+  z-index: 41;
+  border-radius: 1.5rem;
+}
+.prokodo-Autocomplete__input {
+  width: 100%;
+}
+.prokodo-Autocomplete__input__inner--is-open, .prokodo-Autocomplete__input__node--is-open {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.prokodo-Autocomplete__input__inner--is-open {
+  background: var(--gradient-border-4);
+}
+.prokodo-Autocomplete__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% - 4px);
+  margin: 0;
+  padding: 0 2px 2px;
+  list-style: none;
+  transform: none;
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background: var(--gradient-border-4);
+  margin-top: -2px;
+  box-shadow: var(--elevation-3);
+  max-height: 260px;
+  overflow: auto;
+  z-index: 50;
+  animation: fade-in 180ms ease-out;
+  scrollbar-width: none;
+}
+.prokodo-Autocomplete__list::-webkit-scrollbar {
+  display: none;
+}
+.prokodo-Autocomplete__state {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.5rem 1rem 1rem 1rem;
+  background: var(--color-white);
+  color: var(--color-grey-700);
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  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-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Autocomplete__state {
+  background: rgb(16, 19, 27);
+  color: var(--color-grey-500);
+}
+.prokodo-Autocomplete__itemRow {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.prokodo-Autocomplete__itemRow--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item {
+  width: 100%;
+  border: none;
+  background: var(--color-white);
+  color: inherit;
+  text-align: left;
+  display: grid;
+  grid-gap: 0.25rem;
+  gap: 0.25rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+html[data-theme=dark] .prokodo-Autocomplete__item {
+  background: rgb(16, 19, 27);
+}
+.prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:focus-visible {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item--is-first {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Autocomplete__item--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+.prokodo-Autocomplete__itemLabel {
+  margin: 0;
+  color: var(--color-grey-900);
+  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-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Autocomplete__itemDescription {
+  margin: 0;
+  color: var(--color-grey-700);
+  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-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
 .prokodo-Avatar {
   position: relative;
   display: flex;
@@ -567,29 +813,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -645,7 +920,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -666,6 +941,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -684,6 +1019,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -727,7 +1082,6 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }
 
@@ -912,83 +1266,383 @@ html[data-theme=dark] .prokodo-Card__background {
   transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
   z-index: 10;
 }
-.prokodo-Carousel__mobile__tutorial__animation {
-  min-height: 100px;
-  width: 100%;
+.prokodo-Carousel__mobile__tutorial__animation {
+  min-height: 100px;
+  width: 100%;
+}
+.prokodo-Carousel__mobile__tutorial--is-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Carousel__mobile__tutorial {
+    position: absolute;
+    top: auto;
+    left: -99999px;
+    width: 0;
+    height: 0;
+    text-indent: -99999px;
+  }
+}
+.prokodo-Carousel__controls {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  opacity: 0;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Carousel__controls {
+    opacity: 1;
+  }
+}
+.prokodo-Carousel__button {
+  padding: 0.25rem;
+}
+.prokodo-Carousel__dots {
+  display: flex;
+  margin: 2rem auto 0 auto;
+  text-align: center;
+}
+.prokodo-Carousel__dots__dot {
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin: 0 5px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.prokodo-Carousel__dots__dot::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  padding: 2px;
+  -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: xor;
+          mask-composite: exclude;
+  z-index: 0;
+  background: var(--gradient-border-4);
+}
+.prokodo-Carousel__dots__dot--is-active {
+  background-color: #FFFFFF;
+}
+@media screen and (max-width: 1280px) {
+  .prokodo-Carousel__dots__dot {
+    position: absolute;
+    top: auto;
+    left: -99999px;
+    width: 0;
+    height: 0;
+    text-indent: -99999px;
+  }
+}
+
+.prokodo-Checkbox {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  grid-gap: 0.75rem;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-Checkbox--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.prokodo-Checkbox:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Checkbox--card {
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+.prokodo-Checkbox__left {
+  display: inline-flex;
+  align-items: center;
+}
+.prokodo-Checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.prokodo-Checkbox__control {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  position: relative;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: var(--inner-elevation-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+.prokodo-Checkbox__control::after {
+  content: "";
+  width: 9px;
+  height: 5px;
+  border-left: 2px solid var(--color-primary-500, #2f6bff);
+  border-bottom: 2px solid var(--color-primary-500, #2f6bff);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(0.6);
+  opacity: 0;
+  transition: transform 140ms ease, opacity 140ms ease;
+}
+.prokodo-Checkbox__control--checked {
+  border-color: rgba(255, 255, 255, 0.32);
+}
+.prokodo-Checkbox__control--checked::after {
+  opacity: 1;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
+}
+.prokodo-Checkbox__control--card {
+  box-shadow: var(--inner-elevation-1);
+}
+.prokodo-Checkbox__control--card.prokodo-Checkbox__control--checked {
+  background: rgba(255, 255, 255, 0.1);
+}
+.prokodo-Checkbox__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.prokodo-Checkbox__row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-Checkbox__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-grey-900);
+  margin: 0;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__requiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__desc {
+  color: var(--color-grey-700);
+  opacity: 0.82;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  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-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Checkbox__right {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  align-self: start;
+  margin-top: 2px;
+}
+.prokodo-Checkbox__rightIcon {
+  color: var(--color-grey-700);
+  opacity: 0.9;
+}
+
+.prokodo-CheckboxGroup {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__legend {
+  margin: 0 0 0.5rem 0;
+  padding: 0;
+  opacity: 0.82;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  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-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legend--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
 }
-.prokodo-Carousel__mobile__tutorial--is-hidden {
-  opacity: 0;
-  visibility: hidden;
+.prokodo-CheckboxGroup__legendLabel {
+  color: var(--color-grey-900);
+  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-Carousel__mobile__tutorial {
-    position: absolute;
-    top: auto;
-    left: -99999px;
-    width: 0;
-    height: 0;
-    text-indent: -99999px;
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
   }
 }
-.prokodo-Carousel__controls {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  opacity: 0;
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legendRequiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  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-Carousel__controls {
-    opacity: 1;
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
   }
 }
-.prokodo-Carousel__button {
-  padding: 0.25rem;
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Carousel__dots {
+.prokodo-CheckboxGroup__list {
   display: flex;
-  margin: 2rem auto 0 auto;
-  text-align: center;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
 }
-.prokodo-Carousel__dots__dot {
-  position: relative;
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  margin: 0 5px;
-  border: none;
-  background: none;
-  cursor: pointer;
+.prokodo-CheckboxGroup__list--plain {
+  gap: 0;
 }
-.prokodo-Carousel__dots__dot::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  padding: 2px;
-  -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: xor;
-          mask-composite: exclude;
-  z-index: 0;
-  background: var(--gradient-border-4);
+.prokodo-CheckboxGroup__list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
-.prokodo-Carousel__dots__dot--is-active {
-  background-color: #FFFFFF;
+.prokodo-CheckboxGroup__item {
+  min-width: 0;
 }
-@media screen and (max-width: 1280px) {
-  .prokodo-Carousel__dots__dot {
-    position: absolute;
-    top: auto;
-    left: -99999px;
-    width: 0;
-    height: 0;
-    text-indent: -99999px;
-  }
+.prokodo-CheckboxGroup__item--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
 }
 
 .prokodo-Chip {
@@ -2289,8 +2943,8 @@ html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
   background: var(--gradient-border-8);
 }
 .prokodo-Input__input__node {
-  width: calc(100% - 1.5rem - 1.5rem - 0.25rem);
-  padding: 0.875rem 1.5rem;
+  width: calc(100% - 1rem - 1rem - 0.25rem);
+  padding: 0.875rem 1rem;
   margin: 2px;
   border: none;
   outline: none;
@@ -3665,7 +4319,6 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;
-  color: var(--color-grey-500);
 }
 .prokodo-RichText__li {
   display: flex;
@@ -4547,7 +5200,11 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   color: var(--color-black);
 }
 .prokodo-Snackbar--info {
-  background-color: var(--color-info);
+  background-color: var(--color-grey-500);
+}
+html[data-theme=dark] .prokodo-Snackbar--info {
+  background-color: var(--color-grey-300);
+  color: var(--color-grey-900);
 }
 .prokodo-Snackbar__message {
   flex: 1 1;
@@ -5090,6 +5747,211 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   padding-bottom: 1rem;
 }
 
+.prokodo-Tabs {
+  width: 100%;
+}
+.prokodo-Tabs--vertical {
+  display: grid;
+  grid-gap: 1rem;
+  gap: 1rem;
+  grid-template-columns: minmax(px-to-rem(180px), px-to-rem(260px)) 1fr;
+}
+.prokodo-Tabs__list {
+  align-items: stretch;
+  border-bottom: 1px solid var(--color-grey-200);
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  padding: 0;
+  position: relative;
+  scrollbar-width: none;
+}
+html[data-theme=dark] .prokodo-Tabs__list {
+  border-bottom-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--vertical {
+  border-bottom: none;
+  border-right: 1px solid var(--color-grey-200);
+  flex-direction: column;
+  overflow-x: visible;
+}
+html[data-theme=dark] .prokodo-Tabs__list--vertical {
+  border-right-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--disabled {
+  opacity: 0.7;
+}
+.prokodo-Tabs__tab {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+  box-shadow: none;
+  color: var(--color-grey-700);
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.5rem;
+  justify-content: center;
+  min-height: px-to-rem(44px);
+  padding: 0.75rem 1rem;
+  position: relative;
+  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__tab--vertical {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Tabs__tab:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab::after {
+  background: transparent;
+  bottom: 0;
+  content: "";
+  height: 3px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  transform: scaleX(0.35);
+  transform-origin: center;
+  transition: background-color 180ms ease, transform 180ms ease;
+}
+.prokodo-Tabs__tab--fullWidth {
+  flex: 1 1;
+}
+.prokodo-Tabs__tab--selected {
+  color: var(--color-primary-900);
+}
+.prokodo-Tabs__tab--selected::after {
+  background: var(--gradient-border-4);
+  transform: scaleX(1);
+}
+.prokodo-Tabs__tab--disabled {
+  color: var(--color-grey-500);
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+.prokodo-Tabs__tab--disabled:hover {
+  background: transparent;
+}
+.prokodo-Tabs__tab--disabled::after {
+  background: transparent;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab {
+  justify-content: flex-start;
+  text-align: left;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab::after {
+  bottom: 0;
+  height: auto;
+  left: 0;
+  right: auto;
+  top: 0;
+  transform: scaleY(0.35);
+  transform-origin: center;
+  width: 3px;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab--selected::after {
+  transform: scaleY(1);
+}
+.prokodo-Tabs__tabLabel {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-Tabs__badge {
+  align-items: center;
+  background: var(--color-grey-200);
+  border-radius: px-to-rem(999px);
+  color: var(--color-grey-700);
+  display: inline-flex;
+  justify-content: center;
+  min-width: px-to-rem(20px);
+  padding: 0 0.25rem;
+  font-size: px-to-rem(12px);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__badgeChip {
+  pointer-events: none;
+  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-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Tabs__panel {
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 1rem;
+}
+.prokodo-Tabs__panel[hidden] {
+  display: none !important;
+}
+.prokodo-Tabs__panel:focus-visible {
+  outline: 0;
+  background: var(--gradient-border-4);
+}
+
 .prokodo-Teaser {
   overflow: hidden;
 }
@@ -5241,6 +6103,7 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 .prokodo-Tooltip__bubble--open {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 .prokodo-Tooltip__bubble::after {
   content: "";