@saasquatch/mint-components 1.14.7-1 → 1.14.7-11

package/dist/cjs/{ShadowViewAddon-3c344355.js → ShadowViewAddon-f86d2739.js}

@@ -1713,7 +1713,9 @@ function CheckboxFieldView(props) {
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), global.intl.formatMessage({
+      } }, (!content.checkboxOptional
+      ? { required: false }
+      : { required: true }), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }), global.intl.formatMessage({
       id: content.checkboxName + "-message",
       defaultMessage: content.checkboxLabel,
     }, {

package/dist/cjs/sqm-big-stat_43.cjs.entry.js

@@ -24,7 +24,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-3c344355.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f86d2739.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-feeac99b.js');
 
@@ -1477,7 +1477,14 @@ function useLeadForm(props) {
       validationErrors: {},
     });
     (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFormControls()) === null || _b === void 0 ? void 0 : _b.forEach((c) => {
-      c.value = "";
+      var _a;
+      if (((_a = c.input) === null || _a === void 0 ? void 0 : _a.type) === "checkbox") {
+        c.checked = false;
+        c.value = false;
+      }
+      else {
+        c.value = "";
+      }
     });
     setSuccess(false);
   }

package/dist/cjs/sqm-lead-checkbox-field-view-47675f42.js

@@ -0,0 +1,79 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const global = require('./global-e31dc4f5.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  ErrorStyle: {
+    "&::part(control)": {
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet = JSS.jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadCheckboxFieldView(props) {
+  var _a, _b, _c, _d, _e;
+  const { states, content } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => global.intl.formatMessage({
+    id: `requiredFieldErrorMessage-${checkboxLabel}`,
+    defaultMessage: content.errorMessage,
+  }, {
+    checkboxLabel,
+  });
+  return (index.h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+      } }, (!content.checkboxOptional
+      ? { required: false }
+      : { required: true }), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), global.intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      checkboxLabel: content.checkboxLabel,
+    })))));
+}
+
+exports.LeadCheckboxFieldView = LeadCheckboxFieldView;

package/dist/cjs/sqm-lead-checkbox-field-view-bb9b7c6c.js

@@ -0,0 +1,79 @@
+'use strict';
+
+const index = require('./index-acf63b7d.js');
+const global = require('./global-eec134b3.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-b48f0c33.js');
+
+const style = {
+  ErrorStyle: {
+    "&::part(control)": {
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create$1());
+const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadCheckboxFieldView(props) {
+  var _a, _b, _c, _d, _e;
+  const { states, content } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => global.intl.formatMessage({
+    id: `requiredFieldErrorMessage-${checkboxLabel}`,
+    defaultMessage: content.errorMessage,
+  }, {
+    checkboxLabel,
+  });
+  return (index.h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+      } }, (!content.checkboxOptional
+      ? { required: false }
+      : { required: true }), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), global.intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      checkboxLabel: content.checkboxLabel,
+    })))));
+}
+
+exports.LeadCheckboxFieldView = LeadCheckboxFieldView;

package/dist/cjs/sqm-lead-checkbox-field.cjs.entry.js

@@ -4,105 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+require('./global-e31dc4f5.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
-const JSS = require('./JSS-8503a151.js');
+require('./JSS-8503a151.js');
 const useLeadFormState = require('./useLeadFormState-c83d2034.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-47675f42.js');
 
-const style = {
-  ErrorStyle: {
-    "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
-      borderColor: "var(--sl-color-danger-500)",
-      outline: "var(--sl-color-danger-500)",
-    },
-    "&:host": {
-      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
-    },
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    marginTop: "5px",
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-    fontFamily: "var(--sl-font-sans)",
-    fontWeight: "var(--sl-font-weight-normal)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet = JSS.jss.createStyleSheet(style);
-const styleString = sheet.toString();
-function LeadCheckboxFieldView(props) {
-  var _a, _b, _c, _d, _e, _f;
-  const { states, content, callbacks } = props;
-  const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => global.intl.formatMessage({
-    id: `requiredFieldErrorMessage-${checkboxLabel}`,
-    defaultMessage: content.requiredFieldErrorMessage,
-  }, {
-    checkboxLabel,
-  });
-  return (index.h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
-        e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
-        if (!value && !content.checkboxOptional) {
-          return getRequiredFieldErrorMessage({
-            checkboxLabel: content.checkboxLabel,
-          });
-        }
-      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.checkboxName]) ? {
-      class: sheet.classes.ErrorStyle,
-      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.checkboxName]) || content.requiredFieldErrorMessage,
-    }
-      : [])), global.intl.formatMessage({
-      id: content.checkboxName + "-message",
-      defaultMessage: content.checkboxLabel,
-    }, {
-      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
-}
-
-function useLeadCheckboxField(props) {
-  var _a;
+function useLeadCheckboxField() {
   const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
-  const [checked, setChecked] = stencilHooks_module.useState(false);
-  stencilHooks_module.useEffect(() => {
-    var _a, _b;
-    if ((_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
-      setChecked(!!((_b = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
-    }
-  }, [(_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
   return {
     states: {
       leadFormState,
-      checked,
-    },
-    callbacks: {
-      setChecked,
     },
   };
 }
@@ -150,20 +64,16 @@ const LeadCheckboxField = class {
     const content = {
       ...utils.getProps(this),
     };
-    const { states, callbacks } = index_module.isDemo()
+    const { states } = index_module.isDemo()
       ? useLeadCheckboxFieldDemo(this)
-      : useLeadCheckboxField(this);
-    return (index.h(LeadCheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+      : useLeadCheckboxField();
+    return (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, { states: states, content: content }));
   }
 };
 function useLeadCheckboxFieldDemo(props) {
   return cjs.cjs({
     states: {
-      registrationFormState: {},
-      checked: false,
-    },
-    callbacks: {
-      setChecked: () => { },
+      leadFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -20,6 +20,7 @@ const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
 require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-55b378dc.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-47675f42.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
@@ -35,7 +36,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-3c344355.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f86d2739.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-89308aab.js');
@@ -16064,6 +16065,57 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   WithInitialValue: WithInitialValue$1
 });
 
+const LeadCheckboxField_stories = {
+  title: "Components/Lead Checkbox Field",
+};
+const defaultProps$w = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+    },
+  },
+  content: {
+    checkboxName: "terms",
+    checkboxLabel: "By signing up you agree to the {labelLink}",
+    checkboxLabelLink: "https://example.com",
+    checkboxLabelLinkText: "Terms and Conditions",
+    errorMessage: "{checkboxLabel} Must be checked",
+  },
+};
+const Default$u = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w))));
+const CustomLabel$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { content: {
+    ...defaultProps$w.content,
+    checkboxLabel: "I Agree",
+  } }))));
+const Error$d = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  } }))));
+const CustomError$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  }, content: {
+    ...defaultProps$w.content,
+    errorMessage: "This checkbox must be checked to continue",
+  } }))));
+
+const LeadCheckboxField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': LeadCheckboxField_stories,
+  Default: Default$u,
+  CustomLabel: CustomLabel$3,
+  Error: Error$d,
+  CustomError: CustomError$3
+});
+
 /**
  *
  * Themes
@@ -16076,7 +16128,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$u = `
+const Default$v = `
  // No CSS
 `;
 const Orangey = `
@@ -16110,7 +16162,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$u,
+  Default: Default$v,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18804,6 +18856,7 @@ const stories = [
   LeadForm,
   LeadInputField,
   LeadFormDropdownField,
+  LeadCheckboxField,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -54,7 +54,9 @@ export function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), intl.formatMessage({
+      } }, (!content.checkboxOptional
+      ? { required: false }
+      : { required: true }), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }), intl.formatMessage({
       id: content.checkboxName + "-message",
       defaultMessage: content.checkboxLabel,
     }, {

package/dist/collection/components/sqm-lead-form/LeadCheckboxField.stories.js

@@ -1,60 +1,24 @@
 import { h } from "@stencil/core";
-import { PortalRegisterView, } from "../sqm-portal-register/sqm-portal-register-view";
 import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 import { LeadCheckboxFieldView, } from "./sqm-lead-checkbox-field-view";
-import scenario from "./sqm-checkbox-field.feature";
 export default {
-  title: "Components/Checkbox Field",
-  parameters: {
-    scenario,
-  },
+  title: "Components/Lead Checkbox Field",
 };
 const defaultProps = {
   states: {
     leadFormState: {
       validationErrors: {},
     },
-    checked: false,
   },
   content: {
     checkboxName: "terms",
     checkboxLabel: "By signing up you agree to the {labelLink}",
     checkboxLabelLink: "https://example.com",
     checkboxLabelLinkText: "Terms and Conditions",
-    errorMessage: "Must be checked",
-  },
-  callbacks: {
-    setChecked: () => { },
-  },
-};
-const defaultRegisterProps = {
-  states: {
-    registrationFormState: {},
-    error: "",
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
-    requiredFieldErrorMessage: "Cannot be empty",
-    invalidEmailErrorMessage: "Must be a valid email address",
+    errorMessage: "{checkboxLabel} Must be checked",
   },
 };
 export const Default = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps))));
-export const DefaultChecked = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { states: {
-    ...defaultProps.states,
-    checked: true,
-  } }))));
 export const CustomLabel = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { content: {
     ...defaultProps.content,
     checkboxLabel: "I Agree",
@@ -63,7 +27,7 @@ export const Error = createHookStory(() => (h(LeadCheckboxFieldView, Object.assi
     ...defaultProps.states,
     leadFormState: {
       validationErrors: {
-        agree: "Must be checked",
+        terms: "{checkboxLabel} Must be checked",
       },
     },
   } }))));
@@ -71,33 +35,10 @@ export const CustomError = createHookStory(() => (h(LeadCheckboxFieldView, Objec
     ...defaultProps.states,
     leadFormState: {
       validationErrors: {
-        agree: "Must be checked",
+        terms: "{checkboxLabel} Must be checked",
       },
     },
   }, content: {
     ...defaultProps.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
-export const TermsAndConditions = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
-  //@ts-ignore
-  content: {
-    ...defaultRegisterProps.content,
-    terms: (h("p", null,
-      h("sqm-checkbox-field", null))),
-  } }))));
-export const TermsAndConditionsCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
-  //@ts-ignore
-  content: {
-    ...defaultRegisterProps.content,
-    terms: (h("p", null,
-      "By signing up you agree to the",
-      " ",
-      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
-      h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
-  } }))));
-export const TermsAndConditionsLongCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
-  //@ts-ignore
-  content: {
-    ...defaultRegisterProps.content,
-    terms: (h("sqm-checkbox-field", { "checkbox-label": "Participants must be at least 18 years of age and a legal resident of the U.S. or Canada. By signing up to participate in the rewards program, you agree to the {labelLink}.", "checkbox-label-link": "https://www.example.com", "checkbox-label-link-text": "terms", "checkbox-name": "termsAndConditions" })),
-  } }))));

package/dist/collection/components/sqm-lead-form/sqm-lead-checkbox-field-view.js

@@ -5,7 +5,6 @@ import { intl } from "../../global/global";
 const style = {
   ErrorStyle: {
     "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
       borderColor: "var(--sl-color-danger-500)",
       outline: "var(--sl-color-danger-500)",
     },
@@ -44,11 +43,12 @@ jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function LeadCheckboxFieldView(props) {
-  var _a, _b, _c, _d, _e, _f;
-  const { states, content, callbacks } = props;
+  var _a, _b, _c, _d, _e;
+  const { states, content } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => intl.formatMessage({
     id: `requiredFieldErrorMessage-${checkboxLabel}`,
-    defaultMessage: content.requiredFieldErrorMessage,
+    defaultMessage: content.errorMessage,
   }, {
     checkboxLabel,
   });
@@ -56,23 +56,20 @@ export function LeadCheckboxFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, "onSl-change": (e) => {
         e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
-        if (!value && !content.checkboxOptional) {
-          return getRequiredFieldErrorMessage({
-            checkboxLabel: content.checkboxLabel,
-          });
-        }
-      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.checkboxName]) ? {
+      } }, (!content.checkboxOptional
+      ? { required: false }
+      : { required: true }), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
       class: sheet.classes.ErrorStyle,
-      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.checkboxName]) || content.requiredFieldErrorMessage,
     }
       : [])), intl.formatMessage({
       id: content.checkboxName + "-message",
       defaultMessage: content.checkboxLabel,
     }, {
       labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      checkboxLabel: content.checkboxLabel,
+    })))));
 }

package/dist/collection/components/sqm-lead-form/sqm-lead-checkbox-field.js

@@ -52,10 +52,10 @@ export class LeadCheckboxField {
     const content = {
       ...getProps(this),
     };
-    const { states, callbacks } = isDemo()
+    const { states } = isDemo()
       ? useLeadCheckboxFieldDemo(this)
-      : useLeadCheckboxField(this);
-    return (h(LeadCheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+      : useLeadCheckboxField();
+    return (h(LeadCheckboxFieldView, { states: states, content: content }));
   }
   static get is() { return "sqm-lead-checkbox-field"; }
   static get properties() { return {
@@ -195,7 +195,7 @@ export class LeadCheckboxField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeadCheckboxFieldViewProps>",
-        "resolved": "{ states?: { leadFormState?: LeadFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; requiredFieldErrorMessage?: string; }; }",
+        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -228,11 +228,7 @@ export class LeadCheckboxField {
 function useLeadCheckboxFieldDemo(props) {
   return deepmerge({
     states: {
-      registrationFormState: {},
-      checked: false,
-    },
-    callbacks: {
-      setChecked: () => { },
+      leadFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-lead-form/useCheckboxField.js

@@ -1,23 +1,10 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { LEAD_FORM_STATE_CONTEXT } from "./useLeadFormState";
-export function useLeadCheckboxField(props) {
-  var _a;
+export function useLeadCheckboxField() {
   const leadFormState = useDomContext(LEAD_FORM_STATE_CONTEXT);
-  const [checked, setChecked] = useState(false);
-  useEffect(() => {
-    var _a, _b;
-    if ((_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
-      setChecked(!!((_b = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
-    }
-  }, [(_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
   return {
     states: {
       leadFormState,
-      checked,
-    },
-    callbacks: {
-      setChecked,
     },
   };
 }