@launchpad-ui/form 0.1.0

package/dist/styles/FormField.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,iGAOA,mGAKA,2EAKA,oCAIA","sources":["src/styles/FormField.css"],"sourcesContent":[".FormField-hint {\n  margin: 0;\n  font-size: 1.3rem;\n  color: var(--color-gray-700);\n  fill: var(--color-gray-700);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n  color: var(--color-black-300);\n}\n\n.FormField-errorMessage {\n  color: var(--color-system-red-600);\n  font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n  margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n  margin-top: 0;\n}\n"],"names":[]}

package/dist/styles/FormHint.css

@@ -0,0 +1,2 @@
+.Form-hint{font-size:1.3rem;font-weight:var(--font-weight-regular);color:var(--color-gray-700);margin-top:.3rem;display:block}
+/*# sourceMappingURL=FormHint.css.map */

package/dist/styles/FormHint.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA","sources":["src/styles/FormHint.css"],"sourcesContent":[".Form-hint {\n  display: block;\n  margin-top: 0.3rem;\n  font-size: 1.3rem;\n  font-weight: var(--font-weight-regular);\n  color: var(--color-gray-700);\n}\n"],"names":[]}

package/dist/styles/FormInput.css

@@ -0,0 +1,2 @@
+.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);color:var(--color-black-300);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);background-color:#fff;padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:inset 0 0 0 50px #fff}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-blue-500);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-gray-700);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-blue-500);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}
+/*# sourceMappingURL=FormInput.css.map */

package/dist/styles/FormInput.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAEA,uSAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,mEAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,mHAOA,+HAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,0GAKA,6GAKA,4DAIA,uMAUA,qJAOA","sources":["src/styles/FormInput.css"],"sourcesContent":["/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n  display: block;\n  width: 100%;\n  padding: 0.6rem 1rem;\n  font-size: 1.3rem;\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  background-color: #fff;\n  color: var(--color-black-300);\n  border: 1px solid var(--color-gray-500);\n  border-radius: var(--border-radius);\n  transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n  height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n  background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n  cursor: not-allowed;\n}\n\ntextarea.FormInput {\n  min-height: 2.5em;\n  resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n  background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n  box-shadow: 0 0 0 50px #fff inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n  display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\n\ninput[type='checkbox']:disabled {\n  pointer-events: none;\n}\n\ninput.FormInput--tiny {\n  padding: 0.1rem 0.6rem;\n  height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n  outline: 0;\n  border-color: var(--color-blue-500);\n  box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n  color: var(--color-gray-700);\n  border-color: var(--color-gray-500);\n  box-shadow: none;\n}\n\n.Form-checkbox {\n  align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n  flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n  margin-right: 0.5rem;\n  margin-top: 0.4rem;\n}\n\n.Form-radio {\n  margin-right: 0.5rem;\n}\n\n.FormInput-select {\n  appearance: none;\n  background: transparent;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n  background-size: 2rem;\n  background-repeat: no-repeat;\n  background-position: right 0.4em top 50%, 0 0;\n  padding-right: 2rem;\n}\n\n.FormInput-number {\n  min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n  display: inline-flex;\n  border: 1px solid var(--color-gray-500);\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n  border-color: var(--color-blue-500);\n  box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n  border: none;\n  border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n  box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n  padding: 0 2px;\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-500);\n  cursor: text;\n  display: inline-flex;\n  align-items: center;\n  position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n  appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n"],"names":[]}

package/dist/styles/IconField.css

@@ -0,0 +1,2 @@
+.IconField{position:relative}.IconField .FormInput{padding-left:3rem}.FormInput~.Icon{fill:var(--color-gray-600);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}
+/*# sourceMappingURL=IconField.css.map */

package/dist/styles/IconField.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,6BAIA,wCAIA","sources":["src/styles/IconField.css"],"sourcesContent":[".IconField {\n  position: relative;\n}\n\n.IconField .FormInput {\n  padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n  position: absolute;\n  fill: var(--color-gray-600);\n  top: 50%;\n  transform: translateY(-50%);\n  left: 1rem;\n}\n"],"names":[]}

package/dist/styles/InputGroup.css

@@ -0,0 +1,2 @@
+.InputGroup{display:flex}.InputGroup>*+*{margin-left:1rem}
+/*# sourceMappingURL=InputGroup.css.map */

package/dist/styles/InputGroup.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,yBAIA","sources":["src/styles/InputGroup.css"],"sourcesContent":[".InputGroup {\n  display: flex;\n}\n\n.InputGroup > * + * {\n  margin-left: 1rem;\n}\n"],"names":[]}

package/dist/styles/RequiredAsterisk.css

@@ -0,0 +1,2 @@
+.RequiredAsterisk{margin-left:var(--spacing-1);color:var(--color-system-red-700)}
+/*# sourceMappingURL=RequiredAsterisk.css.map */

package/dist/styles/RequiredAsterisk.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA","sources":["src/styles/RequiredAsterisk.css"],"sourcesContent":[".RequiredAsterisk {\n  margin-left: var(--spacing-1);\n  color: var(--color-system-red-700);\n}\n"],"names":[]}

package/dist/styles/styles.css

@@ -0,0 +1,2 @@
+.CompactTextField{width:100%;position:relative}.CompactTextField .Form-label{color:var(--color-gray-600);opacity:0;pointer-events:none;transform-origin:0 0;z-index:1;background-color:#fff;padding:0 3px;transition:all .1s ease-in-out;position:absolute;top:-2px;left:10px}.CompactTextField.is-active .Form-label{border-radius:var(--border-radius);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.FieldSet{border:none;margin:2rem 0;padding:0}.Form-group{margin:2rem 0}.Form--increasedErrorMargin .Form-group{margin:2.8rem 0}.Form .Form-group:first-child{margin-top:0}.Form .Form-group:last-child{margin-bottom:0}.Form--inline .Form-group{vertical-align:middle;margin:0;display:inline-block}.Form--inline .Form-group+.Form-group,.Form--inline .Form-group+.Button{margin-left:1rem}.Form-label{font-size:1.3rem;font-family:var(--font-family-base);word-break:break-word}.Form-label--disabled{color:var(--color-gray-800)}.Form-labelOptional{margin-left:.4em}.u-d-inline .Form-label+.Form-label{margin-left:1rem}.Form-group .Form-label{align-items:center;margin-bottom:.2rem;display:flex}.Form-group .Form-label+.Form-label{margin-top:.5rem}.Form .Form-error{background:var(--color-system-red-600);color:#fff;font-weight:var(--font-weight-regular);border-radius:var(--border-radius);padding:.7rem 1.4rem}.Form-fieldError{color:var(--color-system-red-600);font-size:1.3rem}.Form--increasedErrorMargin .Form-fieldError{min-height:2.8rem}.Form:not(.Form--inline) .Form-fieldError{text-align:left;padding-top:.5rem;display:block}.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError{padding-top:.1rem;padding-bottom:.5rem}.Form-label .Form-fieldError{float:right}.Form .is-invalid .Form-label{color:var(--color-system-red-600)}::placeholder{color:var(--color-gray-600)}.Form .is-invalid .Select-control,.Form .is-invalid .CustomSelect>div,.Form .is-invalid .FormInput{border-color:var(--color-system-red-600)}.Form--increasedErrorMargin .Form-group.is-invalid{margin-bottom:0}.Form--increasedErrorMargin .Form-group.is-invalid+.Form-group,.Form--increasedErrorMargin .Form-group.is-invalid+.Form-hint{margin-top:0}.FormField-hint{color:var(--color-gray-700);fill:var(--color-gray-700);margin:0;font-size:1.3rem}.Form .FormField .Form-label,.Form .FormField .is-invalid .Form-label{color:var(--color-black-300)}.FormField-errorMessage{color:var(--color-system-red-600);font-size:1.3rem}.FormField.Form-group{margin:1rem 0}.FormField.Form-group:first-child{margin-top:0}.Form-hint{font-size:1.3rem;font-weight:var(--font-weight-regular);color:var(--color-gray-700);margin-top:.3rem;display:block}.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);color:var(--color-black-300);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);background-color:#fff;padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:inset 0 0 0 50px #fff}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-blue-500);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-gray-700);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-blue-500);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}.IconField{position:relative}.IconField .FormInput{padding-left:3rem}.FormInput~.Icon{fill:var(--color-gray-600);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.InputGroup{display:flex}.InputGroup>*+*{margin-left:1rem}.RequiredAsterisk{margin-left:var(--spacing-1);color:var(--color-system-red-700)}
+/*# sourceMappingURL=styles.css.map */

package/dist/styles/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"ACAA,+CAKA,+NAcA,0IEnBA,8CECA,0BAMA,wDAIA,2CAIA,6CAIA,8EAMA,yFAKA,uFAMA,kDAIA,qCAIA,qDAIA,4EAMA,qDAIA,mKAQA,oEAOA,+DAIA,0FAMA,uGAKA,yCAIA,gEAIA,0CAIA,4IAMA,mEAIA,0IC9GA,iGAOA,mGAKA,2EAKA,oCAIA,+CJrBA,8HEEA,uSAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,mEAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,mHAOA,+HAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,0GAKA,6GAKA,4DAIA,uMAUA,qJAOA,sFGlKA,6BAIA,wCAIA,2GCRA,yBAIA,iCCJA","sources":["src/styles/styles.css","src/styles/CompactTextField.css","src/styles/FormHint.css","src/styles/FieldSet.css","src/styles/FormInput.css","src/styles/Form.css","src/styles/FormField.css","src/styles/IconField.css","src/styles/InputGroup.css","src/styles/RequiredAsterisk.css"],"sourcesContent":["@import './CompactTextField.css';\n@import './FieldSet.css';\n@import './Form.css';\n@import './FormField.css';\n@import './FormHint.css';\n@import './FormInput.css';\n@import './IconField.css';\n@import './InputGroup.css';\n@import './RequiredAsterisk.css';\n",".CompactTextField {\n  position: relative;\n  width: 100%;\n}\n\n.CompactTextField .Form-label {\n  position: absolute;\n  top: -2px;\n  left: 10px;\n  padding: 0 3px;\n  color: var(--color-gray-600);\n  opacity: 0;\n  pointer-events: none;\n  background-color: #fff;\n  transform-origin: 0 0; /* preserve left alignment after scaling */\n  transition: all 100ms ease-in-out;\n  z-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.CompactTextField.is-active .Form-label {\n  border-radius: var(--border-radius);\n  opacity: 1;\n  pointer-events: auto;\n  transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n",".Form-hint {\n  display: block;\n  margin-top: 0.3rem;\n  font-size: 1.3rem;\n  font-weight: var(--font-weight-regular);\n  color: var(--color-gray-700);\n}\n",".FieldSet {\n  border: none;\n  margin: 2rem 0;\n  padding: 0;\n}\n","/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n  display: block;\n  width: 100%;\n  padding: 0.6rem 1rem;\n  font-size: 1.3rem;\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  background-color: #fff;\n  color: var(--color-black-300);\n  border: 1px solid var(--color-gray-500);\n  border-radius: var(--border-radius);\n  transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n  height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n  background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n  cursor: not-allowed;\n}\n\ntextarea.FormInput {\n  min-height: 2.5em;\n  resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n  background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n  box-shadow: 0 0 0 50px #fff inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n  display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\n\ninput[type='checkbox']:disabled {\n  pointer-events: none;\n}\n\ninput.FormInput--tiny {\n  padding: 0.1rem 0.6rem;\n  height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n  outline: 0;\n  border-color: var(--color-blue-500);\n  box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n  color: var(--color-gray-700);\n  border-color: var(--color-gray-500);\n  box-shadow: none;\n}\n\n.Form-checkbox {\n  align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n  flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n  margin-right: 0.5rem;\n  margin-top: 0.4rem;\n}\n\n.Form-radio {\n  margin-right: 0.5rem;\n}\n\n.FormInput-select {\n  appearance: none;\n  background: transparent;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n  background-size: 2rem;\n  background-repeat: no-repeat;\n  background-position: right 0.4em top 50%, 0 0;\n  padding-right: 2rem;\n}\n\n.FormInput-number {\n  min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n  display: inline-flex;\n  border: 1px solid var(--color-gray-500);\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n  border-color: var(--color-blue-500);\n  box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n  border: none;\n  border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n  box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n  padding: 0 2px;\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-500);\n  cursor: text;\n  display: inline-flex;\n  align-items: center;\n  position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n  appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n","/* stylelint-disable no-descending-specificity */\n.Form-group {\n  margin: 2rem 0;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n  should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-group {\n  margin: 2.8rem 0;\n}\n\n.Form .Form-group:first-child {\n  margin-top: 0;\n}\n\n.Form .Form-group:last-child {\n  margin-bottom: 0;\n}\n\n.Form--inline .Form-group {\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n}\n\n.Form--inline .Form-group + .Form-group,\n.Form--inline .Form-group + .Button {\n  margin-left: 1rem;\n}\n\n.Form-label {\n  font-size: 1.3rem;\n  font-family: var(--font-family-base);\n  word-break: break-word;\n}\n\n.Form-label--disabled {\n  color: var(--color-gray-800);\n}\n\n.Form-labelOptional {\n  margin-left: 0.4em;\n}\n\n.u-d-inline .Form-label + .Form-label {\n  margin-left: 1rem;\n}\n\n.Form-group .Form-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.2rem;\n}\n\n.Form-group .Form-label + .Form-label {\n  margin-top: 0.5rem;\n}\n\n.Form .Form-error {\n  background: var(--color-system-red-600);\n  color: #fff;\n  font-weight: var(--font-weight-regular);\n  padding: 0.7rem 1.4rem;\n  border-radius: var(--border-radius);\n}\n\n.Form-fieldError {\n  color: var(--color-system-red-600);\n  font-size: 1.3rem;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n  should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-fieldError {\n  min-height: 2.8rem;\n}\n\n.Form:not(.Form--inline) .Form-fieldError {\n  display: block;\n  padding-top: 0.5rem;\n  text-align: left;\n}\n\n.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {\n  padding-top: 0.1rem;\n  padding-bottom: 0.5rem;\n}\n\n.Form-label .Form-fieldError {\n  float: right;\n}\n\n.Form .is-invalid .Form-label {\n  color: var(--color-system-red-600);\n}\n\n::placeholder {\n  color: var(--color-gray-600);\n}\n\n.Form .is-invalid .Select-control,\n.Form .is-invalid .CustomSelect > div,\n.Form .is-invalid .FormInput {\n  border-color: var(--color-system-red-600);\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid {\n  margin-bottom: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {\n  margin-top: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {\n  margin-top: 0;\n}\n/* stylelint-enable no-descending-specificity */\n",".FormField-hint {\n  margin: 0;\n  font-size: 1.3rem;\n  color: var(--color-gray-700);\n  fill: var(--color-gray-700);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n  color: var(--color-black-300);\n}\n\n.FormField-errorMessage {\n  color: var(--color-system-red-600);\n  font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n  margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n  margin-top: 0;\n}\n",".IconField {\n  position: relative;\n}\n\n.IconField .FormInput {\n  padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n  position: absolute;\n  fill: var(--color-gray-600);\n  top: 50%;\n  transform: translateY(-50%);\n  left: 1rem;\n}\n",".InputGroup {\n  display: flex;\n}\n\n.InputGroup > * + * {\n  margin-left: 1rem;\n}\n",".RequiredAsterisk {\n  margin-left: var(--spacing-1);\n  color: var(--color-system-red-700);\n}\n"],"names":[]}

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+declare type FieldPath = string | string[];
+declare const createFieldErrorId: (fieldIdentifier?: FieldPath) => string | undefined;
+export { createFieldErrorId };
+export type { FieldPath };
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,aAAK,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEnC,QAAA,MAAM,kBAAkB,qBAAsB,SAAS,uBACe,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@launchpad-ui/form",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Elements for composing forms, such as input fields, labels, radio buttons, etc.",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles/*": "./dist/styles/*"
+  },
+  "source": "src/index.ts",
+  "dependencies": {
+    "@launchpad-ui/icons": "~0.1.5",
+    "@launchpad-ui/tokens": "~0.1.4",
+    "@react-aria/visually-hidden": "^3.3.0",
+    "clsx": "^1.1.1",
+    "lodash-es": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.6",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json && node build.js",
+    "clean": "rm -rf dist",
+    "e2e": "exit 0",
+    "lint": "eslint '**/*.{ts,tsx,js}' && stylelint '**/*.css' --ignore-path ../../.stylelintignore",
+    "test": "vitest run --coverage"
+  }
+}