npm - @rededor/cura - Versions diffs - 0.5.4 → 1.0.0-alpha.0 - Mend

@rededor/cura 0.5.4 → 1.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (640) hide show

package/dist/collection/components/forms/cura-input-text/cura-input-text.css CHANGED Viewed

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  box-sizing: border-box;
   width: 100%;
 }
@@ -12,18 +13,16 @@
   font-family: var(--font-family);
   text-align: left !important;
 }
-.cura-input-group cura-label {
-  margin-bottom: 8px;
-}
 .cura-input-group .helper-text {
   margin-top: 8px;
-  font-size: 12px;
-  font-family: var(--font-family);
   color: var(--neutral-dark);
 }
+.cura-input-group cura-label {
+  margin-bottom: 8px;
+}
 .cura-input-group .cura-input-field {
   width: 100%;
-  height: 44px;
+  height: 40px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -34,26 +33,28 @@
   letter-spacing: 0.32px;
   line-height: 20px;
   overflow: hidden;
+  box-sizing: border-box;
 }
 .cura-input-group .cura-input-field input {
+  flex: 1;
   width: 100%;
   height: 100%;
   background: transparent;
   border: none;
   outline: none;
-  text-overflow: ellipsis;
   color: var(--neutral-dark);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
-  font-size: 16px;
-  font-style: normal;
-  line-height: 20px;
-  letter-spacing: 0.32px;
+  font-size: 14px;
+  box-sizing: border-box;
   padding: 0px 12px 0px 8px;
 }
-.cura-input-group .cura-input-field input input::placeholder {
+.cura-input-group .cura-input-field input::placeholder {
   color: var(--neutral-dark);
 }
+.cura-input-group .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
 .cura-input-group .cura-input-field cura-loader-circle {
   margin: 0px 12px;
 }
@@ -65,93 +66,266 @@
   padding-right: 12px;
   cursor: pointer;
 }
-.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field {
-  border-color: var(--neutral-dark);
+.cura-input-group .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+}
+.cura-input-group.success .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input {
+.cura-input-group.success .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
   color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
 }
-.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder {
+.cura-input-group.success .cura-input-field input::placeholder {
   color: var(--neutral-dark);
 }
-.cura-input-group:hover:not(.disabled):not(.isLoading):not(.isSuccess):not(.isError):not(.isFocused):not(.readOnly):not(.transparent) ::slotted(cura-label) {
-  color: var(--neutral-black);
+.cura-input-group.success .cura-input-field .feedback-icon {
+  padding-left: 12px;
 }
-.cura-input-group.isFocused .cura-input-field,
-.cura-input-group :focus-within :not(.readOnly) .cura-input-field {
-  border: 2px solid var(--info-base);
-  background-color: var(--neutral-purewhite);
-  outline: none;
+.cura-input-group.success .cura-input-field input {
+  color: var(--success-darker) !important;
+}
+.cura-input-group.success .cura-input-field input::placeholder {
+  color: var(--success-darker) !important;
 }
-.cura-input-group.isFocused .cura-input-field input,
-.cura-input-group :focus-within :not(.readOnly) .cura-input-field input {
+.cura-input-group.success:not(.transparent) .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
   letter-spacing: 0.32px;
   line-height: 20px;
-  color: var(--neutral-black);
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid var(--success-dark) !important;
+  background-color: var(--success-lighter) !important;
 }
-.cura-input-group.isFocused .helper-text,
-.cura-input-group :focus-within :not(.readOnly) .helper-text {
-  color: var(--neutral-black);
+.cura-input-group.success:not(.transparent) .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
 }
-.cura-input-group.isSuccess .cura-input-field {
-  border: 2px solid var(--success-dark);
-  background-color: var(--success-lighter);
-  overflow: hidden;
+.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
 }
-.cura-input-group.isSuccess .cura-input-field input {
+.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.error .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
   letter-spacing: 0.32px;
   line-height: 20px;
-  color: var(--success-darker);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.cura-input-group.error .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.error .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.error .cura-input-field .feedback-icon {
+  padding-left: 12px;
 }
-.cura-input-group.isSuccess .cura-input-field input::placeholder {
-  color: var(--success-darker);
+.cura-input-group.error .cura-input-field input {
+  color: var(--error-darker) !important;
 }
-.cura-input-group.isSuccess .helper-text {
-  color: var(--success-dark);
+.cura-input-group.error .cura-input-field input::placeholder {
+  color: var(--error-darker) !important;
 }
-.cura-input-group.isError .cura-input-field {
-  border: 2px solid var(--error-dark);
-  background-color: var(--error-lighter);
+.cura-input-group.error:not(.transparent) .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
   letter-spacing: 0.32px;
   line-height: 20px;
   overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid var(--error-dark) !important;
+  background-color: var(--error-lighter) !important;
 }
-.cura-input-group.isError .cura-input-field input {
-  letter-spacing: 0.32px;
-  line-height: 20px;
-  color: var(--error-darker);
+.cura-input-group.error:not(.transparent) .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field {
+  border-color: var(--neutral-dark);
+}
+.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input {
+  color: var(--neutral-dark);
 }
-.cura-input-group.isError .cura-input-field input::placeholder {
-  color: var(--error-darker);
+.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group:focus-within .cura-input-field {
+  border: 2px solid var(--info-base) !important;
+  background-color: var(--neutral-purewhite);
+  outline: none;
 }
-.cura-input-group.isError .helper-text {
-  color: var(--error-dark);
+.cura-input-group:focus-within .cura-input-field input {
+  color: var(--neutral-black) !important;
 }
 .cura-input-group.isLoading {
   cursor: wait;
 }
 .cura-input-group.isLoading .cura-input-field {
-  background-color: var(--neutral-white);
-  border: 2px solid var(--primary-base);
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
   color: var(--primary-base);
   letter-spacing: 0.32px;
   line-height: 20px;
   overflow: hidden;
+  box-sizing: border-box;
+  background-color: var(--neutral-white) !important;
+  border: 2px solid var(--primary-base) !important;
 }
 .cura-input-group.isLoading .cura-input-field input {
-  cursor: wait;
-  color: var(--primary-base);
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
 }
-.cura-input-group.isLoading input::placeholder {
-  color: var(--primary-base);
+.cura-input-group.isLoading .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
 }
-.cura-input-group.isLoading .helper-text {
-  color: var(--primary-base);
+.cura-input-group.isLoading .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.isLoading .cura-input-field input {
+  cursor: wait;
+  color: var(--primary-base) !important;
+}
+.cura-input-group.isLoading .cura-input-field input::placeholder {
+  color: var(--primary-base) !important;
 }
 .cura-input-group.disabled .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
   background-color: var(--neutral-white);
   border: 2px solid var(--neutral-base);
-  color: var(--neutral-medium);
+}
+.cura-input-group.disabled .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.disabled .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.disabled .cura-input-field .feedback-icon {
+  padding-left: 12px;
 }
 .cura-input-group.disabled .cura-input-field input {
   color: var(--neutral-medium);
@@ -165,162 +339,698 @@
 .cura-input-group.readOnly[read-only] .cura-input-field input {
   cursor: default;
 }
-.cura-input-group.readOnly[read-only] .helper-text {
-  color: var(--neutral-dark);
-}
-.cura-input-group.transparent {
+.cura-input-group.small .cura-input-field {
+  width: 100%;
+  height: 32px;
   display: flex;
-  background-color: transparent;
-  padding: 0px;
-  justify-content: start;
+  flex-direction: row;
   align-items: center;
-  min-width: 300px;
-  max-height: 80px;
-  gap: 4px;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.transparent .input-wrapper {
-  display: flex;
+.cura-input-group.small .cura-input-field input {
+  flex: 1;
   width: 100%;
-  flex-direction: column;
-  justify-content: start;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 12px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
 }
-.cura-input-group.transparent cura-label {
-  margin-bottom: 4px;
+.cura-input-group.small .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
 }
-.cura-input-group.transparent .cura-input-field {
-  display: flex;
+.cura-input-group.small .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.small .cura-input-field input {
+  line-height: 13px;
+  letter-spacing: 0.72px;
+}
+.cura-input-group.small .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-regular);
+}
+.cura-input-group.medium .cura-input-field {
   width: 100%;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
   color: var(--primary-base);
-  height: 27px;
   letter-spacing: 0.32px;
   line-height: 20px;
   overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.transparent .cura-input-field input {
-  order: 1;
-  color: var(--neutral-black);
-  font-size: 16px;
-  font-weight: var(--font-weight-bold);
-  line-height: 20px;
+.cura-input-group.medium .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.medium .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.medium .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.medium .cura-input-field input {
+  line-height: 16px;
+  letter-spacing: 0.56px;
+}
+.cura-input-group.medium .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-regular);
+}
+.cura-input-group.large .cura-input-field {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
   letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.cura-input-group.large .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.large .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.large .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.large .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-bold);
+}
+.cura-input-group.transparent {
+  background-color: transparent;
+  padding: 0px;
+  max-height: 80px;
+}
+.cura-input-group.transparent .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: transparent !important;
+  border: none !important;
+  border-radius: 0;
+  height: 27px;
+}
+.cura-input-group.transparent .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.transparent .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.transparent .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.transparent .cura-input-field input {
+  color: var(--neutral-black) !important;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold) !important;
   padding: 0;
 }
 .cura-input-group.transparent .cura-input-field input::placeholder {
+  color: var(--neutral-black);
+}
+.cura-input-group.transparent .cura-input-field .feedback-icon {
+  order: 3;
+  margin: 0 20px 0 0;
+}
+.cura-input-group.transparent:focus-within .cura-input-field {
+  border: none !important;
+  background-color: transparent !important;
+}
+.cura-input-group.transparent:focus-within .cura-input-field input {
+  border: none !important;
+  outline: none;
+}
+.cura-input-group.transparent .helper-text {
+  margin-top: 0px;
+}
+.cura-input-group.transparent.transparent {
+  display: flex;
+  background-color: transparent;
+  padding: 0px;
+  justify-content: start;
+  align-items: center;
+  max-height: 80px;
+  gap: 4px;
+}
+.cura-input-group.transparent.transparent .input-wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: start;
+}
+.cura-input-group.transparent.transparent cura-label {
+  margin-bottom: 4px;
+}
+.cura-input-group.transparent.transparent .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 16px;
-  font-style: normal;
+  box-sizing: border-box;
+  background-color: transparent !important;
+  border: none !important;
+  border-radius: 0;
+  height: 27px;
+  overflow: hidden;
+}
+.cura-input-group.transparent.transparent .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
-  line-height: 20px;
-  letter-spacing: 0.32px;
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.transparent.transparent .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.transparent.transparent .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.transparent.transparent .cura-input-field input {
+  order: 1;
+  color: var(--neutral-black) !important;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold) !important;
+  padding: 0;
+}
+.cura-input-group.transparent.transparent .cura-input-field input::placeholder {
   color: var(--neutral-black);
 }
-.cura-input-group.transparent .cura-input-field .clear-button {
+.cura-input-group.transparent.transparent .cura-input-field .clear-button {
   order: 2;
   cursor: pointer;
   margin: 0 20px 0 0;
   padding: 0;
 }
-.cura-input-group.transparent .cura-input-field .feedback-icon {
-  order: 3;
-  margin: 0 20px 0 0;
+.cura-input-group.transparent.transparent .cura-input-field .feedback-icon {
   padding: 6px 0 0 0;
 }
-.cura-input-group.transparent .cura-input-field cura-loader-circle {
+.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle {
   order: 2;
   margin: 0 20px 0 0;
 }
-.cura-input-group.transparent .helper-text {
-  margin-top: 0px;
+.cura-input-group.error .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.transparent.isError .cura-input-field {
+.cura-input-group.error .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.error .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.error .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.error .cura-input-field input {
+  color: var(--error-darker) !important;
+}
+.cura-input-group.error .cura-input-field input::placeholder {
+  color: var(--error-darker) !important;
+}
+.cura-input-group.error.small .cura-input-field {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
   overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.transparent.isError .clear-button {
-  cursor: pointer;
-  margin: 0 16px 0 0;
+.cura-input-group.error.small .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 12px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.error.small .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.error.small .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.error.small .cura-input-field input {
+  line-height: 13px;
+  letter-spacing: 0.72px;
+}
+.cura-input-group.error.small .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-regular);
 }
-.cura-input-group.transparent.isError input {
+.cura-input-group.error.medium .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
   letter-spacing: 0.32px;
   line-height: 20px;
-  color: var(--error-darker);
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.transparent.isError input::placeholder {
-  color: var(--error-darker);
+.cura-input-group.error.medium .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.error.medium .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
 }
-.cura-input-group.transparent.isSuccess .cura-input-field {
+.cura-input-group.error.medium .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.error.medium .cura-input-field input {
+  line-height: 16px;
+  letter-spacing: 0.56px;
+}
+.cura-input-group.error.medium .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-regular);
+}
+.cura-input-group.error.large .cura-input-field {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
   overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.transparent.isSuccess .clear-button {
-  cursor: pointer;
-  margin: 0 16px 0 0;
+.cura-input-group.error.large .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.error.large .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.error.large .cura-input-field .feedback-icon {
+  padding-left: 12px;
 }
-.cura-input-group.transparent.isSuccess input {
+.cura-input-group.error.large .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-bold);
+}
+.cura-input-group.error:not(.transparent).large .cura-input-field {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
   letter-spacing: 0.32px;
   line-height: 20px;
-  color: var(--success-darker);
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid var(--error-dark) !important;
+  background-color: var(--error-lighter) !important;
 }
-.cura-input-group.transparent.isSuccess input::placeholder {
-  color: var(--success-darker);
+.cura-input-group.error:not(.transparent).large .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
 }
-.cura-input-group.transparent.disabled .cura-input-field {
-  color: var(--neutral-medium);
+.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
 }
-.cura-input-group.transparent.disabled .cura-input-field input {
-  color: var(--neutral-medium);
+.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon {
+  padding-left: 12px;
 }
-.cura-input-group.transparent.disabled .cura-input-field input::placeholder {
-  color: var(--neutral-medium);
+.cura-input-group.success .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.transparent.disabled .cura-input-field .helper-text {
-  color: var(--neutral-medium);
+.cura-input-group.success .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
 }
-.cura-input-group.small .cura-input-field {
+.cura-input-group.success .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.success .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.success .cura-input-field input {
+  color: var(--success-darker) !important;
+}
+.cura-input-group.success .cura-input-field input::placeholder {
+  color: var(--success-darker) !important;
+}
+.cura-input-group.success.small .cura-input-field {
+  width: 100%;
   height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.small .cura-input-field input {
+.cura-input-group.success.small .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
   font-size: 12px;
-  font-style: normal;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.success.small .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.success.small .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.success.small .cura-input-field input {
   line-height: 13px;
   letter-spacing: 0.72px;
 }
-.cura-input-group.small .helper-text {
+.cura-input-group.success.small .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
   font-weight: var(--font-weight-regular);
 }
-.cura-input-group.medium .cura-input-field {
+.cura-input-group.success.medium .cura-input-field {
+  width: 100%;
   height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.medium .cura-input-field input {
+.cura-input-group.success.medium .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
   font-size: 14px;
-  font-style: normal;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.success.medium .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.success.medium .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.success.medium .cura-input-field input {
   line-height: 16px;
   letter-spacing: 0.56px;
 }
-.cura-input-group.medium .helper-text {
+.cura-input-group.success.medium .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
   font-weight: var(--font-weight-regular);
 }
-.cura-input-group.large .cura-input-field {
+.cura-input-group.success.large .cura-input-field {
+  width: 100%;
   height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.cura-input-group.large input::placeholder {
+.cura-input-group.success.large .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
   font-size: 16px;
-  font-style: normal;
-  line-height: 20px;
-  letter-spacing: 0.32px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
 }
-.cura-input-group.large .helper-text {
+.cura-input-group.success.large .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.success.large .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.cura-input-group.success.large .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
   font-weight: var(--font-weight-bold);
 }
-.cura-input-group input::-webkit-outer-spin-button,
-.cura-input-group input::-webkit-inner-spin-button {
+.cura-input-group.success:not(.transparent).large .cura-input-field {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid var(--success-dark) !important;
+  background-color: var(--success-lighter) !important;
+}
+.cura-input-group.success:not(.transparent).large .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
+  margin: 0;
 }