import { options, Fragment } from "preact";
import * as React from "react";
import { useEffect } from "react";
const pxToRem = (...e) => e.map((t) => `${t / 16}rem`).join(" "), pxToEm = (...e) => e.map((t) => `${t / 16}em`).join(" "), theme_css_ts_vanilla = "", button_css_ts_vanilla = "";
function _toPrimitive$1(e, t) {
  if (typeof e != "object" || e === null)
    return e;
  var r = e[Symbol.toPrimitive];
  if (r !== void 0) {
    var a = r.call(e, t || "default");
    if (typeof a != "object")
      return a;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return (t === "string" ? String : Number)(e);
}
function _toPropertyKey$1(e) {
  var t = _toPrimitive$1(e, "string");
  return typeof t == "symbol" ? t : String(t);
}
function _defineProperty$1(e, t, r) {
  return t = _toPropertyKey$1(t), t in e ? Object.defineProperty(e, t, {
    value: r,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[t] = r, e;
}
function ownKeys$1(e, t) {
  var r = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var a = Object.getOwnPropertySymbols(e);
    t && (a = a.filter(function(s) {
      return Object.getOwnPropertyDescriptor(e, s).enumerable;
    })), r.push.apply(r, a);
  }
  return r;
}
function _objectSpread2$1(e) {
  for (var t = 1; t < arguments.length; t++) {
    var r = arguments[t] != null ? arguments[t] : {};
    t % 2 ? ownKeys$1(Object(r), !0).forEach(function(a) {
      _defineProperty$1(e, a, r[a]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : ownKeys$1(Object(r)).forEach(function(a) {
      Object.defineProperty(e, a, Object.getOwnPropertyDescriptor(r, a));
    });
  }
  return e;
}
var shouldApplyCompound = (e, t, r) => {
  for (var a of Object.keys(e)) {
    var s;
    if (e[a] !== ((s = t[a]) !== null && s !== void 0 ? s : r[a]))
      return !1;
  }
  return !0;
}, createRuntimeFn = (e) => {
  var t = (r) => {
    var a = e.defaultClassName, s = _objectSpread2$1(_objectSpread2$1({}, e.defaultVariants), r);
    for (var n in s) {
      var i, l = (i = s[n]) !== null && i !== void 0 ? i : e.defaultVariants[n];
      if (l != null) {
        var d = l;
        typeof d == "boolean" && (d = d === !0 ? "true" : "false");
        var c = (
          // @ts-expect-error
          e.variantClassNames[n][d]
        );
        c && (a += " " + c);
      }
    }
    for (var [m, h] of e.compoundVariants)
      shouldApplyCompound(m, s, e.defaultVariants) && (a += " " + h);
    return a;
  };
  return t.variants = () => Object.keys(e.variantClassNames), t;
}, 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: []
}), _ = 0;
function o(e, t, r, a, s, n) {
  var i, l, d = {};
  for (l in t)
    l == "ref" ? i = t[l] : d[l] = t[l];
  var c = { type: e, props: d, key: r, ref: i, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: --_, __source: s, __self: n };
  if (typeof e == "function" && (i = e.defaultProps))
    for (l in i)
      d[l] === void 0 && (d[l] = i[l]);
  return options.vnode && options.vnode(c), c;
}
const Button = ({
  header: e,
  size: t,
  variant: r,
  fullWidth: a,
  className: s,
  ...n
}) => o("div", {
  className: s,
  children: o("button", {
    className: buttonStyle({
      size: t,
      variant: r
    }),
    style: {
      width: a ? "100%" : "auto"
    },
    ...n,
    children: e
  })
});
var classnamesExports = {}, classnames = {
  get exports() {
    return classnamesExports;
  },
  set exports(e) {
    classnamesExports = e;
  }
};
/*!
	Copyright (c) 2018 Jed Watson.
	Licensed under the MIT License (MIT), see
	http://jedwatson.github.io/classnames
*/
(function(e) {
  (function() {
    var t = {}.hasOwnProperty;
    function r() {
      for (var a = [], s = 0; s < arguments.length; s++) {
        var n = arguments[s];
        if (n) {
          var i = typeof n;
          if (i === "string" || i === "number")
            a.push(n);
          else if (Array.isArray(n)) {
            if (n.length) {
              var l = r.apply(null, n);
              l && a.push(l);
            }
          } else if (i === "object") {
            if (n.toString !== Object.prototype.toString && !n.toString.toString().includes("[native code]")) {
              a.push(n.toString());
              continue;
            }
            for (var d in n)
              t.call(n, d) && n[d] && a.push(d);
          }
        }
      }
      return a.join(" ");
    }
    e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
  })();
})(classnames);
const cn = classnamesExports, buttonLink_css_ts_vanilla = "";
var buttonLinkContainerStyle = createRuntimeFn({
  defaultClassName: "_1qkpc6p1",
  variantClassNames: {
    position: {
      inline: "_1qkpc6p2",
      left: "_1qkpc6p3",
      center: "_1qkpc6p4",
      right: "_1qkpc6p5"
    }
  },
  defaultVariants: {
    position: "inline"
  },
  compoundVariants: []
}), buttonLinkIconStyle = "_1qkpc6p6", 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: {
    size: {
      default: "_2kdvjr3",
      wide: "_2kdvjr4"
    }
  },
  defaultVariants: {
    size: "default"
  },
  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 _toPrimitive(e, t) {
  if (typeof e != "object" || e === null)
    return e;
  var r = e[Symbol.toPrimitive];
  if (r !== void 0) {
    var a = r.call(e, t || "default");
    if (typeof a != "object")
      return a;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return (t === "string" ? String : Number)(e);
}
function _toPropertyKey(e) {
  var t = _toPrimitive(e, "string");
  return typeof t == "symbol" ? t : String(t);
}
function _defineProperty(e, t, r) {
  return t = _toPropertyKey(t), t in e ? Object.defineProperty(e, t, {
    value: r,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[t] = r, e;
}
function ownKeys(e, t) {
  var r = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var a = Object.getOwnPropertySymbols(e);
    t && (a = a.filter(function(s) {
      return Object.getOwnPropertyDescriptor(e, s).enumerable;
    })), r.push.apply(r, a);
  }
  return r;
}
function _objectSpread2(e) {
  for (var t = 1; t < arguments.length; t++) {
    var r = arguments[t] != null ? arguments[t] : {};
    t % 2 ? ownKeys(Object(r), !0).forEach(function(a) {
      _defineProperty(e, a, r[a]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : ownKeys(Object(r)).forEach(function(a) {
      Object.defineProperty(e, a, Object.getOwnPropertyDescriptor(r, a));
    });
  }
  return e;
}
var createSprinkles$1 = (e) => function() {
  for (var t = arguments.length, r = new Array(t), a = 0; a < t; a++)
    r[a] = arguments[a];
  var s = Object.assign({}, ...r.map((d) => d.styles)), n = Object.keys(s), i = n.filter((d) => "mappings" in s[d]), l = (d) => {
    var c = [], m = {}, h = _objectSpread2({}, d), f = !1;
    for (var y of i) {
      var b = d[y];
      if (b != null) {
        var O = s[y];
        f = !0;
        for (var v of O.mappings)
          m[v] = b, h[v] == null && delete h[v];
      }
    }
    var x = f ? _objectSpread2(_objectSpread2({}, m), h) : d, T = function() {
      var p = x[g], u = s[g];
      try {
        if (u.mappings)
          return "continue";
        if (typeof p == "string" || typeof p == "number") {
          if (process.env.NODE_ENV !== "production" && !u.values[p].defaultClass)
            throw new Error();
          c.push(u.values[p].defaultClass);
        } else if (Array.isArray(p))
          for (var C = 0; C < p.length; C++) {
            var P = p[C];
            if (P != null) {
              var j = u.responsiveArray[C];
              if (process.env.NODE_ENV !== "production" && !u.values[P].conditions[j])
                throw new Error();
              c.push(u.values[P].conditions[j]);
            }
          }
        else
          for (var D in p) {
            var A = p[D];
            if (A != null) {
              if (process.env.NODE_ENV !== "production" && !u.values[A].conditions[D])
                throw new Error();
              c.push(u.values[A].conditions[D]);
            }
          }
      } catch (B) {
        if (process.env.NODE_ENV !== "production") {
          class S extends Error {
            constructor(I) {
              super(I), this.name = "SprinklesError";
            }
          }
          var F = (N) => typeof N == "string" ? '"'.concat(N, '"') : N, E = (N, I, V) => {
            throw new S('"'.concat(N, '" has no value ').concat(F(I), ". Possible values are ").concat(Object.keys(V).map(F).join(", ")));
          };
          if (!u)
            throw new S('"'.concat(g, '" is not a valid sprinkle'));
          if ((typeof p == "string" || typeof p == "number") && (p in u.values || E(g, p, u.values), !u.values[p].defaultClass))
            throw new S('"'.concat(g, '" has no default condition. You must specify which conditions to target explicitly. Possible options are ').concat(Object.keys(u.values[p].conditions).map(F).join(", ")));
          if (typeof p == "object") {
            if (!("conditions" in u.values[Object.keys(u.values)[0]]))
              throw new S('"'.concat(g, '" is not a conditional property'));
            if (Array.isArray(p)) {
              if (!("responsiveArray" in u))
                throw new S('"'.concat(g, '" does not support responsive arrays'));
              var M = u.responsiveArray.length;
              if (M < p.length)
                throw new S('"'.concat(g, '" only supports up to ').concat(M, " breakpoints. You passed ").concat(p.length));
              for (var $ of p)
                u.values[$] || E(g, $, u.values);
            } else
              for (var L in p) {
                var k = p[L];
                if (k != null && (u.values[k] || E(g, k, u.values), !u.values[k].conditions[L]))
                  throw new S('"'.concat(g, '" has no condition named ').concat(F(L), ". Possible values are ").concat(Object.keys(u.values[k].conditions).map(F).join(", ")));
              }
          }
        }
        throw B;
      }
    };
    for (var g in x)
      var w = T();
    return e(c.join(" "));
  };
  return Object.assign(l, {
    properties: new Set(n)
  });
}, composeStyles = (e) => e, 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"
        },
        backgroundSubtle: {
          defaultClass: "_13go3g3e"
        },
        errorDefault: {
          defaultClass: "_13go3g3f"
        },
        errorSubtle: {
          defaultClass: "_13go3g3g"
        },
        errorMuted: {
          defaultClass: "_13go3g3h"
        },
        errorEmphasis: {
          defaultClass: "_13go3g3i"
        },
        successEmphasis: {
          defaultClass: "_13go3g3j"
        },
        borderDefault: {
          defaultClass: "_13go3g3k"
        },
        textDefault: {
          defaultClass: "_13go3g3l"
        },
        textDisabled: {
          defaultClass: "_13go3g3m"
        },
        inputBackground: {
          defaultClass: "_13go3g3n"
        },
        inputDisabled: {
          defaultClass: "_13go3g3o"
        },
        inputPlaceholder: {
          defaultClass: "_13go3g3p"
        },
        inputText: {
          defaultClass: "_13go3g3q"
        }
      }
    }
  }
}, colorSprinkle = createSprinkles(colorProperties);
const defaultBreakpoints = {
  // using em here as it is more consistent across browsers
  xs: pxToEm(390),
  sm: pxToEm(640),
  md: pxToEm(768),
  lg: pxToEm(1024),
  xl: pxToEm(1280),
  xl2: pxToEm(1536)
}, defaultFont = {
  fontFamily: "Inter",
  fontFamilyMono: "JetBrainsMono",
  fontStyle: "normal"
}, defaultLightTheme = {
  fontFamily: "Inter",
  fontFamilyMono: "JetBrainsMono",
  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",
  fontFamilyMono: "JetBrainsMono",
  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",
      info: "_1u4sc9q6",
      disabled: "_1u4sc9q7",
      default: "_1u4sc9q8"
    }
  },
  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)",
  fontFamilyMono: "var(--ory-theme-font-family-mono)",
  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 isCustomHref = (e) => e !== void 0 && e.href !== void 0, ButtonLink = ({
  href: e,
  className: t,
  icon: r,
  children: a,
  position: s,
  ...n
}) => {
  let i = {
    ...n
  };
  return isCustomHref(e) ? i = {
    ...i,
    href: e.href,
    onClick: (l) => {
      l.preventDefault(), e.handler(e.href);
    }
  } : i = {
    ...i,
    href: e
  }, o("div", {
    className: cn(t, typographyStyle({
      size: "caption",
      type: "regular"
    }), buttonLinkContainerStyle({
      position: s
    })),
    children: o("a", {
      className: buttonLinkStyle(),
      ...i,
      children: [r && o("i", {
        className: cn(`fa fa-${r}`, buttonLinkIconStyle)
      }), a]
    })
  });
}, ButtonSocial = ({
  header: e,
  brand: t,
  size: r,
  variant: a,
  fullWidth: s,
  className: n,
  ...i
}) => {
  const l = t !== "generic" ? `fa-brands fa-${t}` : "fa-solid fa-layer-group";
  return o("div", {
    className: n,
    children: o("button", {
      className: buttonSocialStyle({
        size: r,
        variant: a
      }),
      style: {
        width: s ? "100%" : "auto"
      },
      ...i,
      children: [o("i", {
        className: cn(l, buttonSocialIconStartStyle({
          size: r
        }))
      }), e, o("i", {
        className: cn(l, buttonSocialIconEndStyle({
          size: r
        })),
        style: {
          visibility: "hidden",
          opacity: 0
        }
      })]
    })
  });
}, Card = ({
  heading: e,
  image: t,
  className: r,
  children: a,
  size: s,
  ...n
}) => o("div", {
  className: cn(cardStyle({
    size: s
  }), typographyStyle({
    type: "regular",
    size: "small"
  }), r),
  ...n,
  children: o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [t && o(Fragment, {
      children: typeof t == "string" ? o("img", {
        className: cardTitleImage,
        src: t,
        alt: t,
        width: "100%",
        height: "100%"
      }) : t
    }), o("div", {
      className: cardTitleStyle,
      children: typeof e == "string" ? o("h3", {
        className: typographyStyle({
          type: "regular",
          size: "small"
        }),
        children: e
      }) : e
    }), o("div", {
      children: a
    })]
  })
}), 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: e,
  content: t,
  action: r,
  target: a,
  disabled: s,
  className: n,
  ...i
}) => o("a", {
  className: cn(cardContainer, cardGradientOverlayStyle({
    disabled: s
  })),
  target: a,
  "aria-disabled": s,
  ...!s && {
    href: r
  },
  ...i,
  children: [o("div", {
    className: cn(colorSprinkle({
      color: s ? "foregroundOnDisabled" : "foregroundOnDark"
    }), n),
    children: o("div", {
      className: cn(gridStyle({
        gap: 16
      })),
      children: [typeof e == "string" ? o("div", {
        className: typographyStyle({
          size: "headline21",
          type: "bold"
        }),
        children: e
      }) : e, typeof t == "string" ? o("div", {
        className: typographyStyle({
          size: "small",
          type: "regular"
        }),
        children: t
      }) : t]
    })
  }), o("i", {
    className: cn("fa fa-arrow-right", cardGradientActionStyle({
      disabled: s
    }))
  })]
}), Message = ({
  severity: e,
  textPosition: t,
  className: r,
  children: a,
  ...s
}) => o("div", {
  className: cn(messageStyle({
    severity: e,
    textPosition: t
  }), typographyStyle({
    size: "caption",
    type: "regular"
  }), r),
  ...s,
  children: a
}), fallback = () => Math.random().toString(36).substring(2), useIdWithFallback = () => {
  try {
    return React["useId".toString()]() ?? fallback();
  } catch {
    return fallback();
  }
}, Checkbox = ({
  className: e,
  label: t,
  helperMessage: r,
  messageTestId: a,
  dataTestid: s,
  ...n
}) => {
  const i = n.id ?? useIdWithFallback();
  return o("div", {
    "data-testid": s,
    className: gridStyle({
      gap: 4,
      direction: "column"
    }),
    children: [o("div", {
      className: cn(e, typographyStyle({
        type: "regular",
        size: "caption"
      }), checkboxStyle),
      children: [o("input", {
        className: checkboxInputStyle,
        id: i,
        type: "checkbox",
        value: 1,
        ...n
      }), t && o("label", {
        htmlFor: i,
        children: o("span", {
          children: t
        })
      })]
    }), typeof r == "string" ? o(Message, {
      "data-testid": a,
      severity: n.severity,
      textPosition: "start",
      children: r
    }) : r]
  });
}, CodeBox = ({
  children: e,
  className: t,
  toggleText: r,
  ...a
}) => {
  const s = useIdWithFallback();
  return o("div", {
    className: cn(t, gridStyle({
      gap: 16
    }), codeboxStyle),
    ...a,
    children: [o("input", {
      id: s,
      type: "checkbox"
    }), o("label", {
      htmlFor: s,
      className: cn(typographyStyle({
        size: "small"
      }), codeboxHeaderStyle),
      children: [o("div", {
        children: r || "Toggle content"
      }), o("span", {
        children: [o("i", {
          className: cn("fa fa-caret-down", colorSprinkle({
            color: "accentDefault"
          }))
        }), o("i", {
          className: cn("fa fa-caret-up", colorSprinkle({
            color: "accentDefault"
          }))
        })]
      })]
    }), o("pre", {
      className: cn(colorSprinkle({
        color: "accentEmphasis"
      }), codeboxContentStyle),
      children: e
    })]
  });
}, Divider = ({
  className: e,
  fullWidth: t,
  text: r,
  ...a
}) => r ? o("div", {
  className: cn(dividerTextStyle, e),
  ...a,
  children: r
}) : o("hr", {
  className: cn(dividerStyle(t ? {
    sizes: "fullWidth"
  } : {}), e),
  ...a
}), InputField = ({
  header: e,
  helperMessage: t,
  messageTestId: r,
  fullWidth: a,
  className: s,
  dataTestid: n,
  id: i,
  ...l
}) => {
  const d = i ?? useIdWithFallback();
  return o("div", {
    "data-testid": n,
    className: cn(s, gridStyle({
      gap: 4
    })),
    children: [e && o("label", {
      htmlFor: d,
      className: typographyStyle({
        size: "small",
        type: "regular"
      }),
      children: [e, " ", l.required && o("span", {
        className: inputFieldTitleStyle,
        children: "*"
      })]
    }), o("input", {
      className: cn(inputFieldStyle, typographyStyle({
        size: "small",
        type: "regular"
      })),
      style: {
        width: a ? "100%" : "auto"
      },
      placeholder: " ",
      id: d,
      ...l
    }), typeof t == "string" ? o(Message, {
      "data-testid": r,
      severity: l.severity,
      children: t
    }) : t]
  });
}, MenuLink = ({
  href: e,
  children: t,
  target: r,
  disabled: a,
  iconLeft: s,
  iconRight: n,
  className: i,
  ...l
}) => o("div", {
  className: cn(i, menuLinkStyle),
  ...l,
  children: [o("a", {
    className: cn(typographyStyle({
      size: "small",
      type: "regular"
    }), colorSprinkle({
      color: a ? "foregroundDisabled" : "foregroundMuted"
    }), menuLinkTextStyle),
    "aria-disabled": a,
    ...!a && {
      href: e
    },
    ...r && {
      target: r
    },
    children: [s && o("i", {
      className: cn("fa", `fa-${s}`, menuLinkIconLeftStyle)
    }), t]
  }), n && o("i", {
    className: cn("fa", `fa-${n}`, colorSprinkle({
      color: a ? "foregroundDisabled" : "foregroundMuted"
    }))
  })]
}), Nav = ({
  navTitle: e,
  navSections: t,
  className: r,
  ...a
}) => {
  const s = `collapse-ory-elements-nav-${useIdWithFallback()}`;
  return o("nav", {
    role: "navigation",
    className: cn(navStyle, r),
    ...a,
    children: [o("input", {
      id: s,
      type: "checkbox"
    }), o("div", {
      className: cn(navSectionTitleStyle, typographyStyle({
        size: "caption"
      }), colorSprinkle({
        color: "accentDefault"
      })),
      children: [e, o("label", {
        htmlFor: s,
        children: [o("i", {
          className: cn("fa", "fa-bars")
        }), o("i", {
          className: cn("fa", "fa-xmark")
        })]
      })]
    }), o("ul", {
      className: cn(navMainSectionStyle, navMenuSectionStyle, gridStyle({
        gap: 24
      })),
      children: t.map((n, i) => o("li", {
        ...n.floatBottom && {
          className: navSectionBottom
        },
        children: [n.title && o("div", {
          className: cn(typographyStyle({
            size: "xsmall",
            type: "bold"
          }), colorSprinkle({
            color: "foregroundDefault"
          }), navSectionTitleStyle),
          children: [n.title, o("i", {
            className: `fa fa-${n.titleIcon}`
          })]
        }), o("ul", {
          className: navMenuSectionStyle,
          children: n.links.map(({
            testId: l,
            ...d
          }, c) => o("li", {
            ...d.selected && {
              className: navMenuLinkSelectedStyle
            },
            children: o(MenuLink, {
              "data-testid": l,
              ...d,
              children: d.name
            })
          }, c))
        })]
      }, i))
    })]
  });
}, MessageSection = ({
  text: e,
  url: t,
  buttonText: r,
  dataTestId: a
}) => o(Message, {
  className: colorSprinkle({
    color: "foregroundMuted"
  }),
  children: [e, " ", o(ButtonLink, {
    "data-testid": a,
    href: t,
    children: r
  })]
}), nodeMessage = ({
  text: e,
  id: t,
  type: r,
  key: a,
  ...s
}) => o(Message, {
  "data-testid": `ui/message/${t}`,
  severity: r,
  ...s,
  children: e
}, a), NodeMessages = ({
  nodes: e,
  uiMessages: t,
  ...r
}) => {
  const {
    gap: a,
    direction: s,
    ...n
  } = r, i = e?.reduce((c, {
    messages: m
  }) => (c.push(...m.map(({
    text: h,
    id: f,
    type: y
  }, b) => nodeMessage({
    text: h,
    id: f,
    type: y,
    key: `node-group-message-${f}-${b}`,
    ...n
  })).filter(Boolean)), c), []), l = t?.map(({
    text: c,
    id: m,
    type: h
  }, f) => nodeMessage({
    text: c,
    id: m,
    type: h,
    key: `ui-messsage-${m}-${f}`
  })), d = [...i || [], ...l || []];
  return d.length > 0 ? o("div", {
    className: gridStyle({
      gap: a || 16,
      direction: s
    }),
    children: d
  }) : null;
}, getNodeLabel = (e) => {
  const t = e.attributes;
  return isUiNodeAnchorAttributes(t) ? t.title.text : isUiNodeImageAttributes(t) ? e.meta.label?.text || "" : isUiNodeInputAttributes(t) && t.label?.text ? t.label.text : e.meta.label?.text || "";
};
function isUiNodeAnchorAttributes(e) {
  return e.node_type === "a";
}
function isUiNodeImageAttributes(e) {
  return e.node_type === "img";
}
function isUiNodeInputAttributes(e) {
  return e.node_type === "input";
}
function isUiNodeTextAttributes(e) {
  return e.node_type === "text";
}
const getNodeInputType = (e) => e?.type ?? "", filterNodesByGroups = ({
  nodes: e,
  groups: t,
  withoutDefaultGroup: r,
  attributes: a,
  withoutDefaultAttributes: s,
  excludeAttributes: n
}) => {
  const i = (l) => typeof l == "string" ? l.split(",") : l;
  return e.filter(({ group: l, attributes: d }) => {
    if (!t && !a && !n)
      return !0;
    const c = i(t) || [];
    r || c.push("default");
    const m = i(a) || [];
    s || (l.includes("default") && m.push("hidden"), (l.includes("webauthn") || l.includes("totp")) && m.push("input", "script"));
    const h = i(n) || [], f = t ? c.includes(l) : !0, y = a ? m.includes(getNodeInputType(d)) : !0, b = n ? !h.includes(getNodeInputType(d)) : !0;
    return f && y && b;
  });
}, Image = ({
  header: e,
  className: t,
  ...r
}) => o("div", {
  className: cn(t, gridStyle({
    gap: 4
  })),
  children: [e && o("div", {
    className: typographyStyle({
      size: "small",
      type: "regular"
    }),
    children: e
  }), o("img", {
    ...r
  })]
}), Typography = ({
  children: e,
  size: t,
  type: r,
  color: a,
  className: s,
  ...n
}) => o("div", {
  className: cn(typographyStyle({
    size: t,
    type: r
  }), colorSprinkle({
    color: a
  }), s),
  ...n,
  children: e
}), Node = ({
  node,
  className,
  buttonOverrideProps,
  buttonSocialOverrideProps
}) => {
  if (isUiNodeImageAttributes(node.attributes))
    return o(Image, {
      src: node.attributes.src,
      alt: node.meta.label?.text,
      "data-testid": `node/image/${node.attributes.id}`,
      header: node.meta.label?.text,
      width: node.attributes.width,
      height: node.attributes.height
    });
  if (isUiNodeTextAttributes(node.attributes)) {
    const e = node.attributes.id;
    return node.attributes.text.id === 1050015 ? o("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/${e}`,
      children: [o(Typography, {
        variant: "body1",
        "data-testid": `node/text/${node.attributes.id}/label`,
        style: {
          flexBasis: "100%"
        },
        children: node.meta.label?.text
      }), node.attributes.text.context.secrets.map(({
        text: t,
        id: r
      }, a) => r === 1050014 ? o("pre", {
        children: o("del", {
          "data-testid": "node/text/lookup_secret_codes/text",
          children: o("code", {
            children: "Used"
          })
        })
      }, a) : o("pre", {
        "data-testid": "node/text/lookup_secret_codes/text",
        children: o("code", {
          children: t
        })
      }, a))]
    }) : o("div", {
      className: gridStyle({
        gap: 4
      }),
      "data-testid": `node/text/${e}`,
      children: [o(Typography, {
        variant: "body1",
        "data-testid": `node/text/${node.attributes.id}/label`,
        children: node.meta.label?.text
      }), o("pre", {
        "data-testid": `node/text/${e}/text`,
        children: o("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 = (e) => {
          e.currentTarget.type = "submit", e.currentTarget.dispatchEvent(new Event("submit", {
            cancelable: !0,
            bubbles: !0
          }));
        }), attrs.onclick) {
          const oc = attrs.onclick;
          submit.onClick = () => {
            eval(oc);
          };
        }
        return (node.meta.label?.id === 1070007 || // TODO: remove this once everyone has migrated to the fix (https://github.com/ory/kratos/pull/3067)
        node.meta.label?.id === 1070008) && (submit.formNoValidate = !0), isSocial ? o(ButtonSocial, {
          className,
          header: getNodeLabel(node),
          brand: attrs.value.toLowerCase(),
          variant: "semibold",
          size: "medium",
          fullWidth: !0,
          disabled: attrs.disabled,
          ...buttonSocialOverrideProps && buttonSocialOverrideProps,
          ...submit
        }) : o(Button, {
          className,
          header: getNodeLabel(node),
          variant: "semibold",
          size: "medium",
          fullWidth: !0,
          disabled: attrs.disabled,
          ...buttonOverrideProps && buttonOverrideProps,
          ...submit
        });
      case "datetime-local":
      case "checkbox":
        return o(Checkbox, {
          className,
          helperMessage: o(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 o(InputField, {
          helperMessage: o(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
        });
    }
  } else if (isUiNodeAnchorAttributes(node.attributes))
    return o(ButtonLink, {
      href: node.attributes.href,
      title: node.attributes.title.text,
      "data-testid": `node/anchor/${node.attributes.id}`,
      className,
      position: "center",
      children: node.attributes.title.text
    });
  return null;
}, FilterFlowNodes = ({
  filter: e,
  includeCSRF: t,
  ...r
}) => {
  const a = (n) => isUiNodeInputAttributes(n.attributes) ? n.attributes.name : "", s = filterNodesByGroups(e).filter((n) => !(a(n) === "csrf_token" && !t)).map((n, i) => ["hidden"].includes(getNodeInputType(n.attributes)) ? {
    node: o(Node, {
      node: n,
      ...r
    }, i),
    hidden: !0
  } : {
    node: o(Node, {
      node: n,
      ...r
    }, i),
    hidden: !1
  });
  return s.length > 0 ? o(Fragment, {
    children: [s.filter((n) => n.hidden).map((n) => n.node), o("div", {
      className: gridStyle({
        gap: 16
      }),
      children: s.filter((n) => !n.hidden).map((n) => n.node)
    })]
  }) : null;
}, useScriptNodes = ({
  nodes: e
}) => {
  useEffect(() => {
    const t = filterNodesByGroups({
      nodes: e,
      groups: "webauthn",
      attributes: "text/javascript",
      withoutDefaultGroup: !0,
      withoutDefaultAttributes: !0
    }).map((r) => {
      const a = r.attributes, s = document.createElement("script");
      return s.setAttribute("data-testid", `node/script/${s.id}`), s.src = a.src, s.type = a.type, s.async = a.async, s.referrerPolicy = a.referrerpolicy, s.crossOrigin = a.crossorigin, s.integrity = a.integrity, document.body.appendChild(s), s;
    });
    return () => {
      t.forEach((r) => {
        document.body.removeChild(r);
      });
    };
  }, [e]);
}, UserAuthForm = ({
  flow: e,
  children: t,
  submitOnEnter: r,
  onSubmit: a,
  formFilterOverride: s,
  className: n,
  ...i
}) => o("form", {
  className: cn(n, formStyle),
  action: e.ui.action,
  method: e.ui.method,
  onKeyDown: (l) => {
    l.key === "Enter" && !r && (l.stopPropagation(), l.preventDefault());
  },
  ...a && {
    onSubmit: (l) => {
      l.preventDefault();
      const d = l.currentTarget, c = new FormData(d);
      let m = Object.fromEntries(c);
      if ("submitter" in l.nativeEvent) {
        const h = l.nativeEvent.submitter;
        m = {
          ...m,
          [h.name]: h.value
        };
      }
      a({
        body: m,
        event: l
      });
    }
  },
  ...i,
  children: o(Fragment, {
    children: [o(FilterFlowNodes, {
      filter: s || {
        nodes: e.ui.nodes,
        groups: "default",
        // we only want to map hidden default fields here
        attributes: "hidden"
      },
      includeCSRF: !0
    }), t]
  })
}), hasOidc = (e) => e.some(({
  group: t
}) => t === "oidc"), hasPassword = (e) => e.some(({
  group: t
}) => t === "password"), hasWebauthn = (e) => e.some(({
  group: t
}) => t === "webauthn"), hasLookupSecret = (e) => e.some(({
  group: t
}) => t === "lookup_secret"), hasTotp = (e) => e.some(({
  group: t
}) => t === "totp"), hasCode = (e) => e.some(({
  group: t
}) => t === "code"), hasHiddenIdentifier = (e) => e.some(({
  attributes: t
}) => "name" in t && t.name === "identifier" && t.type === "hidden"), LinkSection = ({
  nodes: e
}) => o("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [o("div", {
    className: gridStyle({
      gap: 16
    }),
    children: o(FilterFlowNodes, {
      filter: {
        nodes: e,
        groups: ["link", "code"],
        excludeAttributes: "submit"
      }
    })
  }), o(FilterFlowNodes, {
    filter: {
      nodes: e,
      groups: ["link", "code"],
      attributes: "submit"
    }
  })]
}), LoginSection = ({
  nodes: e,
  forgotPasswordURL: t
}) => hasPassword(e) ? o("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [o("div", {
    className: gridStyle({
      gap: 16
    }),
    children: [o(FilterFlowNodes, {
      filter: {
        nodes: e,
        groups: ["default", "password"],
        excludeAttributes: ["submit", "hidden"]
      }
    }), t && o(ButtonLink, {
      "data-testid": "forgot-password-link",
      href: t,
      children: "Forgot Password?"
    })]
  }), o(FilterFlowNodes, {
    filter: {
      nodes: e,
      groups: ["password"],
      attributes: "submit"
    }
  })]
}) : null, LookupSecretSettingsSection = ({
  flow: e
}) => {
  const t = {
    nodes: e.ui.nodes,
    groups: "lookup_secret",
    withoutDefaultGroup: !0
  };
  return hasLookupSecret(e.ui.nodes) ? o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [o(FilterFlowNodes, {
      filter: {
        ...t,
        excludeAttributes: "submit,button"
      }
    }), o(FilterFlowNodes, {
      filter: {
        ...t,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, OIDCSection = (e) => {
  const t = filterNodesByGroups({
    nodes: e.ui.nodes,
    groups: "oidc",
    withoutDefaultGroup: !0,
    excludeAttributes: "submit"
  }).length > 0;
  return hasOidc(e.ui.nodes) ? o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [t && o("div", {
      className: gridStyle({
        gap: 16
      }),
      children: o(FilterFlowNodes, {
        filter: {
          nodes: e.ui.nodes,
          groups: "oidc",
          withoutDefaultGroup: !0,
          excludeAttributes: "submit"
        }
      })
    }), o(FilterFlowNodes, {
      filter: {
        nodes: e.ui.nodes,
        groups: "oidc",
        attributes: "submit"
      }
    })]
  }) : null;
}, OIDCSettingsSection = ({
  flow: e
}) => {
  const t = {
    nodes: e.ui.nodes,
    groups: "oidc",
    withoutDefaultGroup: !0
  };
  return hasOidc(e.ui.nodes) ? o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: o(FilterFlowNodes, {
      filter: t,
      buttonOverrideProps: {
        fullWidth: !1
      }
    })
  }) : null;
}, PasswordSettingsSection = ({
  flow: e
}) => {
  const t = {
    nodes: e.ui.nodes,
    groups: "password",
    withoutDefaultGroup: !0
  };
  return hasPassword(e.ui.nodes) ? o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [o(FilterFlowNodes, {
      filter: {
        ...t,
        excludeAttributes: "submit,button"
      }
    }), o(FilterFlowNodes, {
      filter: {
        ...t,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, PasswordlessSection = (e) => hasWebauthn(e.ui.nodes) ? o("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [o("div", {
    className: gridStyle({
      gap: 16
    }),
    children: o(FilterFlowNodes, {
      filter: {
        nodes: e.ui.nodes,
        // we will also map default fields here but not oidc and password fields
        groups: ["webauthn"],
        withoutDefaultAttributes: !0,
        excludeAttributes: ["hidden", "button", "submit"]
        // the form will take care of hidden fields
      }
    })
  }), o(FilterFlowNodes, {
    filter: {
      nodes: e.ui.nodes,
      groups: ["webauthn"],
      withoutDefaultAttributes: !0,
      attributes: ["button", "submit"]
    }
  })]
}) : null, ProfileSettingsSection = ({
  flow: e
}) => {
  const t = {
    nodes: e.ui.nodes,
    groups: "profile"
  };
  return o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [o(FilterFlowNodes, {
      filter: {
        ...t,
        excludeAttributes: "submit,button"
      }
    }), o(FilterFlowNodes, {
      filter: {
        ...t,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  });
}, RegistrationSection = ({
  nodes: e
}) => hasPassword(e) ? o("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [o("div", {
    className: gridStyle({
      gap: 16
    }),
    children: o(FilterFlowNodes, {
      filter: {
        nodes: e,
        groups: ["password"],
        excludeAttributes: "submit"
      }
    })
  }), o(FilterFlowNodes, {
    filter: {
      nodes: e,
      groups: ["password"],
      attributes: "submit"
    }
  })]
}) : null, TOTPSettingsSection = ({
  flow: e
}) => {
  const t = {
    nodes: e.ui.nodes,
    groups: "totp",
    withoutDefaultGroup: !0
  };
  return hasTotp(e.ui.nodes) ? o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [o(FilterFlowNodes, {
      filter: {
        ...t,
        excludeAttributes: "submit,button"
      }
    }), o(FilterFlowNodes, {
      filter: {
        ...t,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, WebAuthnSettingsSection = ({
  flow: e
}) => {
  const t = {
    nodes: e.ui.nodes,
    groups: "webauthn",
    withoutDefaultGroup: !0
  };
  return hasWebauthn(e.ui.nodes) ? o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [o(FilterFlowNodes, {
      filter: {
        ...t,
        excludeAttributes: "submit,button"
      }
    }), o(FilterFlowNodes, {
      filter: {
        ...t,
        attributes: "submit,button"
      },
      buttonOverrideProps: {
        fullWidth: !1
      }
    })]
  }) : null;
}, AuthCodeSection = ({
  nodes: e
}) => hasCode(e) ? o("div", {
  className: gridStyle({
    gap: 32
  }),
  children: [o("div", {
    className: gridStyle({
      gap: 16
    }),
    children: o(FilterFlowNodes, {
      filter: {
        nodes: e,
        groups: "code",
        excludeAttributes: ["submit", "hidden"]
      }
    })
  }), o(FilterFlowNodes, {
    filter: {
      nodes: e,
      groups: "code",
      withoutDefaultGroup: !0,
      attributes: ["submit", "hidden"]
    }
  })]
}) : null, identifier_css_ts_vanilla = "";
var identifierNameStyle = "hs80oq1", identifierStyle = "hs80oq0";
const LoggedInfo = ({
  flow: e
}) => {
  const t = e.ui.nodes.find((r) => "name" in r.attributes && r.attributes.name === "identifier")?.attributes;
  return !t || !("value" in t) ? null : o("div", {
    className: identifierStyle,
    children: ["You're logged in as:", o("div", {
      className: identifierNameStyle,
      children: t.value
    })]
  });
}, UserAuthCard = ({
  flow: e,
  title: t,
  subtitle: r,
  flowType: a,
  additionalProps: s,
  cardImage: n,
  onSubmit: i,
  includeScripts: l,
  className: d
}) => {
  l && useScriptNodes({
    nodes: e.ui.nodes
  });
  let c = null, m = null, h = null, f = null, y = null;
  const b = (g) => g.refresh || g.requested_aal === "aal2", O = () => !!f && (!b(e) || a === "registration"), v = () => b(e) && a === "login" && (hasTotp(e.ui.nodes) || hasWebauthn(e.ui.nodes) || hasLookupSecret(e.ui.nodes)), x = hasHiddenIdentifier(e.ui.nodes), T = () => v() && [hasWebauthn(e.ui.nodes) && o(UserAuthForm, {
    flow: e,
    "data-testid": "webauthn-flow",
    children: o(FilterFlowNodes, {
      filter: {
        nodes: e.ui.nodes,
        groups: "webauthn",
        withoutDefaultGroup: !0
      }
    })
  }), hasPassword(e.ui.nodes) && o(UserAuthForm, {
    flow: e,
    "data-testid": "password-flow",
    children: o(FilterFlowNodes, {
      filter: {
        nodes: e.ui.nodes,
        groups: "password",
        withoutDefaultGroup: !0
      }
    })
  }), hasTotp(e.ui.nodes) && o(UserAuthForm, {
    flow: e,
    "data-testid": "totp-flow",
    onSubmit: i,
    submitOnEnter: !0,
    children: o("div", {
      className: gridStyle({
        gap: 32
      }),
      children: [o(FilterFlowNodes, {
        filter: {
          nodes: e.ui.nodes,
          groups: "totp",
          withoutDefaultGroup: !0,
          excludeAttributes: "submit"
        }
      }), o(FilterFlowNodes, {
        filter: {
          nodes: e.ui.nodes,
          groups: "totp",
          withoutDefaultGroup: !0,
          attributes: "submit"
        }
      })]
    })
  }), hasLookupSecret(e.ui.nodes) && o(UserAuthForm, {
    flow: e,
    "data-testid": "lookup-secret-flow",
    onSubmit: i,
    submitOnEnter: !0,
    children: o(FilterFlowNodes, {
      filter: {
        nodes: e.ui.nodes,
        groups: "lookup_secret",
        withoutDefaultGroup: !0
      }
    })
  })].filter(Boolean).map((g, w) => o("div", {
    children: w > 0 ? o(Fragment, {
      children: [o(Divider, {}), " ", g]
    }) : g
  }, w));
  switch (a) {
    case "login":
      f = PasswordlessSection(e), m = OIDCSection(e), h = AuthCodeSection({
        nodes: e.ui.nodes
      }), c = LoginSection({
        nodes: e.ui.nodes,
        ...s
      }), b(e) ? y = {
        text: o(Fragment, {
          children: "Something's not working?"
        }),
        buttonText: "Logout",
        url: s.logoutURL,
        dataTestId: "logout-link"
      } : s.signupURL && (y = {
        buttonText: "Sign up",
        url: s.signupURL,
        text: o(Fragment, {
          children: "Don't have an account?"
        }),
        dataTestId: "signup-link"
      });
      break;
    case "registration":
      f = PasswordlessSection(e), m = OIDCSection(e), h = AuthCodeSection({
        nodes: e.ui.nodes
      }), c = RegistrationSection({
        nodes: e.ui.nodes
      }), y = {
        text: "Already have an account?",
        url: s.loginURL,
        buttonText: "Sign in",
        dataTestId: "cta-link"
      };
      break;
    case "recovery":
      c = LinkSection({
        nodes: e.ui.nodes
      }), y = {
        text: "Remember your credentials?",
        url: s.loginURL,
        buttonText: "Sign in",
        dataTestId: "cta-link"
      };
      break;
    case "verification":
      c = LinkSection({
        nodes: e.ui.nodes
      }), y = {
        text: "Don't have an account?",
        url: s.signupURL,
        buttonText: "Sign up",
        dataTestId: "cta-link"
      };
      break;
    default:
      c = null;
  }
  return o(Card, {
    className: d,
    heading: o("h2", {
      className: typographyStyle({
        type: "regular",
        size: "small"
      }),
      children: t
    }),
    image: n,
    "data-testid": `${a}-auth-card`,
    children: o("div", {
      className: gridStyle({
        gap: 32
      }),
      children: [r && o(Message, {
        severity: "default",
        children: r
      }), o(NodeMessages, {
        uiMessages: e.ui.messages
      }), m && o(Fragment, {
        children: [o(Divider, {}), o(UserAuthForm, {
          flow: e,
          "data-testid": `${a}-flow-oidc`,
          children: m
        })]
      }), h && o(Fragment, {
        children: [o(Divider, {}), o(UserAuthForm, {
          flow: e,
          "data-testid": `${a}-flow-code`,
          children: h
        })]
      }), c && !v() && o(Fragment, {
        children: [o(Divider, {}), o(UserAuthForm, {
          flow: e,
          submitOnEnter: !0,
          onSubmit: i,
          "data-testid": `${a}-flow`,
          children: [c, x && o(LoggedInfo, {
            flow: e
          })]
        })]
      }), v() && o(Fragment, {
        children: [o(NodeMessages, {
          nodes: filterNodesByGroups({
            nodes: e.ui.nodes,
            groups: ["password", "webauthn", "totp", "lookup_secret"]
          })
        }), T()]
      }), O() && o(Fragment, {
        children: [o(Divider, {}), o(UserAuthForm, {
          flow: e,
          submitOnEnter: !0,
          onSubmit: i,
          "data-testid": "passwordless-flow",
          formFilterOverride: {
            nodes: e.ui.nodes,
            attributes: "hidden"
          },
          children: f
        })]
      }), y && MessageSection(y)]
    })
  });
}, UserErrorCard = ({
  title: e,
  error: t,
  backUrl: r,
  cardImage: a,
  contactSupportEmail: s,
  className: n
}) => {
  const i = t.error, d = i.code >= 500;
  return o(Card, {
    className: n,
    heading: o("h2", {
      className: typographyStyle({
        type: "regular",
        size: "small"
      }),
      children: e
    }),
    image: a,
    size: "wide",
    children: o("div", {
      className: gridStyle({
        gap: 32,
        direction: "column"
      }),
      "data-testid": "ui/error/message",
      children: [!d && o(Message, {
        severity: "error",
        children: ["An error occurred with the following message: ", i.reason]
      }), o(CodeBox, {
        "data-testid": "code-box",
        toggleText: "Error details",
        children: JSON.stringify(t, null, 2)
      }), s && o(Message, {
        className: colorSprinkle({
          color: "foregroundMuted"
        }),
        children: ["If the problem persists, please contact ", o(ButtonLink, {
          href: `mailto:${s}`,
          children: s
        })]
      }), o(Message, {
        children: o(ButtonLink, {
          href: r,
          children: "Go Back"
        })
      })]
    })
  });
}, UserSettingsCard = ({
  flow: e,
  flowType: t,
  title: r,
  includeScripts: a,
  onSubmit: s,
  className: n
}) => {
  a && useScriptNodes({
    nodes: e.ui.nodes
  });
  let i = !1, l = null, d = "";
  switch (t) {
    case "profile":
      i = !0, d = r || "Profile Settings", l = o(ProfileSettingsSection, {
        flow: e
      });
      break;
    case "password":
      hasPassword(e.ui.nodes) && (i = !0, d = r || "Change Password", l = o(PasswordSettingsSection, {
        flow: e
      }));
      break;
    case "webauthn":
      hasWebauthn(e.ui.nodes) && (i = !0, d = r || "Manage Hardware Tokens", l = o(WebAuthnSettingsSection, {
        flow: e
      }));
      break;
    case "lookupSecret":
      hasLookupSecret(e.ui.nodes) && (i = !0, d = r || "Manage 2FA Backup Recovery Codes", l = o(LookupSecretSettingsSection, {
        flow: e
      }));
      break;
    case "oidc":
      hasOidc(e.ui.nodes) && (i = !0, d = r || "Social Sign In", l = o(OIDCSettingsSection, {
        flow: e
      }));
      break;
    case "totp":
      hasTotp(e.ui.nodes) && (i = !0, d = r || "Manage 2FA TOTP Authenticator App", l = o(TOTPSettingsSection, {
        flow: e
      }));
      break;
    default:
      l = null;
  }
  return i ? o("div", {
    className: gridStyle({
      gap: 32
    }),
    children: [d && o("h3", {
      className: cn(typographyStyle({
        size: "headline26",
        type: "regular"
      }), colorSprinkle({
        color: "foregroundDefault"
      })),
      children: d
    }), o(UserAuthForm, {
      flow: e,
      onSubmit: s,
      className: n,
      "data-testid": `${t}-settings-card`,
      children: l
    })]
  }) : null;
}, UserConsentCard = ({
  csrfToken: e,
  consent: t,
  cardImage: r,
  client_name: a = "Unnamed Client",
  requested_scope: s = [],
  client: n,
  action: i,
  className: l
}) => o(Card, {
  className: l,
  heading: o("div", {
    style: {
      textAlign: "center"
    },
    children: o(Typography, {
      type: "bold",
      children: a
    })
  }),
  image: r,
  children: o("form", {
    action: i,
    method: "post",
    children: [o("input", {
      type: "hidden",
      name: "_csrf",
      value: e
    }), o("input", {
      type: "hidden",
      name: "consent_challenge",
      value: t?.challenge
    }), o("div", {
      className: gridStyle({
        gap: 16
      }),
      children: [o("div", {
        className: gridStyle({
          gap: 4
        }),
        style: {
          marginBottom: 16
        },
        children: o(Typography, {
          children: "The application requests access to the following permissions:"
        })
      }), o("div", {
        className: gridStyle({
          gap: 4
        }),
        children: s.map((d) => o(Checkbox, {
          label: d,
          value: d,
          name: "grant_scope"
        }, d))
      }), o("div", {
        className: gridStyle({
          gap: 4
        }),
        children: o(Typography, {
          size: "xsmall",
          children: "Only grant permissions if you trust this site or app. You do not need to accept all permissions."
        })
      }), o("div", {
        className: gridStyle({
          direction: "row"
        }),
        children: [n?.policy_uri && o("a", {
          href: n.policy_uri,
          target: "_blank",
          rel: "noreferrer",
          children: o(Typography, {
            size: "xsmall",
            children: "Privacy Policy"
          })
        }), n?.tos_uri && o("a", {
          href: n.tos_uri,
          target: "_blank",
          rel: "noreferrer",
          children: o(Typography, {
            size: "xsmall",
            children: "Terms of Service"
          })
        })]
      }), o(Divider, {}), o("div", {
        className: gridStyle({
          gap: 8
        }),
        children: [o(Checkbox, {
          label: "remember my decision",
          id: "remember",
          name: "remember"
        }), o(Typography, {
          size: "xsmall",
          children: "Remember this decision for next time. The application will not be able to ask for additional permissions without your consent."
        })]
      }), o("div", {
        className: gridStyle({
          direction: "row"
        }),
        style: {
          justifyContent: "space-between",
          alignItems: "center"
        },
        children: [o(Button, {
          type: "submit",
          id: "reject",
          name: "consent_action",
          value: "reject",
          variant: "error",
          header: "Deny"
        }), o(Button, {
          type: "submit",
          id: "accept",
          name: "consent_action",
          value: "accept",
          variant: "semibold",
          header: "Allow"
        })]
      })]
    })]
  })
}), UserLogoutCard = ({
  csrfToken: e,
  challenge: t,
  action: r,
  className: a,
  cardImage: s
}) => o(Card, {
  className: a,
  heading: o("div", {
    style: {
      textAlign: "center"
    },
    children: o(Typography, {
      children: "Do you wish to log out?"
    })
  }),
  image: s,
  children: o("form", {
    action: r,
    method: "post",
    children: [o("input", {
      type: "hidden",
      name: "_csrf",
      value: e
    }), o("input", {
      type: "hidden",
      name: "challenge",
      value: t
    }), o("div", {
      className: gridStyle({
        gap: 16
      }),
      children: o("div", {
        className: gridStyle({
          direction: "row"
        }),
        style: {
          justifyContent: "space-between",
          alignItems: "center"
        },
        children: [o(Button, {
          type: "submit",
          id: "reject",
          value: "No",
          name: "submit",
          variant: "error",
          header: "No"
        }), o(Button, {
          type: "submit",
          id: "accept",
          value: "Yes",
          name: "submit",
          variant: "semibold",
          header: "Yes"
        })]
      })
    })]
  })
});
function getVarName(e) {
  var t = e.match(/^var\((.*)\)$/);
  return t ? t[1] : e;
}
function get(e, t) {
  var r = e;
  for (var a of t) {
    if (!(a in r))
      throw new Error("Path ".concat(t.join(" -> "), " does not exist in object"));
    r = r[a];
  }
  return r;
}
function walkObject(e, t) {
  var r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [], a = e.constructor();
  for (var s in e) {
    var n = e[s], i = [...r, s];
    typeof n == "string" || typeof n == "number" || n == null ? a[s] = t(n, i) : typeof n == "object" && !Array.isArray(n) ? a[s] = walkObject(n, t, i) : console.warn('Skipping invalid key "'.concat(i.join("."), '". Should be a string, number, null or object. Received: "').concat(Array.isArray(n) ? "Array" : typeof n, '"'));
  }
  return a;
}
function assignInlineVars(e, t) {
  var r = {};
  if (typeof t == "object") {
    var a = e;
    walkObject(t, (i, l) => {
      var d = get(a, l);
      r[getVarName(d)] = String(i);
    });
  } else {
    var s = e;
    for (var n in s)
      r[getVarName(n)] = s[n];
  }
  return Object.defineProperty(r, "toString", {
    value: function() {
      return Object.keys(this).map((l) => "".concat(l, ":").concat(this[l])).join(";");
    },
    writable: !1
  }), r;
}
const themeProvider_css_ts_vanilla = "";
var themeProviderFontRenderingStyle = "_1d41t8s1", themeProviderStyle = "_1d41t8s0";
const ThemeProvider = ({
  children: e,
  theme: t,
  themeOverrides: r,
  enableFontSmoothing: a
}) => o("div", {
  className: cn(themeProviderStyle, a && themeProviderFontRenderingStyle),
  style: assignInlineVars(oryTheme, {
    ...t === "dark" ? defaultDarkTheme : defaultLightTheme,
    ...r
  }),
  children: e
});
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,
  UserLogoutCard,
  UserSettingsCard,
  WebAuthnSettingsSection,
  buttonLinkContainerStyle,
  buttonLinkIconStyle,
  buttonLinkStyle,
  buttonSocialIconEndStyle,
  buttonSocialIconStartStyle,
  buttonSocialStyle,
  buttonStyle,
  cardStyle,
  cardTitleImage,
  cardTitleStyle,
  checkboxInputStyle,
  checkboxStyle,
  codeboxContentStyle,
  codeboxHeaderStyle,
  codeboxStyle,
  colorProperties,
  colorSprinkle,
  defaultBreakpoints,
  defaultDarkTheme,
  defaultFont,
  defaultLightTheme,
  dividerStyle,
  dividerTextStyle,
  formStyle,
  gridStyle,
  hasCode,
  hasHiddenIdentifier,
  hasLookupSecret,
  hasOidc,
  hasPassword,
  hasTotp,
  hasWebauthn,
  inputFieldStyle,
  inputFieldTitleStyle,
  inputTypographyStyle,
  menuLinkIconLeftStyle,
  menuLinkStyle,
  menuLinkTextStyle,
  messageStyle,
  navMainSectionStyle,
  navMenuLinkSelectedStyle,
  navMenuSectionStyle,
  navSectionBottom,
  navSectionTitleStyle,
  navStyle,
  oryTheme,
  pxToEm,
  pxToRem,
  typographyStyle,
  useScriptNodes
};
