@justfixnyc/component-library 0.35.0 → 0.36.0

package/dist/src/assets/index.es.css

@@ -41,6 +41,106 @@
     transform: rotate(360deg);
   }
 }
+.jfcl-alert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  padding-left: calc(12px + 0.75rem);
+  position: relative;
+  width: fit-content;
+  min-width: 10rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+}
+.jfcl-alert .jfcl-alert__content {
+  display: flex;
+  align-items: center;
+}
+.jfcl-alert .jfcl-alert__content .jfcl-alert__icon {
+  margin-right: 8px;
+}
+.jfcl-alert .jfcl-alert__content .jfcl-alert__icon.jfcl-alert__icon-error {
+  font-size: 1rem;
+}
+.jfcl-alert::before {
+  content: "";
+  width: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+.jfcl-alert button.jfcl-alert__btn,
+.jfcl-alert a.jfcl-alert__btn {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  display: flex;
+  background: transparent;
+  padding: 0;
+  border: none;
+  margin-left: 0.5rem;
+  cursor: pointer;
+  font-size: 1em;
+  text-decoration: none;
+}
+.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text,
+.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text {
+  border-bottom: 1px solid;
+}
+.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
+.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
+  color: #676565;
+}
+.jfcl-alert.jfcl-type-info::before {
+  background-color: #5188ff;
+}
+.jfcl-alert.jfcl-type-error::before {
+  background-color: #ff813a;
+}
+.jfcl-alert.jfcl-type-success::before {
+  background-color: #1aa551;
+}
+.jfcl-alert.jfcl-variant-primary {
+  background-color: #242323;
+  color: #faf8f4;
+}
+.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn,
+.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn {
+  color: #faf8f4;
+}
+.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
+.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
+  color: #9a9898;
+}
+.jfcl-alert.jfcl-variant-secondary {
+  background-color: #faf8f4;
+  border: 1px solid #676565;
+  color: #242323;
+}
+.jfcl-alert.jfcl-variant-secondary button.jfcl-alert__btn,
+.jfcl-alert.jfcl-variant-secondary a.jfcl-alert__btn {
+  color: #242323;
+  border-color: #242323;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .jfcl-button {
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -188,96 +288,211 @@
     transform: rotate(360deg);
   }
 }
-.jfcl-alert {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  padding-left: calc(12px + 0.75rem);
-  position: relative;
-  width: fit-content;
-  min-width: 10rem;
-  border-radius: 0.25rem;
-  overflow: hidden;
+.jfcl-input-header__label {
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
+  margin-bottom: 0.75rem;
+  color: #242323;
+  display: flex;
+  padding: 0;
 }
-.jfcl-alert .jfcl-alert__content {
+.jfcl-input-header__label.jfcl-input-header__label--has-helper {
+  margin-bottom: 2px;
+}
+
+.jfcl-input-header__helper_text {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+  letter-spacing: 0.42px;
+  color: #242323;
+  margin-bottom: 0.75rem;
+}
+
+.jfcl-input-header__invalid_text {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+  letter-spacing: 0.42px;
+  color: #242323;
   display: flex;
   align-items: center;
+  color: #ff813a;
+  margin-bottom: 0.75rem;
 }
-.jfcl-alert .jfcl-alert__content .jfcl-alert__icon {
-  margin-right: 8px;
-  width: 1.25rem;
-  height: 1.25rem;
+.jfcl-input-header__invalid_text .jfcl-input-header__invalid_icon {
+  margin-right: 4px;
 }
-.jfcl-alert::before {
-  content: "";
-  width: 12px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
-.jfcl-alert button.jfcl-alert__btn,
-.jfcl-alert a.jfcl-alert__btn {
+.jfcl-checkbox {
+  margin-bottom: 1.5rem;
+  color: #242323;
+}
+.jfcl-checkbox.jfcl-checkbox--is-disabled {
+  pointer-events: none;
+  color: #676565;
+}
+.jfcl-checkbox.jfcl-checkbox--is-disabled .jfcl-checkbox__checkmark {
+  background-color: #f2f2f2;
+  border-color: #9a9898;
+}
+.jfcl-checkbox .jfcl-checkbox__checkmark-label-wrapper {
+  display: flex;
+}
+.jfcl-checkbox .jfcl-checkbox__label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
-  display: flex;
-  background: transparent;
-  padding: 0;
-  border: none;
-  margin-left: 0.5rem;
+}
+.jfcl-checkbox .jfcl-checkbox__input {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  opacity: 0;
   cursor: pointer;
-  font-size: 1em;
-  text-decoration: none;
 }
-.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text,
-.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text {
-  border-bottom: 1px solid;
+.jfcl-checkbox .jfcl-checkbox__checkmark {
+  display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  border: 1.5px solid;
+  margin-right: 8px;
+  border-radius: 4px;
+  background: #faf8f4;
 }
-.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
-.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
-  color: #676565;
+.jfcl-checkbox .jfcl-checkbox__checkmark.jfcl-checkbox__checkmark--is-invalid {
+  border-color: #ff813a;
 }
-.jfcl-alert.jfcl-type-info::before {
-  background-color: #5188ff;
+.jfcl-checkbox .jfcl-checkbox__checkmark .jfcl-checkbox__check_icon {
+  color: #ffffff;
+  display: none;
 }
-.jfcl-alert.jfcl-type-error::before {
-  background-color: #ff813a;
+.jfcl-checkbox .jfcl-checkbox__input:focus-visible + .jfcl-checkbox__label .jfcl-checkbox__checkmark {
+  outline: 2px solid #5188ff;
+  outline-offset: 2px;
 }
-.jfcl-alert.jfcl-type-success::before {
-  background-color: #1aa551;
+.jfcl-checkbox .jfcl-checkbox__input:checked + .jfcl-checkbox__label .jfcl-checkbox__checkmark {
+  background-color: currentColor;
+  border-width: 1px;
 }
-.jfcl-alert.jfcl-variant-primary {
-  background-color: #242323;
-  color: #faf8f4;
+.jfcl-checkbox .jfcl-checkbox__input:checked + .jfcl-checkbox__label .jfcl-checkbox__checkmark:not(.jfcl-checkbox__checkmark--is-invalid) {
+  border-color: transparent;
 }
-.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn,
-.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn {
-  color: #faf8f4;
+.jfcl-checkbox .jfcl-checkbox__input:checked + .jfcl-checkbox__label .jfcl-checkbox__checkmark .jfcl-checkbox__check_icon {
+  display: block;
 }
-.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
-.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
-  color: #9a9898;
+.jfcl-checkbox .jfcl-checkbox__input:hover + .jfcl-checkbox__label .jfcl-checkbox__checkmark:not(.jfcl-checkbox__checkmark--is-invalid) {
+  border-color: #676565;
 }
-.jfcl-alert.jfcl-variant-secondary {
-  background-color: #faf8f4;
-  border: 1px solid #676565;
-  color: #242323;
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
-.jfcl-alert.jfcl-variant-secondary button.jfcl-alert__btn,
-.jfcl-alert.jfcl-variant-secondary a.jfcl-alert__btn {
+.jfcl-dropdown {
+  --border-color: #676565;
+  --background-color: #faf8f4;
+  --text-color: #242323;
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  background-color: var(--background-color);
+  border-radius: 4px;
+}
+.jfcl-dropdown.jfcl-dropdown--is-invalid {
+  --border-color: #ff813a;
+}
+.jfcl-dropdown.jfcl-dropdown--is-disabled {
+  --border-color: #9a9898;
+  --background-color: #f2f2f2;
+  --text-color: #676565;
+}
+.jfcl-dropdown .jfcl-dropdown__single-value {
+  color: var(--text-color);
+}
+.jfcl-dropdown .jfcl-dropdown__control {
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+}
+.jfcl-dropdown .jfcl-dropdown__control.jfcl-dropdown__control:hover {
+  border-color: var(--border-color);
+}
+.jfcl-dropdown .jfcl-dropdown__control.jfcl-dropdown__control--is-focused {
+  border: 2px solid var(--border-color);
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+}
+.jfcl-dropdown .jfcl-dropdown__indicator-separator {
+  display: none;
+}
+.jfcl-dropdown .jfcl-dropdown__indicator {
+  color: var(--text-color);
+}
+.jfcl-dropdown .jfcl-dropdown__indicator:hover {
+  color: var(--text-color);
+}
+.jfcl-dropdown .jfcl-dropdown__menu {
+  color: #676565;
+}
+.jfcl-dropdown .jfcl-dropdown__option {
+  padding: 0.75rem;
+}
+.jfcl-dropdown .jfcl-dropdown__option--is-focused,
+.jfcl-dropdown .jfcl-dropdown__option:active:not(.jfcl-dropdown__option--is-disabled) {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.jfcl-dropdown .jfcl-dropdown__option--is-disabled {
+  background-color: var(--background-color);
+  color: #676565;
+}
+.jfcl-dropdown .jfcl-dropdown__option--is-selected {
+  background-color: #efe9dc;
   color: #242323;
-  border-color: #242323;
+}
+.jfcl-dropdown .jfcl-dropdown__menu {
+  border: 2px solid #676565;
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+.jfcl-dropdown .jfcl-dropdown__menu-list {
+  padding: 0;
+}
+.jfcl-form-group {
+  padding: 0;
+  margin: 0;
+  border: none;
 }
 @keyframes spin {
   from {
@@ -302,4 +517,132 @@
 }
 .jfcl-link .jfcl-link__icon {
   margin-left: 10px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-radio-button {
+  margin-bottom: 1rem;
+  color: #242323;
+}
+.jfcl-radio-button.jfcl-radio-button--is-disabled {
+  color: #676565;
+  pointer-events: none;
+}
+.jfcl-radio-button .jfcl-radio-button__label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+}
+.jfcl-radio-button .jfcl-radio-button__input {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  opacity: 0;
+  cursor: pointer;
+}
+.jfcl-radio-button .jfcl-radio-button__checkmark {
+  display: inline-flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 8px;
+  border: 1.5px solid;
+  border-radius: 0.625rem;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+.jfcl-radio-button .jfcl-radio-button__checkmark .jfcl-radio-button__checkmark-checked {
+  width: 0.75rem;
+  height: 0.75rem;
+  box-sizing: border-box;
+  border-radius: 0.375rem;
+  background-color: currentColor;
+  display: none;
+}
+.jfcl-radio-button .jfcl-radio-button__checkmark.jfcl-radio-button__checkmark--is-invalid {
+  border-color: #ff813a;
+}
+.jfcl-radio-button .jfcl-radio-button__input:hover + .jfcl-radio-button__label .jfcl-radio-button__checkmark:not(.jfcl-radio-button__checkmark--is-invalid) {
+  border-color: #676565;
+}
+.jfcl-radio-button .jfcl-radio-button__input:focus-visible + .jfcl-radio-button__label .jfcl-radio-button__checkmark {
+  outline: 2px solid #5188ff;
+  outline-offset: 2px;
+}
+.jfcl-radio-button .jfcl-radio-button__input:checked + .jfcl-radio-button__label .jfcl-radio-button__checkmark-checked {
+  display: block;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-text-input {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  color: #242323;
+  margin-bottom: 2rem;
+}
+.jfcl-text-input .jfcl-text-input__input {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 44px;
+  padding: 10px 9px;
+  border-radius: 4px;
+  border: 1px solid #242323;
+  background: #faf8f4;
+}
+.jfcl-text-input .jfcl-text-input__input.jfcl-text-input--size-small {
+  width: 5rem;
+}
+.jfcl-text-input .jfcl-text-input__input.jfcl-text-input--size-medium {
+  width: 10rem;
+}
+.jfcl-text-input .jfcl-text-input__input.jfcl-text-input--size-large {
+  width: 17rem;
+}
+.jfcl-text-input .jfcl-text-input__input:active:not(:disabled) {
+  border-radius: 4px;
+  border: 2px solid #242323;
+  padding-left: 8px;
+  background: #ffffff;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+}
+.jfcl-text-input .jfcl-text-input__input:disabled {
+  border: 1px solid #9a9898;
+  background: #f2f2f2;
+  color: #676565;
+  pointer-events: none;
+}
+.jfcl-text-input .jfcl-text-input__input::placeholder {
+  color: #676565;
+}
+.jfcl-text-input.jfcl-text-input--is-invalid .jfcl-text-input__input {
+  border: 1.5px solid #ff813a;
+  padding-left: 8.5px;
 }