// src/components/Modal/Modal.tsx
import { useEffect, useId } from "react";
import { X } from "phosphor-react";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/Button/Button.tsx
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES = {
  solid: {
    primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
    secondary: "bg-text-950 text-text border border-text-800 hover:bg-text-800 hover:border-text-950 focus-visible:outline-none focus-visible:bg-text-900 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-text-700 active:border-text-700 disabled:bg-text-500 disabled:border-text-500 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
  },
  outline: {
    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
    secondary: "bg-transparent text-text-950 border border-text-800 hover:bg-background-50 hover:text-text-700 hover:border-text-700 focus-visible:border-0 focus-visible:outline-none focus-visible:text-text-900 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-text-700 active:border-text-700 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
  },
  link: {
    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
    secondary: "bg-transparent text-text-950 hover:text-text-800 focus-visible:outline-none focus-visible:text-text-900 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-text-700 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
  }
};
var SIZE_CLASSES = {
  "extra-small": "text-xs px-3.5 py-2",
  small: "text-sm px-4 py-2.5",
  medium: "text-md px-5 py-2.5",
  large: "text-lg px-6 py-3",
  "extra-large": "text-lg px-7 py-3.5"
};
var Button = forwardRef(
  ({
    children,
    iconLeft,
    iconRight,
    size = "medium",
    variant = "solid",
    action = "primary",
    className = "",
    disabled,
    type = "button",
    ...props
  }, ref) => {
    if (variant === "raw") {
      return /* @__PURE__ */ jsxs(
        "button",
        {
          ref,
          className,
          disabled,
          type,
          ...props,
          children: [
            iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
            children,
            iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
          ]
        }
      );
    }
    const sizeClasses = SIZE_CLASSES[size];
    const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
    const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
    return /* @__PURE__ */ jsxs(
      "button",
      {
        ref,
        className: cn(baseClasses, variantClasses, sizeClasses, className),
        disabled,
        type,
        ...props,
        children: [
          iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
          children,
          iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
        ]
      }
    );
  }
);
Button.displayName = "Button";
var Button_default = Button;

// src/components/Modal/utils/videoUtils.ts
var isYouTubeUrl = (url) => {
  const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
  return youtubeRegex.test(url);
};
var isValidYouTubeHost = (host) => {
  if (host === "youtu.be") return "youtu.be";
  const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
  if (isValidYouTubeCom) return "youtube";
  const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
  if (isValidNoCookie) return "nocookie";
  return null;
};
var extractYoutuBeId = (pathname) => {
  const firstSeg = pathname.split("/").filter(Boolean)[0];
  return firstSeg || null;
};
var extractYouTubeId = (pathname, searchParams) => {
  const parts = pathname.split("/").filter(Boolean);
  const [first, second] = parts;
  if (first === "embed" && second) return second;
  if (first === "shorts" && second) return second;
  if (first === "live" && second) return second;
  const v = searchParams.get("v");
  if (v) return v;
  return null;
};
var getYouTubeVideoId = (url) => {
  try {
    const u = new URL(url);
    const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
    if (!hostType) return null;
    if (hostType === "youtu.be") {
      return extractYoutuBeId(u.pathname);
    }
    return extractYouTubeId(u.pathname, u.searchParams);
  } catch {
    return null;
  }
};
var getYouTubeEmbedUrl = (videoId) => {
  return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
};

// src/components/Modal/Modal.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var SIZE_CLASSES2 = {
  xs: "max-w-[360px]",
  sm: "max-w-[420px]",
  md: "max-w-[510px]",
  lg: "max-w-[640px]",
  xl: "max-w-[970px]"
};
var Modal = ({
  isOpen,
  onClose,
  title,
  children,
  size = "md",
  className = "",
  closeOnEscape = true,
  footer,
  hideCloseButton = false,
  variant = "default",
  description,
  image,
  imageAlt,
  actionLink,
  actionLabel,
  contentClassName = ""
}) => {
  const titleId = useId();
  useEffect(() => {
    if (!isOpen || !closeOnEscape) return;
    const handleEscape = (event) => {
      if (event.key === "Escape") {
        onClose();
      }
    };
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, closeOnEscape, onClose]);
  useEffect(() => {
    if (!isOpen) return;
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    const originalOverflow = document.body.style.overflow;
    const originalPaddingRight = document.body.style.paddingRight;
    document.body.style.overflow = "hidden";
    if (scrollbarWidth > 0) {
      document.body.style.paddingRight = `${scrollbarWidth}px`;
      const overlay = document.createElement("div");
      overlay.id = "modal-scrollbar-overlay";
      overlay.style.cssText = `
        position: fixed;
        top: 0;
        right: 0;
        width: ${scrollbarWidth}px;
        height: 100vh;
        background-color: rgb(0 0 0 / 0.6);
        z-index: 40;
        pointer-events: none;
      `;
      document.body.appendChild(overlay);
    }
    return () => {
      document.body.style.overflow = originalOverflow;
      document.body.style.paddingRight = originalPaddingRight;
      const overlay = document.getElementById("modal-scrollbar-overlay");
      if (overlay) {
        overlay.remove();
      }
    };
  }, [isOpen]);
  if (!isOpen) return null;
  const sizeClasses = SIZE_CLASSES2[size];
  const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4 max-h-[calc(100dvh-2rem)] flex flex-col overflow-hidden";
  const dialogResetClasses = "p-0 m-0 border-none outline-none static";
  const modalClasses = cn(
    baseClasses,
    sizeClasses,
    dialogResetClasses,
    className
  );
  const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
  const handleActionClick = () => {
    if (actionLink) {
      window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
    }
  };
  if (variant === "activity") {
    return /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ jsxs2(
      "dialog",
      {
        className: modalClasses,
        "aria-labelledby": titleId,
        "aria-modal": "true",
        open: true,
        children: [
          /* @__PURE__ */ jsx2("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ jsx2(
            "button",
            {
              onClick: onClose,
              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
              "aria-label": "Fechar modal",
              children: /* @__PURE__ */ jsx2(X, { size: 18 })
            }
          ) }),
          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center px-6 pb-6 gap-5 flex-1 min-h-0 overflow-y-auto", children: [
            image && /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(
              "img",
              {
                src: image,
                alt: imageAlt ?? "",
                className: "w-[122px] h-[122px] object-contain"
              }
            ) }),
            /* @__PURE__ */ jsx2(
              "h2",
              {
                id: titleId,
                className: "text-lg font-semibold text-text-950 text-center",
                children: title
              }
            ),
            description && /* @__PURE__ */ jsx2("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
            actionLink && /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
              (() => {
                const normalized = normalizeUrl(actionLink);
                const isYT = isYouTubeUrl(normalized);
                if (!isYT) return null;
                const id = getYouTubeVideoId(normalized);
                if (!id) {
                  return /* @__PURE__ */ jsx2(
                    Button_default,
                    {
                      variant: "solid",
                      action: "primary",
                      size: "large",
                      className: "w-full",
                      onClick: handleActionClick,
                      children: actionLabel || "Iniciar Atividade"
                    }
                  );
                }
                return /* @__PURE__ */ jsx2(
                  "iframe",
                  {
                    src: getYouTubeEmbedUrl(id),
                    className: "w-full aspect-video rounded-lg",
                    allowFullScreen: true,
                    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                    title: "V\xEDdeo YouTube"
                  }
                );
              })(),
              !isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ jsx2(
                Button_default,
                {
                  variant: "solid",
                  action: "primary",
                  size: "large",
                  className: "w-full",
                  onClick: handleActionClick,
                  children: actionLabel || "Iniciar Atividade"
                }
              )
            ] })
          ] })
        ]
      }
    ) });
  }
  return /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ jsxs2(
    "dialog",
    {
      className: modalClasses,
      "aria-labelledby": titleId,
      "aria-modal": "true",
      open: true,
      children: [
        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-6", children: [
          /* @__PURE__ */ jsx2("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
          !hideCloseButton && /* @__PURE__ */ jsx2(
            "button",
            {
              onClick: onClose,
              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
              "aria-label": "Fechar modal",
              children: /* @__PURE__ */ jsx2(X, { size: 18 })
            }
          )
        ] }),
        children && /* @__PURE__ */ jsx2(
          "div",
          {
            className: cn(
              "px-6 pb-6 flex-1 min-h-0 overflow-y-auto",
              contentClassName
            ),
            children: /* @__PURE__ */ jsx2(
              "div",
              {
                className: cn(
                  "text-text-500 font-normal text-sm leading-6",
                  contentClassName?.includes("flex") && "flex flex-col flex-1 min-h-0"
                ),
                children
              }
            )
          }
        ),
        footer && /* @__PURE__ */ jsx2("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
      ]
    }
  ) });
};
var Modal_default = Modal;

// src/components/Text/Text.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var Text = ({
  children,
  size = "md",
  weight = "normal",
  color = "text-text-950",
  as,
  className = "",
  ...props
}) => {
  let sizeClasses;
  let weightClasses;
  const sizeClassMap = {
    "2xs": "text-2xs",
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg",
    xl: "text-xl",
    "2xl": "text-2xl",
    "3xl": "text-3xl",
    "4xl": "text-4xl",
    "5xl": "text-5xl",
    "6xl": "text-6xl"
  };
  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
  const weightClassMap = {
    hairline: "font-hairline",
    light: "font-light",
    normal: "font-normal",
    medium: "font-medium",
    semibold: "font-semibold",
    bold: "font-bold",
    extrabold: "font-extrabold",
    black: "font-black"
  };
  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
  const baseClasses = "font-primary";
  const Component = as ?? "p";
  return /* @__PURE__ */ jsx3(
    Component,
    {
      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
      ...props,
      children
    }
  );
};
var Text_default = Text;

// src/components/ProgressBar/ProgressBar.tsx
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var SIZE_CLASSES3 = {
  small: {
    container: "h-1",
    // 4px height (h-1 = 4px in Tailwind)
    bar: "h-1",
    // 4px height for the fill bar
    spacing: "gap-2",
    // 8px gap between label and progress bar
    layout: "flex-col",
    // vertical layout for small
    borderRadius: "rounded-full"
    // 9999px border radius
  },
  medium: {
    container: "h-2",
    // 8px height (h-2 = 8px in Tailwind)
    bar: "h-2",
    // 8px height for the fill bar
    spacing: "gap-2",
    // 8px gap between progress bar and label
    layout: "flex-row items-center",
    // horizontal layout for medium
    borderRadius: "rounded-lg"
    // 8px border radius
  }
};
var VARIANT_CLASSES = {
  blue: {
    background: "bg-background-300",
    // Background track color (#D5D4D4)
    fill: "bg-primary-700"
    // Blue for activity progress (#2271C4)
  },
  green: {
    background: "bg-background-300",
    // Background track color (#D5D4D4)
    fill: "bg-success-200"
    // Green for performance (#84D3A2)
  }
};
var calculateProgressValues = (value, max) => {
  const safeValue = isNaN(value) ? 0 : value;
  const clampedValue = Math.max(0, Math.min(safeValue, max));
  const percentage = max === 0 ? 0 : clampedValue / max * 100;
  return { clampedValue, percentage };
};
var shouldShowHeader = (label, showPercentage, showHitCount) => {
  return !!(label || showPercentage || showHitCount);
};
var getDisplayPriority = (showHitCount, showPercentage, label, clampedValue, max, percentage) => {
  if (showHitCount) {
    return {
      type: "hitCount",
      content: `${Math.round(clampedValue)} de ${max}`,
      hasMetrics: true
    };
  }
  if (showPercentage) {
    return {
      type: "percentage",
      content: `${Math.round(percentage)}%`,
      hasMetrics: true
    };
  }
  return {
    type: "label",
    content: label,
    hasMetrics: false
  };
};
var getCompactLayoutConfig = ({
  showPercentage,
  showHitCount,
  percentage,
  clampedValue,
  max,
  label,
  percentageClassName,
  labelClassName
}) => {
  const displayPriority = getDisplayPriority(
    showHitCount,
    showPercentage,
    label,
    clampedValue,
    max,
    percentage
  );
  return {
    color: displayPriority.hasMetrics ? "text-primary-600" : "text-primary-700",
    className: displayPriority.hasMetrics ? percentageClassName : labelClassName,
    content: displayPriority.content
  };
};
var getDefaultLayoutDisplayConfig = (size, label, showPercentage) => ({
  showHeader: size === "small" && !!(label || showPercentage),
  showPercentage: size === "medium" && showPercentage,
  showLabel: size === "medium" && !!label && !showPercentage
  // Only show label when percentage is not shown
});
var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue, max, percentage, percentageClassName) => {
  if (!showHitCount && !showPercentage) return null;
  const displayPriority = getDisplayPriority(
    showHitCount,
    showPercentage,
    null,
    // label is not relevant for stacked layout metrics display
    clampedValue,
    max,
    percentage
  );
  return /* @__PURE__ */ jsx4(
    "div",
    {
      className: cn(
        "text-xs font-medium leading-[14px] text-right",
        percentageClassName
      ),
      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
        /* @__PURE__ */ jsx4("span", { className: "text-success-200", children: Math.round(clampedValue) }),
        /* @__PURE__ */ jsxs3("span", { className: "text-text-600", children: [
          " de ",
          max
        ] })
      ] }) : /* @__PURE__ */ jsxs3(Text_default, { size: "xs", weight: "medium", className: "text-success-200", children: [
        Math.round(percentage),
        "%"
      ] })
    }
  );
};
var ProgressBarBase = ({
  clampedValue,
  max,
  percentage,
  label,
  variantClasses,
  containerClassName,
  fillClassName
}) => /* @__PURE__ */ jsxs3(
  "div",
  {
    className: cn(
      containerClassName,
      variantClasses.background,
      "overflow-hidden relative"
    ),
    children: [
      /* @__PURE__ */ jsx4(
        "progress",
        {
          value: clampedValue,
          max,
          "aria-label": typeof label === "string" ? `${label}: ${Math.round(percentage)}% complete` : `Progress: ${Math.round(percentage)}% of ${max}`,
          className: "absolute inset-0 w-full h-full opacity-0"
        }
      ),
      /* @__PURE__ */ jsx4(
        "div",
        {
          className: cn(
            fillClassName,
            variantClasses.fill,
            "transition-all duration-300 ease-out"
          ),
          style: { width: `${percentage}%` }
        }
      )
    ]
  }
);
var StackedLayout = ({
  className,
  label,
  showPercentage,
  showHitCount,
  labelClassName,
  percentageClassName,
  clampedValue,
  max,
  percentage,
  variantClasses,
  dimensions
}) => /* @__PURE__ */ jsxs3(
  "div",
  {
    className: cn(
      "flex flex-col items-start gap-2",
      dimensions.width,
      dimensions.height,
      className
    ),
    children: [
      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
        label && /* @__PURE__ */ jsx4(
          Text_default,
          {
            as: "div",
            size: "md",
            weight: "medium",
            className: cn("text-text-600 leading-[19px]", labelClassName),
            children: label
          }
        ),
        renderStackedHitCountDisplay(
          showHitCount,
          showPercentage,
          clampedValue,
          max,
          percentage,
          percentageClassName
        )
      ] }),
      /* @__PURE__ */ jsx4(
        ProgressBarBase,
        {
          clampedValue,
          max,
          percentage,
          label,
          variantClasses,
          containerClassName: "w-full h-2 rounded-lg",
          fillClassName: "h-2 rounded-lg shadow-hard-shadow-3"
        }
      )
    ]
  }
);
var CompactLayout = ({
  className,
  label,
  showPercentage,
  showHitCount,
  labelClassName,
  percentageClassName,
  clampedValue,
  max,
  percentage,
  variantClasses,
  dimensions
}) => {
  const {
    color,
    className: compactClassName,
    content
  } = getCompactLayoutConfig({
    showPercentage,
    showHitCount,
    percentage,
    clampedValue,
    max,
    label,
    percentageClassName,
    labelClassName
  });
  return /* @__PURE__ */ jsxs3(
    "div",
    {
      className: cn(
        "flex flex-col items-start gap-1",
        dimensions.width,
        dimensions.height,
        className
      ),
      children: [
        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsx4(
          Text_default,
          {
            as: "div",
            size: "sm",
            weight: "medium",
            color,
            className: cn("leading-4 w-full", compactClassName),
            children: content
          }
        ),
        /* @__PURE__ */ jsx4(
          ProgressBarBase,
          {
            clampedValue,
            max,
            percentage,
            label,
            variantClasses,
            containerClassName: "w-full h-1 rounded-full",
            fillClassName: "h-1 rounded-full"
          }
        )
      ]
    }
  );
};
var DefaultLayout = ({
  className,
  size,
  sizeClasses,
  variantClasses,
  label,
  showPercentage,
  labelClassName,
  percentageClassName,
  clampedValue,
  max,
  percentage
}) => {
  const gapClass = size === "medium" ? "gap-2" : sizeClasses.spacing;
  const progressBarClass = size === "medium" ? "flex-grow" : "w-full";
  const displayConfig = getDefaultLayoutDisplayConfig(
    size,
    label,
    showPercentage
  );
  return /* @__PURE__ */ jsxs3("div", { className: cn("flex", sizeClasses.layout, gapClass, className), children: [
    displayConfig.showHeader && /* @__PURE__ */ jsxs3("div", { className: "flex flex-row items-center justify-between w-full", children: [
      label && /* @__PURE__ */ jsx4(
        Text_default,
        {
          as: "div",
          size: "xs",
          weight: "medium",
          className: cn(
            "text-text-950 leading-none tracking-normal text-center",
            labelClassName
          ),
          children: label
        }
      ),
      showPercentage && /* @__PURE__ */ jsxs3(
        Text_default,
        {
          size: "xs",
          weight: "medium",
          className: cn(
            "text-text-950 leading-none tracking-normal text-center",
            percentageClassName
          ),
          children: [
            Math.round(percentage),
            "%"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsx4(
      ProgressBarBase,
      {
        clampedValue,
        max,
        percentage,
        label,
        variantClasses,
        containerClassName: cn(
          progressBarClass,
          sizeClasses.container,
          sizeClasses.borderRadius
        ),
        fillClassName: cn(
          sizeClasses.bar,
          sizeClasses.borderRadius,
          "shadow-hard-shadow-3"
        )
      }
    ),
    displayConfig.showPercentage && /* @__PURE__ */ jsxs3(
      Text_default,
      {
        size: "xs",
        weight: "medium",
        className: cn(
          "text-text-950 leading-none tracking-normal text-center flex-none",
          percentageClassName
        ),
        children: [
          Math.round(percentage),
          "%"
        ]
      }
    ),
    displayConfig.showLabel && /* @__PURE__ */ jsx4(
      Text_default,
      {
        as: "div",
        size: "xs",
        weight: "medium",
        className: cn(
          "text-text-950 leading-none tracking-normal text-center flex-none",
          labelClassName
        ),
        children: label
      }
    )
  ] });
};
var ProgressBar = ({
  value,
  max = 100,
  size = "medium",
  variant = "blue",
  layout = "default",
  label,
  showPercentage = false,
  showHitCount = false,
  className = "",
  labelClassName = "",
  percentageClassName = "",
  stackedWidth,
  stackedHeight,
  compactWidth,
  compactHeight
}) => {
  const { clampedValue, percentage } = calculateProgressValues(value, max);
  const sizeClasses = SIZE_CLASSES3[size];
  const variantClasses = VARIANT_CLASSES[variant];
  if (layout === "stacked") {
    return /* @__PURE__ */ jsx4(
      StackedLayout,
      {
        className,
        label,
        showPercentage,
        showHitCount,
        labelClassName,
        percentageClassName,
        clampedValue,
        max,
        percentage,
        variantClasses,
        dimensions: {
          width: stackedWidth ?? "w-[380px]",
          height: stackedHeight ?? "h-[35px]"
        }
      }
    );
  }
  if (layout === "compact") {
    return /* @__PURE__ */ jsx4(
      CompactLayout,
      {
        className,
        label,
        showPercentage,
        showHitCount,
        labelClassName,
        percentageClassName,
        clampedValue,
        max,
        percentage,
        variantClasses,
        dimensions: {
          width: compactWidth ?? "w-[131px]",
          height: compactHeight ?? "h-[24px]"
        }
      }
    );
  }
  return /* @__PURE__ */ jsx4(
    DefaultLayout,
    {
      className,
      size,
      sizeClasses,
      variantClasses,
      label,
      showPercentage,
      labelClassName,
      percentageClassName,
      clampedValue,
      max,
      percentage
    }
  );
};
var ProgressBar_default = ProgressBar;

// src/components/ProgressModal/ProgressModal.tsx
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
var ProgressModal = ({
  isOpen,
  onClose,
  message,
  image,
  imageAlt,
  accessibleName,
  progress,
  size = "sm"
}) => {
  const isIndeterminate = progress === void 0;
  const resolvedAccessibleName = typeof message === "string" ? message : accessibleName ?? "Carregando";
  const resolvedAlt = imageAlt ?? resolvedAccessibleName;
  return /* @__PURE__ */ jsx5(
    Modal_default,
    {
      isOpen,
      onClose,
      title: /* @__PURE__ */ jsx5("span", { className: "sr-only", children: resolvedAccessibleName }),
      size,
      children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-6 py-2", children: [
        image && /* @__PURE__ */ jsx5(
          "img",
          {
            src: image,
            alt: resolvedAlt,
            className: "w-60 h-60 object-contain"
          }
        ),
        /* @__PURE__ */ jsx5(Text_default, { size: "md", className: "text-text-950 text-center", children: message }),
        /* @__PURE__ */ jsx5("div", { className: isIndeterminate ? "w-full animate-pulse" : "w-full", children: /* @__PURE__ */ jsx5(
          ProgressBar_default,
          {
            value: progress ?? 60,
            size: "medium",
            variant: "blue",
            showPercentage: !isIndeterminate
          }
        ) })
      ] })
    }
  );
};
var ProgressModal_default = ProgressModal;
export {
  ProgressModal_default as default
};
//# sourceMappingURL=index.mjs.map