;
{
  try {
    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "6979d460-0552-4d5f-8378-1a6fa1873889", e._sentryDebugIdIdentifier = "sentry-dbid-6979d460-0552-4d5f-8378-1a6fa1873889");
  } catch (e) {
  }
}
;
import { jsx } from "preact/jsx-runtime";
import cx from "classnames";
import { u as useTranslation, z as Typography } from "./StoreProvider-CqQrndhS.js";
const range = (stop, start = 0, step = 1) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
const progressBar = "adyen-kyc-progress-bar";
const progressBarThick = "adyen-kyc-progress-bar-thick";
const progressStep = "adyen-kyc-progress-step";
const progressStepActive = "adyen-kyc-progress-step-active";
const progressBarCircles = "adyen-kyc-progress-bar-circles";
const styles = {
  progressBar,
  progressBarThick,
  progressStep,
  progressStepActive,
  progressBarCircles
};
const shouldHighlight = (active, current, fillBefore) => !fillBefore ? active === current : active >= current;
const StepProgressIndicator = ({
  activeStepIndex,
  stepsCount,
  fillBefore,
  thick,
  circles
}) => {
  const { t } = useTranslation("ui");
  if (stepsCount === 0 || stepsCount > 10) {
    return /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t(($) => $["XOfYSteps"], {
      currentStep: activeStepIndex,
      totalSteps: stepsCount
    }) });
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      "aria-label": t(($) => $["stepXofY"], { currentStep: activeStepIndex, totalSteps: stepsCount }),
      className: styles.progress,
      role: "group",
      children: /* @__PURE__ */ jsx(
        "ol",
        {
          className: cx(styles.progressBar, {
            [styles.progressBarThick]: thick,
            [styles.progressBarCircles]: circles
          }),
          children: range(stepsCount).map((stepNumber) => {
            const isHighlighted = shouldHighlight(activeStepIndex, stepNumber, fillBefore);
            return /* @__PURE__ */ jsx(
              "li",
              {
                "aria-current": isHighlighted ? "step" : void 0,
                className: cx(styles.progressStep, {
                  [styles.progressStepActive]: isHighlighted
                }),
                children: /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: t(($) => $["stepNumberStatus"], {
                  stepNumber,
                  status: t(($) => $[stepNumber < activeStepIndex ? "completed" : "notCompleted"])
                }) })
              },
              stepNumber
            );
          })
        }
      )
    }
  );
};
export {
  StepProgressIndicator as S
};
