@justifi/webcomponents 4.0.5 → 4.2.0

package/dist/collection/components/billing-form/billing-form.css

@@ -67,6 +67,343 @@
   --bs-highlight-bg: #fff3cd;
 }
 
+.spinner-grow,
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+
+.spinner-border-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+  --bs-spinner-border-width: 0.2em;
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.spinner-grow {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-grow;
+  background-color: currentcolor;
+  opacity: 0;
+}
+
+.spinner-grow-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border,
+  .spinner-grow {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.text-bg-primary {
+  color: #fff !important;
+  background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-secondary {
+  color: #fff !important;
+  background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-success {
+  color: #fff !important;
+  background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-info {
+  color: #000 !important;
+  background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-warning {
+  color: #000 !important;
+  background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-danger {
+  color: #fff !important;
+  background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-light {
+  color: #000 !important;
+  background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-dark {
+  color: #fff !important;
+  background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
+}
+
+.link-primary {
+  color: #0d6efd !important;
+}
+.link-primary:hover, .link-primary:focus {
+  color: #0a58ca !important;
+}
+
+.link-secondary {
+  color: #6c757d !important;
+}
+.link-secondary:hover, .link-secondary:focus {
+  color: #565e64 !important;
+}
+
+.link-success {
+  color: #198754 !important;
+}
+.link-success:hover, .link-success:focus {
+  color: #146c43 !important;
+}
+
+.link-info {
+  color: #0dcaf0 !important;
+}
+.link-info:hover, .link-info:focus {
+  color: #3dd5f3 !important;
+}
+
+.link-warning {
+  color: #ffc107 !important;
+}
+.link-warning:hover, .link-warning:focus {
+  color: #ffcd39 !important;
+}
+
+.link-danger {
+  color: #dc3545 !important;
+}
+.link-danger:hover, .link-danger:focus {
+  color: #b02a37 !important;
+}
+
+.link-light {
+  color: #f8f9fa !important;
+}
+.link-light:hover, .link-light:focus {
+  color: #f9fafb !important;
+}
+
+.link-dark {
+  color: #212529 !important;
+}
+.link-dark:hover, .link-dark:focus {
+  color: #1a1e21 !important;
+}
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 1020;
+}
+
+@media (min-width: 576px) {
+  .sticky-sm-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-sm-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 768px) {
+  .sticky-md-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-md-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 992px) {
+  .sticky-lg-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-lg-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1200px) {
+  .sticky-xl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xxl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentcolor;
+  opacity: 0.25;
+}
+
 *,
 *::before,
 *::after {

package/dist/collection/components/billing-form/billing-form.js

@@ -188,3 +188,4 @@ export class BillingForm {
       }];
   }
 }
+//# sourceMappingURL=billing-form.js.map

package/dist/collection/components/billing-form/billing-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"billing-form.js","sourceRoot":"","sources":["../../../../src/components/billing-form/billing-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,iBAAwC,MAAM,uBAAuB,CAAC;AAC7E,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAE3C;;;;GAIG;AAMH,MAAM,OAAO,WAAW;;IAkEtB,gBAAW,GAAG,CAAC,kBAAS,IAAI,CAAC,MAAM,CAAU,CAAC,CAAC;;yBA7DH;MAC1C,IAAI,EAAE,EAAE;MACR,aAAa,EAAE,EAAE;MACjB,aAAa,EAAE,EAAE;MACjB,YAAY,EAAE,EAAE;MAChB,aAAa,EAAE,EAAE;MACjB,mBAAmB,EAAE,EAAE;KACxB;+BAEmC,EAAE;;EAGtC,YAAY,CAAC,KAAK;IAChB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC1B,MAAM,kBAAkB,qBAAQ,IAAI,CAAC,aAAa,CAAE,CAAC;IACrD,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;MAC3C,IAAI,CAAC,aAAa,GAAG,kBAAkB,CAAC;KACzC;EACH,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,IAAI,CAAC,MAAyB;IAClC,IAAI,CAAC,aAAa,qBAAQ,MAAM,CAAE,CAAC;EACrC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,IAAI,OAAO,GAAY,IAAI,CAAC;IAE5B,IAAI;MACF,MAAM,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;KAC7E;IAAC,OAAO,GAAG,EAAE;MACZ,OAAO,GAAG,KAAK,CAAC;MAChB,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAqB,EAAE,EAAE;QACtC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;MACtC,CAAC,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;IAErC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;EAC9B,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,SAAS;IACb,OAAO,IAAI,CAAC,aAAa,CAAC;EAC5B,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C;QACG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW;QAChC,WAAK,KAAK,EAAC,UAAU;UACnB,WAAK,KAAK,EAAC,QAAQ;YACjB,kBAAY,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,GAAI,CACrH;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,kBAAY,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,gBAAgB,EAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,aAAa,GAAI,CACrJ;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,kBACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,mCAAmC,EACzC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa,EAC9C,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,aAAa,GAC7C,CACE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,kBAAY,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,YAAY,GAAI,CACxI;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,oBACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa,EAC9C,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,aAAa,GAC7C,CACE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,kBAAY,IAAI,EAAC,qBAAqB,EAAC,KAAK,EAAC,KAAK,EAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,GAAI,CAC5J,CACF,CACG,CACN,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, State, Listen, Method, Prop } from '@stencil/core';\nimport { ValidationError } from 'yup';\nimport BillingFormSchema, { BillingFormFields } from './billing-form-schema';\nimport StateOptions from './state-options';\n\n/**\n * @exportedPart label: Label for inputs\n * @exportedPart input: The input fields\n * @exportedPart input-invalid: Invalid state for inputs\n */\n@Component({\n  tag: 'justifi-billing-form',\n  styleUrl: 'billing-form.scss',\n  shadow: true,\n})\nexport class BillingForm {\n  /**\n   * (Optional) A label for the form.\n   */\n  @Prop() legend?: string;\n  @State() billingFields: BillingFormFields = {\n    name: '',\n    address_line1: '',\n    address_line2: '',\n    address_city: '',\n    address_state: '',\n    address_postal_code: '',\n  };\n\n  @State() billingFieldsErrors: any = {};\n\n  @Listen('fieldReceivedInput')\n  setFormValue(event) {\n    const data = event.detail;\n    const billingFieldsClone = { ...this.billingFields };\n    if (data.name) {\n      billingFieldsClone[data.name] = data.value;\n      this.billingFields = billingFieldsClone;\n    }\n  }\n\n  /**\n   * Method for filling the form with provided data\n   * @argument {BillingFormFields} fields - The fields to fill the form with\n   */\n  @Method()\n  async fill(fields: BillingFormFields) {\n    this.billingFields = { ...fields };\n  }\n\n  /**\n   * Run validation on the form\n   */\n  @Method()\n  async validate() {\n    const newErrors = {};\n    let isValid: boolean = true;\n\n    try {\n      await BillingFormSchema.validate(this.billingFields, { abortEarly: false });\n    } catch (err) {\n      isValid = false;\n      err.inner.map((item: ValidationError) => {\n        newErrors[item.path] = item.message;\n      });\n    }\n\n    this.billingFieldsErrors = newErrors;\n\n    return { isValid: isValid };\n  }\n\n  /**\n   * Returns the values of the form as an object\n   * @returns {Promise<BillingFormFields>} The values of the form\n   */\n  @Method()\n  async getValues(): Promise<BillingFormFields> {\n    return this.billingFields;\n  }\n\n  legendBlock = (<legend>{this.legend}</legend>);\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <fieldset>\n          {this.legend && this.legendBlock}\n          <div class=\"row gy-3\">\n            <div class=\"col-12\">\n              <text-input name=\"name\" label=\"Full Name\" defaultValue={this.billingFields.name} error={this.billingFieldsErrors.name} />\n            </div>\n            <div class=\"col-12\">\n              <text-input name=\"address_line1\" label=\"Street Address\" defaultValue={this.billingFields.address_line1} error={this.billingFieldsErrors.address_line1} />\n            </div>\n            <div class=\"col-12\">\n              <text-input\n                name=\"address_line2\"\n                label=\"Apartment, Suite, etc. (optional)\"\n                defaultValue={this.billingFields.address_line2}\n                error={this.billingFieldsErrors.address_line2}\n              />\n            </div>\n            <div class=\"col-12\">\n              <text-input name=\"address_city\" label=\"City\" defaultValue={this.billingFields.address_city} error={this.billingFieldsErrors.address_city} />\n            </div>\n            <div class=\"col-12\">\n              <select-input\n                name=\"address_state\"\n                label=\"State\"\n                options={StateOptions}\n                defaultValue={this.billingFields.address_state}\n                error={this.billingFieldsErrors.address_state}\n              />\n            </div>\n            <div class=\"col-12\">\n              <text-input name=\"address_postal_code\" label=\"ZIP\" defaultValue={this.billingFields.address_postal_code} error={this.billingFieldsErrors.address_postal_code} />\n            </div>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/billing-form/billing-form.stories.js

@@ -59,3 +59,4 @@ Styled.args = {
     --jfi-error-message-font-size: .875rem;
   `,
 };
+//# sourceMappingURL=billing-form.stories.js.map

package/dist/collection/components/billing-form/billing-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"billing-form.stories.js","sourceRoot":"","sources":["../../../../src/components/billing-form/billing-form.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,EAAE;CACf,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,IAAU,EAAE,EAAE;EAC9B,OAAO;;;;YAIG,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;kBAKrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;;;GAInC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,MAAM,EAAE,cAAc;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,QAAQ,EAAE,qBAAqB;EAC/B,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BhB;CACF,CAAC","sourcesContent":["export default {\n  title: 'Components/BillingForm',\n  component: 'justifi-billing-form',\n  parameters: {},\n};\n\ntype Args = {\n  'legend': string;\n  'css-variables'?: string;\n};\n\nconst Template = (args: Args) => {\n  return `\n    <div>\n      <style>\n        :root {\n          ${args['css-variables'] || ''}\n        }\n        </style>\n      <justifi-billing-form\n        data-testid=\"billing-form-iframe\"\n        legend=\"${args['legend'] || ''}\"\n\n      />\n    </div>\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  legend: 'Billing Form',\n};\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'legend': 'Styled Billing Form',\n  'css-variables': `\n    --jfi-layout-padding: 0;\n    --jfi-layout-form-control-spacing-x: .5rem;\n    --jfi-layout-form-control-spacing-y: 1rem;\n    --jfi-form-label-font-weight: 700;\n    --jfi-form-label-font-family: sans-serif;\n    --jfi-form-label-margin: 0 0 .5rem 0;\n    --jfi-form-control-background-color: #F4F4F6;\n    --jfi-form-control-background-color-hover: #EEEEF5;\n    --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n    --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n    --jfi-form-control-border-color-focus: #fccc32;\n    --jfi-form-control-border-color-error: #C12727;\n    --jfi-form-control-border-top-width: 0;\n    --jfi-form-control-border-left-width: 0;\n    --jfi-form-control-border-bottom-width: 1px;\n    --jfi-form-control-border-right-width: 0;\n    --jfi-form-control-border-radius: 4px 4px 0 0;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-box-shadow-focus: none;\n    --jfi-form-control-box-shadow-error-focus: none;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-color: #212529;\n    --jfi-form-control-font-size: 1rem;\n    --jfi-form-control-font-weight: 400;\n    --jfi-form-control-line-height: 2;\n    --jfi-form-control-margin: 0;\n    --jfi-form-control-padding: .5rem .875rem;\n    --jfi-error-message-color: #C12727;\n    --jfi-error-message-margin: .25rem 0 0 0;\n    --jfi-error-message-font-size: .875rem;\n  `,\n};\n"]}

package/dist/collection/components/billing-form/state-options.js

@@ -241,3 +241,4 @@ const StateOptions = [
   },
 ];
 export default StateOptions;
+//# sourceMappingURL=state-options.js.map

package/dist/collection/components/billing-form/state-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-options.js","sourceRoot":"","sources":["../../../../src/components/billing-form/state-options.ts"],"names":[],"mappings":"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","sourcesContent":["const StateOptions = [\n  {\n    label: 'Choose state',\n    value: '',\n  },\n  {\n    label: 'Alabama',\n    value: 'AL',\n  },\n  {\n    label: 'Alaska',\n    value: 'AK',\n  },\n  {\n    label: 'American Samoa',\n    value: 'AS',\n  },\n  {\n    label: 'Arizona',\n    value: 'AZ',\n  },\n  {\n    label: 'Arkansas',\n    value: 'AR',\n  },\n  {\n    label: 'California',\n    value: 'CA',\n  },\n  {\n    label: 'Colorado',\n    value: 'CO',\n  },\n  {\n    label: 'Connecticut',\n    value: 'CT',\n  },\n  {\n    label: 'Delaware',\n    value: 'DE',\n  },\n  {\n    label: 'District Of Columbia',\n    value: 'DC',\n  },\n  {\n    label: 'Federated States Of Micronesia',\n    value: 'FM',\n  },\n  {\n    label: 'Florida',\n    value: 'FL',\n  },\n  {\n    label: 'Georgia',\n    value: 'GA',\n  },\n  {\n    label: 'Guam',\n    value: 'GU',\n  },\n  {\n    label: 'Hawaii',\n    value: 'HI',\n  },\n  {\n    label: 'Idaho',\n    value: 'ID',\n  },\n  {\n    label: 'Illinois',\n    value: 'IL',\n  },\n  {\n    label: 'Indiana',\n    value: 'IN',\n  },\n  {\n    label: 'Iowa',\n    value: 'IA',\n  },\n  {\n    label: 'Kansas',\n    value: 'KS',\n  },\n  {\n    label: 'Kentucky',\n    value: 'KY',\n  },\n  {\n    label: 'Louisiana',\n    value: 'LA',\n  },\n  {\n    label: 'Maine',\n    value: 'ME',\n  },\n  {\n    label: 'Marshall Islands',\n    value: 'MH',\n  },\n  {\n    label: 'Maryland',\n    value: 'MD',\n  },\n  {\n    label: 'Massachusetts',\n    value: 'MA',\n  },\n  {\n    label: 'Michigan',\n    value: 'MI',\n  },\n  {\n    label: 'Minnesota',\n    value: 'MN',\n  },\n  {\n    label: 'Mississippi',\n    value: 'MS',\n  },\n  {\n    label: 'Missouri',\n    value: 'MO',\n  },\n  {\n    label: 'Montana',\n    value: 'MT',\n  },\n  {\n    label: 'Nebraska',\n    value: 'NE',\n  },\n  {\n    label: 'Nevada',\n    value: 'NV',\n  },\n  {\n    label: 'New Hampshire',\n    value: 'NH',\n  },\n  {\n    label: 'New Jersey',\n    value: 'NJ',\n  },\n  {\n    label: 'New Mexico',\n    value: 'NM',\n  },\n  {\n    label: 'New York',\n    value: 'NY',\n  },\n  {\n    label: 'North Carolina',\n    value: 'NC',\n  },\n  {\n    label: 'North Dakota',\n    value: 'ND',\n  },\n  {\n    label: 'Northern Mariana Islands',\n    value: 'MP',\n  },\n  {\n    label: 'Ohio',\n    value: 'OH',\n  },\n  {\n    label: 'Oklahoma',\n    value: 'OK',\n  },\n  {\n    label: 'Oregon',\n    value: 'OR',\n  },\n  {\n    label: 'Palau',\n    value: 'PW',\n  },\n  {\n    label: 'Pennsylvania',\n    value: 'PA',\n  },\n  {\n    label: 'Puerto Rico',\n    value: 'PR',\n  },\n  {\n    label: 'Rhode Island',\n    value: 'RI',\n  },\n  {\n    label: 'South Carolina',\n    value: 'SC',\n  },\n  {\n    label: 'South Dakota',\n    value: 'SD',\n  },\n  {\n    label: 'Tennessee',\n    value: 'TN',\n  },\n  {\n    label: 'Texas',\n    value: 'TX',\n  },\n  {\n    label: 'Utah',\n    value: 'UT',\n  },\n  {\n    label: 'Vermont',\n    value: 'VT',\n  },\n  {\n    label: 'Virgin Islands',\n    value: 'VI',\n  },\n  {\n    label: 'Virginia',\n    value: 'VA',\n  },\n  {\n    label: 'Washington',\n    value: 'WA',\n  },\n  {\n    label: 'West Virginia',\n    value: 'WV',\n  },\n  {\n    label: 'Wisconsin',\n    value: 'WI',\n  },\n  {\n    label: 'Wyoming',\n    value: 'WY',\n  },\n];\n\nexport default StateOptions;\n"]}

package/dist/collection/components/billing-form/test/billing-form.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { BillingForm } from '../billing-form';
+describe('Billing Form', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [BillingForm],
+      html: `<justifi-billing-form />`,
+    });
+    expect(page.root).toEqualHtml(`
+      <justifi-billing-form>
+        <mock:shadow-root>
+          <fieldset>
+          <text-input defaultvalue="" label="Street Address" name="address_line1"></text-input>
+          <text-input defaultvalue="" label="Apartment, Suite, etc. (optional)" name="address_line2"></text-input>
+          <text-input defaultvalue="" label="City" name="address_city"></text-input>
+          <select-input defaultvalue="" label="State" name="address_state"></select-input>
+          <text-input defaultvalue="" label="ZIP" name="address_postal_code"></text-input>
+          </fieldset>
+        </mock:shadow-root>
+      </justifi-billing-form>
+    `);
+  });
+  it('has a validate method and is calllable', () => {
+    const billingForm = new BillingForm();
+    expect(billingForm.validate).toBeDefined();
+    const validateSpy = jest.spyOn(billingForm, 'validate');
+    billingForm.validate();
+    expect(validateSpy).toHaveBeenCalled();
+  });
+});
+//# sourceMappingURL=billing-form.spec.js.map

package/dist/collection/components/billing-form/test/billing-form.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"billing-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/billing-form/test/billing-form.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,0BAA0B;KACjC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EACH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;IAChD,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;IACtC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;IAE3C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IACxD,WAAW,CAAC,QAAQ,EAAE,CAAC;IACvB,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { BillingForm } from '../billing-form';\n\ndescribe('Billing Form', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [BillingForm],\n      html: `<justifi-billing-form />`,\n    });\n    expect(page.root).toEqualHtml(`\n      <justifi-billing-form>\n        <mock:shadow-root>\n          <fieldset>\n          <text-input defaultvalue=\"\" label=\"Street Address\" name=\"address_line1\"></text-input>\n          <text-input defaultvalue=\"\" label=\"Apartment, Suite, etc. (optional)\" name=\"address_line2\"></text-input>\n          <text-input defaultvalue=\"\" label=\"City\" name=\"address_city\"></text-input>\n          <select-input defaultvalue=\"\" label=\"State\" name=\"address_state\"></select-input>\n          <text-input defaultvalue=\"\" label=\"ZIP\" name=\"address_postal_code\"></text-input>\n          </fieldset>\n        </mock:shadow-root>\n      </justifi-billing-form>\n    `);\n  });\n  it('has a validate method and is calllable', () => {\n    const billingForm = new BillingForm();\n    expect(billingForm.validate).toBeDefined();\n\n    const validateSpy = jest.spyOn(billingForm, 'validate');\n    billingForm.validate();\n    expect(validateSpy).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/business-address/business-address-schema.js

@@ -11,3 +11,4 @@ const BusinessAddressFormSchema = object({
     .min(5, 'Enter a valid ZIP')
 });
 export default BusinessAddressFormSchema;
+//# sourceMappingURL=business-address-schema.js.map

package/dist/collection/components/business-address/business-address-schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"business-address-schema.js","sourceRoot":"","sources":["../../../../src/components/business-address/business-address-schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAWjC,MAAM,yBAAyB,GAAG,MAAM,CAAC;EACvC,KAAK,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,sBAAsB,CAAC;EAChD,KAAK,EAAE,MAAM,EAAE;EACf,IAAI,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC;EACrC,KAAK,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;EACxC,WAAW,EAAE,MAAM,EAAE;KAClB,QAAQ,CAAC,WAAW,CAAC;KACrB,OAAO,CAAC,QAAQ,EAAE,mBAAmB,CAAC;KACtC,GAAG,CAAC,CAAC,EAAE,mBAAmB,CAAC;CAC/B,CAAC,CAAC;AAEH,eAAe,yBAAyB,CAAC","sourcesContent":["import { object, string } from 'yup';\n\nexport const RegExZip = /^\\d{5}/;\n\nexport interface BusinessAddressFormFields {\n  line1: string;\n  line2?: string;\n  city: string;\n  state: string;\n  postal_code: string;\n  country: string;\n}\n\nconst BusinessAddressFormSchema = object({\n  line1: string().required('Enter street address'),\n  line2: string(),\n  city: string().required('Enter city'),\n  state: string().required('Choose state'),\n  postal_code: string()\n    .required('Enter ZIP')\n    .matches(RegExZip, 'Enter a valid ZIP')\n    .min(5, 'Enter a valid ZIP')\n});\n\nexport default BusinessAddressFormSchema;"]}