import { h } from './index-38ad4957.js';
import { i as intl } from './global-96c14d63.js';
import { k as useState, y } from './dom-context-hooks.module-50442785.js';
import { _ } from './index.module-b23fdad8.js';
import { c as createStyleSheet } from './JSS-67b5cff8.js';

const style = {
  IconStyle: {
    display: "block",
    position: "absolute",
    top: "23px",
  },
  DivStyle: {
    marginLeft: "28px",
  },
  Details: {
    marginLeft: "28px",
  },
  Heading: {
    display: "inline-block",
  },
  Children: {
    display: "none",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
  if (!missingProps)
    return false;
  const host = _();
  const [detailsOpen, setDetailsOpen] = useState(false);
  return (h("sl-alert", { type: "danger", open: true },
    h("style", { type: "text/css" }, styleString),
    h("div", { slot: "icon", class: sheet.classes.IconStyle },
      h("sl-icon", { name: "exclamation-octagon" })),
    h("div", { class: sheet.classes.DivStyle },
      h("h2", { class: sheet.classes.Heading }, intl.formatMessage({
        id: `error-heading`,
        defaultMessage: heading,
      })),
      h("p", null, intl.formatMessage({
        id: `error-subheading`,
        defaultMessage: subheading,
      }))),
    h("details", { class: sheet.classes.Details },
      h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
        detailsOpen ? "Less" : "More",
        " details"),
      h("p", null, intl.formatMessage({
        id: `error-description`,
        defaultMessage: description,
      }, { tagName: host.tagName.toLowerCase() })),
      h("ul", null, missingProps.map((prop) => (h("li", null,
        h("strong", null, prop.attribute)))))),
    h("div", { class: sheet.classes.Children }, children)));
}

const LEAD_FORM_STATE_CONTEXT = "sq:lead-form-state";
const LEAD_FORM_STATE_CONTEXT_INTERNAL = "sq:lead-form-state-internal";
function useLeadFormState(formState) {
  const host = _();
  const [leadFormState, setLeadFormState] = y(host, LEAD_FORM_STATE_CONTEXT, formState);
  y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
  return { leadFormState, setLeadFormState };
}

export { LEAD_FORM_STATE_CONTEXT as L, RequiredPropsError as R, useLeadFormState as u };
