analytica-frontend-lib/dist/Support/index.mjs

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

// src/components/Support/Support.tsx
import { useState as useState5, useEffect as useEffect5 } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  KeyIcon as KeyIcon2,
  InfoIcon as InfoIcon2,
  BugIcon as BugIcon2,
  CaretRightIcon
} from "@phosphor-icons/react";
import dayjs2 from "dayjs";

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

// src/components/Text/Text.tsx
import { jsx } 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__ */ jsx(
    Component,
    {
      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
      ...props,
      children
    }
  );
};
var Text_default = Text;

// src/components/SelectionButton/SelectionButton.tsx
import { forwardRef } from "react";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var SelectionButton = forwardRef(
  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
    const baseClasses = [
      "inline-flex",
      "items-center",
      "justify-start",
      "gap-2",
      "p-4",
      "rounded-xl",
      "cursor-pointer",
      "border",
      "border-border-50",
      "bg-background",
      "text-sm",
      "text-text-700",
      "font-bold",
      "shadow-soft-shadow-1",
      "hover:bg-background-100",
      "focus-visible:outline-none",
      "focus-visible:ring-2",
      "focus-visible:ring-indicator-info",
      "focus-visible:ring-offset-0",
      "focus-visible:shadow-none",
      "active:ring-2",
      "active:ring-primary-950",
      "active:ring-offset-0",
      "active:shadow-none",
      "disabled:opacity-50",
      "disabled:cursor-not-allowed"
    ];
    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
    const allClasses = [...baseClasses, ...stateClasses].join(" ");
    return /* @__PURE__ */ jsxs(
      "button",
      {
        ref,
        type: "button",
        className: cn(allClasses, className),
        disabled,
        "aria-pressed": selected,
        ...props,
        children: [
          /* @__PURE__ */ jsx2("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
          /* @__PURE__ */ jsx2("span", { children: label })
        ]
      }
    );
  }
);
SelectionButton.displayName = "SelectionButton";
var SelectionButton_default = SelectionButton;

// src/components/Input/Input.tsx
import { WarningCircle, Eye, EyeSlash } from "phosphor-react";
import {
  forwardRef as forwardRef2,
  useState,
  useId,
  useMemo
} from "react";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var SIZE_CLASSES = {
  small: "text-sm",
  medium: "text-md",
  large: "text-lg",
  "extra-large": "text-xl"
};
var STATE_CLASSES = {
  default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
  error: "border-2 border-indicator-error placeholder:text-text-600",
  disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
  "read-only": "border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent"
};
var VARIANT_CLASSES = {
  outlined: "border rounded-lg",
  underlined: "border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2",
  rounded: "border rounded-full"
};
var getActualState = (disabled, readOnly, errorMessage, state) => {
  if (disabled) return "disabled";
  if (readOnly) return "read-only";
  if (errorMessage) return "error";
  return state || "default";
};
var getIconSize = (size) => {
  const iconSizeClasses = {
    small: "w-4 h-4",
    medium: "w-5 h-5",
    large: "w-6 h-6",
    "extra-large": "w-7 h-7"
  };
  return iconSizeClasses[size] || iconSizeClasses.medium;
};
var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight) => {
  const isPasswordType = type === "password";
  const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;
  let actualIconRight = iconRight;
  let ariaLabel;
  if (shouldShowPasswordToggle) {
    actualIconRight = showPassword ? /* @__PURE__ */ jsx3(EyeSlash, {}) : /* @__PURE__ */ jsx3(Eye, {});
    ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
  }
  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
};
var getCombinedClasses = (actualState, variant) => {
  const stateClasses = STATE_CLASSES[actualState];
  const variantClasses = VARIANT_CLASSES[variant];
  if (actualState === "error" && variant === "underlined") {
    return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
  }
  if (actualState === "read-only" && variant === "underlined") {
    return "border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default";
  }
  return `${stateClasses} ${variantClasses}`;
};
var Input = forwardRef2(
  ({
    label,
    helperText,
    errorMessage,
    size = "medium",
    variant = "outlined",
    state = "default",
    iconLeft,
    iconRight,
    className = "",
    containerClassName = "",
    disabled,
    readOnly,
    required,
    id,
    type = "text",
    ...props
  }, ref) => {
    const [showPassword, setShowPassword] = useState(false);
    const isPasswordType = type === "password";
    const actualType = isPasswordType && showPassword ? "text" : type;
    const actualState = getActualState(disabled, readOnly, errorMessage, state);
    const sizeClasses = SIZE_CLASSES[size];
    const combinedClasses = useMemo(
      () => getCombinedClasses(actualState, variant),
      [actualState, variant]
    );
    const iconSize = getIconSize(size);
    const baseClasses = `bg-background w-full py-2 ${actualState === "read-only" ? "px-0" : "px-3"} font-normal text-text-900 focus:outline-primary-950`;
    const generatedId = useId();
    const inputId = id ?? `input-${generatedId}`;
    const togglePasswordVisibility = () => setShowPassword(!showPassword);
    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
      type,
      disabled,
      readOnly,
      showPassword,
      iconRight
    );
    return /* @__PURE__ */ jsxs2("div", { className: `${containerClassName}`, children: [
      label && /* @__PURE__ */ jsxs2(
        "label",
        {
          htmlFor: inputId,
          className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
          children: [
            label,
            " ",
            required && /* @__PURE__ */ jsx3("span", { className: "text-indicator-error", children: "*" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
        iconLeft && /* @__PURE__ */ jsx3("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx3(
          "span",
          {
            className: `${iconSize} text-text-400 flex items-center justify-center`,
            children: iconLeft
          }
        ) }),
        /* @__PURE__ */ jsx3(
          "input",
          {
            ref,
            id: inputId,
            type: actualType,
            className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
            disabled,
            readOnly,
            required,
            "aria-invalid": actualState === "error" ? "true" : void 0,
            ...props
          }
        ),
        actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx3(
          "button",
          {
            type: "button",
            className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
            onClick: togglePasswordVisibility,
            "aria-label": ariaLabel,
            children: /* @__PURE__ */ jsx3(
              "span",
              {
                className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
                children: actualIconRight
              }
            )
          }
        ) : /* @__PURE__ */ jsx3("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx3(
          "span",
          {
            className: `${iconSize} text-text-400 flex items-center justify-center`,
            children: actualIconRight
          }
        ) }))
      ] }),
      /* @__PURE__ */ jsxs2("div", { className: "mt-1.5 gap-1.5", children: [
        helperText && /* @__PURE__ */ jsx3("p", { className: "text-sm text-text-500", children: helperText }),
        errorMessage && /* @__PURE__ */ jsxs2("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
          /* @__PURE__ */ jsx3(WarningCircle, { size: 16 }),
          " ",
          errorMessage
        ] })
      ] })
    ] });
  }
);
var Input_default = Input;

// src/components/TextArea/TextArea.tsx
import {
  forwardRef as forwardRef3,
  useState as useState2,
  useId as useId2
} from "react";
import { WarningCircle as WarningCircle2 } from "phosphor-react";
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var SIZE_CLASSES2 = {
  small: {
    textarea: "h-24 text-sm",
    // 96px height, 14px font
    textSize: "sm"
  },
  medium: {
    textarea: "h-24 text-base",
    // 96px height, 16px font
    textSize: "md"
  },
  large: {
    textarea: "h-24 text-lg",
    // 96px height, 18px font
    textSize: "lg"
  },
  extraLarge: {
    textarea: "h-24 text-xl",
    // 96px height, 20px font
    textSize: "xl"
  }
};
var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
var STATE_CLASSES2 = {
  default: {
    base: "border-border-300 bg-background text-text-600",
    hover: "hover:border-border-400",
    focus: "focus:border-border-500"
  },
  hovered: {
    base: "border-border-400 bg-background text-text-600",
    hover: "",
    focus: "focus:border-border-500"
  },
  focused: {
    base: "border-2 border-primary-950 bg-background text-text-900",
    hover: "",
    focus: ""
  },
  invalid: {
    base: "border-2 border-red-700 bg-white text-gray-800",
    hover: "hover:border-red-700",
    focus: "focus:border-red-700"
  },
  disabled: {
    base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
    hover: "",
    focus: ""
  }
};
var TextArea = forwardRef3(
  ({
    label,
    size = "medium",
    state = "default",
    errorMessage,
    helperMessage,
    className = "",
    labelClassName = "",
    disabled,
    id,
    onChange,
    placeholder,
    required,
    showCharacterCount = false,
    maxLength,
    value,
    ...props
  }, ref) => {
    const generatedId = useId2();
    const inputId = id ?? `textarea-${generatedId}`;
    const [isFocused, setIsFocused] = useState2(false);
    const currentLength = typeof value === "string" ? value.length : 0;
    const isNearLimit = maxLength && currentLength >= maxLength * 0.8;
    const handleChange = (event) => {
      onChange?.(event);
    };
    const handleFocus = (event) => {
      setIsFocused(true);
      props.onFocus?.(event);
    };
    const handleBlur = (event) => {
      setIsFocused(false);
      props.onBlur?.(event);
    };
    let currentState = disabled ? "disabled" : state;
    if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
      currentState = "focused";
    }
    const sizeClasses = SIZE_CLASSES2[size];
    const stateClasses = STATE_CLASSES2[currentState];
    const textareaClasses = cn(
      BASE_TEXTAREA_CLASSES,
      sizeClasses.textarea,
      stateClasses.base,
      stateClasses.hover,
      stateClasses.focus,
      className
    );
    return /* @__PURE__ */ jsxs3("div", { className: `flex flex-col`, children: [
      label && /* @__PURE__ */ jsxs3(
        Text_default,
        {
          as: "label",
          htmlFor: inputId,
          size: sizeClasses.textSize,
          weight: "medium",
          color: "text-text-950",
          className: cn("mb-1.5", labelClassName),
          children: [
            label,
            " ",
            required && /* @__PURE__ */ jsx4("span", { className: "text-indicator-error", children: "*" })
          ]
        }
      ),
      /* @__PURE__ */ jsx4(
        "textarea",
        {
          ref,
          id: inputId,
          disabled,
          onChange: handleChange,
          onFocus: handleFocus,
          onBlur: handleBlur,
          className: textareaClasses,
          placeholder,
          required,
          maxLength,
          value,
          ...props
        }
      ),
      errorMessage && /* @__PURE__ */ jsxs3("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
        /* @__PURE__ */ jsx4(WarningCircle2, { size: 16 }),
        " ",
        errorMessage
      ] }),
      !errorMessage && showCharacterCount && maxLength && /* @__PURE__ */ jsxs3(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: `mt-1.5 ${isNearLimit ? "text-indicator-warning" : "text-text-500"}`,
          children: [
            currentLength,
            "/",
            maxLength,
            " caracteres"
          ]
        }
      ),
      !errorMessage && helperMessage && !(showCharacterCount && maxLength) && /* @__PURE__ */ jsx4(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
    ] });
  }
);
TextArea.displayName = "TextArea";
var TextArea_default = TextArea;

// src/components/Button/Button.tsx
import { jsx as jsx5, jsxs as jsxs4 } 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",
    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",
    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",
    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_CLASSES3 = {
  "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 = ({
  children,
  iconLeft,
  iconRight,
  size = "medium",
  variant = "solid",
  action = "primary",
  className = "",
  disabled,
  type = "button",
  ...props
}) => {
  const sizeClasses = SIZE_CLASSES3[size];
  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
  return /* @__PURE__ */ jsxs4(
    "button",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      disabled,
      type,
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx5("span", { className: "mr-2 flex items-center", children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx5("span", { className: "ml-2 flex items-center", children: iconRight })
      ]
    }
  );
};
var Button_default = Button;

// src/components/Select/Select.tsx
import { create, useStore } from "zustand";
import {
  useEffect,
  useRef,
  forwardRef as forwardRef4,
  isValidElement,
  Children,
  cloneElement,
  useId as useId3
} from "react";
import { CaretDown, Check, WarningCircle as WarningCircle3 } from "phosphor-react";
import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
var VARIANT_CLASSES2 = {
  outlined: "border-2 rounded-lg focus:border-primary-950",
  underlined: "border-b-2 focus:border-primary-950",
  rounded: "border-2 rounded-full focus:border-primary-950"
};
var SIZE_CLASSES4 = {
  small: "text-sm",
  medium: "text-md",
  large: "text-lg",
  "extra-large": "text-lg"
};
var HEIGHT_CLASSES = {
  small: "h-8",
  medium: "h-9",
  large: "h-10",
  "extra-large": "h-12"
};
var PADDING_CLASSES = {
  small: "px-2 py-1",
  medium: "px-3 py-2",
  large: "px-4 py-3",
  "extra-large": "px-5 py-4"
};
var SIDE_CLASSES = {
  top: "bottom-full -translate-y-1",
  right: "top-full translate-y-1",
  bottom: "top-full translate-y-1",
  left: "top-full translate-y-1"
};
var ALIGN_CLASSES = {
  start: "left-0",
  center: "left-1/2 -translate-x-1/2",
  end: "right-0"
};
function createSelectStore(onValueChange) {
  return create((set) => ({
    open: false,
    setOpen: (open) => set({ open }),
    value: "",
    setValue: (value) => set({ value }),
    selectedLabel: "",
    setSelectedLabel: (label) => set({ selectedLabel: label }),
    onValueChange
  }));
}
var useSelectStore = (externalStore) => {
  if (!externalStore) {
    throw new Error(
      "Component must be used within a Select (store is missing)"
    );
  }
  return externalStore;
};
function getLabelAsNode(children) {
  if (typeof children === "string" || typeof children === "number") {
    return children;
  }
  const flattened = Children.toArray(children);
  if (flattened.length === 1) return flattened[0];
  return /* @__PURE__ */ jsx6(Fragment, { children: flattened });
}
var injectStore = (children, store, size, selectId) => {
  return Children.map(children, (child) => {
    if (isValidElement(child)) {
      const typedChild = child;
      const newProps = {
        store
      };
      if (typedChild.type === SelectTrigger) {
        newProps.size = size;
        newProps.selectId = selectId;
      }
      if (typedChild.props.children) {
        newProps.children = injectStore(
          typedChild.props.children,
          store,
          size,
          selectId
        );
      }
      return cloneElement(typedChild, newProps);
    }
    return child;
  });
};
var Select = ({
  children,
  defaultValue = "",
  className,
  value: propValue,
  onValueChange,
  size = "small",
  label,
  helperText,
  errorMessage,
  id
}) => {
  const storeRef = useRef(null);
  storeRef.current ??= createSelectStore(onValueChange);
  const store = storeRef.current;
  const selectRef = useRef(null);
  const { open, setOpen, setValue, selectedLabel } = useStore(store, (s) => s);
  const generatedId = useId3();
  const selectId = id ?? `select-${generatedId}`;
  const findLabelForValue = (children2, targetValue) => {
    let found = null;
    const search = (nodes) => {
      Children.forEach(nodes, (child) => {
        if (!isValidElement(child)) return;
        const typedChild = child;
        if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
          if (typeof typedChild.props.children === "string")
            found = typedChild.props.children;
        }
        if (typedChild.props.children && !found)
          search(typedChild.props.children);
      });
    };
    search(children2);
    return found;
  };
  useEffect(() => {
    if (!selectedLabel && defaultValue) {
      const label2 = findLabelForValue(children, defaultValue);
      if (label2) store.setState({ selectedLabel: label2 });
    }
  }, [children, defaultValue, selectedLabel]);
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (selectRef.current && !selectRef.current.contains(event.target)) {
        setOpen(false);
      }
    };
    const handleArrowKeys = (event) => {
      const selectContent = selectRef.current?.querySelector('[role="menu"]');
      if (selectContent) {
        event.preventDefault();
        const items = Array.from(
          selectContent.querySelectorAll(
            '[role="menuitem"]:not([aria-disabled="true"])'
          )
        ).filter((el) => el instanceof HTMLElement);
        const focused = document.activeElement;
        const currentIndex = items.findIndex((item) => item === focused);
        let nextIndex = 0;
        if (event.key === "ArrowDown") {
          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
        } else {
          nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
        }
        items[nextIndex]?.focus();
      }
    };
    if (open) {
      document.addEventListener("mousedown", handleClickOutside);
      document.addEventListener("keydown", handleArrowKeys);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("keydown", handleArrowKeys);
    };
  }, [open]);
  useEffect(() => {
    if (propValue) {
      setValue(propValue);
      const label2 = findLabelForValue(children, propValue);
      if (label2) store.setState({ selectedLabel: label2 });
    }
  }, [propValue]);
  const sizeClasses = SIZE_CLASSES4[size];
  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full", className), children: [
    label && /* @__PURE__ */ jsx6(
      "label",
      {
        htmlFor: selectId,
        className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
        children: label
      }
    ),
    /* @__PURE__ */ jsx6("div", { className: cn("relative w-full"), ref: selectRef, children: injectStore(children, store, size, selectId) }),
    (helperText || errorMessage) && /* @__PURE__ */ jsxs5("div", { className: "mt-1.5 gap-1.5", children: [
      helperText && /* @__PURE__ */ jsx6("p", { className: "text-sm text-text-500", children: helperText }),
      errorMessage && /* @__PURE__ */ jsxs5("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
        /* @__PURE__ */ jsx6(WarningCircle3, { size: 16 }),
        " ",
        errorMessage
      ] })
    ] })
  ] });
};
var SelectValue = ({
  placeholder,
  store: externalStore
}) => {
  const store = useSelectStore(externalStore);
  const selectedLabel = useStore(store, (s) => s.selectedLabel);
  const value = useStore(store, (s) => s.value);
  return /* @__PURE__ */ jsx6("span", { className: "text-inherit flex gap-2 items-center", children: selectedLabel || placeholder || value });
};
var SelectTrigger = forwardRef4(
  ({
    className,
    invalid = false,
    variant = "outlined",
    store: externalStore,
    disabled,
    size = "medium",
    selectId,
    ...props
  }, ref) => {
    const store = useSelectStore(externalStore);
    const open = useStore(store, (s) => s.open);
    const toggleOpen = () => store.setState({ open: !open });
    const variantClasses = VARIANT_CLASSES2[variant];
    const heightClasses = HEIGHT_CLASSES[size];
    const paddingClasses = PADDING_CLASSES[size];
    return /* @__PURE__ */ jsxs5(
      "button",
      {
        ref,
        id: selectId,
        className: cn(
          "flex w-full items-center justify-between border-border-300",
          heightClasses,
          paddingClasses,
          invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`,
          disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
          !invalid && !disabled ? "text-text-700" : "",
          variantClasses,
          className
        ),
        onClick: toggleOpen,
        "aria-expanded": open,
        "aria-haspopup": "listbox",
        "aria-controls": open ? "select-content" : void 0,
        ...props,
        children: [
          props.children,
          /* @__PURE__ */ jsx6(
            CaretDown,
            {
              className: cn(
                "h-[1em] w-[1em] opacity-50 transition-transform",
                open ? "rotate-180" : ""
              )
            }
          )
        ]
      }
    );
  }
);
SelectTrigger.displayName = "SelectTrigger";
var SelectContent = forwardRef4(
  ({
    children,
    className,
    align = "start",
    side = "bottom",
    store: externalStore,
    ...props
  }, ref) => {
    const store = useSelectStore(externalStore);
    const open = useStore(store, (s) => s.open);
    if (!open) return null;
    const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;
    return /* @__PURE__ */ jsx6(
      "div",
      {
        role: "menu",
        ref,
        className: cn(
          "bg-secondary z-50 min-w-[210px] max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md border-border-100",
          getPositionClasses(),
          className
        ),
        ...props,
        children
      }
    );
  }
);
SelectContent.displayName = "SelectContent";
var SelectItem = forwardRef4(
  ({
    className,
    children,
    value,
    disabled = false,
    store: externalStore,
    ...props
  }, ref) => {
    const store = useSelectStore(externalStore);
    const {
      value: selectedValue,
      setValue,
      setOpen,
      setSelectedLabel,
      onValueChange
    } = useStore(store, (s) => s);
    const handleClick = (e) => {
      const labelNode = getLabelAsNode(children);
      if (!disabled) {
        setValue(value);
        setSelectedLabel(labelNode);
        setOpen(false);
        onValueChange?.(value);
      }
      props.onClick?.(e);
    };
    return /* @__PURE__ */ jsxs5(
      "div",
      {
        role: "menuitem",
        "aria-disabled": disabled,
        ref,
        className: `
          bg-secondary focus-visible:bg-background-50
          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
          ${className}
          ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
          ${selectedValue === value && "bg-background-50"}
        `,
        onClick: handleClick,
        onKeyDown: (e) => {
          if (e.key === "Enter" || e.key === " ") handleClick(e);
        },
        tabIndex: disabled ? -1 : 0,
        ...props,
        children: [
          /* @__PURE__ */ jsx6("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx6(Check, { className: "" }) }),
          children
        ]
      }
    );
  }
);
SelectItem.displayName = "SelectItem";
var Select_default = Select;

// src/components/Badge/Badge.tsx
import { Bell } from "phosphor-react";
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES2 = {
  solid: {
    error: "bg-error-background text-error-700 focus-visible:outline-none",
    warning: "bg-warning text-warning-800 focus-visible:outline-none",
    success: "bg-success text-success-800 focus-visible:outline-none",
    info: "bg-info text-info-800 focus-visible:outline-none",
    muted: "bg-background-muted text-background-800 focus-visible:outline-none"
  },
  outlined: {
    error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
    warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
    success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
    info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
    muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
  },
  exams: {
    exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
  },
  examsOutlined: {
    exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
    exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
    exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
    exam4: "bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none"
  },
  resultStatus: {
    negative: "bg-error text-error-800 focus-visible:outline-none",
    positive: "bg-success text-success-800 focus-visible:outline-none"
  },
  notification: "text-primary"
};
var SIZE_CLASSES5 = {
  small: "text-2xs px-2 py-1",
  medium: "text-xs px-2 py-1",
  large: "text-sm px-2 py-1"
};
var SIZE_CLASSES_ICON = {
  small: "size-3",
  medium: "size-3.5",
  large: "size-4"
};
var Badge = ({
  children,
  iconLeft,
  iconRight,
  size = "medium",
  variant = "solid",
  action = "error",
  className = "",
  notificationActive = false,
  ...props
}) => {
  const sizeClasses = SIZE_CLASSES5[size];
  const sizeClassesIcon = SIZE_CLASSES_ICON[size];
  const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
  const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
  const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
  const baseClassesIcon = "flex items-center";
  if (variant === "notification") {
    return /* @__PURE__ */ jsxs6(
      "div",
      {
        className: cn(baseClasses, variantClasses, sizeClasses, className),
        ...props,
        children: [
          /* @__PURE__ */ jsx7(Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
          notificationActive && /* @__PURE__ */ jsx7(
            "span",
            {
              "data-testid": "notification-dot",
              className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
            }
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ jsxs6(
    "div",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx7("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx7("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
      ]
    }
  );
};
var Badge_default = Badge;

// src/components/Skeleton/Skeleton.tsx
import { forwardRef as forwardRef5 } from "react";
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
var SKELETON_ANIMATION_CLASSES = {
  pulse: "animate-pulse",
  none: ""
};
var SKELETON_VARIANT_CLASSES = {
  text: "h-4 bg-background-200 rounded",
  circular: "bg-background-200 rounded-full",
  rectangular: "bg-background-200",
  rounded: "bg-background-200 rounded-lg"
};
var SPACING_CLASSES = {
  none: "",
  small: "space-y-1",
  medium: "space-y-2",
  large: "space-y-3"
};
var Skeleton = forwardRef5(
  ({
    variant = "text",
    width,
    height,
    animation = "pulse",
    lines = 1,
    spacing = "none",
    className = "",
    children,
    ...props
  }, ref) => {
    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
    const variantClass = SKELETON_VARIANT_CLASSES[variant];
    const spacingClass = SPACING_CLASSES[spacing];
    const style = {
      width: typeof width === "number" ? `${width}px` : width,
      height: typeof height === "number" ? `${height}px` : height
    };
    if (variant === "text" && lines > 1) {
      return /* @__PURE__ */ jsx8(
        "div",
        {
          ref,
          className: cn("flex flex-col", spacingClass, className),
          ...props,
          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx8(
            "div",
            {
              className: cn(variantClass, animationClass),
              style: index === lines - 1 ? { width: "60%" } : void 0
            },
            index
          ))
        }
      );
    }
    return /* @__PURE__ */ jsx8(
      "div",
      {
        ref,
        className: cn(variantClass, animationClass, className),
        style,
        ...props,
        children
      }
    );
  }
);
var SkeletonText = forwardRef5(
  (props, ref) => /* @__PURE__ */ jsx8(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = forwardRef5((props, ref) => /* @__PURE__ */ jsx8(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = forwardRef5((props, ref) => /* @__PURE__ */ jsx8(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = forwardRef5((props, ref) => /* @__PURE__ */ jsx8(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = forwardRef5(
  ({
    showAvatar = true,
    showTitle = true,
    showDescription = true,
    showActions = true,
    lines = 2,
    className = "",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsxs7(
      "div",
      {
        ref,
        className: cn(
          "w-full p-4 bg-background border border-border-200 rounded-lg",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsxs7("div", { className: "flex items-start space-x-3", children: [
            showAvatar && /* @__PURE__ */ jsx8(SkeletonCircle, { width: 40, height: 40 }),
            /* @__PURE__ */ jsxs7("div", { className: "flex-1 space-y-2", children: [
              showTitle && /* @__PURE__ */ jsx8(SkeletonText, { width: "60%", height: 20 }),
              showDescription && /* @__PURE__ */ jsx8(SkeletonText, { lines, spacing: "small" })
            ] })
          ] }),
          showActions && /* @__PURE__ */ jsxs7("div", { className: "flex justify-end space-x-2 mt-4", children: [
            /* @__PURE__ */ jsx8(SkeletonRectangle, { width: 80, height: 32 }),
            /* @__PURE__ */ jsx8(SkeletonRectangle, { width: 80, height: 32 })
          ] })
        ]
      }
    );
  }
);
var SkeletonList = forwardRef5(
  ({
    items = 3,
    showAvatar = true,
    showTitle = true,
    showDescription = true,
    lines = 1,
    className = "",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx8("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs7("div", { className: "flex items-start space-x-3 p-3", children: [
      showAvatar && /* @__PURE__ */ jsx8(SkeletonCircle, { width: 32, height: 32 }),
      /* @__PURE__ */ jsxs7("div", { className: "flex-1 space-y-2", children: [
        showTitle && /* @__PURE__ */ jsx8(SkeletonText, { width: "40%", height: 16 }),
        showDescription && /* @__PURE__ */ jsx8(SkeletonText, { lines, spacing: "small" })
      ] })
    ] }, index)) });
  }
);
var SkeletonTable = forwardRef5(
  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
    return /* @__PURE__ */ jsxs7("div", { ref, className: cn("w-full", className), ...props, children: [
      showHeader && /* @__PURE__ */ jsx8("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx8(
        SkeletonText,
        {
          width: `${100 / columns}%`,
          height: 20
        },
        index
      )) }),
      /* @__PURE__ */ jsx8("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx8("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx8(
        SkeletonText,
        {
          width: `${100 / columns}%`,
          height: 16
        },
        colIndex
      )) }, rowIndex)) })
    ] });
  }
);

// src/components/Toast/Toast.tsx
import { CheckCircle, WarningCircle as WarningCircle4, Info, X } from "phosphor-react";
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES3 = {
  solid: {
    warning: "bg-warning text-warning-600 border-none focus-visible:outline-none",
    success: "bg-success text-success-800 border-none focus-visible:outline-none",
    info: "bg-info text-info-600 border-none focus-visible:outline-none"
  },
  outlined: {
    warning: "bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none",
    success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
    info: "bg-info text-info-600 border border-info-600 focus-visible:outline-none"
  }
};
var iconMap = {
  success: CheckCircle,
  info: Info,
  warning: WarningCircle4
};
var Toast = ({
  variant = "outlined",
  action = "success",
  className = "",
  onClose,
  title,
  description,
  position = "default",
  ...props
}) => {
  const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
  const positionClasses = {
    "top-left": "fixed top-4 left-4",
    "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
    "top-right": "fixed top-4 right-4",
    "bottom-left": "fixed bottom-4 left-4",
    "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
    "bottom-right": "fixed bottom-4 right-4",
    default: ""
  };
  const IconAction = iconMap[action] || iconMap["success"];
  const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
  return /* @__PURE__ */ jsxs8(
    "div",
    {
      role: "alert",
      "aria-live": "assertive",
      "aria-atomic": "true",
      className: cn(
        baseClasses,
        positionClasses[position],
        variantClasses,
        className
      ),
      ...props,
      children: [
        /* @__PURE__ */ jsxs8("div", { className: "flex flex-row items-start gap-3", children: [
          /* @__PURE__ */ jsx9("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx9(IconAction, {}) }),
          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start justify-start", children: [
            /* @__PURE__ */ jsx9("p", { className: "font-semibold text-md", children: title }),
            description && /* @__PURE__ */ jsx9("p", { className: "text-md text-text-900", children: description })
          ] })
        ] }),
        /* @__PURE__ */ jsx9(
          "button",
          {
            onClick: onClose,
            "aria-label": "Dismiss notification",
            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
            children: /* @__PURE__ */ jsx9(X, {})
          }
        )
      ]
    }
  );
};
var Toast_default = Toast;

// src/components/Menu/Menu.tsx
import { create as create2, useStore as useStore2 } from "zustand";
import {
  useEffect as useEffect2,
  useRef as useRef2,
  forwardRef as forwardRef6,
  isValidElement as isValidElement2,
  Children as Children2,
  cloneElement as cloneElement2,
  useState as useState3
} from "react";
import { CaretLeft, CaretRight } from "phosphor-react";
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
var createMenuStore = (onValueChange) => create2((set) => ({
  value: "",
  setValue: (value) => {
    set({ value });
    onValueChange?.(value);
  },
  onValueChange
}));
var useMenuStore = (externalStore) => {
  if (!externalStore) throw new Error("MenuItem must be inside Menu");
  return externalStore;
};
var VARIANT_CLASSES3 = {
  menu: "bg-background shadow-soft-shadow-1 px-6",
  menu2: "",
  "menu-overflow": "",
  breadcrumb: "bg-transparent shadow-none !px-0"
};
var Menu = forwardRef6(
  ({
    className,
    children,
    defaultValue,
    value: propValue,
    variant = "menu",
    onValueChange,
    ...props
  }, ref) => {
    const storeRef = useRef2(null);
    storeRef.current ??= createMenuStore(onValueChange);
    const store = storeRef.current;
    const { setValue } = useStore2(store, (s) => s);
    useEffect2(() => {
      setValue(propValue ?? defaultValue);
    }, [defaultValue, propValue, setValue]);
    const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
    const variantClasses = VARIANT_CLASSES3[variant];
    return /* @__PURE__ */ jsx10(
      "div",
      {
        ref,
        className: `
          ${baseClasses}
          ${variantClasses}
          ${className ?? ""}
        `,
        ...props,
        children: injectStore2(children, store)
      }
    );
  }
);
Menu.displayName = "Menu";
var MenuContent = forwardRef6(
  ({ className, children, variant = "menu", ...props }, ref) => {
    const baseClasses = "w-full flex flex-row items-center gap-2";
    const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
    return /* @__PURE__ */ jsx10(
      "ul",
      {
        ref,
        className: `
          ${baseClasses}
          ${variantClasses}
          ${variant == "breadcrumb" ? "flex-wrap" : ""}
          ${className ?? ""}
        `,
        style: variant === "menu2" || variant === "menu-overflow" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
        ...props,
        children
      }
    );
  }
);
MenuContent.displayName = "MenuContent";
var MenuItem = forwardRef6(
  ({
    className,
    children,
    value,
    disabled = false,
    store: externalStore,
    variant = "menu",
    separator = false,
    ...props
  }, ref) => {
    const store = useMenuStore(externalStore);
    const { value: selectedValue, setValue } = useStore2(store, (s) => s);
    const handleClick = (e) => {
      if (!disabled) {
        setValue(value);
      }
      props.onClick?.(e);
    };
    const commonProps = {
      role: "menuitem",
      "aria-disabled": disabled,
      ref,
      onClick: handleClick,
      onKeyDown: (e) => {
        if (["Enter", " "].includes(e.key)) handleClick(e);
      },
      tabIndex: disabled ? -1 : 0,
      onMouseDown: (e) => {
        e.preventDefault();
      },
      ...props
    };
    const variants = {
      menu: /* @__PURE__ */ jsx10(
        "li",
        {
          "data-variant": "menu",
          className: `
            w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
            focus:outline-none focus:border-indicator-info focus:border-2
            ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
            ${className ?? ""}
          `,
          ...commonProps,
          children
        }
      ),
      menu2: /* @__PURE__ */ jsxs9(
        "li",
        {
          "data-variant": "menu2",
          className: `
            w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
            focus:outline-none focus:border-indicator-info focus:border-2
            ${selectedValue === value ? "" : "pb-4"}
          `,
          ...commonProps,
          children: [
            /* @__PURE__ */ jsx10(
              "span",
              {
                className: cn(
                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
                  className
                ),
                children
              }
            ),
            selectedValue === value && /* @__PURE__ */ jsx10("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
          ]
        }
      ),
      "menu-overflow": /* @__PURE__ */ jsxs9(
        "li",
        {
          "data-variant": "menu-overflow",
          className: `
            w-fit flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
            focus:outline-none focus:border-indicator-info focus:border-2
            ${selectedValue === value ? "" : "pb-4"}
          `,
          ...commonProps,
          children: [
            /* @__PURE__ */ jsx10(
              "span",
              {
                className: cn(
                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
                  className
                ),
                children
              }
            ),
            selectedValue === value && /* @__PURE__ */ jsx10("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
          ]
        }
      ),
      breadcrumb: /* @__PURE__ */ jsxs9(
        "li",
        {
          "data-variant": "breadcrumb",
          className: `
            flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
            focus:outline-none focus:border-indicator-info focus:border-2
            ${selectedValue === value ? "text-text-950" : "text-text-600"}
            ${className ?? ""}
          `,
          ...commonProps,
          children: [
            /* @__PURE__ */ jsx10(
              "span",
              {
                className: cn(
                  "border-b border-text-600 hover:border-primary-600 text-inherit text-xs",
                  selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"
                ),
                children
              }
            ),
            separator && /* @__PURE__ */ jsx10(
              CaretRight,
              {
                size: 16,
                className: "text-text-600",
                "data-testid": "separator"
              }
            )
          ]
        }
      )
    };
    return variants[variant] ?? variants["menu"];
  }
);
MenuItem.displayName = "MenuItem";
var injectStore2 = (children, store) => Children2.map(children, (child) => {
  if (!isValidElement2(child)) return child;
  const typedChild = child;
  const shouldInject = typedChild.type === MenuItem;
  return cloneElement2(typedChild, {
    ...shouldInject ? { store } : {},
    ...typedChild.props.children ? { children: injectStore2(typedChild.props.children, store) } : {}
  });
});
var Menu_default = Menu;

// src/components/Support/schema/index.ts
import { z } from "zod";
var sup