import { options, Fragment } from "preact";
import { useEffect } from "react";
const pxToRem = (...t) => t.map((a) => `${a / 16}rem`).join(" "), pxToEm = (...t) => t.map((a) => `${a / 16}em`).join(" "), theme_css_ts_vanilla = "", button_css_ts_vanilla = "";
function _defineProperty$1(t, a, r) {
  return a in t ? Object.defineProperty(t, a, {
    value: r,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : t[a] = r, t;
}
function ownKeys$1(t, a) {
  var r = Object.keys(t);
  if (Object.getOwnPropertySymbols) {
    var s = Object.getOwnPropertySymbols(t);
    a && (s = s.filter(function(i) {
      return Object.getOwnPropertyDescriptor(t, i).enumerable;
    })), r.push.apply(r, s);
  }
  return r;
}
function _objectSpread2$1(t) {
  for (var a = 1; a < arguments.length; a++) {
    var r = arguments[a] != null ? arguments[a] : {};
    a % 2 ? ownKeys$1(Object(r), !0).forEach(function(s) {
      _defineProperty$1(t, s, r[s]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : ownKeys$1(Object(r)).forEach(function(s) {
      Object.defineProperty(t, s, Object.getOwnPropertyDescriptor(r, s));
    });
  }
  return t;
}
var shouldApplyCompound = (t, a, r) => {
  for (var s of Object.keys(t)) {
    var i;
    if (t[s] !== ((i = a[s]) !== null && i !== void 0 ? i : r[s]))
      return !1;
  }
  return !0;
}, createRuntimeFn = (t) => (a) => {
  var r = t.defaultClassName, s = _objectSpread2$1(_objectSpread2$1({}, t.defaultVariants), a);
  for (var i in s) {
    var n, l = (n = s[i]) !== null && n !== void 0 ? n : t.defaultVariants[i];
    if (l != null) {
      var d = l;
      typeof d == "boolean" && (d = d === !0 ? "true" : "false");
      var c = t.variantClassNames[i][d];
      c && (r += " " + c);
    }
  }
  for (var [f, m] of t.compoundVariants)
    shouldApplyCompound(f, s, t.defaultVariants) && (r += " " + m);
  return r;
}, buttonStyle = createRuntimeFn({
  defaultClassName: "_1ypa8ay0",
  variantClassNames: {
    size: {
      medium: "_1ypa8ay1",
      small: "_1ypa8ay2",
      large: "_1ypa8ay3"
    },
    variant: {
      regular: "_1ypa8ay4",
      semibold: "_1ypa8ay5",
      outline: "_1ypa8ay6",
      error: "_1ypa8ay7"
    }
  },
  defaultVariants: {
    size: "medium",
    variant: "regular"
  },
  compoundVariants: []
}), o = 0;
function e(t, a, r, s, i) {
  var n, l, d = {};
  for (l in a)
    l == "ref" ? n = a[l] : d[l] = a[l];
  var c = { type: t, props: d, key: r, ref: n, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: --o, __source: i, __self: s };
  if (typeof t == "function" && (n = t.defaultProps))
    for (l in n)
      d[l] === void 0 && (d[l] = n[l]);
  return options.vnode && options.vnode(c), c;
}
const Button = ({
  header: t,
  size: a,
  variant: r,
  fullWidth: s,
  className: i,
  ...n
}) => e("div", {
  className: i,
  children: e("button", {
    className: buttonStyle({
      size: a,
      variant: r
    }),
    style: {
      width: s ? "100%" : "auto"
    },
    ...n,
    children: t
  })
});
var classnames = { exports: {} };
/*!
  Copyright (c) 2018 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/
(function(t) {
  (function() {
    var a = {}.hasOwnProperty;
    function r() {
      for (var s = [], i = 0; i < arguments.length; i++) {
        var n = arguments[i];
        if (!!n) {
          var l = typeof n;
          if (l === "string" || l === "number")
            s.push(n);
          else if (Array.isArray(n)) {
            if (n.length) {
              var d = r.apply(null, n);
              d && s.push(d);
            }
          } else if (l === "object")
            if (n.toString === Object.prototype.toString)
              for (var c in n)
                a.call(n, c) && n[c] && s.push(c);
            else
              s.push(n.toString());
        }
      }
      return s.join(" ");
    }
    t.exports ? (r.default = r, t.exports = r) : window.classNames = r;
  })();
})(classnames);
const cn = classnames.exports, buttonLink_css_ts_vanilla = "";
var buttonLinkIconStyle = "_1qkpc6p1", buttonLinkStyle = createRuntimeFn({
  defaultClassName: "_1qkpc6p0",
  variantClassNames: {},
  defaultVariants: {},
  compoundVariants: []
});
const buttonSocial_css_ts_vanilla = "";
var buttonSocialIconEndStyle = createRuntimeFn({
  defaultClassName: "mbfvtpa",
  variantClassNames: {
    size: {
      small: "mbfvtpb",
      medium: "mbfvtpc",
      large: "mbfvtpd"
    }
  },
  defaultVariants: {},
  compoundVariants: []
}), buttonSocialIconStartStyle = createRuntimeFn({
  defaultClassName: "mbfvtp6",
  variantClassNames: {
    size: {
      small: "mbfvtp7",
      medium: "mbfvtp8",
      large: "mbfvtp9"
    }
  },
  defaultVariants: {},
  compoundVariants: []
}), buttonSocialStyle = createRuntimeFn({
  defaultClassName: "mbfvtp0",
  variantClassNames: {
    size: {
      small: "mbfvtp1",
      medium: "mbfvtp2",
      large: "mbfvtp3"
    },
    variant: {
      regular: "mbfvtp4",
      semibold: "mbfvtp5"
    }
  },
  defaultVariants: {
    size: "medium"
  },
  compoundVariants: []
});
const card_css_ts_vanilla = "";
var cardStyle = createRuntimeFn({
  defaultClassName: "_2kdvjr0",
  variantClassNames: {},
  defaultVariants: {},
  compoundVariants: []
}), cardTitleImage = "_2kdvjr2", cardTitleStyle = "_2kdvjr1";
const checkbox_css_ts_vanilla = "";
var checkboxInputStyle = "vpwr7f1", checkboxStyle = "vpwr7f0";
const codebox_css_ts_vanilla = "";
var codeboxContentStyle = "_1l5w2ny2", codeboxHeaderStyle = "_1l5w2ny1", codeboxStyle = "_1l5w2ny0";
const colors_css_ts_vanilla = "";
function _defineProperty(t, a, r) {
  return a in t ? Object.defineProperty(t, a, {
    value: r,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : t[a] = r, t;
}
function ownKeys(t, a) {
  var r = Object.keys(t);
  if (Object.getOwnPropertySymbols) {
    var s = Object.getOwnPropertySymbols(t);
    a && (s = s.filter(function(i) {
      return Object.getOwnPropertyDescriptor(t, i).enumerable;
    })), r.push.apply(r, s);
  }
  return r;
}
function _objectSpread2(t) {
  for (var a = 1; a < arguments.length; a++) {
    var r = arguments[a] != null ? arguments[a] : {};
    a % 2 ? ownKeys(Object(r), !0).forEach(function(s) {
      _defineProperty(t, s, r[s]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : ownKeys(Object(r)).forEach(function(s) {
      Object.defineProperty(t, s, Object.getOwnPropertyDescriptor(r, s));
    });
  }
  return t;
}
var createSprinkles$1 = (t) => function() {
  for (var a = arguments.length, r = new Array(a), s = 0; s < a; s++)
    r[s] = arguments[s];
  var i = Object.assign({}, ...r.map((c) => c.styles)), n = Object.keys(i), l = n.filter((c) => "mappings" in i[c]), d = (c) => {
    var f = [], m = {}, p = _objectSpread2({}, c), h = !1;
    for (var v of l) {
      var S = c[v];
      if (S != null) {
        var w = i[v];
        h = !0;
        for (var b of w.mappings)
          m[b] = S, p[b] == null && delete p[b];
      }
    }
    var _ = h ? _objectSpread2(_objectSpread2({}, m), p) : c;
    for (var y in _) {
      var g = _[y], u = i[y];
      try {
        if (u.mappings)
          continue;
        if (typeof g == "string" || typeof g == "number") {
          if (process.env.NODE_ENV !== "production" && !u.values[g].defaultClass)
            throw new Error();
          f.push(u.values[g].defaultClass);
        } else if (Array.isArray(g))
          for (var k = 0; k < g.length; k++) {
            var O = g[k];
            if (O != null) {
              var L = u.responsiveArray[k];
              if (process.env.NODE_ENV !== "production" && !u.values[O].conditions[L])
                throw new Error();
              f.push(u.values[O].conditions[L]);
            }
          }
        else
          for (var D in g) {
            var T = g[D];
            if (T != null) {
              if (process.env.NODE_ENV !== "production" && !u.values[T].conditions[D])
                throw new Error();
              f.push(u.values[T].conditions[D]);
            }
          }
      } catch (M) {
        throw process.env.NODE_ENV !== "production" && function() {
          class N extends Error {
            constructor(P) {
              super(P), this.name = "SprinklesError";
            }
          }
          var x = (F) => typeof F == "string" ? '"'.concat(F, '"') : F, A = (F, P, B) => {
            throw new N('"'.concat(F, '" has no value ').concat(x(P), ". Possible values are ").concat(Object.keys(B).map(x).join(", ")));
          };
          if (!u)
            throw new N('"'.concat(y, '" is not a valid sprinkle'));
          if ((typeof g == "string" || typeof g == "number") && (g in u.values || A(y, g, u.values), !u.values[g].defaultClass))
            throw new N('"'.concat(y, '" has no default condition. You must specify which conditions to target explicitly. Possible options are ').concat(Object.keys(u.values[g].conditions).map(x).join(", ")));
          if (typeof g == "object") {
            if (!("conditions" in u.values[Object.keys(u.values)[0]]))
              throw new N('"'.concat(y, '" is not a conditional property'));
            if (Array.isArray(g)) {
              if (!("responsiveArray" in u))
                throw new N('"'.concat(y, '" does not support responsive arrays'));
              var j = u.responsiveArray.length;
              if (j < g.length)
                throw new N('"'.concat(y, '" only supports up to ').concat(j, " breakpoints. You passed ").concat(g.length));
              for (var I of g)
                u.values[I] || A(y, I, u.values);
            } else
              for (var E in g) {
                var C = g[E];
                if (C != null && (u.values[C] || A(y, C, u.values), !u.values[C].conditions[E]))
                  throw new N('"'.concat(y, '" has no condition named ').concat(x(E), ". Possible values are ").concat(Object.keys(u.values[C].conditions).map(x).join(", ")));
              }
          }
        }(), M;
      }
    }
    return t(f.join(" "));
  };
  return Object.assign(d, {
    properties: new Set(n)
  });
}, composeStyles = (t) => t, createSprinkles = function() {
  return createSprinkles$1(composeStyles)(...arguments);
}, colorProperties = {
  conditions: void 0,
  styles: {
    color: {
      values: {
        accentDisabled: {
          defaultClass: "_13go3g30"
        },
        accentDefault: {
          defaultClass: "_13go3g31"
        },
        accentMuted: {
          defaultClass: "_13go3g32"
        },
        accentSubtle: {
          defaultClass: "_13go3g33"
        },
        accentEmphasis: {
          defaultClass: "_13go3g34"
        },
        foregroundDefault: {
          defaultClass: "_13go3g35"
        },
        foregroundMuted: {
          defaultClass: "_13go3g36"
        },
        foregroundSubtle: {
          defaultClass: "_13go3g37"
        },
        foregroundDisabled: {
          defaultClass: "_13go3g38"
        },
        foregroundOnDisabled: {
          defaultClass: "_13go3g39"
        },
        foregroundOnDark: {
          defaultClass: "_13go3g3a"
        },
        foregroundOnAccent: {
          defaultClass: "_13go3g3b"
        },
        backgroundSurface: {
          defaultClass: "_13go3g3c"
        },
        backgroundCanvas: {
          defaultClass: "_13go3g3d"
        },
        errorDefault: {
          defaultClass: "_13go3g3e"
        },
        errorSubtle: {
          defaultClass: "_13go3g3f"
        },
        errorMuted: {
          defaultClass: "_13go3g3g"
        },
        errorEmphasis: {
          defaultClass: "_13go3g3h"
        },
        successEmphasis: {
          defaultClass: "_13go3g3i"
        },
        borderDefault: {
          defaultClass: "_13go3g3j"
        },
        textDefault: {
          defaultClass: "_13go3g3k"
        },
        textDisabled: {
          defaultClass: "_13go3g3l"
        },
        inputBackground: {
          defaultClass: "_13go3g3m"
        },
        inputDisabled: {
          defaultClass: "_13go3g3n"
        },
        inputPlaceholder: {
          defaultClass: "_13go3g3o"
        },
        inputText: {
          defaultClass: "_13go3g3p"
        }
      }
    }
  }
}, colorSprinkle = createSprinkles({
  conditions: void 0,
  styles: {
    color: {
      values: {
        accentDisabled: {
          defaultClass: "_13go3g30"
        },
        accentDefault: {
          defaultClass: "_13go3g31"
        },
        accentMuted: {
          defaultClass: "_13go3g32"
        },
        accentSubtle: {
          defaultClass: "_13go3g33"
        },
        accentEmphasis: {
          defaultClass: "_13go3g34"
        },
        foregroundDefault: {
          defaultClass: "_13go3g35"
        },
        foregroundMuted: {
          defaultClass: "_13go3g36"
        },
        foregroundSubtle: {
          defaultClass: "_13go3g37"
        },
        foregroundDisabled: {
          defaultClass: "_13go3g38"
        },
        foregroundOnDisabled: {
          defaultClass: "_13go3g39"
        },
        foregroundOnDark: {
          defaultClass: "_13go3g3a"
        },
        foregroundOnAccent: {
          defaultClass: "_13go3g3b"
        },
        backgroundSurface: {
          defaultClass: "_13go3g3c"
        },
        backgroundCanvas: {
          defaultClass: "_13go3g3d"
        },
        errorDefault: {
          defaultClass: "_13go3g3e"
        },
        errorSubtle: {
          defaultClass: "_13go3g3f"
        },
        errorMuted: {
          defaultClass: "_13go3g3g"
        },
        errorEmphasis: {
          defaultClass: "_13go3g3h"
        },
        successEmphasis: {
          defaultClass: "_13go3g3i"
        },
        borderDefault: {
          defaultClass: "_13go3g3j"
        },
        textDefault: {
          defaultClass: "_13go3g3k"
        },
        textDisabled: {
          defaultClass: "_13go3g3l"
        },
        inputBackground: {
          defaultClass: "_13go3g3m"
        },
        inputDisabled: {
          defaultClass: "_13go3g3n"
        },
        inputPlaceholder: {
          defaultClass: "_13go3g3o"
        },
        inputText: {
          defaultClass: "_13go3g3p"
        }
      }
    }
  }
});
const defaultBreakpoints = {
  xs: pxToEm(390),
  sm: pxToEm(640),
  md: pxToEm(768),
  lg: pxToEm(1024),
  xl: pxToEm(1280),
  xl2: pxToEm(1536)
}, defaultFont = {
  fontFamily: "Inter",
  fontStyle: "normal"
}, defaultLightTheme = {
  fontFamily: "Inter",
  fontStyle: "normal",
  accent: {
    def: "#3D53F5",
    muted: "#6475F7",
    emphasis: "#3142C4",
    disabled: "#E0E0E0",
    subtle: "#eceefe"
  },
  foreground: {
    def: "#171717",
    muted: "#616161",
    subtle: "#9E9E9E",
    disabled: "#BDBDBD",
    onDark: "#FFFFFF",
    onAccent: "#FFFFFF",
    onDisabled: "#e0e0e0"
  },
  background: {
    surface: "#FFFFFF",
    canvas: "#FCFCFC",
    subtle: "#EEEEEE"
  },
  error: {
    def: "#9c0f2e",
    subtle: "#fce8ec",
    muted: "#e95c7b",
    emphasis: "#DF1642"
  },
  success: {
    emphasis: "#18A957"
  },
  border: {
    def: "#EEEEEE"
  },
  text: {
    def: "#FFFFFF",
    disabled: "#757575"
  },
  input: {
    background: "#FFFFFF",
    disabled: "#E0E0E0",
    placeholder: "#9E9E9E",
    text: "#424242"
  }
}, defaultDarkTheme = {
  fontFamily: "Inter",
  fontStyle: "normal",
  accent: {
    def: "#6475f7",
    disabled: "#757575",
    muted: "#3142c4",
    emphasis: "#3d53f5",
    subtle: "#0c1131"
  },
  foreground: {
    def: "#FFFFFF",
    muted: "#ddd9f7",
    subtle: "#9a8ce8",
    onDark: "#FFFFFF",
    onAccent: "#FFFFFF",
    onDisabled: "#e0e0e0",
    disabled: "#bdbdbd"
  },
  background: {
    surface: "#110d2b",
    canvas: "#090616",
    subtle: "#221C56"
  },
  border: {
    def: "#221956"
  },
  error: {
    def: "#e95c7b",
    subtle: "#2d040d",
    muted: "#9c0f2e",
    emphasis: "#df1642"
  },
  success: {
    emphasis: "#18a957"
  },
  input: {
    background: "#FFFFFF",
    text: "#424242",
    placeholder: "#9e9e9e",
    disabled: "#eeeeee"
  },
  text: {
    def: "#FFFFFF",
    disabled: "#757575"
  }
}, divider_css_ts_vanilla = "";
var dividerStyle = createRuntimeFn({
  defaultClassName: "vxcphq1",
  variantClassNames: {
    sizes: {
      fullWidth: "vxcphq2"
    }
  },
  defaultVariants: {},
  compoundVariants: []
}), dividerTextStyle = "vxcphq0";
const form_css_ts_vanilla = "";
var formStyle = "_1ylgllh0";
const grid_css_ts_vanilla = "";
var gridStyle = createRuntimeFn({
  defaultClassName: "_5404xl0",
  variantClassNames: {
    direction: {
      row: "_5404xl1",
      column: "_5404xl2"
    },
    gap: {
      4: "_5404xl3",
      8: "_5404xl4",
      16: "_5404xl5",
      24: "_5404xl6",
      32: "_5404xl7",
      64: "_5404xl8"
    }
  },
  defaultVariants: {},
  compoundVariants: []
});
const inputField_css_ts_vanilla = "";
var inputFieldStyle = "l40q2r1", inputFieldTitleStyle = "l40q2r0";
const menuLink_css_ts_vanilla = "";
var menuLinkIconLeftStyle = "nwi8d21", menuLinkStyle = "nwi8d20", menuLinkTextStyle = "nwi8d22";
const message_css_ts_vanilla = "";
var messageStyle = createRuntimeFn({
  defaultClassName: "_1u4sc9q0",
  variantClassNames: {
    textPosition: {
      start: "_1u4sc9q1",
      center: "_1u4sc9q2",
      end: "_1u4sc9q3"
    },
    severity: {
      error: "_1u4sc9q4",
      success: "_1u4sc9q5",
      disabled: "_1u4sc9q6",
      default: "_1u4sc9q7"
    }
  },
  defaultVariants: {
    textPosition: "center",
    severity: "default"
  },
  compoundVariants: []
});
const nav_css_ts_vanilla = "";
var navMainSectionStyle = "_1db5c8e4", navMenuLinkSelectedStyle = "_1db5c8e3", navMenuSectionStyle = "_1db5c8e2", navSectionBottom = "_1db5c8e5", navSectionTitleStyle = "_1db5c8e1", navStyle = "_1db5c8e0", oryTheme = {
  fontFamily: "var(--ory-theme-font-family)",
  fontStyle: "var(--ory-theme-font-style)",
  accent: {
    def: "var(--ory-theme-accent-def)",
    muted: "var(--ory-theme-accent-muted)",
    emphasis: "var(--ory-theme-accent-emphasis)",
    disabled: "var(--ory-theme-accent-disabled)",
    subtle: "var(--ory-theme-accent-subtle)"
  },
  foreground: {
    def: "var(--ory-theme-foreground-def)",
    muted: "var(--ory-theme-foreground-muted)",
    subtle: "var(--ory-theme-foreground-subtle)",
    disabled: "var(--ory-theme-foreground-disabled)",
    onDark: "var(--ory-theme-foreground-on-dark)",
    onAccent: "var(--ory-theme-foreground-on-accent)",
    onDisabled: "var(--ory-theme-foreground-on-disabled)"
  },
  background: {
    surface: "var(--ory-theme-background-surface)",
    canvas: "var(--ory-theme-background-canvas)",
    subtle: "var(--ory-theme-background-subtle)"
  },
  error: {
    def: "var(--ory-theme-error-def)",
    subtle: "var(--ory-theme-error-subtle)",
    muted: "var(--ory-theme-error-muted)",
    emphasis: "var(--ory-theme-error-emphasis)"
  },
  success: {
    emphasis: "var(--ory-theme-success-emphasis)"
  },
  border: {
    def: "var(--ory-theme-border-def)"
  },
  text: {
    def: "var(--ory-theme-text-def)",
    disabled: "var(--ory-theme-text-disabled)"
  },
  input: {
    background: "var(--ory-theme-input-background)",
    disabled: "var(--ory-theme-input-disabled)",
    placeholder: "var(--ory-theme-input-placeholder)",
    text: "var(--ory-theme-input-text)"
  }
};
const typography_css_ts_vanilla = "";
var inputTypographyStyle = createRuntimeFn({
  defaultClassName: "g49tsd0",
  variantClassNames: {
    size: {
      16: "g49tsd1",
      18: "g49tsd2"
    },
    type: {
      regular: "g49tsd3",
      semiBold: "g49tsd4"
    }
  },
  defaultVariants: {
    size: 16,
    type: "regular"
  },
  compoundVariants: []
}), typographyStyle = createRuntimeFn({
  defaultClassName: "g49tsd5",
  variantClassNames: {
    size: {
      tiny: "g49tsd6",
      xsmall: "g49tsd7",
      small: "g49tsd8",
      caption: "g49tsd9",
      body: "g49tsda",
      lead: "g49tsdb",
      headline21: "g49tsdc",
      headline26: "g49tsdd",
      headline31: "g49tsde",
      headline37: "g49tsdf",
      headline48: "g49tsdg",
      display: "g49tsdh",
      hero: "g49tsdi",
      uber: "g49tsdj",
      colossus: "g49tsdk",
      monoCaption: "g49tsdl"
    },
    type: {
      regular: "g49tsdm",
      bold: "g49tsdn"
    }
  },
  defaultVariants: {
    type: "regular"
  },
  compoundVariants: []
});
const faSolid_min = "", fontawesome_min = "", ButtonLink = ({
  href: t,
  className: a,
  icon: r,
  children: s,
  ...i
}) => e("div", {
  className: cn(a, typographyStyle({
    size: "caption",
    type: "regular"
  })),
  children: e("a", {
    className: buttonLinkStyle(),
    href: t,
    ...i,
    children: [r && e("i", {
      className: cn(`fa fa-${r}`, buttonLinkIconStyle)
    }), s]
  })
}), faBrands_min = "", ButtonSocial = ({
  header: t,
  brand: a,
  size: r,
  variant: s,
  fullWidth: i,
  className: n,
  ...l
}) => {
  const d = a !== "generic" ? `fa-brands fa-${a}` : "fa-solid fa-layer-group";
  return e("div", {
    className: n,
    children: e("button", {
      className: buttonSocialStyle({
        size: r,
        variant: s
      }),
      style: {
        width: i ? "100%" : "auto"
      },
      ...l,
      children: [e("i", {
        className: cn(d, buttonSocialIconStartStyle({
          size: r
        }))
      }), t, e("i", {
        className: cn(d, buttonSocialIconEndStyle({
          size: r
        })),
        style: {
          visibility: "hidden",
          opacity: 0
        }
      })]
    })
  });
}, Card = ({
  heading: t,
  image: a,
  className: r,
  children: s,
  ...i
}) => e("div", {
  className: cn(cardStyle(), typographyStyle({
    type: "regular",
    size: "small"
  }), r),
  ...i,
  children: e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [e("div", {
      className: cardTitleImage,
      children: typeof a == "string" ? e("img", {
        src: a,
        alt: a,
        width: "100%",
        height: "100%"
      }) : a
    }), e("div", {
      className: cardTitleStyle,
      children: typeof t == "string" ? e("h3", {
        className: typographyStyle({
          type: "regular",
          size: "small"
        }),
        children: t
      }) : t
    }), e("div", {
      children: s
    })]
  })
}), cardGradient_css_ts_vanilla = "";
var cardContainer = "q527980", cardGradientActionStyle = createRuntimeFn({
  defaultClassName: "q527984",
  variantClassNames: {
    disabled: {
      true: "q527985",
      false: "q527986"
    }
  },
  defaultVariants: {
    disabled: !1
  },
  compoundVariants: []
}), cardGradientOverlayStyle = createRuntimeFn({
  defaultClassName: "q527981",
  variantClassNames: {
    disabled: {
      true: "q527982",
      false: "q527983"
    }
  },
  defaultVariants: {
    disabled: !1
  },
  compoundVariants: []
});
const CardGradient = ({
  heading: t,
  content: a,
  action: r,
  target: s,
  disabled: i,
  className: n,
  ...l
}) => e("a", {
  className: cn(cardContainer, cardGradientOverlayStyle({
    disabled: i
  })),
  target: s,
  "aria-disabled": i,
  ...!i && {
    href: r
  },
  ...l,
  children: [e("div", {
    className: cn(colorSprinkle({
      color: i ? "foregroundOnDisabled" : "foregroundOnDark"
    }), n),
    children: e("div", {
      className: cn(gridStyle({
        gap: 16
      })),
      children: [typeof t == "string" ? e("div", {
        className: typographyStyle({
          size: "headline21",
          type: "bold"
        }),
        children: t
      }) : t, typeof a == "string" ? e("div", {
        className: typographyStyle({
          size: "small",
          type: "regular"
        }),
        children: a
      }) : a]
    })
  }), e("i", {
    className: cn("fa fa-arrow-right", cardGradientActionStyle({
      disabled: i
    }))
  })]
}), Message = ({
  severity: t,
  textPosition: a,
  className: r,
  children: s,
  ...i
}) => e("div", {
  className: cn(messageStyle({
    severity: t,
    textPosition: a
  }), typographyStyle({
    size: "caption",
    type: "regular"
  }), r),
  ...i,
  children: s
}), Checkbox = ({
  className: t,
  label: a,
  helperMessage: r,
  messageTestId: s,
  dataTestid: i,
  ...n
}) => {
  const l = Math.random().toString(36).substring(2);
  return e("div", {
    "data-testid": i,
    className: gridStyle({
      gap: 4,
      direction: "column"
    }),
    children: [e("div", {
      className: cn(t, typographyStyle({
        type: "regular",
        size: "caption"
      }), checkboxStyle),
      children: [e("input", {
        className: checkboxInputStyle,
        id: l,
        type: "checkbox",
        value: 1,
        ...n
      }), a && e("label", {
        htmlFor: l,
        children: e("span", {
          children: a
        })
      })]
    }), typeof r == "string" ? e(Message, {
      "data-testid": s,
      severity: n.severity,
      textPosition: "start",
      children: r
    }) : r]
  });
}, CodeBox = ({
  children: t,
  className: a,
  ...r
}) => {
  const s = Math.random().toString(36).substring(2);
  return e("div", {
    className: cn(a, gridStyle({
      gap: 16
    }), codeboxStyle),
    ...r,
    children: [e("input", {
      id: s,
      type: "checkbox"
    }), e("div", {
      className: cn(typographyStyle({
        size: "small"
      }), codeboxHeaderStyle),
      children: [e("div", {
        children: "Toggle content"
      }), e("label", {
        htmlFor: s,
        children: [e("i", {
          className: cn("fa fa-caret-down", colorSprinkle({
            color: "accentDefault"
          }))
        }), e("i", {
          className: cn("fa fa-caret-up", colorSprinkle({
            color: "accentDefault"
          }))
        })]
      })]
    }), e("pre", {
      className: cn(colorSprinkle({
        color: "accentEmphasis"
      }), codeboxContentStyle),
      children: t
    })]
  });
}, Divider = ({
  className: t,
  fullWidth: a,
  text: r,
  ...s
}) => r ? e("div", {
  className: cn(dividerTextStyle, t),
  ...s,
  children: r
}) : e("hr", {
  className: cn(dividerStyle(a ? {
    sizes: "fullWidth"
  } : {}), t),
  ...s
}), InputField = ({
  header: t,
  helperMessage: a,
  messageTestId: r,
  fullWidth: s,
  className: i,
  dataTestid: n,
  ...l
}) => e("div", {
  "data-testid": n,
  className: cn(i, gridStyle({
    gap: 4
  })),
  children: [t && e("div", {
    className: typographyStyle({
      size: "small",
      type: "regular"
    }),
    children: [t, " ", l.required && e("span", {
      className: inputFieldTitleStyle,
      children: "*"
    })]
  }), e("input", {
    className: cn(inputFieldStyle, typographyStyle({
      size: "small",
      type: "regular"
    })),
    style: {
      width: s ? "100%" : "auto"
    },
    placeholder: " ",
    ...l
  }), typeof a == "string" ? e(Message, {
    "data-testid": r,
    severity: l.severity,
    children: a
  }) : a]
}), MenuLink = ({
  href: t,
  children: a,
  target: r,
  disabled: s,
  iconLeft: i,
  iconRight: n,
  className: l,
  ...d
}) => e("div", {
  className: cn(l, menuLinkStyle),
  ...d,
  children: [e("a", {
    className: cn(typographyStyle({
      size: "small",
      type: "regular"
    }), colorSprinkle({
      color: s ? "foregroundDisabled" : "foregroundMuted"
    }), menuLinkTextStyle),
    "aria-disabled": s,
    ...!s && {
      href: t
    },
    ...r && {
      target: r
    },
    children: [i && e("i", {
      className: cn("fa", `fa-${i}`, menuLinkIconLeftStyle)
    }), a]
  }), n && e("i", {
    className: cn("fa", `fa-${n}`, colorSprinkle({
      color: s ? "foregroundDisabled" : "foregroundMuted"
    }))
  })]
}), Nav = ({
  navTitle: t,
  navSections: a,
  className: r,
  ...s
}) => e("nav", {
  role: "navigation",
  className: cn(navStyle, r),
  ...s,
  children: [e("input", {
    id: "collapse-nav",
    type: "checkbox"
  }), e("div", {
    className: cn(navSectionTitleStyle, typographyStyle({
      size: "caption"
    }), colorSprinkle({
      color: "accentDefault"
    })),
    children: [t, e("label", {
      htmlFor: "collapse-nav",
      children: [e("i", {
        className: cn("fa", "fa-bars")
      }), e("i", {
        className: cn("fa", "fa-xmark")
      })]
    })]
  }), e("ul", {
    className: cn(navMainSectionStyle, navMenuSectionStyle, gridStyle({
      gap: 24
    })),
    children: a.map((i, n) => e("li", {
      ...i.floatBottom && {
        className: navSectionBottom
      },
      children: [i.title && e("div", {
        className: cn(typographyStyle({
          size: "xsmall",
          type: "bold"
        }), colorSprinkle({
          color: "foregroundDefault"
        }), navSectionTitleStyle),
        children: [i.title, e("i", {
          className: `fa fa-${i.titleIcon}`
        })]
      }), e("ul", {
        className: navMenuSectionStyle,
        children: i.links.map(({
          testId: l,
          ...d
        }, c) => e("li", {
          ...d.selected && {
            className: navMenuLinkSelectedStyle
          },
          children: e(MenuLink, {
            "data-testid": l,
            ...d,
            children: d.name
          })
        }, c))
      })]
    }, n))
  })]
}), MessageSection = ({
  text: t,
  url: a,
  buttonText: r,
  dataTestId: s
}) => e(Message, {
  className: colorSprinkle({
    color: "foregroundMuted"
  }),
  children: [t, "\xA0", e(ButtonLink, {
    "data-testid": s,
    href: a,
    children: r
  })]
}), nodeMessage = ({
  text: t,
  id: a,
  key: r,
  ...s
}) => e(Message, {
  "data-testid": `ui/message/${a}`,
  severity: "error",
  ...s,
  children: t
}, r), NodeMessages = ({
  nodes: t,
  uiMessages: a,
  ...r
}) => {
  const {
    gap: s,
    direction: i,
    ...n
  } = r, l = t == null ? void 0 : t.reduce((f, {
    messages: m
  }) => (f.push(...m.map(({
    text: p,
    id: h
  }, v) => nodeMessage({
    text: p,
    id: h,
    key: `node-group-message-${h}-${v}`,
    ...n
  })).filter(Boolean)), f), []), d = a == null ? void 0 : a.map(({
    text: f,
    id: m
  }, p) => nodeMessage({
    text: f,
    id: m,
    key: `ui-messsage-${m}-${p}`
  })), c = [...l || [], ...d || []];
  return c.length > 0 ? e("div", {
    className: gridStyle({
      gap: s || 16,
      direction: i
    }),
    children: c
  }) : null;
}, getNodeLabel = (t) => {
  var r, s, i;
  const a = t.attributes;
  return isUiNodeAnchorAttributes(a) ? a.title.text : isUiNodeImageAttributes(a) ? ((r = t.meta.label) == null ? void 0 : r.text) || "" : isUiNodeInputAttributes(a) && (s = a.label) != null && s.text ? a.label.text : ((i = t.meta.label) == null ? void 0 : i.text) || "";
};
function isUiNodeAnchorAttributes(t) {
  return t.node_type === "a";
}
function isUiNodeImageAttributes(t) {
  return t.node_type === "img";
}
function isUiNodeInputAttributes(t) {
  return t.node_type === "input";
}
function isUiNodeTextAttributes(t) {
  return t.node_type === "text";
}
const getNodeInputType = (t) => {
  var a;
  return (a = t == null ? void 0 : t.type) != null ? a : "";
}, filterNodesByGroups = ({
  nodes: t,
  groups: a,
  withoutDefaultGroup: r,
  attributes: s,
  withoutDefaultAttributes: i,
  excludeAttributes: n
}) => {
  const l = (d) => typeof d == "string" ? d.split(",") : d;
  return t.filter(({ group: d, attributes: c }) => {
    if (!a && !s && !n)
      return !0;
    const f = l(a) || [];
    r || f.push("default");
    const m = l(s) || [];
    i || (d.includes("default") && m.push("hidden"), (d.includes("webauthn") || d.includes("totp")) && m.push("input", "script"));
    const p = l(n) || [], h = a ? f.includes(d) : !0, v = s ? m.includes(getNodeInputType(c)) : !0, S = n ? !p.includes(getNodeInputType(c)) : !0;
    return h && v && S;
  });
}, Image = ({
  header: t,
  className: a,
  ...r
}) => e("div", {
  className: cn(a, gridStyle({
    gap: 4
  })),
  children: [t && e("div", {
    className: typographyStyle({
      size: "small",
      type: "regular"
    }),
    children: t
  }), e("img", {
    ...r
  })]
}), Typography = ({
  children: t,
  size: a,
  type: r,
  color: s,
  className: i,
  ...n
}) => e("div", {
  className: cn(typographyStyle({
    size: a,
    type: r
  }), colorSprinkle({
    color: s
  }), i),
  ...n,
  children: t
}), Node = ({
  node,
  className,
  buttonOverrideProps,
  buttonSocialOverrideProps
}) => {
  var t, a, r, s, i;
  if (isUiNodeImageAttributes(node.attributes))
    return e(Image, {
      src: node.attributes.src,
      alt: (t = node.meta.label) == null ? void 0 : t.text,
      "data-testid": `node/image/${node.attributes.id}`,
      header: (a = node.meta.label) == null ? void 0 : a.text,
      width: node.attributes.width,
      height: node.attributes.height
    });
  if (isUiNodeTextAttributes(node.attributes)) {
    const n = node.attributes.id;
    return node.attributes.text.id === 1050015 ? e("div", {
      className: gridStyle({
        gap: 4,
        direction: "row"
      }),
      style: {
        display: "inline-flex",
        flexWrap: "wrap",
        gap: pxToRem(48),
        maxWidth: "fit-content",
        alignItems: "center"
      },
      "data-testid": `node/text/${n}`,
      children: [e(Typography, {
        variant: "body1",
        "data-testid": `node/text/${node.attributes.id}/label`,
        style: {
          flexBasis: "100%"
        },
        children: (r = node.meta.label) == null ? void 0 : r.text
      }), node.attributes.text.context.secrets.map(({
        text: l,
        id: d
      }, c) => d === 1050014 ? e("pre", {
        children: e("del", {
          "data-testid": "node/text/lookup_secret_codes/text",
          children: e("code", {
            children: "Used"
          })
        })
      }, c) : e("pre", {
        "data-testid": "node/text/lookup_secret_codes/text",
        children: e("code", {
          children: l
        })
      }, c))]
    }) : e("div", {
      className: gridStyle({
        gap: 4
      }),
      "data-testid": `node/text/${n}`,
      children: [e(Typography, {
        variant: "body1",
        "data-testid": `node/text/${node.attributes.id}/label`,
        children: (s = node.meta.label) == null ? void 0 : s.text
      }), e("pre", {
        "data-testid": `node/text/${n}/text`,
        children: e("code", {
          children: node.attributes.text.text
        })
      })]
    });
  } else if (isUiNodeInputAttributes(node.attributes)) {
    const attrs = node.attributes, nodeType = attrs.type, isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc", submit = {
      type: attrs.type,
      name: attrs.name,
      ...attrs.value && {
        value: attrs.value
      }
    };
    switch (nodeType) {
      case "button":
      case "submit":
        if (isSocial && (submit.formNoValidate = !0, submit.onClick = (n) => {
          n.currentTarget.type = "submit", n.currentTarget.dispatchEvent(new Event("submit", {
            cancelable: !0,
            bubbles: !0
          }));
        }), attrs.onclick) {
          const oc = attrs.onclick;
          submit.onClick = () => {
            eval(oc);
          };
        }
        return ((i = node.meta.label) == null ? void 0 : i.id) === 1070007 && (submit.formNoValidate = !0), isSocial ? e(ButtonSocial, {
          className,
          header: getNodeLabel(node),
          brand: attrs.value.toLowerCase(),
          variant: "semibold",
          size: "medium",
          fullWidth: !0,
          disabled: attrs.disabled,
          ...buttonSocialOverrideProps && buttonSocialOverrideProps,
          ...submit
        }) : e(Button, {
          className,
          header: getNodeLabel(node),
          variant: "semibold",
          size: "medium",
          fullWidth: !0,
          disabled: attrs.disabled,
          ...buttonOverrideProps && buttonOverrideProps,
          ...submit
        });
      case "datetime-local":
      case "checkbox":
        return e(Checkbox, {
          className,
          helperMessage: e(NodeMessages, {
            nodes: [node],
            gap: 4,
            textPosition: "start"
          }),
          label: getNodeLabel(node),
          name: attrs.name,
          required: attrs.required,
          defaultValue: attrs.value,
          disabled: attrs.disabled,
          defaultChecked: Boolean(attrs.value),
          dataTestid: `node/input/${attrs.name}`
        });
      default:
        return e(InputField, {
          helperMessage: e(NodeMessages, {
            nodes: [node],
            gap: 4,
            textPosition: "start"
          }),
          dataTestid: `node/input/${attrs.name}`,
          className,
          name: attrs.name,
          header: getNodeLabel(node),
          type: attrs.type,
          autoComplete: attrs.autocomplete || attrs.name === "identifier" ? "username" : "",
          defaultValue: attrs.value,
          required: attrs.required,
          disabled: attrs.disabled,
          fullWidth: !0
        });
    }
  }
  return null;
}, FilterFlowNodes = ({
  filter: t,
  includeCSRF: a,
  ...r
}) => {
  const s = (n) => isUiNodeInputAttributes(n.attributes) ? n.attributes.name : "", i = filterNodesByGroups(t).filter((n) => !(s(n) === "csrf_token" && !a)).map((n, l) => ["hidden"].includes(getNodeInputType(n.attributes)) ? {
    node: e(Node, {
      node: n,
      ...r
    }, l),
    hidden: !0
  } : {
    node: e(Node, {
      node: n,
      ...r
    }, l),
    hidden: !1
  });
  return i.length > 0 ? e(Fragment, {
    children: [i.filter((n) => n.hidden).map((n) => n.node), e("div", {
      className: gridStyle({
        gap: 16
      }),
      children: i.filter((n) => !n.hidden).map((n) => n.node)
    })]
  }) : null;
}, useScriptNodes = ({
  nodes: t
}) => {
  useEffect(() => {
    const a = filterNodesByGroups({
      nodes: t,
      groups: "webauthn",
      attributes: "text/javascript",
      withoutDefaultGroup: !0,
      withoutDefaultAttributes: !0
    }).map((r) => {
      const s = r.attributes, i = document.createElement("script");
      return i.setAttribute("data-testid", `node/script/${i.id}`), i.src = s.src, i.type = s.type, i.async = s.async, i.referrerPolicy = s.referrerpolicy, i.crossOrigin = s.crossorigin, i.integrity = s.integrity, document.body.appendChild(i), i;
    });
    return () => {
      a.forEach((r) => {
        document.body.removeChild(r);
      });
    };
  }, [t]);
}, UserAuthForm = ({
  flow: t,
  children: a,
  submitOnEnter: r,
  onSubmit: s,
  formFilterOverride: i,
  className: n,
  ...l
}) => e("form", {
  className: cn(n, formStyle),
  action: t.ui.action,
  method: t.ui.method,
  onKeyDown: (d) => {
    d.key === "Enter" && !r && (d.stopPropagation(), d.preventDefault());
  },
  ...s && {
    onSubmit: (d) => {
      d.preventDefault();
      const c = d.currentTarget, f = new FormData(c);
      let m = Object.fromEntries(f);
      if ("submitter" in d.nativeEvent) {
        const p = d.nativeEvent.submitter;
        m = {
          ...m,
          [p.name]: p.value
        };
      }
      s({
        body: m,
        event: d
      });
    }
  },
  ...l,
  children: e(Fragment, {
    children: [e(FilterFlowNodes, {
      filter: i || {
        nodes: t.ui.nodes,
        groups: "default",
        attributes: "hidden"
      },
      includeCSRF: !0
    }), a]
  })
}), hasOidc = (t) => t.some(({
  group: a
}) => a === "oidc"), hasPassword = (t) => t.some(({
  group: a
}) => a === "password"), hasWebauthn = (t) => t.some(({
  group: a
}) => a === "webauthn"), hasLookupSecret = (t) => t.some(({
  group: a
}) => a === "lookup_secret"), hasTotp = (t) => t.some(({
  group: a
}) => a === "totp"), LinkSection = ({
  nodes: t
}) => e("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [e("div", {
    className: gridStyle({
      gap: 16
    }),
    children: e(FilterFlowNodes, {
      filter: {
        nodes: t,
        groups: ["link", "code"],
        excludeAttributes: "submit"
      }
    })
  }), e(FilterFlowNodes, {
    filter: {
      nodes: t,
      groups: ["link", "code"],
      attributes: "submit"
    }
  })]
}), LoginSection = ({
  nodes: t,
  forgotPasswordURL: a
}) => hasPassword(t) ? e("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [e("div", {
    className: gridStyle({
      gap: 16
    }),
    children: [e(FilterFlowNodes, {
      filter: {
        nodes: t,
        groups: ["default", "password"],
        excludeAttributes: ["submit", "hidden"]
      }
    }), a && e(ButtonLink, {
      "data-testid": "forgot-password-link",
      href: a,
      children: "Forgot Password?"
    })]
  }), e(FilterFlowNodes, {
    filter: {
      nodes: t,
      groups: ["password"],
      attributes: "submit"
    }
  })]
}) : null, LookupSecretSettingsSection = ({
  flow: t
}) => {
  const a = {
    nodes: t.ui.nodes,
    groups: "lookup_secret",
    withoutDefaultGroup: !0
  };
  return hasLookupSecret(t.ui.nodes) ? e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [e(FilterFlowNodes, {
      filter: {
        ...a,
        excludeAttributes: "submit,button"
      }
    }), e(FilterFlowNodes, {
      filter: {
        ...a,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, OIDCSection = (t) => hasOidc(t.ui.nodes) ? e("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [filterNodesByGroups({
    nodes: t.ui.nodes,
    groups: "oidc",
    withoutDefaultGroup: !0
  }).some((a) => a.messages.length > 0) && e("div", {
    className: gridStyle({
      gap: 16
    }),
    children: e(FilterFlowNodes, {
      filter: {
        nodes: t.ui.nodes,
        groups: ["oidc"],
        excludeAttributes: "submit"
      }
    })
  }), e(FilterFlowNodes, {
    filter: {
      nodes: t.ui.nodes,
      groups: "oidc",
      attributes: "submit"
    }
  })]
}) : null, OIDCSettingsSection = ({
  flow: t
}) => {
  const a = {
    nodes: t.ui.nodes,
    groups: "oidc",
    withoutDefaultGroup: !0
  };
  return hasOidc(t.ui.nodes) ? e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: e(FilterFlowNodes, {
      filter: a,
      buttonOverrideProps: {
        fullWidth: !1
      }
    })
  }) : null;
}, PasswordSettingsSection = ({
  flow: t
}) => {
  const a = {
    nodes: t.ui.nodes,
    groups: "password",
    withoutDefaultGroup: !0
  };
  return hasPassword(t.ui.nodes) ? e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [e(FilterFlowNodes, {
      filter: {
        ...a,
        excludeAttributes: "submit,button"
      }
    }), e(FilterFlowNodes, {
      filter: {
        ...a,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, PasswordlessSection = (t) => hasWebauthn(t.ui.nodes) ? e("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [e("div", {
    className: gridStyle({
      gap: 16
    }),
    children: e(FilterFlowNodes, {
      filter: {
        nodes: t.ui.nodes,
        groups: ["webauthn"],
        withoutDefaultAttributes: !0,
        excludeAttributes: ["hidden", "button", "submit"]
      }
    })
  }), e(FilterFlowNodes, {
    filter: {
      nodes: t.ui.nodes,
      groups: ["webauthn"],
      withoutDefaultAttributes: !0,
      attributes: ["button", "submit"]
    }
  })]
}) : null, ProfileSettingsSection = ({
  flow: t
}) => {
  const a = {
    nodes: t.ui.nodes,
    groups: "profile"
  };
  return e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [e(FilterFlowNodes, {
      filter: {
        ...a,
        excludeAttributes: "submit,button"
      }
    }), e(FilterFlowNodes, {
      filter: {
        ...a,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  });
}, RegistrationSection = ({
  nodes: t
}) => hasPassword(t) ? e("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [e("div", {
    className: gridStyle({
      gap: 16
    }),
    children: e(FilterFlowNodes, {
      filter: {
        nodes: t,
        groups: ["password"],
        excludeAttributes: "submit"
      }
    })
  }), e(FilterFlowNodes, {
    filter: {
      nodes: t,
      groups: ["password"],
      attributes: "submit"
    }
  })]
}) : null, TOTPSettingsSection = ({
  flow: t
}) => {
  const a = {
    nodes: t.ui.nodes,
    groups: "totp",
    withoutDefaultGroup: !0
  };
  return hasTotp(t.ui.nodes) ? e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [e(FilterFlowNodes, {
      filter: {
        ...a,
        excludeAttributes: "submit,button"
      }
    }), e(FilterFlowNodes, {
      filter: {
        ...a,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, WebAuthnSettingsSection = ({
  flow: t
}) => {
  const a = {
    nodes: t.ui.nodes,
    groups: "webauthn",
    withoutDefaultGroup: !0
  };
  return hasWebauthn(t.ui.nodes) ? e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [e(FilterFlowNodes, {
      filter: {
        ...a,
        excludeAttributes: "submit,button"
      }
    }), e(FilterFlowNodes, {
      filter: {
        ...a,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, UserAuthCard = ({
  flow: t,
  title: a,
  subtitle: r,
  flowType: s,
  additionalProps: i,
  cardImage: n,
  onSubmit: l,
  includeScripts: d
}) => {
  d && useScriptNodes({
    nodes: t.ui.nodes
  });
  let c = null, f = null, m = null, p = null;
  const h = (b) => b.refresh || b.requested_aal === "aal2", v = () => !!m && (!h(t) || s === "registration"), S = () => h(t) && s === "login" && (hasTotp(t.ui.nodes) || hasWebauthn(t.ui.nodes) || hasLookupSecret(t.ui.nodes)), w = () => S() && [hasWebauthn(t.ui.nodes) && e(UserAuthForm, {
    flow: t,
    "data-testid": "webauthn-flow",
    children: e(FilterFlowNodes, {
      filter: {
        nodes: t.ui.nodes,
        groups: "webauthn",
        withoutDefaultGroup: !0
      }
    })
  }), hasPassword(t.ui.nodes) && e(UserAuthForm, {
    flow: t,
    "data-testid": "password-flow",
    children: e(FilterFlowNodes, {
      filter: {
        nodes: t.ui.nodes,
        groups: "password",
        withoutDefaultGroup: !0
      }
    })
  }), hasTotp(t.ui.nodes) && e(UserAuthForm, {
    flow: t,
    "data-testid": "totp-flow",
    onSubmit: l,
    submitOnEnter: !0,
    children: e("div", {
      className: gridStyle({
        gap: 32
      }),
      children: [e(FilterFlowNodes, {
        filter: {
          nodes: t.ui.nodes,
          groups: "totp",
          withoutDefaultGroup: !0,
          excludeAttributes: "submit"
        }
      }), e(FilterFlowNodes, {
        filter: {
          nodes: t.ui.nodes,
          groups: "totp",
          withoutDefaultGroup: !0,
          attributes: "submit"
        }
      })]
    })
  }), hasLookupSecret(t.ui.nodes) && e(UserAuthForm, {
    flow: t,
    "data-testid": "lookup-secret-flow",
    onSubmit: l,
    submitOnEnter: !0,
    children: e(FilterFlowNodes, {
      filter: {
        nodes: t.ui.nodes,
        groups: "lookup_secret",
        withoutDefaultGroup: !0
      }
    })
  })].filter(Boolean).map((b, _) => e("div", {
    children: _ > 0 ? e(Fragment, {
      children: [e(Divider, {}), " ", b]
    }) : b
  }, _));
  switch (s) {
    case "login":
      m = PasswordlessSection(t), f = OIDCSection(t), c = LoginSection({
        nodes: t.ui.nodes,
        ...i
      }), p = h(t) ? {
        text: e(Fragment, {
          children: "Something's not working?"
        }),
        buttonText: "Logout",
        url: i.logoutURL,
        dataTestId: "logout-link"
      } : {
        buttonText: "Sign up",
        url: i.signupURL,
        text: e(Fragment, {
          children: "Don't have an account?"
        }),
        dataTestId: "signup-link"
      };
      break;
    case "registration":
      m = PasswordlessSection(t), f = OIDCSection(t), c = RegistrationSection({
        nodes: t.ui.nodes
      }), p = {
        text: "Already have an account?",
        url: i.loginURL,
        buttonText: "Sign in",
        dataTestId: "cta-link"
      };
      break;
    case "recovery":
      c = LinkSection({
        nodes: t.ui.nodes
      }), p = {
        text: "Remember your credentials?",
        url: i.loginURL,
        buttonText: "Sign in",
        dataTestId: "cta-link"
      };
      break;
    case "verification":
      c = LinkSection({
        nodes: t.ui.nodes
      }), p = {
        text: "Don't have an account?",
        url: i.signupURL,
        buttonText: "Sign up",
        dataTestId: "cta-link"
      };
      break;
    default:
      c = null;
  }
  return e(Card, {
    heading: e("h2", {
      className: typographyStyle({
        type: "regular",
        size: "small"
      }),
      children: a
    }),
    image: n,
    children: e("div", {
      className: gridStyle({
        gap: 32
      }),
      children: [r && e(Message, {
        severity: "default",
        children: r
      }), e(NodeMessages, {
        uiMessages: t.ui.messages
      }), f && e(Fragment, {
        children: [e(Divider, {}), e(UserAuthForm, {
          flow: t,
          children: f
        })]
      }), c && !S() && e(Fragment, {
        children: [e(Divider, {}), e(UserAuthForm, {
          flow: t,
          submitOnEnter: !0,
          onSubmit: l,
          "data-testid": `${s}-flow`,
          children: c
        })]
      }), S() && e(Fragment, {
        children: [e(NodeMessages, {
          nodes: filterNodesByGroups({
            nodes: t.ui.nodes,
            groups: ["password", "webauthn", "totp", "lookup_secret"]
          })
        }), w()]
      }), v() && e(Fragment, {
        children: [e(Divider, {}), e(UserAuthForm, {
          flow: t,
          submitOnEnter: !0,
          onSubmit: l,
          "data-testid": "passwordless-flow",
          formFilterOverride: {
            nodes: t.ui.nodes,
            attributes: "hidden"
          },
          children: m
        })]
      }), p && MessageSection(p)]
    })
  });
}, UserErrorCard = ({
  title: t,
  error: a,
  backUrl: r,
  cardImage: s,
  contactSupportEmail: i
}) => {
  const n = a.error, l = n.code, d = l >= 500 ? JSON.stringify(a, null, 2) : n.reason;
  return e(Card, {
    heading: e("h2", {
      className: typographyStyle({
        type: "regular",
        size: "small"
      }),
      children: t
    }),
    image: s,
    children: e("div", {
      className: gridStyle({
        gap: 32,
        direction: "column"
      }),
      "data-testid": "ui/error/message",
      children: [e(Message, {
        severity: "error",
        children: ["An error occurred with the following message:\xA0", l < 500 && d]
      }), l >= 500 && e(CodeBox, {
        "data-testid": "code-box",
        children: d
      }), i && e(Message, {
        className: colorSprinkle({
          color: "foregroundMuted"
        }),
        children: ["If the problem persists, please contact\xA0", e(ButtonLink, {
          href: `mailto:${i}`,
          children: i
        })]
      }), e(Message, {
        children: e(ButtonLink, {
          href: r,
          children: "Go Back"
        })
      })]
    })
  });
}, UserSettingsCard = ({
  flow: t,
  flowType: a,
  title: r,
  includeScripts: s,
  onSubmit: i
}) => {
  s && useScriptNodes({
    nodes: t.ui.nodes
  });
  let n = !1, l = null, d = "";
  switch (a) {
    case "profile":
      n = !0, d = r || "Profile Settings", l = e(ProfileSettingsSection, {
        flow: t
      });
      break;
    case "password":
      hasPassword(t.ui.nodes) && (n = !0, d = r || "Change Password", l = e(PasswordSettingsSection, {
        flow: t
      }));
      break;
    case "webauthn":
      hasWebauthn(t.ui.nodes) && (n = !0, d = r || "Manage Hardware Tokens", l = e(WebAuthnSettingsSection, {
        flow: t
      }));
      break;
    case "lookupSecret":
      hasLookupSecret(t.ui.nodes) && (n = !0, d = r || "Manage 2FA Backup Recovery Codes", l = e(LookupSecretSettingsSection, {
        flow: t
      }));
      break;
    case "oidc":
      hasOidc(t.ui.nodes) && (n = !0, d = r || "Social Sign In", l = e(OIDCSettingsSection, {
        flow: t
      }));
      break;
    case "totp":
      hasTotp(t.ui.nodes) && (n = !0, d = r || "Manage 2FA TOTP Authenticator App", l = e(TOTPSettingsSection, {
        flow: t
      }));
      break;
    default:
      l = null;
  }
  return n ? e("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [d && e("h3", {
      className: cn(typographyStyle({
        size: "headline26",
        type: "regular"
      }), colorSprinkle({
        color: "foregroundDefault"
      })),
      children: d
    }), e(UserAuthForm, {
      flow: t,
      onSubmit: i,
      children: l
    })]
  }) : null;
}, UserConsentCard = ({
  csrfToken: t,
  consent: a,
  cardImage: r,
  client_name: s = "Unnamed Client",
  requested_scope: i = [],
  client: n,
  action: l
}) => e(Card, {
  heading: e("div", {
    style: {
      textAlign: "center"
    },
    children: e(Typography, {
      type: "bold",
      children: s
    })
  }),
  image: r,
  children: e("form", {
    action: l,
    method: "post",
    children: [e("input", {
      type: "hidden",
      name: "_csrf",
      value: t
    }), e("input", {
      type: "hidden",
      name: "consent_challenge",
      value: a == null ? void 0 : a.challenge
    }), e("div", {
      className: gridStyle({
        gap: 16
      }),
      children: [e("div", {
        className: gridStyle({
          gap: 4
        }),
        style: {
          marginBottom: 16
        },
        children: e(Typography, {
          children: "The application requests access to the following permissions:"
        })
      }), e("div", {
        className: gridStyle({
          gap: 4
        }),
        children: i.map((d) => e(Checkbox, {
          label: d,
          value: d,
          name: "grant_scope"
        }))
      }), e("div", {
        className: gridStyle({
          gap: 4
        }),
        children: e(Typography, {
          size: "xsmall",
          children: "Only grant permissions if you trust this site or app. You do not need to accept all permissions."
        })
      }), e("div", {
        className: gridStyle({
          direction: "row"
        }),
        children: [(n == null ? void 0 : n.policy_uri) && e("a", {
          href: n.policy_uri,
          target: "_blank",
          children: e(Typography, {
            size: "xsmall",
            children: "Privacy Policy"
          })
        }), (n == null ? void 0 : n.tos_uri) && e("a", {
          href: n.tos_uri,
          target: "_blank",
          children: e(Typography, {
            size: "xsmall",
            children: "Terms of Service"
          })
        })]
      }), e(Divider, {}), e("div", {
        className: gridStyle({
          gap: 8
        }),
        children: [e(Checkbox, {
          label: "Remember my decision"
        }), e(Typography, {
          size: "xsmall",
          children: "Remember this decision for next time. The application will not be able to ask for additional permissions without your consent."
        })]
      }), e("div", {
        className: gridStyle({
          direction: "row"
        }),
        style: {
          justifyContent: "space-between",
          alignItems: "center"
        },
        children: [e(Button, {
          type: "submit",
          id: "reject",
          name: "consent_action",
          value: "reject",
          variant: "error",
          header: "Deny"
        }), e(Button, {
          type: "submit",
          id: "accept",
          name: "consent_action",
          value: "accept",
          variant: "semibold",
          header: "Allow"
        })]
      })]
    })]
  })
});
function getVarName(t) {
  var a = t.match(/^var\((.*)\)$/);
  return a ? a[1] : t;
}
function get(t, a) {
  var r = t;
  for (var s of a) {
    if (!(s in r))
      throw new Error("Path ".concat(a.join(" -> "), " does not exist in object"));
    r = r[s];
  }
  return r;
}
function walkObject(t, a) {
  var r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [], s = t.constructor();
  for (var i in t) {
    var n = t[i], l = [...r, i];
    typeof n == "string" || typeof n == "number" || n == null ? s[i] = a(n, l) : typeof n == "object" && !Array.isArray(n) ? s[i] = walkObject(n, a, l) : console.warn('Skipping invalid key "'.concat(l.join("."), '". Should be a string, number, null or object. Received: "').concat(Array.isArray(n) ? "Array" : typeof n, '"'));
  }
  return s;
}
function assignInlineVars(t, a) {
  var r = {};
  if (typeof a == "object") {
    var s = t;
    walkObject(a, (l, d) => {
      var c = get(s, d);
      r[getVarName(c)] = String(l);
    });
  } else {
    var i = t;
    for (var n in i)
      r[getVarName(n)] = i[n];
  }
  return Object.defineProperty(r, "toString", {
    value: function() {
      return Object.keys(this).map((d) => "".concat(d, ":").concat(this[d])).join(";");
    },
    writable: !1
  }), r;
}
const normalize = "", interFont = "", jetbrainsMonoFont = "", ThemeProvider = ({
  children: t,
  theme: a,
  themeOverrides: r
}) => e("div", {
  style: assignInlineVars(oryTheme, {
    ...a === "dark" ? defaultDarkTheme : defaultLightTheme,
    ...r
  }),
  children: t
});
export {
  Button,
  ButtonLink,
  ButtonSocial,
  Card,
  CardGradient,
  Checkbox,
  CodeBox,
  Divider,
  FilterFlowNodes,
  InputField,
  LinkSection,
  LoginSection,
  LookupSecretSettingsSection,
  MenuLink,
  Message,
  MessageSection,
  Nav,
  Node,
  NodeMessages,
  OIDCSection,
  OIDCSettingsSection,
  PasswordSettingsSection,
  PasswordlessSection,
  ProfileSettingsSection,
  RegistrationSection,
  TOTPSettingsSection,
  ThemeProvider,
  Typography,
  UserAuthCard,
  UserAuthForm,
  UserConsentCard,
  UserErrorCard,
  UserSettingsCard,
  WebAuthnSettingsSection,
  buttonLinkIconStyle,
  buttonLinkStyle,
  buttonSocialIconEndStyle,
  buttonSocialIconStartStyle,
  buttonSocialStyle,
  buttonStyle,
  cardStyle,
  cardTitleImage,
  cardTitleStyle,
  checkboxInputStyle,
  checkboxStyle,
  codeboxContentStyle,
  codeboxHeaderStyle,
  codeboxStyle,
  colorProperties,
  colorSprinkle,
  defaultBreakpoints,
  defaultDarkTheme,
  defaultFont,
  defaultLightTheme,
  dividerStyle,
  dividerTextStyle,
  formStyle,
  gridStyle,
  hasLookupSecret,
  hasOidc,
  hasPassword,
  hasTotp,
  hasWebauthn,
  inputFieldStyle,
  inputFieldTitleStyle,
  inputTypographyStyle,
  menuLinkIconLeftStyle,
  menuLinkStyle,
  menuLinkTextStyle,
  messageStyle,
  navMainSectionStyle,
  navMenuLinkSelectedStyle,
  navMenuSectionStyle,
  navSectionBottom,
  navSectionTitleStyle,
  navStyle,
  oryTheme,
  pxToEm,
  pxToRem,
  typographyStyle,
  useScriptNodes
};
//# sourceMappingURL=index.mjs.map
