baseline-ds 0.1.4

package/dist/index.css

@@ -0,0 +1,1970 @@
+@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..144,100..1000;1,9..144,100..1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Fustat:wght@400;500;600;700;800&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap";
+@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";
+
+/* src/components/Button/Button.css */
+.baseline-button {
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: 500;
+  font-size: var(--sizing-typography-font-size-paragraph-medium);
+  line-height: 1.2;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  outline: none;
+  background-color: var(--button-bg);
+  color: var(--button-color);
+}
+.baseline-button--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.baseline-button:focus-visible {
+  outline: var(--brand-sizing-stroke-md) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+  box-shadow: 0px 0px 10px 0px var(--brand-color-accent-100);
+}
+.baseline-button--rectangle,
+.baseline-button--pill {
+  padding: var(--spacing-scale-050) var(--spacing-scale-070);
+  gap: var(--spacing-scale-040);
+  min-height: 32px;
+  min-width: 10rem;
+  border-radius: var(--brand-sizing-radius-small);
+}
+.baseline-button--pill {
+  border-radius: var(--brand-sizing-radius-full);
+}
+.baseline-button--circle {
+  width: 35px;
+  height: 35px;
+  padding: 0;
+  border-radius: var(--brand-sizing-radius-full);
+  aspect-ratio: 1;
+  transition: all 0.2s ease;
+}
+.baseline-button--circle .baseline-button__content {
+  display: none;
+}
+.baseline-button--circle .baseline-button__chevron {
+  display: none;
+}
+.baseline-button__content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-scale-040);
+  justify-content: center;
+}
+.baseline-button__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.baseline-button__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.baseline-button__label {
+  white-space: nowrap;
+  color: inherit;
+}
+.baseline-button__chevron {
+  position: absolute;
+  right: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sizing-scale-030);
+  height: var(--sizing-scale-030);
+}
+.baseline-button__chevron svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(180deg) scaleY(-1);
+  transition: transform 0.2s ease;
+}
+.baseline-button--circle:not(.baseline-button--disabled):active svg {
+  transform: rotate(-45deg);
+}
+.baseline-button:not(.baseline-button--disabled):hover {
+  transition: all 0.2s ease;
+}
+.baseline-button--primary:not(.baseline-button--disabled):hover {
+  background-color: var(--brand-color-brand-150);
+  color: var(--color-typography-secondary-lighter);
+}
+.baseline-button--secondary:not(.baseline-button--disabled):hover {
+  background-color: var(--brand-color-secondary-150);
+  color: var(--color-typography-primary-darker);
+}
+.baseline-button--tertiary:not(.baseline-button--disabled):hover {
+  background-color: var(--brand-color-accent-150);
+  color: var(--color-typography-secondary-lighter);
+}
+.baseline-button--primary:not(.baseline-button--disabled):active {
+  background-color: var(--brand-color-brand-150);
+  color: var(--color-typography-secondary-lighter);
+  transform: translateY(3px);
+}
+.baseline-button--secondary:not(.baseline-button--disabled):active {
+  background-color: var(--brand-color-secondary-150);
+  color: var(--color-typography-primary-darker);
+}
+.baseline-button--tertiary:not(.baseline-button--disabled):active {
+  background-color: var(--brand-color-accent-150);
+  color: var(--color-typography-secondary-lighter);
+}
+.baseline-button--primary:not(.baseline-button--disabled):focus-visible {
+  background-color: var(--brand-color-brand-150);
+  color: var(--color-typography-secondary-lighter);
+}
+.baseline-button--secondary:not(.baseline-button--disabled):focus-visible {
+  background-color: var(--brand-color-secondary-150);
+  color: var(--color-typography-primary-darker);
+}
+.baseline-button--tertiary:not(.baseline-button--disabled):focus-visible {
+  background-color: var(--brand-color-accent-150);
+  color: var(--color-typography-secondary-lighter);
+}
+
+/* src/components/Input/TextField.css */
+.baseline-text-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-scale-030);
+  width: 343px;
+}
+.baseline-text-field-input-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+}
+.baseline-text-field-leading-icon,
+.baseline-text-field-trailing-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+}
+.baseline-text-field-leading-icon {
+  left: var(--spacing-scale-040);
+}
+.baseline-text-field-trailing-icon {
+  right: var(--spacing-scale-040);
+  transform: translateY(-50%) translateX(-75%);
+}
+.baseline-text-field-trailing-icons {
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-scale-040);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-scale-030);
+  z-index: 2;
+}
+.baseline-text-field-trailing-icons .baseline-text-field-trailing-icon {
+  position: static;
+  transform: none;
+  pointer-events: auto;
+}
+.baseline-text-field-trailing-icons .baseline-text-field-trailing-icon--toggle {
+  cursor: pointer;
+}
+.baseline-text-field-input-wrapper:has(.baseline-text-field-leading-icon) .baseline-input-element-input-field-input {
+  padding-left: calc(var(--spacing-scale-040) + 16px + var(--spacing-scale-040));
+}
+.baseline-text-field-input-wrapper:has(.baseline-text-field-trailing-icon):not(:has(.baseline-text-field-trailing-icons)) .baseline-input-element-input-field-input,
+.baseline-text-field-input-wrapper:has(.baseline-text-field-trailing-icons) .baseline-input-element-input-field-input {
+  padding-right: calc(var(--spacing-scale-040) + 16px + var(--spacing-scale-040));
+}
+.baseline-text-field-input-wrapper:has(.baseline-text-field-trailing-icons) .baseline-input-element-input-field-input {
+  padding-right: calc(var(--spacing-scale-040) + 32px + var(--spacing-scale-030) + var(--spacing-scale-040));
+}
+
+/* src/components/Input/InputElementLabel.css */
+.baseline-input-element-label-wrapper {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-scale-080);
+  padding: 0 var(--spacing-scale-040);
+}
+.baseline-input-element-label {
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: 500;
+  color: var(--color-typography-label-default);
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+.baseline-input-element-label--xsmall {
+  font-size: var(--sizing-typography-font-size-label-xsmall);
+  line-height: 1.4;
+}
+.baseline-input-element-label--small {
+  font-size: var(--sizing-typography-font-size-label-small);
+  line-height: 1.2;
+}
+.baseline-input-element-label--medium {
+  font-size: var(--sizing-typography-font-size-label-medium);
+  line-height: 1.2;
+}
+.baseline-input-element-label--large {
+  font-size: var(--sizing-typography-font-size-label-large);
+  line-height: 1.2;
+}
+.baseline-input-element-label-character-count {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-scale-030);
+  height: 16px;
+  flex-shrink: 0;
+}
+.baseline-input-element-label-character-count span {
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: 500;
+  color: var(--color-typography-label-default);
+  text-transform: uppercase;
+  white-space: nowrap;
+  text-align: right;
+}
+.baseline-input-element-label-wrapper--xsmall .baseline-input-element-label-character-count span {
+  font-size: var(--sizing-typography-font-size-label-xsmall);
+  line-height: 1.4;
+}
+.baseline-input-element-label-wrapper--small .baseline-input-element-label-character-count span {
+  font-size: var(--sizing-typography-font-size-label-small);
+  line-height: 1.2;
+}
+.baseline-input-element-label-wrapper--medium .baseline-input-element-label-character-count span {
+  font-size: var(--sizing-typography-font-size-label-medium);
+  line-height: 1.2;
+}
+.baseline-input-element-label-wrapper--large .baseline-input-element-label-character-count span {
+  font-size: var(--sizing-typography-font-size-label-large);
+  line-height: 1.2;
+}
+
+/* src/components/Input/InputElementInputField.css */
+.baseline-input-element-input-field {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-input-background-default);
+  border: var(--brand-sizing-stroke-xl) solid transparent;
+  border-radius: var(--brand-sizing-radius-medium);
+  transition: all 0.2s ease;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.baseline-input-element-input-field:focus-within:not(.baseline-input-element-input-field--error):not(.baseline-input-element-input-field--success):not(.baseline-input-element-input-field--incomplete):not(.baseline-input-element-input-field--complete):not(.baseline-input-element-input-field--read-only) {
+  border: var(--brand-sizing-stroke-xl) solid var(--brand-color-brand-100);
+}
+.baseline-input-element-input-field-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  align-self: stretch;
+  background-color: var(--color-input-background-default);
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: var(--typography-font-weight-normal);
+  color: var(--color-typography-primary-default);
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.baseline-input-element-input-field--xsmall .baseline-input-element-input-field-input {
+  padding: var(--spacing-scale-060) var(--spacing-scale-050);
+}
+.baseline-input-element-input-field--small .baseline-input-element-input-field-input {
+  padding: var(--spacing-scale-080) var(--spacing-scale-060);
+}
+.baseline-input-element-input-field--medium .baseline-input-element-input-field-input {
+  padding: var(--spacing-scale-090) var(--spacing-scale-080);
+}
+.baseline-input-element-input-field--large .baseline-input-element-input-field-input {
+  padding: var(--spacing-scale-100) var(--spacing-scale-090);
+}
+.baseline-input-element-input-field-input::placeholder {
+  color: var(--color-typography-primary-default);
+  opacity: 0.5;
+}
+.baseline-input-element-input-field-input:disabled {
+  cursor: not-allowed;
+}
+.baseline-input-element-input-field-input:read-only {
+  cursor: default;
+}
+.baseline-input-element-input-field-leading-icon,
+.baseline-input-element-input-field-trailing-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sizing-scale-040);
+  height: var(--sizing-scale-040);
+  padding: 0 var(--spacing-scale-040);
+}
+.baseline-input-element-input-field-leading-label,
+.baseline-input-element-input-field-trailing-label {
+  display: flex;
+  align-items: center;
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: var(--typography-font-weight-normal);
+  color: var(--color-typography-primary-default);
+  text-transform: uppercase;
+  white-space: nowrap;
+  padding: 0 var(--spacing-scale-040);
+  flex-shrink: 0;
+}
+.baseline-input-element-input-field--xsmall .baseline-input-element-input-field-leading-label,
+.baseline-input-element-input-field--xsmall .baseline-input-element-input-field-trailing-label {
+  font-size: var(--sizing-typography-font-size-label-xsmall);
+  line-height: var(--typography-line-height-normal);
+}
+.baseline-input-element-input-field--small .baseline-input-element-input-field-leading-label,
+.baseline-input-element-input-field--small .baseline-input-element-input-field-trailing-label {
+  font-size: var(--sizing-typography-font-size-label-small);
+  line-height: var(--typography-line-height-tight);
+}
+.baseline-input-element-input-field--medium .baseline-input-element-input-field-leading-label,
+.baseline-input-element-input-field--medium .baseline-input-element-input-field-trailing-label {
+  font-size: var(--sizing-typography-font-size-label-medium);
+  line-height: var(--typography-line-height-tight);
+}
+.baseline-input-element-input-field--large .baseline-input-element-input-field-leading-label,
+.baseline-input-element-input-field--large .baseline-input-element-input-field-trailing-label {
+  font-size: var(--sizing-typography-font-size-label-large);
+  line-height: var(--typography-line-height-tight);
+}
+.baseline-input-element-input-field:focus-within,
+.baseline-input-element-input-field:focus-within .baseline-input-element-input-field-input {
+  background-color: var(--color-input-background-active);
+}
+.baseline-input-element-input-field:focus-within:not(.baseline-input-element-input-field--error):not(.baseline-input-element-input-field--success):not(.baseline-input-element-input-field--incomplete):not(.baseline-input-element-input-field--complete):not(.baseline-input-element-input-field--read-only) {
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+}
+.baseline-input-element-input-field--error,
+.baseline-input-element-input-field:focus-within.baseline-input-element-input-field--error {
+  border-color: var(--brand-color-danger-100);
+}
+.baseline-input-element-input-field--error + .baseline-text-field-trailing-icon svg {
+  color: var(--brand-color-danger-100) !important;
+}
+.baseline-input-element-input-field--error + .baseline-text-field-trailing-icons .baseline-text-field-trailing-icon:first-of-type svg {
+  color: var(--brand-color-danger-100) !important;
+}
+.baseline-input-element-input-field--success,
+.baseline-input-element-input-field:focus-within.baseline-input-element-input-field--success {
+  border-color: var(--brand-color-success-100);
+}
+.baseline-input-element-input-field--success + .baseline-text-field-trailing-icon svg {
+  color: var(--brand-color-success-100) !important;
+}
+.baseline-input-element-input-field--success + .baseline-text-field-trailing-icons .baseline-text-field-trailing-icon:first-of-type svg {
+  color: var(--brand-color-success-100) !important;
+}
+.baseline-input-element-input-field--incomplete {
+  border-color: var(--brand-color-warning-100);
+}
+.baseline-input-element-input-field--complete {
+  border-color: var(--brand-color-success-100);
+}
+.baseline-input-element-input-field--read-only {
+  background-color: var(--color-input-background-active);
+  border-color: var(--color-background-disabled-default);
+}
+.baseline-input-element-input-field--read-only .baseline-input-element-input-field-input {
+  background-color: var(--color-input-background-active);
+}
+.baseline-input-element-input-field--disabled {
+  background-color: var(--color-background-disabled-default);
+  color: var(--brand-color-neutral-150);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.baseline-input-element-input-field--disabled .baseline-input-element-input-field-input {
+  background-color: var(--color-background-disabled-default);
+  color: var(--brand-color-neutral-150);
+}
+.baseline-input-element-input-field--loading {
+  position: relative;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.baseline-input-element-input-field--loading + .baseline-text-field-trailing-icon svg {
+  animation: spin 1s linear infinite;
+}
+.baseline-input-element-input-field--loading .baseline-input-element-input-field-loading-icon svg {
+  color: var(--brand-color-brand-100) !important;
+}
+
+/* src/components/Input/InputElementHint.css */
+.baseline-input-element-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-scale-030);
+  padding: 0 var(--spacing-scale-040);
+}
+.baseline-input-element-hint-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+.baseline-text-field--error .baseline-input-element-hint-icon svg {
+  color: var(--brand-color-danger-150) !important;
+}
+.baseline-text-field--success .baseline-input-element-hint-icon svg {
+  color: var(--brand-color-success-150) !important;
+}
+.baseline-input-element-hint-text {
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: 500;
+  font-size: var(--sizing-typography-font-size-paragraph-small);
+  line-height: 1.2;
+  color: var(--color-typography-primary-lighter);
+}
+.baseline-password-field-requirements {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-scale-020);
+}
+.baseline-password-field-requirement {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-scale-020);
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: 500;
+  font-size: var(--sizing-typography-font-size-paragraph-small);
+  line-height: 1.2;
+}
+.baseline-password-field-requirement svg {
+  flex-shrink: 0;
+}
+
+/* src/components/Input/Select.css */
+.baseline-select-trigger {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-input-background-default);
+  border: var(--brand-sizing-stroke-xl) solid transparent;
+  border-radius: var(--brand-sizing-radius-medium);
+  transition: all 0.2s ease;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  overflow: hidden;
+}
+.baseline-select-trigger:focus-visible {
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+  box-shadow: 0px 0px 10px 0px var(--brand-color-accent-100);
+}
+.baseline-select-trigger-content {
+  flex: 1;
+  flex-basis: 80%;
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: var(--typography-font-weight-normal);
+  color: var(--color-typography-primary-default);
+  min-width: 0;
+  padding: 0 var(--spacing-scale-040);
+}
+.baseline-select-trigger-content--placeholder {
+  opacity: 0.5;
+}
+.baseline-select-trigger-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sizing-scale-030);
+  height: var(--sizing-scale-030);
+  padding: 0 var(--spacing-scale-040);
+  pointer-events: none;
+}
+.baseline-select-trigger ~ .baseline-text-field-trailing-icon {
+  transform: translateY(-50%) translateX(-225%);
+}
+.baseline-select-trigger--xsmall {
+  padding: var(--spacing-scale-060) var(--spacing-scale-050);
+}
+.baseline-select-trigger--xsmall .baseline-select-trigger-content {
+  font-size: var(--sizing-typography-font-size-paragraph-xsmall);
+  line-height: 1.4;
+}
+.baseline-select-trigger--small {
+  padding: var(--spacing-scale-080) var(--spacing-scale-060);
+}
+.baseline-select-trigger--small .baseline-select-trigger-content {
+  font-size: var(--sizing-typography-font-size-paragraph-small);
+  line-height: 1.2;
+}
+.baseline-select-trigger--medium {
+  padding: var(--spacing-scale-090) var(--spacing-scale-080);
+}
+.baseline-select-trigger--medium .baseline-select-trigger-content {
+  font-size: var(--sizing-typography-font-size-paragraph-medium);
+  line-height: 1.2;
+}
+.baseline-select-trigger--large {
+  padding: var(--spacing-scale-100) var(--spacing-scale-090);
+}
+.baseline-select-trigger--large .baseline-select-trigger-content {
+  font-size: var(--sizing-typography-font-size-paragraph-large);
+  line-height: 1.2;
+}
+.baseline-select-trigger:focus-within:not(.baseline-select-trigger--error):not(.baseline-select-trigger--success):not(.baseline-select-trigger--incomplete):not(.baseline-select-trigger--complete):not(.baseline-select-trigger--read-only) {
+  border: var(--brand-sizing-stroke-xl) solid var(--brand-color-brand-100);
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+  box-shadow: 0px 0px 10px 0px var(--brand-color-accent-100);
+}
+.baseline-select-trigger--error,
+.baseline-select-trigger--error:focus-within {
+  border-color: var(--brand-color-danger-100);
+}
+.baseline-select-trigger--error ~ .baseline-text-field-trailing-icon svg {
+  color: var(--brand-color-danger-100) !important;
+}
+.baseline-select-trigger--success,
+.baseline-select-trigger--success:focus-within {
+  border-color: var(--brand-color-success-100);
+}
+.baseline-select-trigger--success ~ .baseline-text-field-trailing-icon svg {
+  color: var(--brand-color-success-100) !important;
+}
+.baseline-select-trigger--incomplete,
+.baseline-select-trigger--incomplete:focus-within {
+  border-color: var(--brand-color-warning-100);
+}
+.baseline-select-trigger--complete,
+.baseline-select-trigger--complete:focus-within {
+  border-color: var(--brand-color-success-100);
+}
+.baseline-select-trigger--read-only {
+  background-color: var(--color-input-background-active);
+  border-color: var(--color-background-disabled-default);
+  cursor: default;
+  pointer-events: none;
+}
+.baseline-select-trigger--disabled {
+  background-color: var(--color-background-disabled-default);
+  cursor: not-allowed;
+  opacity: 0.6;
+  pointer-events: none;
+}
+.baseline-select-trigger--loading {
+  pointer-events: none;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.baseline-select-trigger--loading .baseline-select-trigger-icon svg {
+  animation: spin 1s linear infinite;
+  color: var(--brand-color-brand-100);
+}
+.baseline-select-menu-container {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: var(--spacing-scale-010);
+  z-index: 1000;
+  width: 110%;
+}
+.baseline-select-menu-container .baseline-input-element-menu {
+  width: 100%;
+  box-shadow:
+    0px 3px 8px 0px rgba(0, 0, 0, 0.15),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.16),
+    0px 3px 1px 0px rgba(0, 0, 0, 0.1);
+}
+
+/* src/components/Input/InputElementMenu.css */
+.baseline-input-element-menu {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background-primary-default);
+  border-radius: var(--brand-sizing-radius-large);
+  box-shadow: var(--shadow-subtle);
+  overflow: hidden;
+  position: relative;
+  width: 343px;
+}
+.baseline-input-element-menu-items {
+  max-height: calc(3.5 * (var(--spacing-scale-050) * 2 + var(--sizing-typography-font-size-paragraph-small) * 1.2));
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-typography-primary-lighter) transparent;
+}
+.baseline-input-element-menu-items::-webkit-scrollbar {
+  width: var(--sizing-scale-010);
+}
+.baseline-input-element-menu-items::-webkit-scrollbar-track {
+  background: transparent;
+}
+.baseline-input-element-menu-items::-webkit-scrollbar-thumb {
+  background-color: var(--color-typography-primary-lighter);
+  border-radius: var(--brand-sizing-radius-full);
+}
+.baseline-input-element-menu-items::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-typography-primary-default);
+}
+.baseline-input-element-menu-item {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-background-primary-default);
+  padding: var(--spacing-scale-050) var(--spacing-scale-080);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+.baseline-input-element-menu-item:hover:not(.baseline-input-element-menu-item--disabled) {
+  background-color: var(--brand-color-input-100);
+}
+.baseline-input-element-menu-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.baseline-input-element-menu-item-text {
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: 500;
+  color: var(--color-typography-primary-default);
+  width: 100%;
+}
+.baseline-input-element-menu--xsmall .baseline-input-element-menu-items {
+  max-height: calc(3.5 * (var(--spacing-scale-050) * 2 + var(--sizing-typography-font-size-paragraph-xsmall) * 1.4));
+}
+.baseline-input-element-menu--xsmall .baseline-input-element-menu-item-text {
+  font-size: var(--sizing-typography-font-size-paragraph-xsmall);
+  line-height: 1.4;
+}
+.baseline-input-element-menu--small .baseline-input-element-menu-items {
+  max-height: calc(3.5 * (var(--spacing-scale-050) * 2 + var(--sizing-typography-font-size-paragraph-small) * 1.2));
+}
+.baseline-input-element-menu--small .baseline-input-element-menu-item-text {
+  font-size: var(--sizing-typography-font-size-paragraph-small);
+  line-height: 1.2;
+}
+.baseline-input-element-menu--medium .baseline-input-element-menu-items {
+  max-height: calc(3.5 * (var(--spacing-scale-050) * 2 + var(--spacing-scale-020) * 2 + var(--sizing-typography-font-size-paragraph-medium) * 1.2));
+}
+.baseline-input-element-menu--medium .baseline-input-element-menu-item-text {
+  font-size: var(--sizing-typography-font-size-paragraph-medium);
+  line-height: 1.2;
+  padding: var(--spacing-scale-020) 0;
+}
+.baseline-input-element-menu--large .baseline-input-element-menu-items {
+  max-height: calc(3.5 * (var(--spacing-scale-050) * 2 + var(--spacing-scale-030) * 2 + var(--sizing-typography-font-size-paragraph-large) * 1.2));
+}
+.baseline-input-element-menu--large .baseline-input-element-menu-item-text {
+  font-size: var(--sizing-typography-font-size-paragraph-large);
+  line-height: 1.2;
+  padding: var(--spacing-scale-030) 0;
+}
+
+/* src/components/Input/FieldGroup.css */
+.baseline-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-scale-030);
+  width: 100%;
+  max-width: 357px;
+}
+.baseline-field-group-fields {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-scale-050);
+  align-items: flex-start;
+  width: 100%;
+  position: relative;
+}
+.baseline-field-group-select {
+  flex-shrink: 0;
+  max-width: 100px;
+  width: auto;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+.baseline-field-group-text-field {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+.baseline-field-group-select-inner .baseline-input-element-label,
+.baseline-field-group-text-field-inner .baseline-input-element-label {
+  display: none !important;
+}
+.baseline-field-group-select-inner .baseline-input-element-hint,
+.baseline-field-group-text-field-inner .baseline-input-element-hint {
+  display: none !important;
+}
+.baseline-field-group-text-field-inner .baseline-text-field {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+.baseline-field-group-select-inner .baseline-text-field {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+.baseline-field-group-select-inner,
+.baseline-field-group-text-field-inner {
+  width: 100%;
+  max-width: 100%;
+}
+.baseline-field-group-select-inner .baseline-text-field-input-wrapper,
+.baseline-field-group-text-field-inner .baseline-text-field-input-wrapper {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+.baseline-field-group-select-inner .baseline-select-trigger {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* src/components/Input/InputElementLeadingLabel.css */
+.baseline-input-element-leading-label {
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: 500;
+  color: var(--color-typography-primary-default);
+  text-transform: uppercase;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 var(--spacing-scale-040);
+  flex-shrink: 0;
+}
+.baseline-input-element-leading-label--xsmall {
+  font-size: var(--sizing-typography-font-size-label-xsmall);
+  line-height: 1.4;
+  width: 8px;
+}
+.baseline-input-element-leading-label--small {
+  font-size: var(--sizing-typography-font-size-label-small);
+  line-height: 1.2;
+  width: 8px;
+}
+.baseline-input-element-leading-label--medium {
+  font-size: var(--sizing-typography-font-size-label-medium);
+  line-height: 1.2;
+  width: 8px;
+}
+.baseline-input-element-leading-label--large {
+  font-size: var(--sizing-typography-font-size-label-large);
+  line-height: 1.2;
+  width: 8px;
+}
+
+/* src/components/Input/InputElementContentText.css */
+.baseline-input-element-content-text {
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: 500;
+  color: var(--color-typography-primary-default);
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  padding: 0 var(--spacing-scale-040);
+  display: flex;
+  align-items: center;
+  height: 16px;
+}
+.baseline-input-element-content-text--xsmall {
+  font-size: var(--sizing-typography-font-size-paragraph-xsmall);
+  line-height: 1.4;
+}
+.baseline-input-element-content-text--small {
+  font-size: var(--sizing-typography-font-size-paragraph-small);
+  line-height: 1.2;
+}
+.baseline-input-element-content-text--medium {
+  font-size: var(--sizing-typography-font-size-paragraph-medium);
+  line-height: 1.2;
+}
+.baseline-input-element-content-text--large {
+  font-size: var(--sizing-typography-font-size-paragraph-large);
+  line-height: 1.2;
+}
+.baseline-input-element-content-text--placeholder {
+  opacity: 0.5;
+}
+.baseline-input-element-content-text--secure {
+}
+
+/* src/components/Input/InputElementProgressBar.css */
+.baseline-input-element-progress-bar {
+  display: flex;
+  align-items: center;
+  height: var(--sizing-scale-020);
+  min-width: 300px;
+  background-color: var(--brand-color-input-050);
+  border-radius: var(--sizing-stroke-lg);
+  overflow: hidden;
+  position: relative;
+}
+.baseline-input-element-progress-bar-fill {
+  height: 100%;
+  background-color: var(--brand-color-accent-100);
+  transition: width 0.3s ease;
+  flex-shrink: 0;
+}
+.baseline-input-element-progress-bar--empty .baseline-input-element-progress-bar-fill {
+  width: 0;
+}
+.baseline-input-element-progress-bar--in-progress .baseline-input-element-progress-bar-fill {
+  width: var(--progress-width);
+}
+.baseline-input-element-progress-bar--complete .baseline-input-element-progress-bar-fill {
+  width: 100%;
+}
+
+/* src/components/Placeholder/Placeholder.css */
+.baseline-placeholder {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  border-radius: var(--brand-sizing-radius-large);
+  overflow: hidden;
+  background-color: var(--color-background-disabled-default);
+}
+.baseline-placeholder-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      135deg,
+      var(--color-background-disabled-default) 0%,
+      var(--color-background-disabled-default) 42%,
+      rgba(243, 243, 243, 1) 52%,
+      rgba(243, 243, 243, 1) 59%,
+      var(--color-background-disabled-default) 69%,
+      var(--color-background-disabled-default) 100%);
+  background-size: 300% 300%;
+  animation: placeholder-shimmer 2s ease-in-out infinite;
+}
+@keyframes placeholder-shimmer {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+/* src/components/ProgressSteps/ProgressSteps.css */
+.baseline-progress-steps-wrapper {
+  container-type: inline-size;
+  container-name: progress-steps;
+  width: 100%;
+}
+.baseline-progress-steps {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0 var(--spacing-scale-050) var(--sizing-scale-070);
+  position: relative;
+  isolation: isolate;
+  scroll-behavior: smooth;
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.baseline-progress-steps-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-scale-030);
+  flex: 1 1 auto;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+.baseline-progress-steps-step:last-of-type {
+  flex: 0 0 auto;
+}
+.baseline-progress-steps-step--clickable {
+  cursor: pointer;
+}
+.baseline-progress-steps-step--clickable:hover .baseline-progress-steps-step-indicator {
+  transform: scale(1.05);
+  transition: transform 0.2s ease;
+}
+.baseline-progress-steps-step--clickable:focus-visible {
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+  border-radius: var(--brand-sizing-radius-medium);
+}
+.baseline-progress-steps-step-indicator-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  min-height: var(--sizing-scale-100);
+  justify-content: flex-start;
+}
+.baseline-progress-steps-step-circle-and-label {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: var(--sizing-scale-100);
+  min-width: var(--sizing-scale-100);
+  align-self: center;
+}
+.baseline-progress-steps-step-indicator {
+  position: relative;
+  width: var(--sizing-scale-080);
+  height: var(--sizing-scale-080);
+  border-radius: var(--brand-sizing-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  z-index: 2;
+  background-color: inherit;
+}
+.baseline-progress-steps-step-indicator svg {
+  color: var(--color-typography-secondary-lighter) !important;
+}
+.baseline-progress-steps-step--completed .baseline-progress-steps-step-indicator {
+  background-color: var(--brand-color-brand-100);
+}
+.baseline-progress-steps-step--completed .baseline-progress-steps-step-number {
+  display: none;
+}
+.baseline-progress-steps-step--in-progress .baseline-progress-steps-step-indicator {
+  background-color: var(--brand-color-brand-100);
+  box-shadow: 0 0 0 4px var(--brand-color-accent-100);
+}
+.baseline-progress-steps-step--in-progress .baseline-progress-steps-step-number {
+  color: var(--color-typography-secondary-lighter);
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: var(--typography-font-weight-normal);
+  font-size: var(--sizing-typography-font-size-label-medium);
+  line-height: var(--typography-line-height-tight);
+  text-transform: uppercase;
+}
+.baseline-progress-steps-step--not-started .baseline-progress-steps-step-indicator {
+  background-color: var(--brand-color-brand-050);
+}
+.baseline-progress-steps-step--not-started .baseline-progress-steps-step-number {
+  color: var(--color-typography-secondary-lighter);
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: var(--typography-font-weight-normal);
+  font-size: var(--sizing-typography-font-size-label-medium);
+  line-height: var(--typography-line-height-tight);
+  text-transform: uppercase;
+}
+.baseline-progress-steps-step-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.baseline-progress-steps-step-label {
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: var(--typography-font-weight-normal);
+  font-size: var(--sizing-typography-font-size-label-small);
+  line-height: var(--typography-line-height-tight);
+  text-align: center;
+  text-transform: uppercase;
+  color: var(--color-typography-primary-default);
+  max-width: var(--sizing-scale-140);
+  width: var(--sizing-scale-110);
+  word-wrap: break-word;
+  transition: color 0.2s ease;
+  position: absolute;
+  top: 130%;
+}
+.baseline-progress-steps-step--completed .baseline-progress-steps-step-label,
+.baseline-progress-steps-step--in-progress .baseline-progress-steps-step-label {
+  color: var(--color-typography-primary-default);
+}
+.baseline-progress-steps-step--not-started .baseline-progress-steps-step-label {
+  color: var(--brand-color-brand-100);
+  opacity: 0.7;
+}
+.baseline-progress-steps-step--opacity-50 {
+  opacity: 0.5;
+}
+.baseline-progress-steps-step--opacity-30 {
+  opacity: 0.3;
+}
+.baseline-progress-steps-line {
+  flex: 1 1 auto;
+  height: 0;
+  border-top-width: var(--sizing-scale-010);
+  border-top-style: solid;
+  margin-left: calc(var(--spacing-scale-070) * -1);
+  margin-right: calc(var(--spacing-scale-070) * -1);
+  transition: border-color 0.2s ease;
+  align-self: center;
+  position: relative;
+}
+.baseline-progress-steps-line--completed {
+  border-top: var(--sizing-scale-010) solid var(--brand-color-brand-100);
+}
+.baseline-progress-steps-line--not-started {
+  border-top: var(--sizing-scale-010) solid var(--brand-color-brand-100);
+}
+.baseline-progress-steps-line--opacity-50 {
+  opacity: 0.5;
+}
+.baseline-progress-steps-line--opacity-30 {
+  opacity: 0.3;
+}
+@container progress-steps (max-width: 767px) {
+  .baseline-progress-steps {
+    padding: 0 var(--spacing-scale-030) var(--sizing-scale-060);
+    min-width: 500px;
+    height: auto;
+    min-height: var(--sizing-scale-300);
+    overflow-x: hidden;
+  }
+  .baseline-progress-steps-step-label {
+    max-width: var(--sizing-scale-100);
+    font-size: var(--sizing-typography-font-size-label-xsmall);
+  }
+  .baseline-progress-steps-line {
+    min-width: var(--sizing-scale-080);
+  }
+}
+
+/* src/components/Switch/Switch.css */
+.baseline-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--spacing-scale-080) var(--spacing-scale-030);
+  padding-right: calc(var(--spacing-scale-030) + var(--sizing-scale-050));
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+.baseline-switch:focus-within {
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+  border-radius: var(--brand-sizing-radius-medium);
+}
+.baseline-switch--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.baseline-switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.baseline-switch-track {
+  position: absolute;
+  left: var(--spacing-scale-030);
+  height: var(--sizing-scale-040);
+  width: var(--sizing-scale-080);
+  background-color: var(--brand-color-neutral-075);
+  border-radius: var(--brand-sizing-radius-full);
+  transition: background-color 0.2s ease;
+  z-index: 1;
+}
+.baseline-switch--disabled .baseline-switch-track {
+  opacity: 0.5;
+}
+.baseline-switch-knob {
+  position: relative;
+  z-index: 2;
+  margin-left: calc(var(--spacing-scale-030) * -1);
+  margin-right: calc(var(--sizing-scale-050) * -1);
+  transition: transform 0.2s ease;
+}
+.baseline-switch-knob {
+  transform: translateX(calc(var(--sizing-scale-070) * 0.25 * -1));
+}
+.baseline-switch--checked .baseline-switch-knob {
+  transform: translateX(calc(var(--sizing-scale-080) - calc(var(--sizing-scale-070) * 0.5)));
+}
+
+/* src/components/Switch/Knob.css */
+.baseline-knob {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.baseline-knob-circle {
+  width: var(--sizing-scale-070);
+  height: var(--sizing-scale-070);
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  box-shadow:
+    0px 1px 3px rgba(0, 0, 0, 0.12),
+    0px 1px 1px rgba(0, 0, 0, 0.16),
+    0px 3px 8px rgba(0, 0, 0, 0.15);
+}
+.baseline-knob--default .baseline-knob-circle {
+  background-color: var(--color-typography-secondary-lighter);
+  border: 1px solid var(--brand-color-neutral-075);
+}
+.baseline-knob--active .baseline-knob-circle {
+  background-color: var(--brand-color-accent-100);
+  border: 1px solid var(--brand-color-accent-150);
+}
+.baseline-knob--disabled .baseline-knob-circle {
+  background-color: var(--brand-color-neutral-075);
+  border: 1px solid var(--brand-color-neutral-075);
+  box-shadow: none;
+}
+.baseline-knob-label-wrapper {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(calc(-50% - var(--spacing-scale-010))) translateY(var(--spacing-scale-010));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 10;
+}
+.baseline-knob-label {
+  background-color: var(--brand-color-accent-150);
+  color: var(--color-typography-secondary-lighter);
+  font-family: var(--brand-typography-font-family-label);
+  font-weight: var(--typography-font-weight-normal);
+  font-size: var(--sizing-typography-font-size-label-xsmall);
+  line-height: var(--typography-line-height-tight);
+  text-align: center;
+  text-transform: uppercase;
+  padding: var(--spacing-scale-050) var(--spacing-scale-070);
+  border-radius: var(--brand-sizing-radius-large);
+  min-width: var(--sizing-scale-070);
+  min-height: var(--sizing-scale-050);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.baseline-knob-needle {
+  width: var(--sizing-scale-010);
+  height: var(--sizing-scale-060);
+  background-color: var(--brand-color-accent-150);
+  margin-top: 0;
+}
+
+/* src/components/Slider/Slider.css */
+.baseline-slider {
+  width: 100%;
+  min-width: 300px;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-scale-100);
+  padding: var(--spacing-scale-080) var(--spacing-scale-100);
+  position: relative;
+}
+.baseline-slider-enhancers {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-scale-100);
+}
+.baseline-slider-enhancer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sizing-scale-080);
+  height: var(--sizing-scale-080);
+  flex-shrink: 0;
+}
+.baseline-slider-container {
+  flex: 1;
+  position: relative;
+  height: var(--sizing-scale-100);
+  display: flex;
+  align-items: center;
+}
+.baseline-slider-track {
+  position: relative;
+  width: 100%;
+  height: 2px;
+  background-color: var(--color-background-disabled-default);
+  border-radius: var(--brand-sizing-radius-large);
+  overflow: visible;
+}
+.baseline-slider--simple .baseline-slider-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: var(--brand-color-accent-100);
+  border-radius: var(--brand-sizing-radius-large);
+  transition: width 0.1s ease, left 0.1s ease;
+  pointer-events: none;
+}
+.baseline-slider--range {
+  --dif: calc(var(--max) - var(--min));
+}
+.baseline-slider--range .baseline-slider-track::before,
+.baseline-slider--range .baseline-slider-track::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: var(--brand-color-accent-100);
+  border-radius: var(--brand-sizing-radius-large);
+  pointer-events: none;
+  transition: margin-left 0.1s ease, width 0.1s ease;
+}
+.baseline-slider--range .baseline-slider-track::before {
+  margin-left: calc((var(--a) - var(--min)) / var(--dif) * 100%);
+  width: calc((var(--b) - var(--a)) / var(--dif) * 100%);
+}
+.baseline-slider--range .baseline-slider-track::after {
+  margin-left: calc((var(--b) - var(--min)) / var(--dif) * 100%);
+  width: calc((var(--a) - var(--b)) / var(--dif) * 100%);
+}
+.baseline-slider--disabled .baseline-slider-track {
+  background-color: var(--color-background-disabled-default);
+}
+.baseline-slider--disabled .baseline-slider-fill {
+  background-color: var(--color-background-disabled-default);
+}
+.baseline-slider-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  background: none;
+  cursor: pointer;
+  pointer-events: none;
+  z-index: 1;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.baseline-slider-input--min {
+  z-index: 2;
+}
+.baseline-slider-input--max {
+  z-index: 2;
+}
+.baseline-slider--disabled .baseline-slider-input {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.baseline-slider-knob-wrapper {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 3;
+}
+.baseline-slider-input:focus-visible + .baseline-slider-knob-wrapper,
+.baseline-slider-input--min:focus-visible ~ .baseline-slider-knob-wrapper:first-of-type,
+.baseline-slider-input--max:focus-visible ~ .baseline-slider-knob-wrapper:last-of-type {
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+  border-radius: var(--brand-sizing-radius-medium);
+}
+.baseline-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.baseline-slider-input::-moz-range-thumb {
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.baseline-slider-input::-ms-thumb {
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.baseline-slider-input::-webkit-slider-runnable-track {
+  background: transparent;
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+.baseline-slider-input::-moz-range-track {
+  background: transparent;
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+.baseline-slider-input::-ms-track {
+  background: transparent;
+  border: none;
+  height: 100%;
+  width: 100%;
+  color: transparent;
+}
+
+/* src/components/Checkbox/Checkbox.css */
+.baseline-checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-scale-030);
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+.baseline-checkbox--disabled {
+  cursor: not-allowed;
+  color: var(--color-background-disabled-default);
+}
+.baseline-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: var(--sizing-scale-050);
+  height: var(--sizing-scale-050);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  z-index: 1;
+  top: var(--spacing-scale-010);
+  left: 0;
+  contain: strict;
+}
+.baseline-checkbox-box {
+  position: relative;
+  width: var(--sizing-scale-050);
+  height: var(--sizing-scale-050);
+  min-width: var(--sizing-scale-050);
+  min-height: var(--sizing-scale-050);
+  max-width: var(--sizing-scale-050);
+  max-height: var(--sizing-scale-050);
+  border: var(--brand-sizing-stroke-xl) solid var(--brand-color-brand-100);
+  border-radius: var(--brand-sizing-radius-medium);
+  background-color: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  flex-shrink: 0;
+  flex-grow: 0;
+  margin-top: var(--spacing-scale-010);
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+  pointer-events: none;
+  z-index: 0;
+  box-sizing: border-box;
+  line-height: 0;
+  vertical-align: middle;
+  contain: strict;
+  overflow: hidden;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  font-size: 0;
+}
+.baseline-checkbox-input:checked + .baseline-checkbox-box {
+  background-color: var(--brand-color-brand-100);
+  border-color: var(--brand-color-brand-100);
+  width: var(--sizing-scale-050);
+  height: var(--sizing-scale-050);
+}
+.baseline-checkbox-input:indeterminate + .baseline-checkbox-box,
+.baseline-checkbox-input[aria-checked=mixed] + .baseline-checkbox-box {
+  background-color: var(--brand-color-brand-100);
+  border-color: var(--brand-color-brand-100);
+}
+.baseline-checkbox--disabled .baseline-checkbox-box {
+  background-color: var(--color-background-disabled-default);
+  border-color: var(--brand-color-neutral-075);
+  cursor: not-allowed;
+}
+.baseline-checkbox--disabled .baseline-checkbox-input:checked + .baseline-checkbox-box {
+  background-color: var(--color-background-disabled-default);
+  border-color: var(--brand-color-neutral-075);
+}
+.baseline-checkbox--disabled .baseline-checkbox-input:indeterminate + .baseline-checkbox-box,
+.baseline-checkbox--disabled .baseline-checkbox-input[aria-checked=mixed] + .baseline-checkbox-box {
+  background-color: var(--color-background-disabled-default);
+  border-color: var(--brand-color-neutral-075);
+}
+.baseline-checkbox--disabled .baseline-checkbox-box .baseline-checkbox-indeterminate {
+  background-color: var(--brand-color-neutral-075);
+}
+.baseline-checkbox--disabled .baseline-checkbox-icon {
+  color: var(--brand-color-neutral-075);
+}
+.baseline-checkbox-input:focus-visible + .baseline-checkbox-box {
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+}
+.baseline-checkbox-input:not(:disabled):hover + .baseline-checkbox-box {
+  border-color: var(--brand-color-brand-100);
+}
+.baseline-checkbox:not(.baseline-checkbox--disabled):hover .baseline-checkbox-box {
+  border-color: var(--brand-color-brand-100);
+}
+.baseline-checkbox-icon {
+  color: white;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  vertical-align: middle;
+}
+.baseline-checkbox-icon svg {
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.baseline-checkbox-indeterminate {
+  width: var(--sizing-scale-020);
+  height: var(--sizing-scale-010);
+  background-color: var(--brand-color-input-050);
+  border-radius: var(--brand-sizing-radius-medium);
+  margin: 0;
+  padding: 0;
+  display: block;
+  flex-shrink: 0;
+}
+.baseline-checkbox-label {
+  font-family: var(--brand-typography-font-family-body);
+  font-size: var(--sizing-typography-font-size-paragraph-medium);
+  line-height: var(--typography-line-height-normal);
+  font-weight: var(--typography-font-weight-normal);
+  color: var(--brand-color-brand-100);
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+.baseline-checkbox--disabled .baseline-checkbox-label {
+  cursor: not-allowed;
+  color: var(--brand-color-neutral-075);
+}
+
+/* src/components/Radio/Radio.css */
+.baseline-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-scale-030);
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+.baseline-radio--disabled {
+  cursor: not-allowed;
+  color: var(--color-background-disabled-default);
+}
+.baseline-radio-input {
+  position: absolute;
+  opacity: 0;
+  width: var(--sizing-scale-050);
+  height: var(--sizing-scale-050);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  z-index: 1;
+  top: var(--spacing-scale-010);
+  left: 0;
+  contain: layout style paint;
+  pointer-events: auto;
+}
+.baseline-radio-circle {
+  position: relative;
+  width: var(--sizing-scale-050);
+  height: var(--sizing-scale-050);
+  min-width: var(--sizing-scale-050);
+  min-height: var(--sizing-scale-050);
+  max-width: var(--sizing-scale-050);
+  max-height: var(--sizing-scale-050);
+  border: var(--brand-sizing-stroke-xl) solid var(--brand-color-brand-100);
+  border-radius: var(--brand-sizing-radius-full);
+  background-color: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  flex-shrink: 0;
+  flex-grow: 0;
+  margin-top: var(--spacing-scale-010);
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+  pointer-events: none;
+  z-index: 0;
+  box-sizing: border-box;
+  line-height: 0;
+  vertical-align: middle;
+  contain: strict;
+  overflow: hidden;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  font-size: 0;
+}
+.baseline-radio-input:checked + .baseline-radio-circle {
+  background-color: var(--brand-color-brand-100);
+  border-color: var(--brand-color-brand-100);
+  width: var(--sizing-scale-050);
+  height: var(--sizing-scale-050);
+}
+.baseline-radio--disabled .baseline-radio-circle {
+  background-color: transparent;
+  border-color: var(--brand-color-neutral-075);
+  cursor: not-allowed;
+}
+.baseline-radio--disabled .baseline-radio-input:checked + .baseline-radio-circle {
+  background-color: var(--color-background-disabled-default);
+  border-color: var(--brand-color-neutral-075);
+}
+.baseline-radio-dot {
+  width: var(--sizing-scale-010);
+  height: var(--sizing-scale-010);
+  min-width: var(--sizing-scale-010);
+  min-height: var(--sizing-scale-010);
+  max-width: var(--sizing-scale-010);
+  max-height: var(--sizing-scale-010);
+  border-radius: var(--brand-sizing-radius-full);
+  background-color: var(--brand-color-input-050);
+  margin: 0;
+  padding: 0;
+  display: block;
+  flex-shrink: 0;
+  contain: strict;
+  transform: translateZ(0);
+}
+.baseline-radio--disabled .baseline-radio-dot {
+  background-color: var(--brand-color-neutral-075);
+}
+.baseline-radio-input:focus + .baseline-radio-circle,
+.baseline-radio-input:focus-visible + .baseline-radio-circle {
+  outline: var(--brand-sizing-stroke-xl) solid var(--brand-color-accent-100);
+  outline-offset: var(--spacing-scale-010);
+}
+.baseline-radio-input:not(:disabled):hover + .baseline-radio-circle {
+  border-color: var(--brand-color-brand-100);
+}
+.baseline-radio:not(.baseline-radio--disabled):hover .baseline-radio-circle {
+  border-color: var(--brand-color-brand-100);
+}
+.baseline-radio-label {
+  font-family: var(--brand-typography-font-family-body);
+  font-size: var(--sizing-typography-font-size-paragraph-medium);
+  line-height: var(--typography-line-height-normal);
+  font-weight: var(--typography-font-weight-normal);
+  color: var(--brand-color-brand-100);
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+.baseline-radio--disabled .baseline-radio-label {
+  cursor: not-allowed;
+  color: var(--brand-color-neutral-075);
+}
+
+/* src/components/Logo/Logo.css */
+.baseline-logo {
+  display: inline-block;
+  width: 223px;
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: 223 / 43;
+}
+.baseline-logo--logomark-only {
+  width: 20px;
+  aspect-ratio: 20 / 16;
+}
+.baseline-logo--logomark-only.baseline-logo--baseline-pro {
+  aspect-ratio: 20 / 22;
+}
+.baseline-logo--logomark-only.baseline-logo--offset {
+  width: 20.3538px;
+  aspect-ratio: 20.3538 / 17.52;
+}
+.baseline-logo-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.baseline-logo--color {
+  color: var(--brand-color-brand-150);
+}
+.baseline-logo--color.baseline-logo--baseline-pro {
+  color: #121212;
+}
+.baseline-logo--color.baseline-logo--offset {
+  color: var(--brand-color-brand-100);
+}
+.baseline-logo--mono-light {
+  color: #ffffff;
+}
+.baseline-logo--mono-light .baseline-logo-svg {
+  filter: brightness(0) invert(1);
+}
+.baseline-logo--mono-light .baseline-logo-text-accent {
+  fill: #ffffff !important;
+}
+.baseline-logo--mono-light .baseline-logo-offset-mouth {
+  fill: #ffffff !important;
+}
+.baseline-logo--mono-dark {
+  color: #000000;
+}
+.baseline-logo--mono-dark .baseline-logo-svg {
+  filter: brightness(0);
+}
+.baseline-logo--mono-dark .baseline-logo-text-accent {
+  fill: #000000 !important;
+}
+.baseline-logo--mono-dark .baseline-logo-offset-mouth {
+  fill: #000000 !important;
+}
+
+/* src/components/Navigation/MenuItem.css */
+.baseline-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--sizing-scale-070);
+  padding: var(--spacing-scale-050) var(--spacing-scale-080);
+  border-radius: var(--brand-sizing-radius-small);
+  cursor: pointer;
+  text-decoration: none;
+  position: relative;
+  z-index: 1;
+}
+.baseline-menu-item-text {
+  font-family: var(--brand-typography-font-family-body);
+  font-weight: var(--typography-font-weight-bold);
+  font-size: var(--semantic-sizing-typography-font-size-paragraph-medium);
+  line-height: var(--typography-line-height-tight);
+  color: var(--brand-color-brand-100);
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: var(--brand-sizing-stroke-lg);
+  text-underline-offset: 30%;
+  white-space: nowrap;
+}
+.baseline-menu-item--default {
+  background-color: transparent;
+}
+.baseline-menu-item--hover .baseline-menu-item-text {
+  color: var(--brand-color-brand-150);
+}
+.baseline-menu-item--active .baseline-menu-item-text {
+  color: var(--brand-color-brand-100);
+}
+
+/* src/components/Navigation/HamburgerMenuButton.css */
+.baseline-hamburger-menu-button {
+  background: none;
+  border: none;
+  padding: var(--spacing-scale-040);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sizing-scale-080);
+  height: var(--sizing-scale-080);
+  position: relative;
+  z-index: 10;
+}
+.baseline-hamburger-menu-button-container {
+  width: var(--sizing-scale-060);
+  height: var(--sizing-scale-060);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.baseline-hamburger-menu-button-line {
+  width: 100%;
+  height: var(--sizing-scale-010);
+  background-color: var(--color-typography-primary-default);
+  border-radius: var(--brand-sizing-radius-small);
+  transform-origin: center;
+  position: absolute;
+  left: 0;
+}
+.baseline-hamburger-menu-button-line--top {
+  top: 0;
+  transform: translateY(0) rotate(0deg);
+  transition: none;
+}
+.baseline-hamburger-menu-button-line--middle {
+  top: 50%;
+  transform: translateY(-50%) scaleX(1);
+  opacity: 1;
+  transition: none;
+}
+.baseline-hamburger-menu-button-line--bottom {
+  bottom: 0;
+  transform: translateY(0) rotate(0deg);
+  transition: none;
+}
+.baseline-hamburger-menu-button--open .baseline-hamburger-menu-button-line--top {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  animation: merge-and-spin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.baseline-hamburger-menu-button--open .baseline-hamburger-menu-button-line--middle {
+  opacity: 0;
+  transform: translateY(-50%) scaleX(0);
+  transition: opacity 0.15s ease 0.1s, transform 0.15s ease 0.1s;
+}
+.baseline-hamburger-menu-button--open .baseline-hamburger-menu-button-line--bottom {
+  top: 50%;
+  transform: translateY(-50%) rotate(-45deg);
+  animation: merge-and-spin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.baseline-hamburger-menu-button:not(.baseline-hamburger-menu-button--open) .baseline-hamburger-menu-button-line--top {
+  animation: reverse-merge-and-spin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.baseline-hamburger-menu-button:not(.baseline-hamburger-menu-button--open) .baseline-hamburger-menu-button-line--middle {
+  transition: opacity 0.2s ease 0.2s, transform 0.2s ease 0.2s;
+}
+.baseline-hamburger-menu-button:not(.baseline-hamburger-menu-button--open) .baseline-hamburger-menu-button-line--bottom {
+  animation: reverse-merge-and-spin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+@keyframes merge-and-spin-top {
+  0% {
+    top: 0;
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    top: 50%;
+    transform: translateY(-50%) rotate(0deg);
+  }
+  100% {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}
+@keyframes merge-and-spin-bottom {
+  0% {
+    bottom: 0;
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    top: 50%;
+    transform: translateY(-50%) rotate(0deg);
+  }
+  100% {
+    top: 50%;
+    transform: translateY(-50%) rotate(-45deg);
+  }
+}
+@keyframes reverse-merge-and-spin-top {
+  0% {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  50% {
+    top: 50%;
+    transform: translateY(-50%) rotate(0deg);
+  }
+  100% {
+    top: 0;
+    transform: translateY(0) rotate(0deg);
+  }
+}
+@keyframes reverse-merge-and-spin-bottom {
+  0% {
+    top: 50%;
+    transform: translateY(-50%) rotate(-45deg);
+  }
+  50% {
+    top: 50%;
+    transform: translateY(-50%) rotate(0deg);
+  }
+  100% {
+    bottom: 0;
+    transform: translateY(0) rotate(0deg);
+  }
+}
+
+/* src/components/Navigation/HeaderNavigation.css */
+.baseline-header-navigation {
+  background-color: var(--brand-color-secondary-050);
+  border: var(--brand-sizing-stroke-lg) solid var(--semantic-color-typography-secondary-darker);
+  border-radius: var(--brand-sizing-radius-large);
+  box-shadow:
+    0px 3px 8px 0px rgba(0, 0, 0, 0.15),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.16),
+    0px 3px 1px 0px rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-scale-070) var(--spacing-scale-090);
+  max-width: 1200px;
+  margin: var(--spacing-scale-100) auto;
+  position: relative;
+  isolation: isolate;
+}
+.baseline-header-navigation-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-scale-070);
+  width: 100%;
+  position: relative;
+  z-index: 10;
+  background-color: var(--brand-color-secondary-050);
+  pointer-events: auto;
+}
+.baseline-header-navigation-logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 35px;
+}
+.baseline-header-navigation-menu--desktop {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--spacing-scale-000);
+  flex: 1;
+  position: relative;
+}
+.baseline-header-navigation-menu-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  background-color: var(--brand-color-secondary-100);
+  border-radius: var(--brand-sizing-radius-small);
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0;
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.2s ease;
+  transform: translateX(0);
+}
+.baseline-header-navigation-menu-toggle {
+  display: none;
+}
+.baseline-header-navigation-cta {
+  margin-left: var(--spacing-scale-060);
+}
+.baseline-header-navigation-menu--mobile {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: calc(-1 * var(--spacing-scale-090));
+  right: calc(-1 * var(--spacing-scale-090));
+  background-color: var(--brand-color-secondary-050);
+  border: var(--brand-sizing-stroke-lg) solid var(--semantic-color-typography-secondary-darker);
+  border-top: none;
+  border-radius: 0 0 var(--brand-sizing-radius-large) var(--brand-sizing-radius-large);
+  box-shadow:
+    0px 5px 8px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 1px 0px rgba(0, 0, 0, 0.16),
+    0px 5px 1px 0px rgba(0, 0, 0, 0.1);
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}
+.baseline-header-navigation-menu--mobile-open {
+  max-height: 500px;
+}
+.baseline-header-navigation-menu-mobile-content {
+  padding: var(--spacing-scale-060) var(--spacing-scale-080);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-scale-040);
+  position: relative;
+}
+.baseline-header-navigation-menu-mobile-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  background-color: var(--brand-color-secondary-100);
+  border-radius: var(--brand-sizing-radius-small);
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0;
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.2s ease;
+  transform: translateY(0);
+}
+.baseline-header-navigation-cta--mobile {
+  margin-left: 0;
+  margin-top: var(--spacing-scale-040);
+  justify-self: center;
+  align-self: center;
+}
+@media (max-width: 767px) {
+  .baseline-header-navigation-menu--desktop {
+    display: none;
+  }
+  .baseline-header-navigation-menu-toggle {
+    display: block;
+  }
+  .baseline-header-navigation-menu--mobile {
+    display: block;
+  }
+}
+
+/* src/fonts.css */
+/*# sourceMappingURL=index.css.map */