@entur/form 5.1.3 → 5.2.1

package/dist/styles.css

@@ -2,15 +2,6 @@
   --eds-form: 1;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.eds-fieldset .eds-legend {
-  margin: 0 0 0.5rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-feedback-text {
   display: flex;
   align-items: center;
@@ -59,175 +50,6 @@
   color: #64b3e7;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-form-component--radio__container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  height: 2rem;
-  width: fit-content;
-  user-select: none;
-}
-.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
-  border-color: #54568c;
-}
-.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
-  background-color: #54568c;
-}
-.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
-  border-color: #8285a8;
-}
-.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
-  background-color: #8285a8;
-}
-.eds-form-component--radio__container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
-  height: 0.625rem;
-  width: 0.625rem;
-}
-.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
-}
-.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-form-component--radio__container .eds-form-component--radio__radio {
-  position: relative;
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-right: 1rem;
-  background-color: #ffffff;
-  border: 0.125rem solid #181c56;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
-  background-color: #181c56;
-  border-color: #aeb7e2;
-}
-.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
-  background: #d1d3d3;
-  border-color: #d1d3d3;
-  cursor: not-allowed;
-}
-.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
-  border-color: #d1d3d3;
-}
-.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
-  background: #d1d3d3;
-  border-color: #d1d3d3;
-}
-.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
-  color: #656782;
-}
-.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
-  display: block;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background-color: #181c56;
-  transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
-}
-.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
-  background-color: #aeb7e2;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-switch {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  user-select: none;
-  padding: 0.5rem 0;
-  width: fit-content;
-}
-.eds-switch input {
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-}
-.eds-switch__circle {
-  border-radius: 50%;
-  height: 1.25rem;
-  width: 1.25rem;
-  content: "";
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
-  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
-  top: 0.125rem;
-  left: 0.125rem;
-  position: relative;
-}
-.eds-switch__switch--large .eds-switch__circle {
-  height: 1.75rem;
-  width: 1.75rem;
-}
-.eds-switch .eds-switch__switch svg g,
-.eds-switch .eds-switch__switch path {
-  fill: #949494;
-  transition: fill ease-in-out 0.1s;
-}
-.eds-switch__switch {
-  margin-right: 0.75rem;
-  position: relative;
-  background-color: #d1d3d3;
-  content: "";
-  display: block;
-  transition: background-color 0.1s ease-in-out;
-  height: 1.5rem;
-  width: 3rem;
-  border-radius: 1.5rem;
-}
-:checked + .eds-switch__switch {
-  background-color: var(--eds-switch-color);
-}
-:checked + .eds-switch__switch .eds-switch__circle {
-  left: 1.625rem;
-}
-:checked + .eds-switch__switch .eds-switch__circle svg g,
-:checked + .eds-switch__switch .eds-switch__circle path {
-  fill: var(--eds-switch-color);
-}
-.eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
-.eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
-  fill: var(--eds-switch-color);
-}
-.eds-contrast :checked + .eds-switch__switch {
-  background-color: var(--eds-switch-contrast-color);
-}
-:focus + .eds-switch__switch {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
-}
-.eds-contrast :focus + .eds-switch__switch {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-contrast .eds-switch__switch {
-  background-color: #54568c;
-}
-.eds-switch__switch--large {
-  width: 3.75rem;
-  height: 2rem;
-  border-radius: 3.75rem;
-}
-:checked + .eds-switch__switch--large .eds-switch__circle {
-  left: 1.875rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-checkbox__container {
   display: flex;
   align-items: center;
@@ -340,298 +162,73 @@
   }
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
-  border-color: #181c56;
-}
-.eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
-  border-color: #ffffff;
+.eds-form-control-wrapper {
+  --border-color: #181c56;
+  --border-color-hover: #aeb7e2;
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 0.25rem;
+  border: 0.125rem solid #d1d3d3;
+  box-shadow: 0 0 0 transparent;
+  color: #181c56;
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: 3rem;
+  transition: border-color 0.1s ease-in-out;
+  --textarea-label-background: $colors-brand-white;
+  /* 
+  Some input controls require a darker design while inside a contrast block. 
+  These elements require the `--dark` modifier, even on the wrapper.
+  */
 }
-.eds-radio-panel__wrapper input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
+.eds-contrast .eds-form-control-wrapper {
+  --border-color: #aeb7e2;
+  background-color: #ffffff;
+  border-color: #54568c;
 }
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
+.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
   border-color: #181c56;
-  background: #f5f5f8;
 }
-.eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
+.eds-contrast .eds-form-control-wrapper:hover {
   border-color: #aeb7e2;
-  background: #393d79;
+  background: #ebebf1;
 }
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
-  background-color: #181c56;
+.eds-form-control-wrapper:focus-within {
+  box-shadow: inset 0 0 0 1px var(--border-color);
+}
+.eds-contrast .eds-form-control-wrapper:focus-within {
   border-color: #181c56;
+  --border-color: #aeb7e2;
+  box-shadow: 0 0 0 0.125rem var(--border-color);
 }
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
-  visibility: visible;
+.eds-form-control-wrapper ::placeholder {
+  color: #656782;
 }
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
-  stroke: #5ac39a;
-  animation: stroke ease-in-out 0.2s 0.1s forwards;
+.eds-form-control-wrapper--disabled {
+  background-color: #e9e9e9;
+  color: #656782;
+  border-color: transparent;
+  pointer-events: none;
 }
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
-  opacity: 0.5;
+.eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
+  display: none;
 }
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
-  opacity: 0.5;
-}
-.eds-radio-panel__container {
-  background: #ffffff;
-  border: 0.125rem solid #d1d3d3;
-  border-radius: 0.25rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  min-width: 20rem;
-  position: relative;
-  padding: 1rem;
-  user-select: none;
-  width: fit-content;
-}
-.eds-contrast .eds-radio-panel__container {
-  background: #181c56;
-  border-color: #54568c;
-}
-.eds-radio-panel__title-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.eds-radio-panel__label {
-  display: flex;
-  justify-content: center;
-}
-.eds-radio-panel__check {
-  height: 2rem;
-  width: 2rem;
-  margin-left: 1rem;
-  border-radius: 50%;
-  border: 0.125rem solid #e9e9e9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff;
-  transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
-}
-.eds-contrast .eds-radio-panel__check {
-  background: #181c56;
-  border-color: #54568c;
-}
-.eds-radio-panel__additional-content {
-  margin-top: 0.25rem;
-  word-wrap: break-word;
-}
-.eds-radio-panel--medium .eds-radio-panel__title {
-  font-size: 1rem;
-  font-weight: 500;
-}
-.eds-radio-panel--medium.eds-radio-panel__container {
-  padding-bottom: 1rem;
-  min-height: 3.75rem;
-}
-.eds-radio-panel--large.eds-radio-panel__container {
-  min-height: 6.5rem;
-}
-.eds-radio-panel--large .eds-radio-panel__title-wrapper {
-  height: 2rem;
-}
-.eds-radio-panel--large .eds-radio-panel__title {
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 1.875rem;
-}
-.eds-radio-panel--disabled {
-  background: #f3f3f3;
-  border-color: #f3f3f3;
-  color: #656782;
-}
-.eds-contrast .eds-radio-panel--disabled {
-  background: #181c56;
-  border-style: dashed;
-  border-color: #54568c;
-  color: #babbcf;
-}
-
-.eds-checkbox-icon {
-  width: 1.5em;
-  height: 1.5em;
-}
-.eds-checkbox-icon__path {
-  transform-origin: 50% 50%;
-  stroke-dasharray: 48;
-  stroke-dashoffset: 48;
-  stroke-width: 0.375rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-input-group {
-  color: inherit;
-  display: block;
-  position: relative;
-}
-.eds-input-group__label {
-  color: #656782;
-  display: flex;
-  font-size: 1rem;
-  position: absolute;
-  line-height: 1rem;
-  height: 3rem;
-  padding: 1rem;
-  padding-left: 0;
-  margin-left: 1rem;
-  top: -0.125rem;
-  transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
-  user-select: none;
-  pointer-events: none;
-}
-.eds-form-control-wrapper--is-filled .eds-input-group__label {
-  top: calc(0.5rem - 0.125rem);
-  font-size: 0.75rem;
-  line-height: 0.75rem;
-  height: 10px;
-  padding: 0;
-  margin-left: 1rem;
-}
-.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
-  box-shadow: 0px -2px 0px 4px #ffffff;
-  background: #ffffff;
-  width: calc( 100% - 1rem - 1rem - 4px );
-}
-.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
-  top: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  padding: 0;
-  margin-left: 1rem;
-}
-.eds-contrast .eds-input-group__label {
-  color: #8285a8;
-}
-.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
-  color: #aeb7e2;
-}
-.eds-form-control-wrapper--size-large .eds-input-group__label {
-  font-size: 1.5rem;
-  line-height: 2.25rem;
-  height: 4rem;
-}
-.eds-input-group__label--filled {
-  top: calc(0.5rem - 0.125rem);
-  font-size: 0.75rem;
-  line-height: 0.75rem;
-  height: 10px;
-  padding: 0;
-  margin-left: 1rem;
-}
-.eds-textarea__label .eds-input-group__label--filled {
-  box-shadow: 0px -2px 0px 4px #ffffff;
-  background: #ffffff;
-  width: calc( 100% - 1rem - 1rem - 4px );
-}
-.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
-  top: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  padding: 0;
-  margin-left: 1rem;
-}
-.eds-input-group__label-tooltip-icon {
-  color: #0082b9;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  display: flex;
-  align-items: center;
-  cursor: help;
-  font-size: 1rem;
-}
-
-.eds-form-control-wrapper:focus-within .eds-input-group__label {
-  top: calc(0.5rem - 0.125rem);
-  font-size: 0.75rem;
-  line-height: 0.75rem;
-  height: 10px;
-  padding: 0;
-  margin-left: 1rem;
-}
-.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
-  box-shadow: 0px -2px 0px 4px #ffffff;
-  background: #ffffff;
-  width: calc( 100% - 1rem - 1rem - 4px );
-}
-.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
-  top: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  padding: 0;
-  margin-left: 1rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-form-control-wrapper {
-  --border-color: #181c56;
-  --border-color-hover: #aeb7e2;
-  align-items: center;
-  background-color: #ffffff;
-  border-radius: 0.25rem;
-  border: 0.125rem solid #d1d3d3;
-  box-shadow: 0 0 0 transparent;
-  color: #181c56;
-  display: flex;
-  position: relative;
-  width: 100%;
-  min-height: 3rem;
-  transition: border-color 0.1s ease-in-out;
-  /* 
-  Some input controls require a darker design while inside a contrast block. 
-  These elements require the `--dark` modifier, even on the wrapper.
-  */
-}
-.eds-contrast .eds-form-control-wrapper {
-  --border-color: #aeb7e2;
-  background-color: #ffffff;
-  border-color: #54568c;
-}
-.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
-  border-color: #181c56;
-}
-.eds-contrast .eds-form-control-wrapper:hover {
-  border-color: #aeb7e2;
-  background: #ebebf1;
-}
-.eds-form-control-wrapper:focus-within {
-  box-shadow: inset 0 0 0 1px var(--border-color);
-}
-.eds-contrast .eds-form-control-wrapper:focus-within {
-  border-color: #181c56;
-  --border-color: #aeb7e2;
-  box-shadow: 0 0 0 0.125rem var(--border-color);
-}
-.eds-form-control-wrapper ::placeholder {
-  color: #656782;
-}
-.eds-form-control-wrapper--disabled {
-  background-color: #e9e9e9;
-  color: #656782;
-  border-color: transparent;
-  pointer-events: none;
-}
-.eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
-  display: none;
-}
-.eds-contrast .eds-form-control-wrapper--disabled {
-  background: #292b6a;
-  border-color: transparent;
-  color: #8285a8;
+.eds-contrast .eds-form-control-wrapper--disabled {
+  background: #292b6a;
+  border-color: transparent;
+  color: #8285a8;
 }
 .eds-form-control-wrapper--readonly {
   pointer-events: none;
   cursor: default;
   border-color: transparent;
   background: #f8f8f8;
+  --textarea-label-background: $colors-greys-grey90;
 }
 .eds-contrast .eds-form-control-wrapper--readonly {
   background: #292b6a;
+  --textarea-label-background: $colors-blues-blue10;
   color: #ffffff;
   border-color: transparent;
 }
@@ -768,6 +365,15 @@ textarea.eds-form-control.eds-textarea {
   line-height: 1.5rem;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.eds-fieldset .eds-legend {
+  margin: 0 0 0.5rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-textfield__clear-button {
   background: none;
   border: none;
@@ -804,13 +410,425 @@ textarea.eds-form-control.eds-textarea {
   background-color: #8285a8;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-segmented-control {
+.eds-form-component--radio__container {
   display: flex;
-  background: #d1d4e3;
-  border-radius: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  height: 2rem;
+  width: fit-content;
+  user-select: none;
 }
-.eds-contrast .eds-segmented-control {
+.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
+  border-color: #54568c;
+}
+.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
+  background-color: #54568c;
+}
+.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
+  border-color: #8285a8;
+}
+.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
+  background-color: #8285a8;
+}
+.eds-form-component--radio__container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
+  height: 0.625rem;
+  width: 0.625rem;
+}
+.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-form-component--radio__container .eds-form-component--radio__radio {
+  position: relative;
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-right: 1rem;
+  background-color: #ffffff;
+  border: 0.125rem solid #181c56;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
+  background-color: #181c56;
+  border-color: #aeb7e2;
+}
+.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
+  background: #d1d3d3;
+  border-color: #d1d3d3;
+  cursor: not-allowed;
+}
+.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
+  border-color: #d1d3d3;
+}
+.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
+  background: #d1d3d3;
+  border-color: #d1d3d3;
+}
+.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
+  color: #656782;
+}
+.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
+  display: block;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background-color: #181c56;
+  transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
+}
+.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
+  background-color: #aeb7e2;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-switch {
+  cursor: pointer;
+  user-select: none;
+  padding: 0.5rem 0;
+  width: fit-content;
+}
+.eds-switch input {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+}
+.eds-switch--right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.eds-switch--bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.eds-switch__circle {
+  border-radius: 50%;
+  height: 1.25rem;
+  width: 1.25rem;
+  content: "";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+  background-color: #ffffff;
+  top: 0.125rem;
+  left: 0.125rem;
+  position: relative;
+}
+.eds-switch__switch--large .eds-switch__circle {
+  height: 1.75rem;
+  width: 1.75rem;
+}
+.eds-switch .eds-switch__switch svg g,
+.eds-switch .eds-switch__switch path {
+  fill: #949494;
+  transition: fill ease-in-out 0.1s;
+}
+.eds-switch__switch {
+  position: relative;
+  background-color: #d1d3d3;
+  content: "";
+  display: block;
+  transition: background-color 0.1s ease-in-out;
+  height: 1.5rem;
+  width: 3rem;
+  border-radius: 1.5rem;
+}
+.eds-switch--right .eds-switch__switch {
+  margin-right: 0.75rem;
+}
+:checked + .eds-switch__switch {
+  background-color: var(--eds-switch-color);
+}
+:checked + .eds-switch__switch .eds-switch__circle {
+  left: 1.625rem;
+}
+:checked + .eds-switch__switch .eds-switch__circle svg g,
+:checked + .eds-switch__switch .eds-switch__circle path {
+  fill: var(--eds-switch-color);
+}
+.eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
+.eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
+  fill: var(--eds-switch-color);
+}
+.eds-contrast :checked + .eds-switch__switch {
+  background-color: var(--eds-switch-contrast-color);
+}
+:focus + .eds-switch__switch {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-contrast :focus + .eds-switch__switch {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-contrast .eds-switch__switch {
+  background-color: #54568c;
+}
+.eds-switch__switch--large {
+  width: 3.75rem;
+  height: 2rem;
+  border-radius: 3.75rem;
+}
+:checked + .eds-switch__switch--large .eds-switch__circle {
+  left: 1.875rem;
+}
+.eds-switch__label--large--right {
+  font-size: 1rem;
+}
+.eds-switch__label--large--bottom {
+  font-size: 0.875rem;
+}
+.eds-switch__label--medium--right {
+  font-size: 0.875rem;
+}
+.eds-switch__label--medium--bottom {
+  font-size: 0.75rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
+  border-color: #181c56;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+}
+.eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
+  border-color: #ffffff;
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-radio-panel__wrapper input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
+  border-color: #181c56;
+  background: #f5f5f8;
+}
+.eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
+  border-color: #aeb7e2;
   background: #393d79;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
+  background-color: #181c56;
+  border-color: #181c56;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
+  visibility: visible;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
+  stroke: #5ac39a;
+  animation: stroke ease-in-out 0.2s 0.1s forwards;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
+  opacity: 0.5;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
+  opacity: 0.5;
+}
+.eds-radio-panel__container {
+  background: #ffffff;
+  border: 0.125rem solid #d1d3d3;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-width: 20rem;
+  position: relative;
+  padding: 1rem;
+  user-select: none;
+  width: fit-content;
+}
+.eds-contrast .eds-radio-panel__container {
+  background: #181c56;
+  border-color: #54568c;
+}
+.eds-radio-panel__title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.eds-radio-panel__label {
+  display: flex;
+  justify-content: center;
+}
+.eds-radio-panel__check {
+  height: 2rem;
+  width: 2rem;
+  margin-left: 1rem;
+  border-radius: 50%;
+  border: 0.125rem solid #e9e9e9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
+}
+.eds-contrast .eds-radio-panel__check {
+  background: #181c56;
+  border-color: #54568c;
+}
+.eds-radio-panel__additional-content {
+  margin-top: 0.25rem;
+  word-wrap: break-word;
+}
+.eds-radio-panel--medium .eds-radio-panel__title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+.eds-radio-panel--medium.eds-radio-panel__container {
+  padding-bottom: 1rem;
+  min-height: 3.75rem;
+}
+.eds-radio-panel--large.eds-radio-panel__container {
+  min-height: 6.5rem;
+}
+.eds-radio-panel--large .eds-radio-panel__title-wrapper {
+  height: 2rem;
+}
+.eds-radio-panel--large .eds-radio-panel__title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.875rem;
+}
+.eds-radio-panel--disabled {
+  background: #f3f3f3;
+  border-color: #f3f3f3;
+  color: #656782;
+}
+.eds-contrast .eds-radio-panel--disabled {
+  background: #181c56;
+  border-style: dashed;
+  border-color: #54568c;
+  color: #babbcf;
+}
+
+.eds-checkbox-icon {
+  width: 1.5em;
+  height: 1.5em;
+}
+.eds-checkbox-icon__path {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  stroke-width: 0.375rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-input-group {
+  color: inherit;
+  display: block;
+  position: relative;
+}
+.eds-input-group__label {
+  color: #656782;
+  display: flex;
+  font-size: 1rem;
+  position: absolute;
+  line-height: 1rem;
+  height: 3rem;
+  padding: 1rem;
+  padding-left: 0;
+  margin-left: 1rem;
+  top: -0.125rem;
+  transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
+  user-select: none;
+  pointer-events: none;
+}
+.eds-form-control-wrapper--is-filled .eds-input-group__label {
+  top: calc(0.5rem - 0.125rem);
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  height: 10px;
+  padding: 0;
+  margin-left: 1rem;
+}
+.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
+  box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
+  background: var(--textarea-label-background);
+  width: calc( 100% - 1rem - 1rem - 4px );
+}
+.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
+  top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  padding: 0;
+  margin-left: 1rem;
+}
+.eds-contrast .eds-input-group__label {
+  color: #8285a8;
+}
+.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
+  color: #aeb7e2;
+}
+.eds-form-control-wrapper--size-large .eds-input-group__label {
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+  height: 4rem;
+}
+.eds-input-group__label--filled {
+  top: calc(0.5rem - 0.125rem);
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  height: 10px;
+  padding: 0;
+  margin-left: 1rem;
+}
+.eds-textarea__label .eds-input-group__label--filled {
+  box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
+  background: var(--textarea-label-background);
+  width: calc( 100% - 1rem - 1rem - 4px );
+}
+.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
+  top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  padding: 0;
+  margin-left: 1rem;
+}
+.eds-input-group__label-tooltip-icon {
+  color: #0082b9;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  display: flex;
+  align-items: center;
+  cursor: help;
+  font-size: 1rem;
+}
+
+.eds-form-control-wrapper:focus-within .eds-input-group__label {
+  top: calc(0.5rem - 0.125rem);
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  height: 10px;
+  padding: 0;
+  margin-left: 1rem;
+}
+.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
+  box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
+  background: var(--textarea-label-background);
+  width: calc( 100% - 1rem - 1rem - 4px );
+}
+.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
+  top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  padding: 0;
+  margin-left: 1rem;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-segmented-choice {
@@ -875,4 +893,14 @@ textarea.eds-form-control.eds-textarea {
 }
 .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
   --background-color: #d1d4e3;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-segmented-control {
+  margin-top: 0.25rem;
+  display: flex;
+  background: #d1d4e3;
+  border-radius: 0.25rem;
+}
+.eds-contrast .eds-segmented-control {
+  background: #393d79;
 }