@viamedici-spc/configurator-framer/dist/index.js

Component library to build configurator apps with Framer based on Viamedici SPC.

import { jsxs as U, jsx as p, Fragment as Ie } from "react/jsx-runtime";
import { RenderTarget as si, ControlType as f, useLocaleInfo as on, motion as Mn, AnimatePresence as ao, addPropertyControls as Z } from "framer";
import B, { createGlobalStyle as Je, css as sl, StyleSheetManager as ci } from "styled-components";
import { ConfiguratorErrorType as he, AttributeType as E, ComponentDecisionState as G, globalAttributeIdEq as rn, ExplainQuestionType as ye, ExplainQuestionSubject as ne, explainQuestionBuilder as cl, ConfigurationModelSourceType as ul, AllowedRulesInExplainType as dl, DecisionKind as W, ChoiceValueDecisionState as Y } from "@viamedici-spc/configurator-ts";
import { useConfigurationInitialization as so, useChoiceAttribute as ut, useExplain as fl, Configuration as pl, useBooleanAttribute as hl, useComponentAttribute as ml, useNumericAttribute as co, useMakeDecision as Ln, useAttributes as dt, useConfigurationReset as gl, useConfigurationSatisfaction as bl, useConfigurationStoring as uo } from "@viamedici-spc/configurator-react";
import * as w from "react";
import { Children as Ae, forwardRef as Te, createContext as Re, useContext as fe, useMemo as pe, useLayoutEffect as $n, useEffect as ke, useRef as Ee, useState as He, useCallback as qe, Suspense as yl, isValidElement as fo, cloneElement as Fe, useId as xl } from "react";
import Cl from "url-join";
import { match as $, P as de } from "ts-pattern";
import { ErrorBoundary as vl } from "react-error-boundary";
import { faMinus as wl, faPlus as Sl, faXmark as po } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon as Ht } from "@fortawesome/react-fontawesome";
import { pipe as F, RA as q, O as J, RM as zt, flow as ho, Str as We, Ord as ae, constTrue as Il, RNEA as Tn, RR as mo, Bool as go, Num as ln, MO as zn, P as El, E as ue, TE as Dt, TO as Pl, left as gt, right as bo } from "@viamedici-spc/fp-ts-extensions";
import jt from "mustache";
import * as Al from "react-dom";
import { createPortal as Tl } from "react-dom";
import Rl from "clsx";
import yo from "merge-props";
import { guid as Vl } from "dyna-guid";
import { z as le } from "zod";
import { fromError as Ol } from "zod-validation-error";
import kl from "react-number-format";
import { useDebouncedCallback as Dl } from "use-debounce";
import { useForceUpdate as Fl } from "framer-motion";
import { hexToCSSFilter as Nl } from "hex-to-css-filter";
import Bl from "rgb-hex";
import Ml from "camelcase";
const ui = "--spc-", Ll = /var\(--(?!spc-)(?!framer-)/g, $l = "var(--spc-";
function di(e) {
  if (e.type !== "decl")
    return;
  const t = e.props, n = e.children, i = t.startsWith("--") && !t.startsWith(ui), o = typeof n == "string" && n.includes("var(--");
  if (!i && !o)
    return;
  const r = i ? ui + t.slice(2) : t, l = o ? n.replace(Ll, $l) : n;
  i && (e.props = r), e.return = `${r}:${l};`;
}
function ie() {
  return si.current() !== si.preview;
}
const zl = B.div`
    padding: var(--space-md);
    margin: var(--space-md);
    border-radius: var(--shape-border-radius-sm);
    background: white;

    &.warning {
        border: 1px solid orange;
        border-left-width: 15px;
    }

    &.error {
        border: 1px solid #DB0100;
        border-left-width: 15px;
    }
`, jl = B.h3`
    margin: 0 0 var(--space-xs);
`, Wl = B.div`
    white-space: break-spaces;
`;
function xo(e) {
  return /* @__PURE__ */ U(zl, { className: e.type, children: [
    /* @__PURE__ */ p(jl, { children: e.title }),
    /* @__PURE__ */ p(Wl, { children: e.message })
  ] });
}
function Ul(e) {
  var o, r, l;
  if (ie())
    return null;
  const { error: n } = so();
  if (!n)
    return null;
  const i = (a) => /* @__PURE__ */ p(
    xo,
    {
      type: "error",
      title: "Configuration initialization failed",
      message: a
    }
  );
  switch (n.type) {
    case he.ConfigurationModelNotFound:
      return Ae.toArray(e.configurationModelNotFoundContent).length > 0 ? e.configurationModelNotFoundContent : i("The Configuration Model was not found for the specified deployment name.");
    case he.AuthenticationFailure:
      return Ae.toArray(e.accessTokenInvalidContent).length > 0 ? e.accessTokenInvalidContent : i("The HCA access token is invalid.");
    case he.SpecifiedDeploymentForbidden:
      return Ae.toArray(e.accessTokenRestrictionContent).length > 0 ? e.accessTokenRestrictionContent : i("The HCA access token does not permit using the specified Configuration Model.");
    case he.DecisionsToRespectInvalid:
      const a = `Attribute Id: ${((o = n.globalAttributeId) == null ? void 0 : o.localId) ?? ""}`, s = `Component Path: ${((r = n.globalAttributeId.componentPath) == null ? void 0 : r.join(" -> ")) ?? ""}`, u = `Shared Configuration Model: ${((l = n.globalAttributeId) == null ? void 0 : l.sharedConfigurationModelId) ?? ""}`;
      return i(`The definition of Attribute Relations is invalid: ${n.validationMessage}

${a}
${s}
${u}`);
    case he.SessionParametersInvalid:
      return i(`Configuration Session parameters are invalid: ${n.detail}`);
    default:
      return Ae.toArray(e.errorContent).length > 0 ? e.errorContent : i("An error occurred while initializing the configuration.");
  }
}
function ce(e) {
  return Te((t, n) => /* @__PURE__ */ p(vl, { fallbackRender: () => /* @__PURE__ */ p("span", { children: "Component crashed" }), children: /* @__PURE__ */ p(e, { ...t, ref: n }) }));
}
const Hl = Je`
    :root {
        --font-primary: var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif);
        --font-heading: "Inter-Medium", "Inter", "Inter Placeholder", sans-serif;
    }

    /* font sizes */
    :root {
        --text-base-size: calc(var(--framer-font-size, 16px) * var(--framer-font-size-scale, 1));
        --text-scale-ratio: 1.2;

        --text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
        --text-sm: calc(1em / var(--text-scale-ratio));
        --text-md: calc(1em * var(--text-scale-ratio));
        --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
        --text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
        --text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
        --text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    }
`, _l = Hl, ql = Je`
    :root {
        --space-unit: 1em;
        --space-xxs: calc(0.25 * var(--space-unit));
        --space-xs: calc(0.5 * var(--space-unit));
        --space-sm: calc(0.75 * var(--space-unit));
        --space-md: calc(1.25 * var(--space-unit));
        --space-lg: calc(2 * var(--space-unit));
        --space-xl: calc(3.25 * var(--space-unit));
        --space-xxl: calc(5.25 * var(--space-unit));

        --space-unit-fixed: var(--text-base-size);
        --space-xxs-fixed: calc(0.25 * var(--space-unit-fixed));
        --space-xs-fixed: calc(0.5 * var(--space-unit-fixed));
        --space-sm-fixed: calc(0.75 * var(--space-unit-fixed));
        --space-md-fixed: calc(1.25 * var(--space-unit-fixed));
        --space-lg-fixed: calc(2 * var(--space-unit-fixed));
        --space-xl-fixed: calc(3.25 * var(--space-unit-fixed));
        --space-xxl-fixed: calc(5.25 * var(--space-unit-fixed));
    }
`, Kl = ql, Ql = Je`
    :root {
        --shape-border-radius-xs: 5px;
        --shape-border-radius-sm: 7px;
        --shape-border-radius-md: 12px;
        --shape-border-radius-lg: 20px;
    }
`, Gl = Ql;
function fi() {
  return /* @__PURE__ */ U(Ie, { children: [
    /* @__PURE__ */ p(Gl, {}),
    /* @__PURE__ */ p(Kl, {}),
    /* @__PURE__ */ p(_l, {})
  ] });
}
const Ct = Re(null);
function Pe() {
  const { process: e, switchMode: t, applySolution: n, dismiss: i } = fe(Ct);
  return e ? {
    ...e,
    switchMode: t,
    applySolution: n,
    dismiss: i
  } : null;
}
const Co = (e = {}) => ({
  padding: {
    type: f.FusedNumber,
    title: "Padding",
    toggleKey: "isMixedPadding",
    toggleTitles: ["Padding", "Padding per Side"],
    valueKeys: [
      "paddingTop",
      "paddingRight",
      "paddingBottom",
      "paddingLeft"
    ],
    valueLabels: ["Top", "Right", "Bottom", "Left"],
    min: 0,
    defaultValue: e.padding ?? 0
  }
}), vo = (e) => ({
  paddingTop: e.isMixedPadding ? e.paddingTop : e.padding,
  paddingRight: e.isMixedPadding ? e.paddingRight : e.padding,
  paddingBottom: e.isMixedPadding ? e.paddingBottom : e.padding,
  paddingLeft: e.isMixedPadding ? e.paddingLeft : e.padding
}), Rn = (e = {}) => {
  var t, n;
  return {
    radius: {
      title: "Radius",
      type: f.Number,
      defaultValue: e.radius ?? 0
    },
    border: {
      title: "Border",
      type: f.Object,
      controls: {
        color: {
          type: f.Color,
          title: "Color",
          defaultValue: (t = e.border) == null ? void 0 : t.color
        },
        width: {
          type: f.FusedNumber,
          title: "Width",
          toggleKey: "isMixedWidth",
          toggleTitles: ["Width", "Width per Side"],
          valueKeys: [
            "widthTop",
            "widthRight",
            "widthBottom",
            "widthLeft"
          ],
          valueLabels: ["Top", "Right", "Bottom", "Left"],
          min: 0,
          defaultValue: ((n = e.border) == null ? void 0 : n.width) ?? 0
        }
      }
    }
  };
}, wo = (e) => {
  var t, n, i, o, r, l, a, s, u, y, h, m, c;
  return {
    borderRadius: e.radius,
    borderColor: (t = e.border) == null ? void 0 : t.color,
    borderTopWidth: (n = e.border) != null && n.isMixedWidth ? (i = e.border) == null ? void 0 : i.widthTop : (o = e.border) == null ? void 0 : o.width,
    borderRightWidth: (r = e.border) != null && r.isMixedWidth ? (l = e.border) == null ? void 0 : l.widthRight : (a = e.border) == null ? void 0 : a.width,
    borderBottomWidth: (s = e.border) != null && s.isMixedWidth ? (u = e.border) == null ? void 0 : u.widthBottom : (y = e.border) == null ? void 0 : y.width,
    borderLeftWidth: (h = e.border) != null && h.isMixedWidth ? (m = e.border) == null ? void 0 : m.widthLeft : (c = e.border) == null ? void 0 : c.width,
    borderStyle: "solid"
  };
}, vt = (e = {}) => ({
  fill: {
    title: "Fill",
    type: f.Color,
    defaultValue: e.fill
  },
  backdropFilter: {
    title: "Backdrop Filter",
    type: f.String,
    defaultValue: e.backdropFilter ?? "none"
  },
  shadow: {
    title: "Shadow",
    type: f.String,
    defaultValue: e.shadow ?? "none"
  },
  filter: {
    title: "Filter",
    type: f.String,
    defaultValue: e.filter ?? "none"
  },
  ...Co(e),
  ...Rn(e)
}), ft = (e) => ({
  ...vo(e),
  ...wo(e),
  backgroundColor: e.fill,
  backdropFilter: e.backdropFilter,
  boxShadow: e.shadow,
  filter: e.filter
}), Ve = (e = {}) => {
  var t, n;
  return {
    color: {
      title: "Color",
      type: f.Color,
      defaultValue: e.color ?? "black"
    },
    text: {
      title: "Text",
      type: f.Font,
      controls: "basic",
      displayTextAlignment: !0,
      displayFontSize: !0,
      defaultValue: {
        fontSize: (t = e.text) == null ? void 0 : t.fontSize,
        textAlign: (n = e.text) == null ? void 0 : n.textAlign
      }
    }
  };
}, Oe = (e) => ({
  ...e.text,
  color: e.color
}), _t = (e = {}) => ({
  staticText: {
    title: "Text",
    type: f.String,
    defaultValue: e.staticText
  },
  ...Ve(e)
}), qt = (e) => Oe(e), Kt = (e = {}) => {
  var t, n, i;
  return {
    fillHover: {
      title: "Fill – Hover",
      type: f.Color,
      defaultValue: e.fillHover
    },
    focusOutline: {
      title: "Focus Outline",
      type: f.Object,
      controls: {
        color: {
          title: "Color",
          type: f.Color,
          defaultValue: (t = e.focusOutline) == null ? void 0 : t.color
        },
        size: {
          title: "Size",
          type: f.Number,
          defaultValue: (n = e.focusOutline) == null ? void 0 : n.size
        },
        offset: {
          title: "Offset",
          type: f.Number,
          defaultValue: (i = e.focusOutline) == null ? void 0 : i.offset
        }
      }
    },
    ...vt(e),
    ..._t(e)
  };
}, an = (e) => ({
  ...ft(e),
  ...qt(e),
  "--spc-color-button-fill-hover": e.fillHover,
  "--spc-color-button-focus-outline": e.focusOutline.color,
  "--spc-size-button-focus-outline": `${e.focusOutline.size}px`,
  "--spc-size-button-focus-outline-offset": `${e.focusOutline.offset}px`
}), Qt = (e = {}) => ({
  margin: {
    type: f.FusedNumber,
    title: "Margin",
    toggleKey: "isMixedMargin",
    toggleTitles: ["Margin", "Margin per Side"],
    valueKeys: [
      "marginTop",
      "marginRight",
      "marginBottom",
      "marginLeft"
    ],
    valueLabels: ["Top", "Right", "Bottom", "Left"],
    defaultValue: e.margin ?? 0
  }
}), sn = (e) => ({
  marginTop: e.isMixedMargin ? e.marginTop : e.margin,
  marginRight: e.isMixedMargin ? e.marginRight : e.margin,
  marginBottom: e.isMixedMargin ? e.marginBottom : e.margin,
  marginLeft: e.isMixedMargin ? e.marginLeft : e.margin
}), Xl = (e = {}) => {
  var t, n, i, o;
  return {
    subject: {
      title: "Subject",
      type: f.Object,
      controls: {
        ...Ve(e.subject ?? {}),
        configurationSubjectTitle: {
          title: "Configuration Subject Title",
          type: f.String,
          defaultValue: ((t = e.subject) == null ? void 0 : t.configurationSubjectTitle) ?? "Configuration"
        },
        generalConflictTitle: {
          title: "General Conflict Title",
          type: f.String,
          defaultValue: ((n = e.subject) == null ? void 0 : n.generalConflictTitle) ?? "Conflict"
        }
      }
    },
    suffix: {
      title: "Suffix",
      type: f.Object,
      controls: {
        ...Ve(e.suffix ?? {}),
        isBlockedSuffix: {
          title: "Is Blocked Suffix",
          type: f.String,
          defaultValue: ((i = e.suffix) == null ? void 0 : i.isBlockedSuffix) ?? "is blocked"
        },
        isNotSatisfiedSuffix: {
          title: "Is Not Satisfied Suffix",
          type: f.String,
          defaultValue: ((o = e.suffix) == null ? void 0 : o.isNotSatisfiedSuffix) ?? "is not satisfied"
        }
      }
    }
  };
}, So = (e = {}) => {
  var t, n, i, o, r, l, a, s, u, y, h, m, c, b, x, d, g, C, A, S, I, P, V, O, N, T, H, M;
  return {
    header: {
      title: "Header",
      type: f.Object,
      controls: {
        ...Xl(e.header ?? {})
      },
      hidden: (_) => _.useCustomExplain
    },
    attributeName: {
      title: "Attribute Name",
      type: f.Object,
      controls: {
        ...Ve(e.attributeName ?? {})
      },
      hidden: (_) => _.useCustomExplain
    },
    attributeValue: {
      title: "Attribute Value",
      type: f.Object,
      controls: {
        add: {
          title: "Adding",
          type: f.Object,
          controls: {
            ...Ve(((t = e.attributeValue) == null ? void 0 : t.add) ?? {}),
            ...Rn(((n = e.attributeValue) == null ? void 0 : n.add) ?? {}),
            fill: {
              title: "Fill",
              type: f.Color,
              defaultValue: (o = (i = e.attributeValue) == null ? void 0 : i.add) == null ? void 0 : o.fill
            },
            iconFill: {
              title: "Icon Fill",
              type: f.Color,
              defaultValue: (l = (r = e.attributeValue) == null ? void 0 : r.add) == null ? void 0 : l.iconFill
            },
            iconColor: {
              title: "Icon Color",
              type: f.Color,
              defaultValue: (s = (a = e.attributeValue) == null ? void 0 : a.add) == null ? void 0 : s.iconColor
            }
          }
        },
        remove: {
          title: "Removing",
          type: f.Object,
          controls: {
            ...Ve(((u = e.attributeValue) == null ? void 0 : u.remove) ?? {}),
            ...Rn(((y = e.attributeValue) == null ? void 0 : y.remove) ?? {}),
            fill: {
              title: "Fill",
              type: f.Color,
              defaultValue: (m = (h = e.attributeValue) == null ? void 0 : h.remove) == null ? void 0 : m.fill
            },
            iconFill: {
              title: "Icon Fill",
              type: f.Color,
              defaultValue: (b = (c = e.attributeValue) == null ? void 0 : c.remove) == null ? void 0 : b.iconFill
            },
            iconColor: {
              title: "Icon Color",
              type: f.Color,
              defaultValue: (d = (x = e.attributeValue) == null ? void 0 : x.remove) == null ? void 0 : d.iconColor
            }
          }
        },
        ...Co(e.attributeValue ?? {}),
        componentDecisionStateIncludedLabel: {
          title: "Component Decision State Included Label",
          type: f.String,
          defaultValue: ((g = e.attributeValue) == null ? void 0 : g.componentDecisionStateIncludedLabel) ?? "Included"
        },
        componentDecisionStateExcludedLabel: {
          title: "Component Decision State Excluded Label",
          type: f.String,
          defaultValue: ((C = e.attributeValue) == null ? void 0 : C.componentDecisionStateExcludedLabel) ?? "Excluded"
        },
        booleanDecisionStateTrueLabel: {
          title: "Boolean Decision State True Label",
          type: f.String,
          defaultValue: ((A = e.attributeValue) == null ? void 0 : A.booleanDecisionStateTrueLabel) ?? "Yes"
        },
        booleanDecisionStateFalseLabel: {
          title: "Boolean Decision State False Label",
          type: f.String,
          defaultValue: ((S = e.attributeValue) == null ? void 0 : S.booleanDecisionStateFalseLabel) ?? "No"
        }
      }
    },
    applySolutionButton: {
      title: "Apply Solution Button",
      type: f.Object,
      controls: {
        ...Kt(e.applySolutionButton ?? {}),
        ...Qt(e.applySolutionButton ?? {})
      },
      hidden: (_) => _.useCustomExplain
    },
    closeButton: {
      title: "Close Button",
      type: f.Object,
      controls: {
        ...Kt(e.closeButton ?? {})
      },
      hidden: (_) => _.useCustomExplain
    },
    infoMessage: {
      title: "Info Message",
      type: f.Object,
      controls: {
        ...Ve(e.infoMessage ?? {}),
        whyIsStateNotPossibleQuestion: {
          title: "Why Is State Not Possible Question",
          type: f.String,
          defaultValue: ((I = e.infoMessage) == null ? void 0 : I.whyIsStateNotPossibleQuestion) ?? "why your selection is not possible"
        },
        whyConfigurationIsNotSatisfiedQuestion: {
          title: "Why Configuration Is Not Satisfied Question",
          type: f.String,
          defaultValue: ((P = e.infoMessage) == null ? void 0 : P.whyConfigurationIsNotSatisfiedQuestion) ?? "why your configuration is not satisfied"
        },
        whyAttributeIsNotSatisfiedQuestion: {
          title: "Why Attribute Is Not Satisfied Question",
          type: f.String,
          defaultValue: ((V = e.infoMessage) == null ? void 0 : V.whyAttributeIsNotSatisfiedQuestion) ?? "why your attribute is not satisfied"
        },
        generalConflictQuestion: {
          title: "General Conflict Question",
          type: f.String,
          defaultValue: ((O = e.infoMessage) == null ? void 0 : O.generalConflictQuestion) ?? "why your selections are not possible"
        },
        failedToExplainText: {
          title: "Failed To Explain Text",
          type: f.String,
          defaultValue: ((N = e.infoMessage) == null ? void 0 : N.failedToExplainText) ?? "Failed to explain {{question}}."
        },
        failedToExplainHintText: {
          title: "Failed To Explain Hint Text",
          type: f.String,
          defaultValue: ((T = e.infoMessage) == null ? void 0 : T.failedToExplainHintText) ?? "Please check your internet connection and try again."
        },
        noExplanationFoundText: {
          title: "No Explanation Found Text",
          type: f.String,
          defaultValue: ((H = e.infoMessage) == null ? void 0 : H.noExplanationFoundText) ?? "There was no explanation found for {{question}}."
        },
        noSolutionFoundText: {
          title: "No Solution Found Text",
          type: f.String,
          defaultValue: ((M = e.infoMessage) == null ? void 0 : M.noSolutionFoundText) ?? "There was no solution found for {{question}}."
        }
      },
      hidden: (_) => _.useCustomExplain
    }
  };
}, Yl = {
  popoverBox: {
    title: "Popover Box",
    type: f.Object,
    controls: vt({
      fill: "#002134",
      radius: 12,
      padding: 18,
      isMixedPadding: !1,
      filter: "drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))"
    }),
    hidden: (e) => e.useCustomExplain
  },
  subline: {
    title: "Subline",
    type: f.Object,
    controls: {
      ..._t({
        color: "white",
        staticText: "Solution",
        text: {
          fontWeight: "500",
          fontSize: 16,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        }
      })
    },
    hidden: (e) => e.useCustomExplain
  },
  ...So({
    header: {
      subject: {
        color: "rgb(0, 161, 230)",
        text: {
          fontWeight: "500",
          fontSize: 19,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        }
      },
      suffix: {
        color: "white",
        text: {
          fontWeight: "500",
          fontSize: 19,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        }
      }
    },
    attributeName: {
      color: "white",
      text: {
        fontWeight: "400",
        fontSize: 16,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      }
    },
    attributeValue: {
      add: {
        color: "white",
        text: {
          fontWeight: "500",
          fontSize: 14,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        },
        radius: 300,
        fill: "rgba(255, 255, 255, 0.2)",
        iconFill: "rgba(47, 255, 0, 0.2)",
        iconColor: "#63e446"
      },
      remove: {
        color: "white",
        text: {
          fontWeight: "500",
          fontSize: 14,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        },
        radius: 300,
        fill: "rgba(255, 255, 255, 0.2)",
        iconFill: "#ff00004a",
        iconColor: "#ff6060"
      },
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 10,
      isMixedPadding: !0
    },
    applySolutionButton: {
      fill: "rgb(0, 161, 230)",
      fillHover: "#15ACED",
      radius: 300,
      paddingTop: 9,
      paddingBottom: 9,
      paddingLeft: 29,
      paddingRight: 29,
      isMixedPadding: !0,
      color: "white",
      staticText: "Apply Solution",
      text: {
        textAlign: "center",
        fontWeight: "600",
        fontSize: 14,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      },
      focusOutline: {
        color: "rgba(255, 255, 255, 0.8)",
        size: 2,
        offset: -1
      },
      marginTop: 18,
      isMixedMargin: !0
    },
    closeButton: {
      fill: "transparent",
      fillHover: "#FFFFFF26",
      radius: 300,
      paddingTop: 2,
      paddingBottom: 2,
      paddingLeft: 6,
      paddingRight: 6,
      isMixedPadding: !0,
      color: "white",
      staticText: "Close",
      text: {
        textAlign: "center",
        fontWeight: "400",
        fontSize: 14,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      },
      focusOutline: {
        color: "rgba(255, 255, 255, 0.8)",
        size: 2,
        offset: -1
      }
    },
    infoMessage: {
      color: "white",
      text: {
        fontWeight: "400",
        fontSize: 16,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      }
    }
  }),
  showConstraintsButton: {
    title: "Show Constraints Button",
    type: f.Object,
    controls: {
      ...Kt({
        fill: "transparent",
        fillHover: "transparent",
        radius: 5,
        paddingTop: 1,
        paddingBottom: 1,
        paddingLeft: 6,
        paddingRight: 6,
        isMixedPadding: !0,
        color: "white",
        staticText: "Show Constraints",
        text: {
          textAlign: "center",
          fontWeight: "500",
          fontSize: 14,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        },
        focusOutline: {
          color: "rgba(255, 255, 255, 0.8)",
          size: 2,
          offset: -1
        }
      }),
      ...Qt({
        marginTop: 13
      })
    },
    hidden: (e) => e.useCustomExplain
  },
  showMoreButton: {
    title: "Show More Button",
    type: f.Object,
    controls: {
      ...Kt({
        fill: "transparent",
        fillHover: "transparent",
        radius: 5,
        paddingTop: 1,
        paddingBottom: 1,
        paddingLeft: 6,
        paddingRight: 6,
        isMixedPadding: !0,
        color: "white",
        staticText: "Show more ({{amount}})",
        text: {
          textAlign: "center",
          fontWeight: "500",
          fontSize: 14,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        },
        focusOutline: {
          color: "rgba(255, 255, 255, 0.8)",
          size: 2,
          offset: -1
        }
      }),
      ...Qt({
        marginTop: 13
      })
    },
    hidden: (e) => e.useCustomExplain
  },
  listSeparator: {
    title: "List Separator",
    type: f.Color,
    defaultValue: "rgba(255, 255, 255, 0.3)",
    hidden: (e) => e.useCustomExplain
  },
  arrow: {
    title: "Arrow",
    type: f.Color,
    defaultValue: "#002134"
  },
  useCustomExplain: {
    title: "Use Custom Popover",
    type: f.Boolean,
    defaultValue: !1
  }
}, Jl = (e) => {
  var t;
  return {
    fill: e.arrow ?? ((t = e.popoverBox) == null ? void 0 : t.fill)
  };
}, jn = Re(null), It = () => fe(jn), Zl = {
  dialogBox: {
    title: "Dialog Box",
    type: f.Object,
    controls: vt({
      fill: "rgba(255, 255, 255, 0.7)",
      backdropFilter: "blur(10px) saturate(200%)",
      shadow: "0.2px 0.4px 2.3px rgba(0, 0, 0, 0.02), 0.6px 1px 5.7px rgba(0, 0, 0, 0.025), 1.2px 2.1px 10.6px rgba(0, 0, 0, 0.03), 2.3px 4px 17.2px rgba(0, 0, 0, 0.034), 4.2px 7.2px 25.9px rgba(0, 0, 0, 0.04), 7.6px 12.8px 37.7px rgba(0, 0, 0, 0.048), 13.9px 23.6px 54.7px rgba(0, 0, 0, 0.061), 40px 68px 96px rgba(0, 0, 0, 0.1)",
      radius: 12,
      paddingTop: 18,
      paddingBottom: 0,
      paddingLeft: 24,
      paddingRight: 24,
      isMixedPadding: !0
    })
  },
  explanationCard: {
    title: "Explanation Card",
    type: f.Object,
    controls: {
      ...vt({
        fill: "white",
        shadow: "2px 1px 10px -5px rgba(0, 0, 0, 0.4)",
        radius: 7,
        padding: 12,
        isMixedPadding: !1
      }),
      ...Qt({
        marginLeft: -12,
        marginRight: -12,
        isMixedMargin: !0
      })
    }
  },
  constraintExplanation: {
    title: "Constraint Explanation",
    type: f.Object,
    controls: {
      configurationModelId: {
        title: "Configuration Model Id",
        type: f.Object,
        controls: Ve({
          color: "#171717",
          text: {
            fontWeight: "400",
            fontSize: 16,
            fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
          }
        })
      },
      ruleId: {
        title: "Rule Id",
        type: f.Object,
        controls: Ve({
          color: "#171717",
          text: {
            fontWeight: "500",
            fontSize: 14,
            fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
          }
        })
      }
    }
  },
  ...So({
    header: {
      subject: {
        color: "rgb(0, 161, 230)",
        text: {
          fontWeight: "500",
          fontSize: 19,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        }
      },
      suffix: {
        color: "#171717",
        text: {
          fontWeight: "500",
          fontSize: 19,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        }
      }
    },
    attributeName: {
      color: "#171717",
      text: {
        fontWeight: "400",
        fontSize: 16,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      }
    },
    attributeValue: {
      add: {
        color: "#171717",
        text: {
          fontWeight: "500",
          fontSize: 14,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        },
        radius: 300,
        fill: "#efefef",
        iconFill: "#cfefc7",
        iconColor: "#48c52b"
      },
      remove: {
        color: "#171717",
        text: {
          fontWeight: "500",
          fontSize: 14,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        },
        radius: 300,
        fill: "#efefef",
        iconFill: "#ffdada",
        iconColor: "#c52b2b"
      },
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 10,
      isMixedPadding: !0
    },
    applySolutionButton: {
      fill: "#F2F2F2",
      fillHover: "#F7F7F7",
      radius: 7,
      paddingTop: 9,
      paddingBottom: 9,
      paddingLeft: 29,
      paddingRight: 29,
      isMixedPadding: !0,
      color: "#171717",
      staticText: "Apply Solution",
      text: {
        textAlign: "center",
        fontWeight: "600",
        fontSize: 14,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      },
      focusOutline: {
        color: "#00a1e6",
        size: 2,
        offset: -1
      },
      marginTop: 18,
      isMixedMargin: !0
    },
    closeButton: {
      fill: "transparent",
      fillHover: "00000012",
      radius: 300,
      paddingTop: 2,
      paddingBottom: 2,
      paddingLeft: 6,
      paddingRight: 6,
      isMixedPadding: !0,
      color: "#171717",
      staticText: "Close",
      text: {
        textAlign: "center",
        fontWeight: "400",
        fontSize: 14,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      },
      focusOutline: {
        color: "#00a1e6",
        size: 2,
        offset: -1
      }
    },
    infoMessage: {
      color: "#171717",
      text: {
        fontWeight: "400",
        fontSize: 16,
        fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
      }
    }
  }),
  decisionExplanationSolutionsTitle: {
    title: "Decision Explanation Solutions Title",
    type: f.Object,
    controls: {
      ..._t({
        color: "#171717",
        staticText: "Solutions",
        text: {
          fontWeight: "500",
          fontSize: 16,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        }
      })
    }
  },
  constraintExplanationSolutionsTitle: {
    title: "Constraint Explanation Solutions Title",
    type: f.Object,
    controls: {
      ..._t({
        color: "#171717",
        staticText: "Constraint Explanations",
        text: {
          fontWeight: "500",
          fontSize: 16,
          fontFamily: 'var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)'
        }
      })
    }
  },
  scrollShadowBorder: {
    title: "Scroll Shadow Border",
    type: f.Color,
    defaultValue: "rgba(0, 0, 0, 0.3)"
  }
}, Wn = Re(null), cn = () => fe(Wn), ea = () => fe(jn) || fe(Wn), pt = ea, ta = B.button`
    appearance: none;
    cursor: pointer;

    &:hover {
        background-color: var(--color-button-fill-hover) !important;
    }

    &:focus {
        outline: var(--size-button-focus-outline) solid var(--color-button-focus-outline);
        outline-offset: var(--size-button-focus-outline-offset);
    }
`;
function Io(e) {
  const { explanation: t, ...n } = e, i = Pe(), { applySolutionButton: o } = pt();
  return /* @__PURE__ */ p(ta, { ...n, onClick: () => i.applySolution(t.solution), style: {
    ...an(o),
    ...sn(o)
  }, children: o.staticText });
}
function Un(e, t, n) {
  return $(e).returnType().with({ type: E.Choice }, (i) => t.get(i.choiceValueId) ?? i.choiceValueId).with({ type: E.Boolean, state: !0 }, () => n.attributeValue.booleanDecisionStateTrueLabel).with({ type: E.Boolean, state: !1 }, () => n.attributeValue.booleanDecisionStateFalseLabel).with({ type: E.Component, state: G.Included }, () => n.attributeValue.componentDecisionStateIncludedLabel).with({ type: E.Component, state: G.Excluded }, () => n.attributeValue.componentDecisionStateExcludedLabel).with({ type: E.Numeric }, (i) => i.state.toString()).exhaustive();
}
const na = B.div`
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
`, ia = B.div`
    display: grid;
    place-content: center;
    border-top-left-radius: 360px;
    border-bottom-left-radius: 360px;
    height: 1.5em;
    width: 1.5em;
    flex-shrink: 0;
`, oa = B.div`
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`;
function ra(e) {
  const { decision: t, choiceValuesNames: n } = e, i = t.intention, o = pt(), r = Un(t, n, o), l = $(i).with("remove", () => o.attributeValue.remove).with("add", () => o.attributeValue.add).exhaustive();
  return /* @__PURE__ */ U(na, { style: {
    ...vo(o.attributeValue),
    ...Oe(l),
    ...wo(l),
    backgroundColor: l.fill
  }, children: [
    /* @__PURE__ */ U(ia, { style: { backgroundColor: l.iconFill, color: l.iconColor }, children: [
      i === "remove" && /* @__PURE__ */ p(Ht, { icon: wl }),
      i === "add" && /* @__PURE__ */ p(Ht, { icon: Sl })
    ] }),
    /* @__PURE__ */ p(oa, { children: r })
  ] });
}
function se(e) {
  var t;
  return {
    localId: e.attributeId,
    componentPath: e.componentPath === "" ? [] : ((t = e.componentPath) == null ? void 0 : t.split(" -> ")) ?? [],
    sharedConfigurationModelId: e.sharedConfigurationModel === "" ? null : e.sharedConfigurationModel
  };
}
const un = Re(null);
function dn(e) {
  const { attributes: t } = fe(un), { activeLocale: n } = on(), i = n.code;
  return pe(() => F(
    t,
    q.findFirst((o) => rn.equals(se(o), e)),
    J.map((o) => o.name),
    q.fromOption,
    q.flatten,
    Hn(i),
    J.toUndefined
  ), [t, i, e.localId, e.componentPath, e.sharedConfigurationModelId]);
}
function Et(e) {
  const { choiceValues: t } = fe(un), { activeLocale: n } = on(), i = ut(e);
  if (!i)
    return zt.empty;
  const o = pe(() => F(
    t,
    q.filter((a) => rn.equals(se(a), e))
  ), [t, e.localId, e.componentPath, e.sharedConfigurationModelId]), r = n.code, l = i.attribute.values;
  return pe(() => F(
    l,
    zt.mapWithIndex((a, s) => F(
      o,
      q.findFirst((u) => u.choiceValueId === a),
      J.map((u) => u.name),
      q.fromOption,
      q.flatten,
      Hn(r)
    )),
    zt.compact
  ), [l, o, r]);
}
function la(e, t) {
  const { choiceValues: n } = fe(un), { activeLocale: i } = on(), o = i.code;
  return pe(() => F(
    n,
    q.findFirst((r) => rn.equals(se(r), e) && r.choiceValueId === t),
    J.map((r) => r.name),
    q.fromOption,
    q.flatten,
    Hn(o),
    J.toUndefined
  ), [n, o, e.localId, e.componentPath, e.sharedConfigurationModelId, t]);
}
function Hn(e) {
  return ho(
    q.findFirst((t) => t.localeCode.localeCompare(e, void 0, { sensitivity: "accent" }) === 0),
    J.map((t) => t.translation)
  );
}
function Eo(e, t, n) {
  const i = F(
    We.Ord,
    ae.contramap((o) => Un(o, t, n))
  );
  return F(
    e,
    q.sort(i)
  );
}
const aa = B.div`
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: center;
`, sa = B.div`
    grid-area: name;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`, ca = B.div`
    grid-area: values;
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--space-xxs);
`;
function ua(e) {
  const { decisions: t } = e, n = t[0].attributeId, i = Et(n), o = dn(n), r = pt(), l = Eo(t, i, r);
  return /* @__PURE__ */ U(aa, { children: [
    /* @__PURE__ */ p(sa, { style: Oe(r.attributeName), children: o ?? n.localId }),
    /* @__PURE__ */ p(ca, { children: l.map((a, s) => /* @__PURE__ */ p(ra, { decision: a, choiceValuesNames: i }, s)) })
  ] });
}
function Po(e) {
  const { attributes: t, ...n } = e;
  return /* @__PURE__ */ p("div", { ...n, children: t.map((i) => /* @__PURE__ */ p(ua, { decisions: i.decisions }, i.key)) });
}
function Ao(e) {
  const t = e.sharedConfigurationModelId && `shared::${e.sharedConfigurationModelId}`, n = (e.componentPath ?? []).join("::");
  return [t, n, e.localId].filter((i) => (i == null ? void 0 : i.length) > 0).join("::");
}
const da = F(
  We.Ord,
  ae.contramap((e) => e.attributeId.localId)
);
function _n(e, t = "any") {
  var l, a;
  const n = ((a = (l = e.solution) == null ? void 0 : l.decisions) == null ? void 0 : a.filter((s) => s.state != null)) ?? [], i = e.causedByDecisions ?? [], o = [
    ...n.map((s) => ({ ...s, intention: "add" })),
    ...i.map((s) => ({ ...s, intention: "remove" }))
  ], r = $(t).with("add", () => (s) => s.intention === "add").with("remove", () => (s) => s.intention === "remove").otherwise(() => Il);
  return F(
    o,
    q.filter(r),
    Tn.groupBy((s) => Ao(s.attributeId)),
    mo.collect(ae.trivial)((s, u) => ({
      key: s,
      attributeId: Tn.head(u).attributeId,
      decisions: u
    })),
    q.sort(da)
  );
}
const fa = B(Po)`
    display: grid;
    grid-template-columns: [name] minmax(150px, auto) [values] minmax(0px, 1fr);
    gap: var(--space-sm);
`;
function pa(e) {
  const { explanation: t } = e, { explanationCard: n } = cn(), i = _n(t);
  return /* @__PURE__ */ U("div", { style: { ...ft(n), ...sn(n) }, children: [
    /* @__PURE__ */ p(fa, { attributes: i }),
    /* @__PURE__ */ p(Io, { explanation: t })
  ] });
}
const ha = B.div`
    ul {
        margin: 0;
    }

    line-height: 1.5em;
`, ma = B.ul`
    list-style-type: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
`, pi = B.ul`
    list-style-type: disc;
    margin-inline-start: 0;
    padding-inline-start: var(--space-lg);
`;
function ga(e) {
  const { explanation: t } = e, { explanationCard: n, constraintExplanation: i } = cn(), o = t.causedByCardinalities, r = F(
    t.causedByRules,
    Tn.groupBy((l) => l.configurationModelId),
    mo.collect(We.Ord)((l, a) => ({
      configurationModelId: l,
      rules: F(a, q.map((s) => s.localId), q.sort(We.Ord))
    }))
  );
  return /* @__PURE__ */ p(ha, { style: { ...ft(n), ...sn(n) }, children: /* @__PURE__ */ U(ma, { children: [
    r.map((l) => /* @__PURE__ */ U("li", { children: [
      /* @__PURE__ */ p("span", { style: Oe(i.configurationModelId), children: l.configurationModelId }),
      /* @__PURE__ */ p(pi, { style: Oe(i.ruleId), children: l.rules.map((a) => /* @__PURE__ */ p("li", { children: a })) })
    ] })),
    o.length > 0 && /* @__PURE__ */ U("li", { style: Oe(i.ruleId), children: [
      /* @__PURE__ */ p("span", { children: "Cardinality" }),
      /* @__PURE__ */ p(pi, { children: o.map((l) => /* @__PURE__ */ p("li", { children: l.localId })) })
    ] })
  ] }) });
}
function To(e) {
  const { variant: t, ...n } = e, { explainQuestion: i } = Pe(), { infoMessage: o } = pt(), r = $(i).returnType().with({ question: ye.whyIsStateNotPossible }, () => o.whyIsStateNotPossibleQuestion).with({ question: ye.whyIsNotSatisfied, subject: ne.configuration }, () => o.whyConfigurationIsNotSatisfiedQuestion).with({ question: ye.whyIsNotSatisfied, subject: ne.attribute }, () => o.whyAttributeIsNotSatisfiedQuestion).with(de.nullish, () => o.generalConflictQuestion).exhaustive(), l = $(t).returnType().with("failedToExplain", () => /* @__PURE__ */ U(Ie, { children: [
    jt.render(o.failedToExplainText, { question: r }),
    /* @__PURE__ */ p("br", {}),
    o.failedToExplainHintText
  ] })).with("noExplanationFound", () => /* @__PURE__ */ p(Ie, { children: jt.render(o.noExplanationFoundText, { question: r }) })).with("noSolutionFound", () => /* @__PURE__ */ p(Ie, { children: jt.render(o.noSolutionFoundText, { question: r }) })).exhaustive();
  return /* @__PURE__ */ p("div", { ...n, style: Oe(o), children: l });
}
const hi = B.div`
    margin-bottom: var(--space-xs);
`, mi = B.div`
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
`, ba = B.div`
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
`, gi = B(To)`
    width: min-content;
    min-width: 400px;
    margin: var(--space-sm-fixed) var(--space-md-fixed) var(--space-sm-fixed) var(--space-sm-fixed);
`;
function ya() {
  const { decisionExplanations: e, constraintExplanations: t, hasError: n } = Pe(), { decisionExplanationSolutionsTitle: i, constraintExplanationSolutionsTitle: o } = cn();
  return n ? /* @__PURE__ */ p(gi, { variant: "failedToExplain" }) : e.length === 0 && t.length === 0 ? /* @__PURE__ */ p(gi, { variant: "noExplanationFound" }) : /* @__PURE__ */ U(ba, { children: [
    e.length > 0 && /* @__PURE__ */ U("div", { children: [
      /* @__PURE__ */ p(hi, { style: qt(i), children: i.staticText }),
      /* @__PURE__ */ p(mi, { children: e.map((r) => /* @__PURE__ */ p(pa, { explanation: r }, e.indexOf(r))) })
    ] }),
    t.length > 0 && /* @__PURE__ */ U("div", { children: [
      /* @__PURE__ */ p(hi, { style: qt(o), children: o.staticText }),
      /* @__PURE__ */ p(mi, { children: t.map((r) => /* @__PURE__ */ p(ga, { explanation: r }, t.indexOf(r))) })
    ] })
  ] });
}
function Me(e) {
  return Ro(e) ? (e.nodeName || "").toLowerCase() : "#document";
}
function xe(e) {
  var t;
  return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
}
function Le(e) {
  var t;
  return (t = (Ro(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
}
function Ro(e) {
  return e instanceof Node || e instanceof xe(e).Node;
}
function re(e) {
  return e instanceof Element || e instanceof xe(e).Element;
}
function me(e) {
  return e instanceof HTMLElement || e instanceof xe(e).HTMLElement;
}
function Vn(e) {
  return typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof xe(e).ShadowRoot;
}
function Pt(e) {
  const {
    overflow: t,
    overflowX: n,
    overflowY: i,
    display: o
  } = Ce(e);
  return /auto|scroll|overlay|hidden|clip/.test(t + i + n) && !["inline", "contents"].includes(o);
}
function xa(e) {
  return ["table", "td", "th"].includes(Me(e));
}
function qn(e) {
  const t = Kn(), n = Ce(e);
  return n.transform !== "none" || n.perspective !== "none" || (n.containerType ? n.containerType !== "normal" : !1) || !t && (n.backdropFilter ? n.backdropFilter !== "none" : !1) || !t && (n.filter ? n.filter !== "none" : !1) || ["transform", "perspective", "filter"].some((i) => (n.willChange || "").includes(i)) || ["paint", "layout", "strict", "content"].some((i) => (n.contain || "").includes(i));
}
function Vo(e) {
  let t = Ge(e);
  for (; me(t) && !ot(t); ) {
    if (qn(t))
      return t;
    t = Ge(t);
  }
  return null;
}
function Kn() {
  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
}
function ot(e) {
  return ["html", "body", "#document"].includes(Me(e));
}
function Ce(e) {
  return xe(e).getComputedStyle(e);
}
function fn(e) {
  return re(e) ? {
    scrollLeft: e.scrollLeft,
    scrollTop: e.scrollTop
  } : {
    scrollLeft: e.pageXOffset,
    scrollTop: e.pageYOffset
  };
}
function Ge(e) {
  if (Me(e) === "html")
    return e;
  const t = (
    // Step into the shadow DOM of the parent of a slotted node.
    e.assignedSlot || // DOM Element detected.
    e.parentNode || // ShadowRoot detected.
    Vn(e) && e.host || // Fallback.
    Le(e)
  );
  return Vn(t) ? t.host : t;
}
function Oo(e) {
  const t = Ge(e);
  return ot(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : me(t) && Pt(t) ? t : Oo(t);
}
function je(e, t, n) {
  var i;
  t === void 0 && (t = []), n === void 0 && (n = !0);
  const o = Oo(e), r = o === ((i = e.ownerDocument) == null ? void 0 : i.body), l = xe(o);
  return r ? t.concat(l, l.visualViewport || [], Pt(o) ? o : [], l.frameElement && n ? je(l.frameElement) : []) : t.concat(o, je(o, [], n));
}
function et(e) {
  let t = e.activeElement;
  for (; ((n = t) == null || (n = n.shadowRoot) == null ? void 0 : n.activeElement) != null; ) {
    var n;
    t = t.shadowRoot.activeElement;
  }
  return t;
}
function be(e, t) {
  if (!e || !t)
    return !1;
  const n = t.getRootNode == null ? void 0 : t.getRootNode();
  if (e.contains(t))
    return !0;
  if (n && Vn(n)) {
    let i = t;
    for (; i; ) {
      if (e === i)
        return !0;
      i = i.parentNode || i.host;
    }
  }
  return !1;
}
function ko() {
  const e = navigator.userAgentData;
  return e != null && e.platform ? e.platform : navigator.platform;
}
function Do() {
  const e = navigator.userAgentData;
  return e && Array.isArray(e.brands) ? e.brands.map((t) => {
    let {
      brand: n,
      version: i
    } = t;
    return n + "/" + i;
  }).join(" ") : navigator.userAgent;
}
function Ca(e) {
  return e.mozInputSource === 0 && e.isTrusted ? !0 : On() && e.pointerType ? e.type === "click" && e.buttons === 1 : e.detail === 0 && !e.pointerType;
}
function va(e) {
  return Sa() ? !1 : !On() && e.width === 0 && e.height === 0 || On() && e.width === 1 && e.height === 1 && e.pressure === 0 && e.detail === 0 && e.pointerType === "mouse" || // iOS VoiceOver returns 0.333• for width/height.
  e.width < 1 && e.height < 1 && e.pressure === 0 && e.detail === 0 && e.pointerType === "touch";
}
function wa() {
  return /apple/i.test(navigator.vendor);
}
function On() {
  const e = /android/i;
  return e.test(ko()) || e.test(Do());
}
function Sa() {
  return Do().includes("jsdom/");
}
function bi(e, t) {
  const n = ["mouse", "pen"];
  return t || n.push("", void 0), n.includes(e);
}
function Ia(e) {
  return "nativeEvent" in e;
}
function Ea(e) {
  return e.matches("html,body");
}
function Be(e) {
  return (e == null ? void 0 : e.ownerDocument) || document;
}
function gn(e, t) {
  if (t == null)
    return !1;
  if ("composedPath" in e)
    return e.composedPath().includes(t);
  const n = e;
  return n.target != null && t.contains(n.target);
}
function tt(e) {
  return "composedPath" in e ? e.composedPath()[0] : e.target;
}
const Pa = "input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
function Fo(e) {
  return me(e) && e.matches(Pa);
}
function bn(e) {
  e.preventDefault(), e.stopPropagation();
}
function Aa(e) {
  return e ? e.getAttribute("role") === "combobox" && Fo(e) : !1;
}
const rt = Math.min, Qe = Math.max, Gt = Math.round, Ft = Math.floor, Ue = (e) => ({
  x: e,
  y: e
}), Ta = {
  left: "right",
  right: "left",
  bottom: "top",
  top: "bottom"
}, Ra = {
  start: "end",
  end: "start"
};
function kn(e, t, n) {
  return Qe(e, rt(t, n));
}
function At(e, t) {
  return typeof e == "function" ? e(t) : e;
}
function Xe(e) {
  return e.split("-")[0];
}
function Tt(e) {
  return e.split("-")[1];
}
function No(e) {
  return e === "x" ? "y" : "x";
}
function Qn(e) {
  return e === "y" ? "height" : "width";
}
function pn(e) {
  return ["top", "bottom"].includes(Xe(e)) ? "y" : "x";
}
function Gn(e) {
  return No(pn(e));
}
function Va(e, t, n) {
  n === void 0 && (n = !1);
  const i = Tt(e), o = Gn(e), r = Qn(o);
  let l = o === "x" ? i === (n ? "end" : "start") ? "right" : "left" : i === "start" ? "bottom" : "top";
  return t.reference[r] > t.floating[r] && (l = Xt(l)), [l, Xt(l)];
}
function Oa(e) {
  const t = Xt(e);
  return [Dn(e), t, Dn(t)];
}
function Dn(e) {
  return e.replace(/start|end/g, (t) => Ra[t]);
}
function ka(e, t, n) {
  const i = ["left", "right"], o = ["right", "left"], r = ["top", "bottom"], l = ["bottom", "top"];
  switch (e) {
    case "top":
    case "bottom":
      return n ? t ? o : i : t ? i : o;
    case "left":
    case "right":
      return t ? r : l;
    default:
      return [];
  }
}
function Da(e, t, n, i) {
  const o = Tt(e);
  let r = ka(Xe(e), n === "start", i);
  return o && (r = r.map((l) => l + "-" + o), t && (r = r.concat(r.map(Dn)))), r;
}
function Xt(e) {
  return e.replace(/left|right|bottom|top/g, (t) => Ta[t]);
}
function Fa(e) {
  return {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    ...e
  };
}
function Bo(e) {
  return typeof e != "number" ? Fa(e) : {
    top: e,
    right: e,
    bottom: e,
    left: e
  };
}
function Yt(e) {
  return {
    ...e,
    top: e.y,
    left: e.x,
    right: e.x + e.width,
    bottom: e.y + e.height
  };
}
function yi(e, t, n) {
  let {
    reference: i,
    floating: o
  } = e;
  const r = pn(t), l = Gn(t), a = Qn(l), s = Xe(t), u = r === "y", y = i.x + i.width / 2 - o.width / 2, h = i.y + i.height / 2 - o.height / 2, m = i[a] / 2 - o[a] / 2;
  let c;
  switch (s) {
    case "top":
      c = {
        x: y,
        y: i.y - o.height
      };
      break;
    case "bottom":
      c = {
        x: y,
        y: i.y + i.height
      };
      break;
    case "right":
      c = {
        x: i.x + i.width,
        y: h
      };
      break;
    case "left":
      c = {
        x: i.x - o.width,
        y: h
      };
      break;
    default:
      c = {
        x: i.x,
        y: i.y
      };
  }
  switch (Tt(t)) {
    case "start":
      c[l] -= m * (n && u ? -1 : 1);
      break;
    case "end":
      c[l] += m * (n && u ? -1 : 1);
      break;
  }
  return c;
}
const Na = async (e, t, n) => {
  const {
    placement: i = "bottom",
    strategy: o = "abs