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

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

import { jsxs as B, jsx as y, Fragment as Ce } from "react/jsx-runtime";
import { RenderTarget as _n, ControlType as f, useLocaleInfo as Lt, motion as bn, AnimatePresence as $o, addPropertyControls as te } from "framer";
import { ConfiguratorErrorType as ue, AttributeType as V, ComponentDecisionState as G, globalAttributeIdEq as Mt, ExplainQuestionType as We, ExplainQuestionSubject as ce, explainQuestionBuilder as Sr, ConfigurationModelSourceType as Er, AllowedRulesInExplainType as Ar, DecisionKind as $, ChoiceValueDecisionState as J } from "@viamedici-spc/configurator-ts";
import { useConfigurationInitialization as jo, useChoiceAttribute as rt, useExplain as Ir, Configuration as Rr, useBooleanAttribute as Vr, useComponentAttribute as Pr, useNumericAttribute as zo, useMakeDecision as yn, useAttributes as lt, useConfigurationReset as Tr, useConfigurationSatisfaction as kr, useConfigurationStoring as Wo } from "@viamedici-spc/configurator-react";
import * as w from "react";
import { Children as Ve, forwardRef as Se, createContext as Ke, useContext as me, useMemo as de, useLayoutEffect as xn, useEffect as Pe, useRef as we, useState as Ye, useCallback as je, Suspense as Or, isValidElement as _o, cloneElement as Bt, useId as Dr } from "react";
import Nr from "url-join";
import { match as Y, P as ye } from "ts-pattern";
import N, { createGlobalStyle as mt, css as Fr } from "styled-components";
import { ErrorBoundary as Lr } from "react-error-boundary";
import { pipe as D, RA as M, O as q, RM as At, flow as Ho, Str as Le, Ord as ie, RNEA as ln, RR as Uo, Bool as qo, Num as $t, MO as vn, P as Mr, E as ae, TE as Ct, TO as Br, left as ct, right as Ko } from "@viamedici-spc/fp-ts-extensions";
import { faMinus as $r, faPlus as jr, faXmark as Yo } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon as Rt } from "@fortawesome/react-fontawesome";
import * as zr from "react-dom";
import { createPortal as Wr } from "react-dom";
import _r from "clsx";
import Xo from "merge-props";
import { guid as Hr } from "dyna-guid";
import { z as ne } from "zod";
import { fromError as Ur } from "zod-validation-error";
import qr from "mustache";
import Kr from "react-number-format";
import { useDebouncedCallback as Yr } from "use-debounce";
import { useForceUpdate as Xr } from "framer-motion";
import { hexToCSSFilter as Gr } from "hex-to-css-filter";
import Jr from "rgb-hex";
import Qr from "camelcase";
function oe() {
  return _n.current() !== _n.preview;
}
const Zr = N.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;
    }
`, el = N.h3`
    margin: 0 0 var(--space-xs);
`, tl = N.div`
    white-space: break-spaces;
`;
function Go(e) {
  return /* @__PURE__ */ B(Zr, { className: e.type, children: [
    /* @__PURE__ */ y(el, { children: e.title }),
    /* @__PURE__ */ y(tl, { children: e.message })
  ] });
}
function nl(e) {
  var r, i, l;
  if (oe())
    return null;
  const { error: n } = jo();
  if (!n)
    return null;
  const o = (a) => /* @__PURE__ */ y(
    Go,
    {
      type: "error",
      title: "Configuration initialization failed",
      message: a
    }
  );
  switch (n.type) {
    case ue.ConfigurationModelNotFound:
      return Ve.toArray(e.configurationModelNotFoundContent).length > 0 ? e.configurationModelNotFoundContent : o("The Configuration Model was not found for the specified deployment name.");
    case ue.AuthenticationFailure:
      return Ve.toArray(e.accessTokenInvalidContent).length > 0 ? e.accessTokenInvalidContent : o("The HCA access token is invalid.");
    case ue.SpecifiedDeploymentForbidden:
      return Ve.toArray(e.accessTokenRestrictionContent).length > 0 ? e.accessTokenRestrictionContent : o("The HCA access token does not permit using the specified Configuration Model.");
    case ue.DecisionsToRespectInvalid:
      const a = `Attribute Id: ${((r = n.globalAttributeId) == null ? void 0 : r.localId) ?? ""}`, s = `Component Path: ${((i = n.globalAttributeId.componentPath) == null ? void 0 : i.join(" -> ")) ?? ""}`, c = `Shared Configuration Model: ${((l = n.globalAttributeId) == null ? void 0 : l.sharedConfigurationModelId) ?? ""}`;
      return o(`The definition of Attribute Relations is invalid: ${n.validationMessage}

${a}
${s}
${c}`);
    case ue.SessionParametersInvalid:
      return o(`Configuration Session parameters are invalid: ${n.detail}`);
    default:
      return Ve.toArray(e.errorContent).length > 0 ? e.errorContent : o("An error occurred while initializing the configuration.");
  }
}
function Ee(e) {
  return Se((t, n) => /* @__PURE__ */ y(Lr, { fallbackRender: () => /* @__PURE__ */ y("span", { children: "Component crashed" }), children: /* @__PURE__ */ y(e, { ...t, ref: n }) }));
}
const ol = mt`
    :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));
    }
`, il = ol, rl = mt`
    :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));
    }
`, ll = rl, al = mt`
    :root {
        --shape-border-radius-xs: 5px;
        --shape-border-radius-sm: 7px;
        --shape-border-radius-md: 12px;
        --shape-border-radius-lg: 20px;
    }
`, sl = al, cl = mt`
    :root {
        --shadows-popover: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4));
        --shadows-dialog: 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);
    }
`, ul = cl;
function Hn() {
  return /* @__PURE__ */ B(Ce, { children: [
    /* @__PURE__ */ y(ul, {}),
    /* @__PURE__ */ y(sl, {}),
    /* @__PURE__ */ y(ll, {}),
    /* @__PURE__ */ y(il, {})
  ] });
}
const ft = Ke(null);
function Be() {
  const { process: e, switchMode: t, applySolution: n, dismiss: o } = me(ft);
  return e ? {
    ...e,
    switchMode: t,
    applySolution: n,
    dismiss: o
  } : null;
}
function Jo(e) {
  const { explanation: t, ...n } = e, o = Be();
  return /* @__PURE__ */ y("button", { ...n, onClick: () => o.applySolution(t.solution), children: e.children });
}
function Qo(e, t, n) {
  return Y(e).returnType().with({ type: V.Choice }, (o) => t.get(o.choiceValueId) ?? o.choiceValueId).with({ type: V.Boolean, state: !0 }, () => n.booleanDecisionStateTrueLabel).with({ type: V.Boolean, state: !1 }, () => n.booleanDecisionStateFalseLabel).with({ type: V.Component, state: G.Included }, () => n.componentDecisionStateIncludedLabel).with({ type: V.Component, state: G.Excluded }, () => n.componentDecisionStateExcludedLabel).with({ type: V.Numeric }, (o) => o.state.toString()).exhaustive();
}
const Zo = {
  applySolutionButtonCaption: {
    title: "Apply Solution Button Caption",
    type: f.String,
    defaultValue: "Apply Solution"
  },
  configurationSubjectTitle: {
    title: "Configuration Subject Title",
    type: f.String,
    defaultValue: "Configuration"
  },
  generalConflictTitle: {
    title: "General Conflict Title",
    type: f.String,
    defaultValue: "Conflict"
  },
  componentDecisionStateIncludedLabel: {
    title: "Component Decision State Included Label",
    type: f.String,
    defaultValue: "Included"
  },
  componentDecisionStateExcludedLabel: {
    title: "Component Decision State Excluded Label",
    type: f.String,
    defaultValue: "Excluded"
  },
  booleanDecisionStateTrueLabel: {
    title: "Boolean Decision State True Label",
    type: f.String,
    defaultValue: "Yes"
  },
  booleanDecisionStateFalseLabel: {
    title: "Boolean Decision State False Label",
    type: f.String,
    defaultValue: "No"
  },
  isBlockedSuffix: {
    title: "Is Blocked Suffix",
    type: f.String,
    defaultValue: "is blocked"
  },
  isNotSatisfiedSuffix: {
    title: "Is Not Satisfied Suffix",
    type: f.String,
    defaultValue: "is not satisfied"
  }
}, dl = {
  fill: {
    title: "Fill",
    type: f.Color,
    defaultValue: "#002134"
  },
  color: {
    title: "Color",
    type: f.Color,
    defaultValue: "white"
  },
  attributeValueFill: {
    title: "Attribute Value Fill",
    type: f.Color,
    defaultValue: "rgba(255, 255, 255, 0.2)"
  },
  attributeValueAddFill: {
    title: "Attribute Value Add Fill",
    type: f.Color,
    defaultValue: "rgba(47, 255, 0, 0.2)"
  },
  attributeValueAddColor: {
    title: "Attribute Value Add Color",
    type: f.Color,
    defaultValue: "#63e446"
  },
  attributeValueRemoveFill: {
    title: "Attribute Value Remove Fill",
    type: f.Color,
    defaultValue: "#ff00004a"
  },
  attributeValueRemoveColor: {
    title: "Attribute Value Remove Color",
    type: f.Color,
    defaultValue: "#ff6060"
  },
  headerValueColor: {
    title: "Header Value Color",
    type: f.Color,
    defaultValue: "rgb(0, 161, 230)"
  },
  closeButtonOutline: {
    title: "Close Button Outline",
    type: f.Color,
    defaultValue: "rgba(255, 255, 255, 0.8)"
  },
  listSeparator: {
    title: "List Separator",
    type: f.Color,
    defaultValue: "rgba(255, 255, 255, 0.3)"
  },
  applySolutionButtonFill: {
    title: "Apply Solution Button Fill",
    type: f.Color,
    defaultValue: "rgb(0, 161, 230)"
  },
  applySolutionButtonColor: {
    title: "Apply Solution Button Color",
    type: f.Color,
    defaultValue: "white"
  },
  applySolutionButtonOutline: {
    title: "Apply Solution Button Outline",
    type: f.Color,
    defaultValue: "rgba(255, 255, 255, 0.8)"
  },
  showMoreButtonOutline: {
    title: "Show More Button Outline",
    type: f.Color,
    defaultValue: "rgba(255, 255, 255, 0.8)"
  },
  solutionTitle: {
    title: "Solution Title",
    type: f.String,
    defaultValue: "Solution"
  },
  showMoreButtonCaption: {
    title: "Show More Button Caption",
    type: f.String,
    defaultValue: "Show more ({{amount}})"
  },
  showConstraintsButtonCaption: {
    title: "Show Constraints Button Caption",
    type: f.String,
    defaultValue: "Show Constraints"
  },
  ...Zo
}, Cn = Ke(null), wn = () => me(Cn), fl = {
  fill: {
    title: "Fill",
    type: f.Color,
    defaultValue: "rgba(255, 255, 255, 0.7)"
  },
  color: {
    title: "Color",
    type: f.Color,
    defaultValue: "#171717"
  },
  attributeValueFill: {
    title: "Attribute Value Fill",
    type: f.Color,
    defaultValue: "#efefef"
  },
  attributeValueAddFill: {
    title: "Attribute Value Add Fill",
    type: f.Color,
    defaultValue: "#cfefc7"
  },
  attributeValueAddColor: {
    title: "Attribute Value Add Color",
    type: f.Color,
    defaultValue: "#48c52b"
  },
  attributeValueRemoveFill: {
    title: "Attribute Value Remove Fill",
    type: f.Color,
    defaultValue: "#ffdada"
  },
  attributeValueRemoveColor: {
    title: "Attribute Value Remove Color",
    type: f.Color,
    defaultValue: "#c52b2b"
  },
  headerValueColor: {
    title: "Header Value Color",
    type: f.Color,
    defaultValue: "#00a1e6"
  },
  closeButtonOutline: {
    title: "Close Button Outline",
    type: f.Color,
    defaultValue: "#00a1e6"
  },
  applySolutionButtonFill: {
    title: "Apply Solution Button Fill",
    type: f.Color,
    defaultValue: "#F2F2F2"
  },
  applySolutionButtonColor: {
    title: "Apply Solution Button Color",
    type: f.Color,
    defaultValue: "#171717"
  },
  applySolutionButtonOutline: {
    title: "Apply Solution Button Outline",
    type: f.Color,
    defaultValue: "#00a1e6"
  },
  explanationCard: {
    title: "Explanation Card",
    type: f.Color,
    defaultValue: "white"
  },
  scrollShadowBorder: {
    title: "Scroll Shadow Border",
    type: f.Color,
    defaultValue: "rgba(0, 0, 0, 0.3)"
  },
  backdropFilter: {
    title: "Backdrop Filter",
    type: f.String,
    defaultValue: "blur(10px) saturate(200%)"
  },
  decisionExplanationSolutionsTitle: {
    title: "Decision Explanation Solutions Title",
    type: f.String,
    defaultValue: "Solutions"
  },
  constraintExplanationSolutionsTitle: {
    title: "Constraint Explanation Solutions Title",
    type: f.String,
    defaultValue: "Constraint Explanations"
  },
  ...Zo
}, Sn = Ke(null), ei = () => me(Sn), pl = () => me(Cn) || me(Sn), En = pl, hl = N.div`
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    background-color: var(--color-explain-attribute-value-fill);
    border-radius: 360px;
    padding-right: var(--space-sm);
    font-size: 0.9em;
    font-family: var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif);
    font-weight: 500;
    min-width: 0;
`, ml = N.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;

    &.mode-add {
        background-color: var(--color-explain-attribute-value-add-fill);
        color: var(--color-explain-attribute-value-add-color);
    }

    &.mode-remove {
        background-color: var(--color-explain-attribute-value-remove-fill);
        color: var(--color-explain-attribute-value-remove-color);
    }
`, gl = N.div`
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`;
function bl(e) {
  const { decision: t, choiceValuesNames: n } = e, o = t.intention, r = En(), i = Qo(t, n, r);
  return /* @__PURE__ */ B(hl, { children: [
    /* @__PURE__ */ B(ml, { className: `mode-${o}`, children: [
      o === "remove" && /* @__PURE__ */ y(Rt, { icon: $r }),
      o === "add" && /* @__PURE__ */ y(Rt, { icon: jr })
    ] }),
    /* @__PURE__ */ y(gl, { children: i })
  ] });
}
function re(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 jt = Ke(null);
function An(e) {
  const { attributes: t } = me(jt), { activeLocale: n } = Lt(), o = n.code;
  return de(() => D(
    t,
    M.findFirst((r) => Mt.equals(re(r), e)),
    q.map((r) => r.name),
    M.fromOption,
    M.flatten,
    In(o),
    q.toUndefined
  ), [t, o, e.localId, e.componentPath, e.sharedConfigurationModelId]);
}
function zt(e) {
  const { choiceValues: t } = me(jt), { activeLocale: n } = Lt(), o = rt(e);
  if (!o)
    return At.empty;
  const r = de(() => D(
    t,
    M.filter((a) => Mt.equals(re(a), e))
  ), [t, e.localId, e.componentPath, e.sharedConfigurationModelId]), i = n.code, l = o.attribute.values;
  return de(() => D(
    l,
    At.mapWithIndex((a, s) => D(
      r,
      M.findFirst((c) => c.choiceValueId === a),
      q.map((c) => c.name),
      M.fromOption,
      M.flatten,
      In(i)
    )),
    At.compact
  ), [l, r, i]);
}
function yl(e, t) {
  const { choiceValues: n } = me(jt), { activeLocale: o } = Lt(), r = o.code;
  return de(() => D(
    n,
    M.findFirst((i) => Mt.equals(re(i), e) && i.choiceValueId === t),
    q.map((i) => i.name),
    M.fromOption,
    M.flatten,
    In(r),
    q.toUndefined
  ), [n, r, e.localId, e.componentPath, e.sharedConfigurationModelId, t]);
}
function In(e) {
  return Ho(
    M.findFirst((t) => t.localeCode.localeCompare(e, void 0, { sensitivity: "accent" }) === 0),
    q.map((t) => t.translation)
  );
}
const xl = N.div`
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: center;
`, vl = N.div`
    grid-area: name;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`, Cl = N.div`
    grid-area: values;
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--space-xxs);
`;
function wl(e) {
  const { decisions: t } = e, n = t[0].attributeId, o = zt(n), r = An(n), i = En(), l = D(
    Le.Ord,
    ie.contramap((s) => Qo(s, o, i))
  ), a = D(
    t,
    M.sort(l)
  );
  return /* @__PURE__ */ B(xl, { children: [
    /* @__PURE__ */ y(vl, { children: r ?? n.localId }),
    /* @__PURE__ */ y(Cl, { children: a.map((s, c) => /* @__PURE__ */ y(bl, { decision: s, choiceValuesNames: o }, c)) })
  ] });
}
function Sl(e) {
  const t = e.sharedConfigurationModelId && `shared::${e.sharedConfigurationModelId}`, n = (e.componentPath ?? []).join("::");
  return [t, n, e.localId].filter((o) => (o == null ? void 0 : o.length) > 0).join("::");
}
const El = D(
  Le.Ord,
  ie.contramap((e) => e.attributeId.localId)
);
function ti(e) {
  const { blockingDecisions: t, desiredDecisions: n, ...o } = e, r = D(
    [
      ...n.map((i) => ({ ...i, intention: "add" })),
      ...t.map((i) => ({ ...i, intention: "remove" }))
    ],
    ln.groupBy((i) => Sl(i.attributeId)),
    Uo.collect(ie.trivial)((i, l) => ({ key: i, attributeId: ln.head(l).attributeId, decisions: l })),
    M.sort(El)
  );
  return /* @__PURE__ */ y("div", { ...o, children: r.map((i) => /* @__PURE__ */ y(wl, { decisions: i.decisions }, i.key)) });
}
const Al = N.div`
    background-color: var(--color-explain-dialog-explanation-card);
    padding: var(--space-sm-fixed);
    box-shadow: 2px 1px 10px -5px rgba(0, 0, 0, 0.4);
    border-radius: var(--shape-border-radius-sm);
`, ni = Al, Il = N(ti)`
    display: grid;
    grid-template-columns: [name] minmax(150px, auto) [values] minmax(0px, 1fr);
    gap: var(--space-sm);
`, Rl = N(Jo)`
    border-radius: var(--shape-border-radius-sm);
    background-color: var(--color-explain-dialog-apply-solution-button-fill);
    color: var(--color-explain-dialog-apply-solution-button-color);
    font-size: 0.9em;
    font-family: var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif);
    font-weight: 600;
    appearance: none;
    padding: 0.6em 1em;
    border: none;
    width: auto;
    margin-top: var(--space-md);

    &:focus {
        outline: 2px solid var(--color-explain-dialog-apply-solution-button-outline);
        outline-offset: 1px;
    }
`;
function Vl(e) {
  const { explanation: t } = e, { applySolutionButtonCaption: n } = ei(), o = t.solution.decisions.filter((r) => r.state != null);
  return /* @__PURE__ */ B(ni, { children: [
    /* @__PURE__ */ y(Il, { blockingDecisions: t.causedByDecisions, desiredDecisions: o }),
    /* @__PURE__ */ y(Rl, { explanation: t, children: n })
  ] });
}
const Pl = N(ni)`
    ul {
        margin: 0;
    }

    line-height: 1.5em;
`, Tl = N.ul`
    list-style-type: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
`, Un = N.ul`
    list-style-type: disc;
    margin-inline-start: 0;
    padding-inline-start: var(--space-lg);
`, qn = N.li`
    font-size: 0.9em;
    font-family: var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif);
    font-weight: 500;
`;
function kl(e) {
  const { explanation: t } = e, n = t.causedByCardinalities, o = D(
    t.causedByRules,
    ln.groupBy((r) => r.configurationModelId),
    Uo.collect(Le.Ord)((r, i) => ({
      configurationModelId: r,
      rules: D(i, M.map((l) => l.localId), M.sort(Le.Ord))
    }))
  );
  return /* @__PURE__ */ y(Pl, { children: /* @__PURE__ */ B(Tl, { children: [
    o.map((r) => /* @__PURE__ */ B("li", { children: [
      /* @__PURE__ */ y("span", { children: r.configurationModelId }),
      /* @__PURE__ */ y(Un, { children: r.rules.map((i) => /* @__PURE__ */ y(qn, { children: i })) })
    ] })),
    n.length > 0 && /* @__PURE__ */ B("li", { children: [
      /* @__PURE__ */ y("span", { children: "Cardinality" }),
      /* @__PURE__ */ y(Un, { children: n.map((r) => /* @__PURE__ */ y(qn, { children: r.localId })) })
    ] })
  ] }) });
}
function oi(e) {
  const { variant: t, ...n } = e, { explainQuestion: o } = Be(), r = Y(o).returnType().with({ question: We.whyIsStateNotPossible }, () => "why your selection is not possible").with({ question: We.whyIsNotSatisfied, subject: ce.configuration }, () => "why your configuration is not satisfied").with({ question: We.whyIsNotSatisfied, subject: ce.attribute }, () => "why your attribute is not satisfied").with(ye.nullish, () => "why your selections are not possible").exhaustive(), i = Y(t).returnType().with("failedToExplain", () => /* @__PURE__ */ B(Ce, { children: [
    "Failed to explain ",
    r,
    ".",
    /* @__PURE__ */ y("br", {}),
    "Please check your internet connection and try again."
  ] })).with("noExplanationFound", () => /* @__PURE__ */ B(Ce, { children: [
    "There was no explanation found for ",
    r,
    "."
  ] })).with("noSolutionFound", () => /* @__PURE__ */ B(Ce, { children: [
    "There was no solution found for ",
    r,
    "."
  ] })).exhaustive();
  return /* @__PURE__ */ y("div", { ...n, children: i });
}
const Kn = N.div`
    font-weight: 500;
    font-family: var(--font-heading);
    margin-bottom: var(--space-xs);
    margin-left: var(--space-sm-fixed);
`, Yn = N.div`
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
`, Ol = N.div`
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
`, Xn = N(oi)`
    width: min-content;
    min-width: 400px;
    margin: var(--space-sm-fixed) var(--space-md-fixed) var(--space-sm-fixed) var(--space-sm-fixed);
`;
function Dl() {
  const { decisionExplanations: e, constraintExplanations: t, hasError: n } = Be(), { decisionExplanationSolutionsTitle: o, constraintExplanationSolutionsTitle: r } = ei();
  return n ? /* @__PURE__ */ y(Xn, { variant: "failedToExplain" }) : e.length === 0 && t.length === 0 ? /* @__PURE__ */ y(Xn, { variant: "noExplanationFound" }) : /* @__PURE__ */ B(Ol, { children: [
    e.length > 0 && /* @__PURE__ */ B("div", { children: [
      /* @__PURE__ */ y(Kn, { children: o }),
      /* @__PURE__ */ y(Yn, { children: e.map((i) => /* @__PURE__ */ y(Vl, { explanation: i }, e.indexOf(i))) })
    ] }),
    t.length > 0 && /* @__PURE__ */ B("div", { children: [
      /* @__PURE__ */ y(Kn, { children: r }),
      /* @__PURE__ */ y(Yn, { children: t.map((i) => /* @__PURE__ */ y(kl, { explanation: i }, t.indexOf(i))) })
    ] })
  ] });
}
function Te(e) {
  return ii(e) ? (e.nodeName || "").toLowerCase() : "#document";
}
function he(e) {
  var t;
  return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
}
function ke(e) {
  var t;
  return (t = (ii(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
}
function ii(e) {
  return e instanceof Node || e instanceof he(e).Node;
}
function ee(e) {
  return e instanceof Element || e instanceof he(e).Element;
}
function fe(e) {
  return e instanceof HTMLElement || e instanceof he(e).HTMLElement;
}
function an(e) {
  return typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof he(e).ShadowRoot;
}
function gt(e) {
  const {
    overflow: t,
    overflowX: n,
    overflowY: o,
    display: r
  } = ge(e);
  return /auto|scroll|overlay|hidden|clip/.test(t + o + n) && !["inline", "contents"].includes(r);
}
function Nl(e) {
  return ["table", "td", "th"].includes(Te(e));
}
function Rn(e) {
  const t = Vn(), n = ge(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((o) => (n.willChange || "").includes(o)) || ["paint", "layout", "strict", "content"].some((o) => (n.contain || "").includes(o));
}
function ri(e) {
  let t = He(e);
  for (; fe(t) && !et(t); ) {
    if (Rn(t))
      return t;
    t = He(t);
  }
  return null;
}
function Vn() {
  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
}
function et(e) {
  return ["html", "body", "#document"].includes(Te(e));
}
function ge(e) {
  return he(e).getComputedStyle(e);
}
function Wt(e) {
  return ee(e) ? {
    scrollLeft: e.scrollLeft,
    scrollTop: e.scrollTop
  } : {
    scrollLeft: e.pageXOffset,
    scrollTop: e.pageYOffset
  };
}
function He(e) {
  if (Te(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.
    an(e) && e.host || // Fallback.
    ke(e)
  );
  return an(t) ? t.host : t;
}
function li(e) {
  const t = He(e);
  return et(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : fe(t) && gt(t) ? t : li(t);
}
function Fe(e, t, n) {
  var o;
  t === void 0 && (t = []), n === void 0 && (n = !0);
  const r = li(e), i = r === ((o = e.ownerDocument) == null ? void 0 : o.body), l = he(r);
  return i ? t.concat(l, l.visualViewport || [], gt(r) ? r : [], l.frameElement && n ? Fe(l.frameElement) : []) : t.concat(r, Fe(r, [], n));
}
function Ge(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 pe(e, t) {
  if (!e || !t)
    return !1;
  const n = t.getRootNode == null ? void 0 : t.getRootNode();
  if (e.contains(t))
    return !0;
  if (n && an(n)) {
    let o = t;
    for (; o; ) {
      if (e === o)
        return !0;
      o = o.parentNode || o.host;
    }
  }
  return !1;
}
function ai() {
  const e = navigator.userAgentData;
  return e != null && e.platform ? e.platform : navigator.platform;
}
function si() {
  const e = navigator.userAgentData;
  return e && Array.isArray(e.brands) ? e.brands.map((t) => {
    let {
      brand: n,
      version: o
    } = t;
    return n + "/" + o;
  }).join(" ") : navigator.userAgent;
}
function Fl(e) {
  return e.mozInputSource === 0 && e.isTrusted ? !0 : sn() && e.pointerType ? e.type === "click" && e.buttons === 1 : e.detail === 0 && !e.pointerType;
}
function Ll(e) {
  return Bl() ? !1 : !sn() && e.width === 0 && e.height === 0 || sn() && 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 Ml() {
  return /apple/i.test(navigator.vendor);
}
function sn() {
  const e = /android/i;
  return e.test(ai()) || e.test(si());
}
function Bl() {
  return si().includes("jsdom/");
}
function Gn(e, t) {
  const n = ["mouse", "pen"];
  return t || n.push("", void 0), n.includes(e);
}
function $l(e) {
  return "nativeEvent" in e;
}
function jl(e) {
  return e.matches("html,body");
}
function Re(e) {
  return (e == null ? void 0 : e.ownerDocument) || document;
}
function Ut(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 Je(e) {
  return "composedPath" in e ? e.composedPath()[0] : e.target;
}
const zl = "input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
function ci(e) {
  return fe(e) && e.matches(zl);
}
function qt(e) {
  e.preventDefault(), e.stopPropagation();
}
function Wl(e) {
  return e ? e.getAttribute("role") === "combobox" && ci(e) : !1;
}
const tt = Math.min, _e = Math.max, Vt = Math.round, wt = Math.floor, Me = (e) => ({
  x: e,
  y: e
}), _l = {
  left: "right",
  right: "left",
  bottom: "top",
  top: "bottom"
}, Hl = {
  start: "end",
  end: "start"
};
function cn(e, t, n) {
  return _e(e, tt(t, n));
}
function bt(e, t) {
  return typeof e == "function" ? e(t) : e;
}
function Ue(e) {
  return e.split("-")[0];
}
function yt(e) {
  return e.split("-")[1];
}
function ui(e) {
  return e === "x" ? "y" : "x";
}
function Pn(e) {
  return e === "y" ? "height" : "width";
}
function _t(e) {
  return ["top", "bottom"].includes(Ue(e)) ? "y" : "x";
}
function Tn(e) {
  return ui(_t(e));
}
function Ul(e, t, n) {
  n === void 0 && (n = !1);
  const o = yt(e), r = Tn(e), i = Pn(r);
  let l = r === "x" ? o === (n ? "end" : "start") ? "right" : "left" : o === "start" ? "bottom" : "top";
  return t.reference[i] > t.floating[i] && (l = Pt(l)), [l, Pt(l)];
}
function ql(e) {
  const t = Pt(e);
  return [un(e), t, un(t)];
}
function un(e) {
  return e.replace(/start|end/g, (t) => Hl[t]);
}
function Kl(e, t, n) {
  const o = ["left", "right"], r = ["right", "left"], i = ["top", "bottom"], l = ["bottom", "top"];
  switch (e) {
    case "top":
    case "bottom":
      return n ? t ? r : o : t ? o : r;
    case "left":
    case "right":
      return t ? i : l;
    default:
      return [];
  }
}
function Yl(e, t, n, o) {
  const r = yt(e);
  let i = Kl(Ue(e), n === "start", o);
  return r && (i = i.map((l) => l + "-" + r), t && (i = i.concat(i.map(un)))), i;
}
function Pt(e) {
  return e.replace(/left|right|bottom|top/g, (t) => _l[t]);
}
function Xl(e) {
  return {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    ...e
  };
}
function di(e) {
  return typeof e != "number" ? Xl(e) : {
    top: e,
    right: e,
    bottom: e,
    left: e
  };
}
function Tt(e) {
  return {
    ...e,
    top: e.y,
    left: e.x,
    right: e.x + e.width,
    bottom: e.y + e.height
  };
}
function Jn(e, t, n) {
  let {
    reference: o,
    floating: r
  } = e;
  const i = _t(t), l = Tn(t), a = Pn(l), s = Ue(t), c = i === "y", b = o.x + o.width / 2 - r.width / 2, d = o.y + o.height / 2 - r.height / 2, m = o[a] / 2 - r[a] / 2;
  let u;
  switch (s) {
    case "top":
      u = {
        x: b,
        y: o.y - r.height
      };
      break;
    case "bottom":
      u = {
        x: b,
        y: o.y + o.height
      };
      break;
    case "right":
      u = {
        x: o.x + o.width,
        y: d
      };
      break;
    case "left":
      u = {
        x: o.x - r.width,
        y: d
      };
      break;
    default:
      u = {
        x: o.x,
        y: o.y
      };
  }
  switch (yt(t)) {
    case "start":
      u[l] -= m * (n && c ? -1 : 1);
      break;
    case "end":
      u[l] += m * (n && c ? -1 : 1);
      break;
  }
  return u;
}
const Gl = async (e, t, n) => {
  const {
    placement: o = "bottom",
    strategy: r = "absolute",
    middleware: i = [],
    platform: l
  } = n, a = i.filter(Boolean), s = await (l.isRTL == null ? void 0 : l.isRTL(t));
  let c = await l.getElementRects({
    reference: e,
    floating: t,
    strategy: r
  }), {
    x: b,
    y: d
  } = Jn(c, o, s), m = o, u = {}, g = 0;
  for (let v = 0; v < a.length; v++) {
    const {
      name: h,
      fn: p
    } = a[v], {
      x,
      y: R,
      data: C,
      reset: E
    } = await p({
      x: b,
      y: d,
      initialPlacement: o,
      placement: m,
      strategy: r,
      middlewareData: u,
      rects: c,
      platform: l,
      elements: {
        reference: e,
        floating: t
      }
    });
    b = x ?? b, d = R ?? d, u = {
      ...u,
      [h]: {
        ...u[h],
        ...C
      }
    }, E && g <= 50 && (g++, typeof E == "object" && (E.placement && (m = E.placement), E.rects && (c = E.rects === !0 ? await l.getElementRects({
      reference: e,
      floating: t,
      strategy: r
    }) : E.rects), {
      x: b,
      y: d
    } = Jn(c, m, s)), v = -1);
  }
  return {
    x: b,
    y: d,
    placement: m,
    strategy: r,
    middlewareData: u
  };
};
async function fi(e, t) {
  var n;
  t === void 0 && (t = {});
  const {
    x: o,
    y: r,
    platform: i,
    rects: l,
    elements: a,
    strategy: s
  } = e, {
    boundary: c = "clippingAncestors",
    rootBoundary: b = "viewport",
    elementContext: d = "floating",
    altBoundary: m = !1,
    padding: u = 0
  } = bt(t, e), g = di(u), h = a[m ? d === "floating" ? "reference" : "floating" : d], p = Tt(await i.getClippingRect({
    element: (n = await (i.isElement == null ? void 0 : i.isElement(h))) == null || n ? h : h.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(a.floating)),
    boundary: c,
    rootBoundary: b,
    strategy: s
  })), x = d === "floating" ? {
    ...l.floating,
    x: o,
    y: r
  } : l.reference, R = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(a.floating)), C = await (i.isElement == null ? void 0 : i.isElement(R)) ? await (i.getScale == null ? void 0 : i.getScale(R)) || {
    x: 1,
    y: 1
  } : {
    x: 1,
    y: 1
  }, E = Tt(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
    elements: a,
    rect: x,
    offsetParent: R,
    strategy: s
  }) : x);
  return {
    top: (p.top - E.top + g.top) / C.y,
    bottom: (E.bottom - p.bottom + g.bottom) / C.y,
    left: (p.left - E.left + g.left) / C.x,
    right: (E.right - p.right + g.right) / C.x
  };
}
const Jl = (e) => ({
  name: "arrow",
  options: e,
  async fn(t) {
    const {
      x: n,
      y: o,
      placement: r,
      rects: i,
      platform: l,
      elements: a,
      middlewareData: s
    } = t, {
      element: c,
      padding: b = 0
    } = bt(e, t) || {};
    if (c == null)
      return {};
    const d = di(b), m = {
      x: n,
      y: o
    }, u = Tn(r), g = Pn(u), v = await l.getDimensions(c), h = u === "y", p = h ? "top" : "left", x = h ? "bottom" : "right", R = h ? "clientHeight" : "clientWidth", C = i.reference[g] + i.reference[u] - m[u] - i.floating[g], E = m[u] - i.reference[u], A = await (l.getOffsetParent == null ? void 0 : l.getOffsetParent(c));
    let P = A ? A[R] : 0;
    (!P || !await (l.isElement == null ? void 0 : l.isElement(A))) && (P = a.floating[R] || i.floating[g]);
    const I = C / 2 - E / 2, k = P / 2 - v[g] / 2 - 1, S = tt(d[p], k), F = tt(d[x], k), j = S, _ = P - v[g] - F, K = P / 2 - v[g] / 2 + I, O = cn(j, K, _), z = !s.arrow && yt(r) != null && K !== O && i.reference[g] / 2 - (K < j ? S : F) - v[g] / 2 < 0, T = z ? K < j ? K - j : K - _ : 0;
    return {
      [u]: m[u] + T,
      data: {
        [u]: O,
        centerOffset: K - O - T,
        ...z && {
          alignmentOffset: T
        }
      },
      reset: z
    };
  }
}), Ql = function(e) {
  return e === void 0 && (e = {}), {
    name: "flip",
    options: e,
    async fn(t) {
      var n, o;
      const {
        placement: r,
        middlewareData: i,
        rects: l,
        initialPlacement: a,
        platform: s,
        elements: c
      } = t, {
        mainAxis: b = !0,
        crossAxis: d = !0,
        fallbackPlacements: m,
        fallbackStrategy: u = "bestFit",
        fallbackAxisSideDirection: g = "none",
        flipAlignment: v = !0,
        ...h
      } = bt(e, t);
      if ((n = i.arrow) != null && n.alignmentOffset)
        return {};
      const p = Ue(r), x = Ue(a) === a, R = await (s.isRTL == null ? void 0 : s.isRTL(c.floating)), C = m || (x || !v ? [Pt(a)] : ql(a));
      !m && g !== "none" && C.push(...Yl(a, v, g, R));
      const E = [a, ...C], A = await fi(t, h), P = [];
      let I = ((o = i.flip) == null ? void 0 : o.overflows) || [];
      if (b && P.push(A[p]), d) {
        const j = Ul(r, l, R);
        P.push(A[j[0]], A[j[1]]);
      }
      if (I = [...I, {
        placement: r,
        overflows: P
      }], !P.every((j) => j <= 0)) {
        var k, S;
        const j = (((k = i.flip) == null ? void 0 : k.index) || 0) + 1, _ = E[j];
        if (_)
          return {
            data: {
              index: j,
              overflows: I
            },
            reset: {
              placement: _
            }
          };
        let K = (S = I.filter((O) => O.overflows[0] <= 0).sort((O, z) => O.overflows[1] - z.overflows[1])[0]) == null ? void 0 : S.placement;
        if (!K)
          switch (u) {
            case "bestFit": {
              var F;
              const O = (F = I.map((z) => [z.placement, z.overflows.filter((T) => T > 0).reduce((T, L) => T + L, 0)]).sort((z, T) => z[1] - T[1])[0]) == null ? void 0 : F[0];
              O && (K = O);
              break;
            }
            case "initialPlacement":
              K = a;
              break;
          }
        if (r !== K)
          return {
            reset: {
              placement: K
            }
          };
      }
      return {};
    }
  };
};
async function Zl(e, t) {
  const {
    placement: n,
    platform: o,
    elements: r
  } = e, i = await (o.isRTL == null ? void 0 : o.isRTL(r.floating)), l = Ue(n), a = yt(n), s = _t(n) === "y", c = ["left", "top"].includes(l) ? -1 : 1, b = i && s ? -1 : 1, d = bt(t, e);
  let {
    mainAxis: m,
    crossAxis: u,
    alignmentAxis: g
  } = typeof d == "number" ? {
    mainAxis: d,
    crossAxis: 0,
    alignmentAxis: null
  } : {
    mainAxis: 0,
    crossAxis: 0,
    alignmentAxis: null,
    ...d
  };
  return a && typeof g == "number" && (u = a === "end" ? g * -1 : g), s ? {
    x: u * b,
    y: m * c
  } : {
    x: m * c,
    y: u * b
  };
}
const ea = function(e) {
  return e === void 0 && (e = 0), {
    name: "offset",
    options: e,
    async fn(t) {
      var n, o;
      const {
        x: r,
        y: i,
        placement: l,
        middlewareData: a
      } = t, s = await Zl(t, e);
      return l === ((n = a.offset) == null ? void 0 : n.placement) && (o = a.arrow) != null && o.alignmentOffset ? {} : {
        x: r + s.x,
        y: i + s.y,
        data: {
          ...s,
          placement: l
        }
      };
    }
  };
}, ta = function(e) {
  return e === void 0 && (e = {}), {
    name: "shift",
    options: e,
    async fn(t) {
      const {
        x: n,
        y: o,
        placement: r
      } = t, {
        mainAxis: i = !0,
        crossAxis: l = !1,
        limiter: a = {
          fn: (h) => {
            let {
              x: p,
              y: x
            } = h;
            return {
              x: p,
              y: x
            };
          }
        },
        ...s
      } = bt(e, t), c = {
        x: n,
        y: o
      }, b = await fi(t, s), d = _t(Ue(r)), m = ui(d);
      let u = c[m], g = c[d];
      if (i) {
        const h = m === "y" ? "top" : "left", p = m === "y" ? "bottom" : "right", x = u + b[h], R = u - b[p];
        u = cn(x, u, R);
      }
      if (l) {
        const h = d === "y" ? "top" : "left", p = d === "y" ? "bottom" : "right", x = g + b[h], R = g - b[p];
        g = cn(x, g, R);
      }
      const v = a.fn({
        ...t,
        [m]: u,
        [d]: g
      });
      return {
        ...v,
        data: {
          x: v.x - n,
          y: v.y - o
        }
      };
    }
  };
};
function pi(e) {
  const t = ge(e);
  let n = parseFloat(t.width) || 0, o = parseFloat(t.height) || 0;
  const r = fe(e), i = r ? e.offsetWidth : n, l = r ? e.offsetHeight : o, a = Vt(n) !== i || Vt(o) !== l;
  return a && (n = i, o = l), {
    width: n,
    height: o,
    $: a
  };
}
function kn(e) {
  return ee(e) ? e : e.contextElement;
}
function Ze(e) {
  const t = kn(e);
  if (!fe(t))
    return Me(1);
  const n = t.getBoundingClientRect(), {
    width: o,
    height: r,
    $: i
  } = pi(t);
  let l = (i ? Vt(n.width) : n.width) / o, a = (i ? Vt(n.height) : n.height) / r;
  return (!l || !Number.isFinite(l)) && (l = 1), (!a || !Number.isFinite(a)) && (a = 1), {
    x: l,
    y: a
  };
}
const na = /* @__PURE__ */ Me(0);
function hi(e) {
  const t = he(e);
  return !Vn() || !t.visualViewport ? na : {
    x: t.visualViewport.offsetLeft,
    y: t.visualViewport.offsetTop
  };
}
function oa(e, t, n) {
  return t === void 0 && (t = !1), !n || t && n !== he(e) ? !1 : t;
}
function qe(e, t, n, o) {
  t === void 0 && (t = !1), n === void 0 && (n = !1);
  const r = e.getBoundingClientRect(), i = kn(e);
  let l = Me(1);
  t && (o ? ee(o) && (l = Ze(o)) : l = Ze(e));
  const a = oa(i, n, o) ? hi(i) : Me(0);
  let s = (r.left + a.x) / l.x, c = (r.top + a.y) / l.y, b = r.width / l.x, d = r.height / l.y;
  if (i) {
    const m = he(i), u = o && ee(o) ? he(o) : o;
    let g = m.frameElement;
    for (; g && o && u !== m; ) {
      const v = Ze(g), h = g.getBoundingClientRect(), p = ge(g), x = h.left + (g.clientLeft + parseFloat(p.paddingLeft)) * v.x, R = h.top + (g.clientTop + parseFloat(p.paddingTop)) * v.y;
      s *= v.x, c *= v.y, b *= v.x, d *= v.y, s += x, c += R, g = he(g).frameElement;
    }
  }
  return Tt({
    width: b,
    height: d,
    x: s,
    y: c
  });
}
const ia = [":popover-open", ":modal"];
function mi(e) {
  let t = !1, n = 0, o = 0;
  function r(i) {
    try {
      t = t || e.matches(i);
    } catch {
    }
  }
  if (ia.forEach((i) => {
    r(i);
  }), t) {
    const i = ri(e);
    if (i) {
      const l = i.getBoundingClientRect();
      n = l.x, o = l.y;
    }
  }
  return [t, n, o];
}
function ra(e) {
  let {
    elements: t,
    rect: n,
    offsetParent: o,
    strategy: r
  } = e;
  const i = ke(o), [l] = t ? mi(t.floating) : [!1];
  if (o === i || l)
    return n;
  let a = {
    scrollLeft: 0,
    scrollTop: 0
  }, s = Me(1);
  const c = Me(0), b = fe(o);
  if ((b || !b && r !== "fixed") && ((Te(o) !== "body" || gt(i)) && (a = Wt(o)), fe(o))) {
    const d = qe(o);
    s = Ze(o), c.x = d.x + o.clientLeft, c.y = d.y + o.clientTop;
  }
  return {
    width: n.width * s.x,
    height: n.height * s.y,
    x: n.x * s.x - a.scrollLeft * s.x + c.x,
    y: n.y * s.y - a.scrollTop * s.y + c.y
  };
}
function la(e) {
  return Array.from(e.getClientRects());
}
function gi(e) {
  return qe(ke(e)).left + Wt(e).scrollLeft;
}
function aa(e) {
  const t = ke(e), n = Wt(e), o = e.ownerDocument.body, r = _e(t.scrollWidth, t.clientWidth, o.scrollWidth, o.clientWidth), i = _e(t.scrollHeight, t.clientHeight, o.scrollHeight, o.clientHeight);
  let l = -n.scrollLeft + gi(e);
  const a = -n.scrollTop;
  return ge(o).direction === "rtl" && (l += _e(t.clientWidth, o.clientWidth) - r), {
    width: r,
    height: i,
    x: l,
    y: a
  };
}
function sa(e, t) {
  const n = he(e), o = ke(e), r = n.visualViewport;
  let i = o.clientWidth, l = o.clientHeight, a = 0, s = 0;
  if (r) {
    i = r.width, l = r.height;
    const c = Vn();
    (!c || c && t === "fixed") && (a = r.offsetLeft, s = r.offsetTop);
  }
  return {
    width: i,
    height: l,
    x: a,
    y: s
  };
}
function ca(e, t) {
  const n = qe(e, !0, t === "fixed"), o = n.top + e.clientTop, r = n.left + e.clientLeft, i = fe(e) ? Ze(e) : Me(1), l = e.clientWidth * i.x, a = e.clientHeight * i.y, s = r * i.x, c = o * i.y;
  return {
    width: l,
    height: a,
    x: s,
    y: c
  };
}
function Qn(e, t, n) {
  let o;
  if (t === "viewport")
    o = sa(e, n);
  else if (t === "document")
    o = aa(ke(e));
  else if (ee(t))
    o = ca(t, n);
  else {
    const r = hi(e);
    o = {
      ...t,
      x: t.x - r.x,
      y: t.y - r.y
    };
  }
  return Tt(o);
}
function bi(e, t) {
  const n = He(e);
  return n === t || !ee(n) || et(n) ? !1 : ge(n).position === "fixed" || bi(n, t);
}
function ua(e, t) {
  const n = t.get(e);
  if (n)
    return n;
  let o = Fe(e, [], !1).filter((a) => ee(a) && Te(a) !== "body"), r = null;
  const i = ge(e).position === "fixed";
  let l = i ? He(e) : e;
  for (; ee(l) && !et(l); ) {
    const a = ge(l), s = Rn(l);
    !s && a.position === "fixed" && (r = null), (i ? !s && !r : !s && a.position === "static" && !!r && ["absolute", "fixed"].includes(r.position) || gt(l) && !s && bi(e, l)) ? o = o.filter((b) => b !== l) : r = a, l = He(l);
  }
  return t.set(e, o), o;
}
function da(e) {
  let {
    element: t,
    boundary: n,
    rootBoundary: o,
    strategy: r
  } = e;
  const l = [...n === "clippingAncestors" ? ua(t, this._c) : [].concat(n), o], a = l[0], s = l.reduce((c, b) => {
    const d = Qn(t, b, r);
    return c.top = _e(d.top, c.top), c.right = tt(d.right, c.right), c.bottom = tt(d.bottom, c.bottom), c.left = _e(d.left, c.left), c;
  }, Qn(t, a, r));
  return {
    width: s.right - s.left,
    height: s.bottom - s.top,
    x: s.left,
    y: s.top
  };
}
function fa(e) {
  const {
    width: t,
    height: n
  } = pi(e);
  return {
    width: t,
    height: n
  };
}
function pa(e, t, n, o) {
  const r = fe(t), i = ke(t), l = n === "fixed", a = qe(e, !0, l, t);
  let s = {
    scrollLeft: 0,
    scrollTop: 0
  };
  const c = Me(0);
  if (r || !r && !l)
    if ((Te(t) !== "body" || gt(i)) && (s = Wt(t)), r) {
      const v = qe(t, !0, l, t);
      c.x = v.x + t.clientLeft, c.y = v.y + t.clientTop;
    } else
      i && (c.x = gi(i));
  let b = a.left + s.scrollLeft - c.x, d = a.top + s.scrollTop - c.y;
  const [m, u, g] = mi(o);
  return m && (b += u, d += g, r && (b += t.clientLeft, d += t.clientTop)), {
    x: b,
    y: d,
    width: a.width,
    height: a.height
  };
}
function Zn(e, t) {
  return !fe(e) || ge(e).position === "fixed" ? null : t ? t(e) : e.offsetParent;
}
function yi(e, t) {
  const n = he(e);
  if (!fe(e))
    return n;
  let o = Zn(e, t);
  for (; o && Nl(o) && ge(o).position === "static"; )
    o = Zn(o, t);
  return o && (Te(o) === "html" || Te(o) === "body" && ge(o).position === "static" && !Rn(o)) ? n : o || ri(e) || n;
}
const ha = async function(e) {
  const t = this.getOffsetParent || yi, n = this.getDimensions;
  return {
    reference: pa(e.reference, await t(e.floating), e.strategy, e.floating),
    floating: {
      x: 0,
      y: 0,
      ...await n(e.floating)
    }
  };
};
function ma(e) {
  return ge(e).direction === "rtl";
}
const xi = {
  convertOffsetParentRelativeRectToViewportRelativeRect: ra,
  getDocumentElement: ke,
  getClippingRect: da,
  getOffsetParent: yi,
  getElementRects: ha,
  getClientRects: la,
  getDimensions: fa,
  getScale: Ze,
  isElement: ee,
  isRTL: ma
};
function ga(e, t) {
  let n = null, o;
  const r = ke(e);
  function i() {
    var a;
    clearTimeout(o), (a = n) == null || a.disconnect(), n = null;
  }
  function l(a, s) {
    a === void 0 && (a = !1), s === void 0 && (s = 1), i();
    const {
      left: c,
      top: b,
      width: d,
      height: m
    } = e.getBoundingClientRect();
    if (a || t(), !d || !m)
      return;
    const u = wt(b), g = wt(r.clientWidth - (c + d)), v = wt(r.clientHeight - (b + m)), h = wt(c), x = {
      rootMargin: -u + "px " + -g + "px " + -v + "px " + -h + "px",
      threshold: _e(0, tt(1, s)) || 1
    };
    let R = !0;
    function C(E) {
      const A = E[0].intersectionRatio;
      if (A !== s) {
        if (!R)
          return l();
        A ? l(!1, A) : o = setTimeout(() => {
          l(!1, 1e-7);
        }, 100);
      }
      R = !1;
    }
    try {
      n = new IntersectionObserver(C, {
        ...x,
        // Handle <iframe>s
        root: r.ownerDocument
      });
    } catch {
      n = new IntersectionObserver(C, x);
    }
    n.observe(e);
  }
  return l(!0), i;
}
function ba(e, t, n, o) {
  o === void 0 && (o = {});
  const {
    ancestorScroll: r = !0,
    ancestorResize: i = !0,
    elementResize: l = typeof ResizeObserver == "function",
    layoutShift: a = typeof IntersectionObserver == "function",
    animationFrame: s = !1
  } = o, c = kn(e), b = r || i ? [...c ? Fe(c) : [], ...Fe(t)] : [];
  b.forEach((p) => {
    r && p.addEventListener("scroll", n, {
      passive: !0
    }), i && p.addEventListener("resize", n);
  });
  const d = c && a ? ga(c, n) : null;
  let m = -1, u = null;
  l && (u = new ResizeObserver((p) => {
    let [x] = p;
    x && x.target === c && u && (u.unobserve(t), cancelAnimationFrame(m), m = requestAnimationFrame(() => {
      var R;
      (R = u) == null || R.observe(t);
    })), n();
  }), c && !s && u.observe(c), u.observe(t));
  let g, v = s ? qe(e) : null;
  s && h();
  function h() {
    const p = qe(e);
    v && (p.x !== v.x || p.y !== v.y || p.width !== v.width || p.height !== v.height) && n(), v = p, g = requestAnimationFrame(h);
  }
  return n(), () => {
    var p;
    b.forEach((x) => {
      r && x.removeEventListener("scroll", n), i && x.removeEventListener("resize", n);
    }), d == null || d(), (p = u) == null || p.disconnect(), u = null, s && cancelAnimationFrame(g);
  };
}
const ya = ta, xa = Ql, eo = Jl, va = (e, t, n) => {
  const o = /* @__PURE__ */ new Map(), r = {
    platform: xi,
    ...n
  }, i = {
    ...r.platform,
    _c: o
  };
  return Gl(e, t, {
    ...r,
    platform: i
  });
}, Ca = (e) => {
  function t(n) {