@inf-monkeys-tech/monkeys-design 0.4.35 → 0.4.37

package/dist/index.js

@@ -11743,6 +11743,448 @@ function BaseLoadingState({
     }
   );
 }
+function normalizeValues(values) {
+  const nextValues = [];
+  const seen = /* @__PURE__ */ new Set();
+  values?.forEach((value) => {
+    if (seen.has(value)) return;
+    seen.add(value);
+    nextValues.push(value);
+  });
+  return nextValues;
+}
+function getNextEnabledIndex(options, currentIndex, direction) {
+  if (!options.length) return -1;
+  const startIndex = currentIndex >= 0 ? currentIndex : 0;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const nextIndex = (startIndex + offset * direction + options.length) % options.length;
+    if (!options[nextIndex]?.disabled) {
+      return nextIndex;
+    }
+  }
+  return -1;
+}
+function getFirstEnabledIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+function getSafeTagCount(maxTagCount, total) {
+  if (maxTagCount === void 0) return total;
+  if (!Number.isFinite(maxTagCount)) return total;
+  return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
+}
+function getDefaultRemoveLabel(option) {
+  return `Remove ${option.value}`;
+}
+var BaseMultiSelect = React.forwardRef(
+  function BaseMultiSelect2({
+    options,
+    value,
+    defaultValue,
+    name,
+    placeholder = "Select options",
+    icon,
+    invalid = false,
+    disabled = false,
+    required = false,
+    openForPreview = false,
+    maxTagCount,
+    removeLabel = getDefaultRemoveLabel,
+    emptyLabel = "No options",
+    appearance,
+    className,
+    classNames,
+    style,
+    id,
+    "aria-invalid": nativeAriaInvalid,
+    "aria-label": nativeAriaLabel,
+    "aria-labelledby": nativeAriaLabelledBy,
+    onValueChange,
+    ...rootProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const generatedId = React.useId();
+    const multiSelectId = id ?? generatedId;
+    const controlId = `${multiSelectId}-control`;
+    const listboxId = `${multiSelectId}-listbox`;
+    const rootRef = React.useRef(null);
+    const optionList = options ?? [];
+    const forceOpen = openForPreview;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const open = forceOpen || uncontrolledOpen;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(
+      () => normalizeValues(defaultValue)
+    );
+    const [activeIndex, setActiveIndex] = React.useState(
+      () => getFirstEnabledIndex(optionList)
+    );
+    const isControlled = value !== void 0;
+    const selectedValues = React.useMemo(
+      () => normalizeValues(isControlled ? value : uncontrolledValue),
+      [isControlled, uncontrolledValue, value]
+    );
+    const selectedValueSet = React.useMemo(
+      () => new Set(selectedValues),
+      [selectedValues]
+    );
+    const optionByValue = React.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      optionList.forEach((option) => {
+        if (!map.has(option.value)) {
+          map.set(option.value, option);
+        }
+      });
+      return map;
+    }, [optionList]);
+    const selectedOptions = React.useMemo(
+      () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
+        (option) => option !== void 0
+      ),
+      [optionByValue, selectedValues]
+    );
+    const firstEnabledIndex = React.useMemo(
+      () => getFirstEnabledIndex(optionList),
+      [optionList]
+    );
+    const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : firstEnabledIndex;
+    const visibleTagCount = getSafeTagCount(
+      maxTagCount,
+      selectedOptions.length
+    );
+    const visibleOptions = selectedOptions.slice(0, visibleTagCount);
+    const overflowCount = selectedOptions.length - visibleOptions.length;
+    const isPlaceholder = selectedOptions.length === 0;
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    const setOpen = (nextOpen) => {
+      if (disabled || forceOpen) return;
+      setUncontrolledOpen(nextOpen);
+      if (nextOpen) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    };
+    React.useEffect(() => {
+      if (!open || forceOpen) return void 0;
+      const handlePointerDown = (event) => {
+        if (!rootRef.current?.contains(event.target)) {
+          setUncontrolledOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [forceOpen, open]);
+    React.useEffect(() => {
+      if (resolvedActiveIndex >= 0 && resolvedActiveIndex !== activeIndex) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    }, [activeIndex, resolvedActiveIndex]);
+    const commitValues = (nextValues) => {
+      const normalizedValues = normalizeValues(nextValues);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedValues);
+      }
+      onValueChange?.(normalizedValues);
+    };
+    const toggleOption = (option) => {
+      if (!option || option.disabled || disabled) return;
+      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((selectedValue) => selectedValue !== option.value) : [...selectedValues, option.value];
+      commitValues(nextValues);
+    };
+    const removeOption = (option) => {
+      if (disabled) return;
+      commitValues(
+        selectedValues.filter((selectedValue) => selectedValue !== option.value)
+      );
+    };
+    const focusOption = (direction) => {
+      const nextIndex = getNextEnabledIndex(
+        optionList,
+        resolvedActiveIndex,
+        direction
+      );
+      if (nextIndex >= 0) {
+        setActiveIndex(nextIndex);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(firstEnabledIndex);
+          return;
+        }
+        focusOption(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(firstEnabledIndex);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        setOpen(true);
+        for (let index = optionList.length - 1; index >= 0; index -= 1) {
+          if (!optionList[index]?.disabled) {
+            setActiveIndex(index);
+            break;
+          }
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        toggleOption(optionList[resolvedActiveIndex]);
+        return;
+      }
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...rootProps,
+        id,
+        ref: setRootRef,
+        className: cn(
+          theme.slots.controlWrapper,
+          "overflow-visible",
+          open && "z-50",
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: controlId,
+              role: "combobox",
+              tabIndex: disabled ? -1 : 0,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listboxId,
+              "aria-disabled": disabled || void 0,
+              "aria-required": required || void 0,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              "aria-label": nativeAriaLabel,
+              "aria-labelledby": nativeAriaLabelledBy,
+              className: cn(
+                theme.slots.controlBase,
+                "flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 py-1.5 pr-9 text-left",
+                disabled && "!cursor-not-allowed",
+                classNames?.control
+              ),
+              onClick: () => setOpen(!open),
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+                    classNames?.tagList
+                  ),
+                  children: [
+                    visibleOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/65 px-2 py-0.5 text-xs font-medium text-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "max-w-40 truncate",
+                                classNames?.tagLabel
+                              ),
+                              children: option.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": removeLabel(option),
+                              disabled,
+                              className: cn(
+                                "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed",
+                                classNames?.tagRemove
+                              ),
+                              onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                removeOption(option);
+                              },
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                              },
+                              onKeyDown: (event) => event.stopPropagation(),
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "x" })
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    )),
+                    overflowCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center rounded-full border border-border/70 bg-muted/45 px-2 py-0.5 text-xs font-medium text-muted-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          "+",
+                          overflowCount
+                        ]
+                      }
+                    ) : null,
+                    isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 truncate",
+                          theme.slots.selectPlaceholder,
+                          classNames?.placeholder
+                        ),
+                        children: placeholder
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                theme.slots.selectChevron,
+                open && "rotate-[225deg]",
+                classNames?.chevron
+              )
+            }
+          ),
+          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: selectedValue,
+              className: classNames?.hiddenInput
+            },
+            selectedValue
+          )) : null,
+          open ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-multiselectable": "true",
+              "aria-labelledby": controlId,
+              className: cn(theme.slots.selectMenu, classNames?.menu),
+              style: theme.styles.selectMenu,
+              children: optionList.length > 0 ? optionList.map((option, index) => {
+                const selected = selectedValueSet.has(option.value);
+                const active = index === resolvedActiveIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    disabled: option.disabled,
+                    className: cn(
+                      theme.slots.selectOption,
+                      "gap-2",
+                      active && theme.slots.selectOptionActive,
+                      selected && theme.slots.selectOptionSelected,
+                      option.disabled && theme.slots.selectOptionDisabled,
+                      classNames?.option
+                    ),
+                    style: {
+                      ...theme.styles.selectOption,
+                      ...active ? theme.styles.selectOptionActive : void 0,
+                      ...selected ? theme.styles.selectOptionSelected : void 0
+                    },
+                    onMouseEnter: () => {
+                      if (!option.disabled) {
+                        setActiveIndex(index);
+                      }
+                    },
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => toggleOption(option),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: cn(
+                            "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border/70 text-[10px]",
+                            selected && "border-primary/40 bg-primary text-primary-foreground",
+                            classNames?.optionIndicator
+                          ),
+                          children: selected ? "\u2713" : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "min-w-0 flex-1 truncate",
+                            classNames?.optionLabel
+                          ),
+                          children: option.label
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "px-2.5 py-2 text-sm text-muted-foreground",
+                    classNames?.empty
+                  ),
+                  children: emptyLabel
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 function BaseNotice({
   tone,
   icon,
@@ -12144,7 +12586,7 @@ function getInitialValue2(options, defaultValue) {
   }
   return "";
 }
-function getNextEnabledIndex(options, currentIndex, direction) {
+function getNextEnabledIndex2(options, currentIndex, direction) {
   if (!options.length) return -1;
   for (let offset = 1; offset <= options.length; offset += 1) {
     const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
@@ -12246,7 +12688,7 @@ var BaseSelect = React.forwardRef(
     };
     const focusOption = (direction) => {
       const currentIndex = activeIndex >= 0 ? activeIndex : 0;
-      const nextIndex = getNextEnabledIndex(optionList, currentIndex, direction);
+      const nextIndex = getNextEnabledIndex2(optionList, currentIndex, direction);
       if (nextIndex >= 0) {
         commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
       }
@@ -19931,6 +20373,265 @@ registerTheme(
     version: "1.0.0"
   }
 );
+var LOGIN_LOGO_POSITIONS = ["top", "middle", "bottom"];
+var normalizeCssValue = (value) => {
+  const trimmed = value?.trim();
+  return trimmed || void 0;
+};
+var createBackgroundImage = (gradient, imageUrl) => {
+  const resolvedGradient = normalizeCssValue(gradient);
+  const resolvedImageUrl = normalizeCssValue(imageUrl);
+  return [resolvedGradient, resolvedImageUrl ? `url(${JSON.stringify(resolvedImageUrl)})` : void 0].filter(Boolean).join(", ");
+};
+var normalizeLogoPosition = (position) => position && LOGIN_LOGO_POSITIONS.includes(position) ? position : "bottom";
+var normalizeLogoScale = (scale) => typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : void 0;
+function LoginPage({
+  className,
+  style,
+  background,
+  logo,
+  primaryColor,
+  radius,
+  customCss,
+  toolbar,
+  title,
+  backAction,
+  methods,
+  activeMethodId,
+  defaultMethodId,
+  onMethodChange,
+  externalLabel,
+  externalMethods = [],
+  callout
+}) {
+  const availableMethods = React.useMemo(() => methods.filter((method) => !method.hidden), [methods]);
+  const fallbackMethodId = defaultMethodId ?? availableMethods[0]?.id;
+  const [internalMethodId, setInternalMethodId] = React.useState(fallbackMethodId);
+  const currentMethodId = activeMethodId ?? internalMethodId;
+  const activeMethod = availableMethods.find((method) => method.id === currentMethodId) ?? availableMethods[0];
+  const hasTabs = availableMethods.length > 1;
+  const backgroundImage = createBackgroundImage(background?.gradient, background?.imageUrl);
+  const backgroundMode = backgroundImage ? "custom" : "default";
+  const logoPosition = normalizeLogoPosition(logo?.position);
+  const logoScale = normalizeLogoScale(logo?.scale);
+  React.useEffect(() => {
+    if (!availableMethods.length) {
+      setInternalMethodId(void 0);
+      return;
+    }
+    if (!currentMethodId || !availableMethods.some((method) => method.id === currentMethodId)) {
+      setInternalMethodId(fallbackMethodId ?? availableMethods[0]?.id);
+    }
+  }, [availableMethods, currentMethodId, fallbackMethodId]);
+  const rootStyle = React.useMemo(
+    () => ({
+      ...primaryColor ? { ["--login-page-theme-primary-color"]: primaryColor } : null,
+      ...radius ? { ["--login-page-theme-radius"]: radius } : null,
+      ...style
+    }),
+    [primaryColor, radius, style]
+  );
+  const handleMethodChange = (methodId) => {
+    if (activeMethodId === void 0) {
+      setInternalMethodId(methodId);
+    }
+    onMethodChange?.(methodId);
+  };
+  const renderExternalMethod = (method) => {
+    const button = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "login-page__oauth-button",
+        "data-login-part": "external-button",
+        "data-login-method-id": method.id,
+        onClick: method.onClick,
+        disabled: method.disabled,
+        children: [
+          method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__oauth-icon", "data-login-part": "external-icon", children: method.icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: method.render ? method.render(button) : button }, method.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      className: ["login-page", className].filter(Boolean).join(" "),
+      "data-login-page": true,
+      "data-login-part": "root",
+      "data-login-background": backgroundMode,
+      style: rootStyle,
+      children: [
+        customCss ? /* @__PURE__ */ jsxRuntime.jsx("style", { "data-login-page-custom-css": true, children: customCss }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "login-page__background",
+            "data-login-part": "background",
+            "data-login-background": backgroundMode,
+            style: backgroundImage ? { backgroundImage } : void 0,
+            "aria-hidden": "true"
+          }
+        ),
+        toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__toolbar", "data-login-part": "toolbar", children: toolbar }) : null,
+        logo?.url ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `login-page__logo login-page__logo--${logoPosition}`,
+            "data-login-part": "logo",
+            "data-logo-position": logoPosition,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                className: "login-page__logo-image",
+                "data-login-part": "logo-image",
+                src: logo.url,
+                alt: logo.alt ?? "",
+                style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
+          {
+            className: "login-page__form",
+            "data-login-part": "panel",
+            "aria-label": typeof title === "string" ? title : void 0,
+            children: [
+              backAction ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "login-page__back", "data-login-part": "back", onClick: backAction.onClick, children: [
+                backAction.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__back-icon", "data-login-part": "back-icon", children: backAction.icon }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: backAction.label })
+              ] }) : null,
+              title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "login-page__title", "data-login-part": "title", children: title }) : null,
+              hasTabs ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__tabs", "data-login-part": "tabs", role: "tablist", children: availableMethods.map((method) => {
+                const selected = method.id === activeMethod?.id;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": selected,
+                    className: `login-page__tab ${selected ? "login-page__tab--active" : ""}`,
+                    "data-login-part": "tab",
+                    "data-login-method-id": method.id,
+                    "data-active": selected ? "true" : "false",
+                    onClick: () => handleMethodChange(method.id),
+                    children: [
+                      method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__tab-icon", "data-login-part": "tab-icon", children: method.icon }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
+                    ]
+                  },
+                  method.id
+                );
+              }) }) : null,
+              activeMethod ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "form",
+                {
+                  className: "login-page__form-fields",
+                  "data-login-part": "form",
+                  "data-login-method-id": activeMethod.id,
+                  onSubmit: activeMethod.onSubmit,
+                  children: [
+                    activeMethod.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__field", "data-login-part": "field", "data-login-field-name": field.name, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        id: field.id,
+                        name: field.name,
+                        type: field.type ?? "text",
+                        value: field.value,
+                        placeholder: field.placeholder,
+                        autoComplete: field.autoComplete,
+                        inputMode: field.inputMode,
+                        maxLength: field.maxLength,
+                        pattern: field.pattern,
+                        disabled: activeMethod.disabled || activeMethod.isLoading || field.disabled,
+                        required: field.required,
+                        className: "login-page__input",
+                        "data-login-part": "input",
+                        onChange: (event) => field.onChange(event.target.value)
+                      }
+                    ) }, field.name)),
+                    activeMethod.checkbox ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "login-page__remember", "data-login-part": "checkbox-label", htmlFor: activeMethod.checkbox.id, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          id: activeMethod.checkbox.id,
+                          type: "checkbox",
+                          className: "login-page__checkbox",
+                          "data-login-part": "checkbox",
+                          checked: activeMethod.checkbox.checked,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.checkbox.disabled,
+                          onChange: (event) => activeMethod.checkbox?.onChange(event.target.checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeMethod.checkbox.label })
+                    ] }) : null,
+                    activeMethod.footer || activeMethod.footerAction ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__method-footer", "data-login-part": "method-footer", children: [
+                      activeMethod.footer,
+                      activeMethod.footerAction ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "login-page__method-footer-action",
+                          "data-login-part": "method-footer-action",
+                          "data-login-method-id": activeMethod.id,
+                          onClick: activeMethod.footerAction.onClick,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.footerAction.disabled,
+                          children: activeMethod.footerAction.label
+                        }
+                      ) : null
+                    ] }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "login-page__submit",
+                        "data-login-part": "submit-button",
+                        disabled: activeMethod.disabled || activeMethod.isLoading,
+                        children: activeMethod.isLoading && activeMethod.loadingLabel ? activeMethod.loadingLabel : activeMethod.submitLabel
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              callout ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `login-page__callout login-page__callout--${callout.tone ?? "info"}`,
+                  "data-login-part": "callout",
+                  "data-tone": callout.tone ?? "info",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__callout-title", "data-login-part": "callout-title", children: callout.title }),
+                    callout.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "login-page__callout-description", "data-login-part": "callout-description", children: callout.description }) : null,
+                    callout.detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "login-page__callout-detail", "data-login-part": "callout-detail", children: callout.detail }) : null,
+                    callout.action ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "login-page__callout-action",
+                        "data-login-part": "callout-action",
+                        onClick: callout.action.onClick,
+                        disabled: callout.action.disabled,
+                        children: callout.action.label
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null,
+              externalMethods.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__oauth-section", "data-login-part": "external-methods", children: [
+                externalLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-label", "data-login-part": "external-label", children: externalLabel }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-list", "data-login-part": "external-list", children: externalMethods.map(renderExternalMethod) })
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var containerStyle = {
   display: "flex",
   alignItems: "center",
@@ -24740,6 +25441,7 @@ exports.BaseLayoutPane = BaseLayoutPane;
 exports.BaseLayoutResizeHandle = BaseLayoutResizeHandle;
 exports.BaseLayoutSplit = BaseLayoutSplit;
 exports.BaseLoadingState = BaseLoadingState;
+exports.BaseMultiSelect = BaseMultiSelect;
 exports.BaseNotice = BaseNotice;
 exports.BasePagination = BasePagination;
 exports.BasePanel = BasePanel;
@@ -24808,6 +25510,7 @@ exports.InteractiveTableEditableTextCell = InteractiveTableEditableTextCell;
 exports.InteractiveTableReadonlyCell = InteractiveTableReadonlyCell;
 exports.InteractiveTableSelectCell = InteractiveTableSelectCell;
 exports.LoginLayout = LoginLayout;
+exports.LoginPage = LoginPage;
 exports.MonkeysToastProvider = MonkeysToastProvider;
 exports.MonkeysToaster = MonkeysToaster;
 exports.NavButton = NavButton;