'use strict';

const index = require('./index-8277cbb3.js');
const global = require('./global-b7b1b8fe.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
const index_module = require('./index.module-f8c8495f.js');
const JSS = require('./JSS-8503a151.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 = JSS.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 = index_module._();
  const [detailsOpen, setDetailsOpen] = domContextHooks_module.useState(false);
  return (index.h("sl-alert", { type: "danger", open: true },
    index.h("style", { type: "text/css" }, styleString),
    index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
      index.h("sl-icon", { name: "exclamation-octagon" })),
    index.h("div", { class: sheet.classes.DivStyle },
      index.h("h2", { class: sheet.classes.Heading }, global.intl.formatMessage({
        id: `error-heading`,
        defaultMessage: heading,
      })),
      index.h("p", null, global.intl.formatMessage({
        id: `error-subheading`,
        defaultMessage: subheading,
      }))),
    index.h("details", { class: sheet.classes.Details },
      index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
        detailsOpen ? "Less" : "More",
        " details"),
      index.h("p", null, global.intl.formatMessage({
        id: `error-description`,
        defaultMessage: description,
      }, { tagName: host.tagName.toLowerCase() })),
      index.h("ul", null, missingProps.map((prop) => (index.h("li", null,
        index.h("strong", null, prop.attribute)))))),
    index.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 = index_module._();
  const [leadFormState, setLeadFormState] = domContextHooks_module.y(host, LEAD_FORM_STATE_CONTEXT, formState);
  domContextHooks_module.y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
  return { leadFormState, setLeadFormState };
}

exports.LEAD_FORM_STATE_CONTEXT = LEAD_FORM_STATE_CONTEXT;
exports.RequiredPropsError = RequiredPropsError;
exports.useLeadFormState = useLeadFormState;
