@saasquatch/mint-components 1.5.3-3 → 1.5.3-6

package/dist/esm/sqm-stencilbook.entry.js

@@ -23,7 +23,7 @@ import { P as PortalContainerView } from './sqm-portal-container-view-34f26e2a.j
 import { P as PortalProfileView } from './sqm-portal-profile-view-28c39970.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-e0436989.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c489166b.js';
-import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-63a40a95.js';
+import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-87c6e4d6.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-c8d1c727.js';
 
 /**
@@ -9377,7 +9377,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
 
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                                                          | Type                                                                                                                                                                                        | Default                    |\r\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\r\n| `demoData`     | --              |                                                                      | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`   | `email-label`   |                                                                      | `string`                                                                                                                                                                                    | `\"Email\"`                  |\r\n| `loginPath`    | `login-path`    |                                                                      | `string`                                                                                                                                                                                    | `\"/login\"`                 |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`         |\r\n| `submitLabel`  | `submit-label`  |                                                                      | `string`                                                                                                                                                                                    | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\r\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\r\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\r\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\r\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
@@ -9889,7 +9889,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const scenario$i = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background:\r\n    Given a user is viewing the \"/register\"\r\n    And the registration page has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-optional=\"true\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the value of the checkbox is submitted under \"myCheckBox\" field";
+const scenario$i = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background: A user is on the portal registration page\r\n    Given a user is viewing the \"/register\"\r\n    And \"/register\" contains the registration form\r\n    And the registration form has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given the user is filling out the registration form\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When they try to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-optional=\"true\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    The error message string is evaluated as an ICU string, but currently is provided no context\r\n    Given the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the value of the checkbox is submitted under \"myCheckBox\" field\r\n\r\n  @minutae\r\n  Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n    Given the checkbox <mayHave> prop \"checkbox-name\"\r\n    And it <mayHavePropValue>\r\n    When a user views the checkbox\r\n    Then an alert with an error message is displayed in place of the checkbox\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n    Examples:\r\n      | mayBeAnAttribute | mayHavePropValue |\r\n      | doesn't have     | N/A              |\r\n      | has              | \"\"               |\r\n      | has              |                  |";
 
 const CheckboxField_stories = {
   title: "Components/Checkbox Field",
@@ -9948,8 +9948,11 @@ const Error$3 = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, de
 const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
     ...defaultProps$a.states,
     validationErrors: {
-      agree: "This checkbox must be checked to continue",
+      agree: "Must be checked",
     },
+  }, content: {
+    ...defaultProps$a.content,
+    errorMessage: "This checkbox must be checked to continue",
   } }))));
 const TermsAndConditions$1 = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
@@ -10035,7 +10038,7 @@ const MultipleCheckboxes = createHookStory(() => {
     h("sqm-name-fields", { slot: "formData" }),
     h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
     h("div", { slot: "terms" },
-      h("sqm-checkbox-field", null))));
+      h("sqm-checkbox-field", { "checkbox-name": "otherCheckbox" }))));
 });
 const OptionalCheckboxes = createHookStory(() => {
   setupGraphQL$9();
@@ -10043,7 +10046,7 @@ const OptionalCheckboxes = createHookStory(() => {
     h("sqm-name-fields", { slot: "formData" }),
     h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
     h("div", { slot: "terms" },
-      h("sqm-checkbox-field", null))));
+      h("sqm-checkbox-field", { "checkbox-name": "required" }))));
 });
 const MissingName = createHookStory(() => {
   setupGraphQL$9();
@@ -10166,7 +10169,7 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
   MissingName: MissingName$1
 });
 
-const scenario$j = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text, a number,\r\n    date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field\r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-optional\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | false | is    | appears        |\r\n            |       | is    | appears        |\r\n            | true  | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: The validation error message is configurable\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"number\"\r\n        When the user views the input field\r\n        And the hover over it\r\n        Then they see up and down arrows on the right hand side\r\n        When they click the up arrow\r\n        Then the number in the input field increments\r\n        When they click the down arrow\r\n        Then the number in the input field decrements\r\n        When they click the input\r\n        And try to enter text characters\r\n        Then nothing happens\r\n        When they click the input field\r\n        Then they are able to input numbers\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        And it has a \"field-name\"\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formInput> is recorded in the form data as a string\r\n        Examples:\r\n            | value  | formInput      |\r\n            | text   | Hello there    |\r\n            | number | 123            |\r\n            | date   | 05/07/2021     |\r\n            | tel    | (250) 234-9877 |\r\n\r\n    @landmine\r\n    Scenario: Input fields without field names appear under \"/undefined\" in the form data\r\n        Given the input does not have prop \"field-name\"\r\n        When the users enters a value in the input\r\n        And they register\r\n        Then the value of the input is recorded under \"/undefined\" in the form data";
+const scenario$j = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text,\r\n    a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field\r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-optional\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | false | is    | appears        |\r\n            |       | is    | appears        |\r\n            | true  | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: The validation error message is configurable\r\n        The error message string is evaluated as an ICU string, but currently is provided no context\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        And it has a \"field-name\"\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formData> is recorded in the form data as a string\r\n        Examples:\r\n            | value | formInput      | formData       |\r\n            | text  | Hello there    | Hello there    |\r\n            | date  | 05/07/2021     | 2021-05-07     |\r\n            | tel   | (250) 234-9877 | (250) 234-9877 |\r\n\r\n    @minutae\r\n    Scenario Outline: The input field component fails fast if a field name isn't provided\r\n        Given the input <mayHave> prop \"field-name\"\r\n        And it <mayHavePropValue>\r\n        When a user views the input\r\n        Then an alert with an error message is displayed in place of the input\r\n        And it has a details section\r\n        When \"More details\" is clicked\r\n        Then the following information will be displayed\r\n            | component being used |\r\n            | missing attribute(s) |\r\n        Examples:\r\n            | mayBeAnAttribute | mayHavePropValue |\r\n            | doesn't have     | N/A              |\r\n            | has              | \"\"               |\r\n            | has              |                  |";
 
 const InputField_stories = {
   title: "Components/Input Field",