analytica-frontend-lib/dist/index.mjs

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

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

// src/utils/dropdown.ts
var syncDropdownState = (open, isActive, setActiveStates, key) => {
  if (!open && isActive) {
    setActiveStates((prev) => ({ ...prev, [key]: false }));
  }
};

// src/utils/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function getSubjectColorWithOpacity(hexColor, isDark) {
  if (!hexColor) return void 0;
  let color = hexColor.replace(/^#/, "").toLowerCase();
  if (isDark) {
    if (color.length === 8) {
      color = color.slice(0, 6);
    }
    return `#${color}`;
  } else {
    let resultColor;
    if (color.length === 6) {
      resultColor = `#${color}b3`;
    } else if (color.length === 8) {
      resultColor = `#${color}`;
    } else {
      resultColor = `#${color}`;
    }
    return resultColor;
  }
}

// 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/Button/Button.tsx
import { jsx as jsx2, 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",
    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_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 = ({
  children,
  iconLeft,
  iconRight,
  size = "medium",
  variant = "solid",
  action = "primary",
  className = "",
  disabled,
  type = "button",
  ...props
}) => {
  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",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      disabled,
      type,
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx2("span", { className: "mr-2 flex items-center", children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx2("span", { className: "ml-2 flex items-center", children: iconRight })
      ]
    }
  );
};
var Button_default = Button;

// src/components/Badge/Badge.tsx
import { Bell } from "phosphor-react";
import { jsx as jsx3, jsxs as jsxs2 } 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_CLASSES2 = {
  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_CLASSES2[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__ */ jsxs2(
      "div",
      {
        className: cn(baseClasses, variantClasses, sizeClasses, className),
        ...props,
        children: [
          /* @__PURE__ */ jsx3(Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
          notificationActive && /* @__PURE__ */ jsx3(
            "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__ */ jsxs2(
    "div",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx3("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx3("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
      ]
    }
  );
};
var Badge_default = Badge;

// src/components/Alert/Alert.tsx
import { CheckCircle, Info, WarningCircle, XCircle } from "phosphor-react";
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES3 = {
  solid: {
    default: "bg-background-50 border-transparent",
    info: "bg-info border-transparent",
    success: "bg-success border-transparent",
    warning: "bg-warning border-transparent",
    error: "bg-error border-transparent"
  },
  outline: {
    default: "bg-background border border-border-100",
    info: "bg-background border border-border-100",
    success: "bg-background border border-border-100",
    warning: "bg-background border border-border-100",
    error: "bg-background border border-border-100"
  }
};
var COLOR_CLASSES = {
  default: "text-text-950",
  info: "text-info-800",
  success: "text-success-800",
  warning: "text-warning-800",
  error: "text-error-800"
};
var ICONS = {
  default: /* @__PURE__ */ jsx4(CheckCircle, { size: 18 }),
  info: /* @__PURE__ */ jsx4(Info, { size: 18 }),
  success: /* @__PURE__ */ jsx4(CheckCircle, { size: 18 }),
  warning: /* @__PURE__ */ jsx4(WarningCircle, { size: 18 }),
  error: /* @__PURE__ */ jsx4(XCircle, { size: 18 })
};
var Alert = ({
  variant = "solid",
  title,
  description,
  action = "default",
  className,
  ...props
}) => {
  const baseClasses = "alert-wrapper flex items-start gap-2 w-[384px] py-3 px-4 font-inherit rounded-md";
  const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
  const variantColor = COLOR_CLASSES[action];
  const variantIcon = ICONS[action];
  const hasHeading = Boolean(title);
  return /* @__PURE__ */ jsxs3("div", { className: cn(baseClasses, variantClasses, className), ...props, children: [
    /* @__PURE__ */ jsx4("span", { className: cn("mt-0.5", variantColor), children: variantIcon }),
    /* @__PURE__ */ jsxs3("div", { children: [
      hasHeading && /* @__PURE__ */ jsx4(
        Text_default,
        {
          size: "md",
          weight: "medium",
          color: variantColor,
          className: "mb-0.5",
          children: title
        }
      ),
      /* @__PURE__ */ jsx4(
        Text_default,
        {
          size: hasHeading ? "sm" : "md",
          weight: "normal",
          color: !hasHeading ? variantColor : "text-text-700",
          children: description
        }
      )
    ] })
  ] });
};
var Alert_default = Alert;

// src/components/IconButton/IconButton.tsx
import { forwardRef } from "react";
import { jsx as jsx5 } from "react/jsx-runtime";
var IconButton = forwardRef(
  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
    const baseClasses = [
      "inline-flex",
      "items-center",
      "justify-center",
      "rounded-lg",
      "font-medium",
      "bg-transparent",
      "text-text-950",
      "cursor-pointer",
      "hover:bg-primary-600",
      "hover:text-text",
      "focus-visible:outline-none",
      "focus-visible:ring-2",
      "focus-visible:ring-offset-0",
      "focus-visible:ring-indicator-info",
      "disabled:opacity-50",
      "disabled:cursor-not-allowed",
      "disabled:pointer-events-none"
    ];
    const sizeClasses = {
      sm: ["w-6", "h-6", "text-sm"],
      md: ["w-10", "h-10", "text-base"]
    };
    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
    const allClasses = [
      ...baseClasses,
      ...sizeClasses[size],
      ...activeClasses
    ].join(" ");
    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
    return /* @__PURE__ */ jsx5(
      "button",
      {
        ref,
        type: "button",
        className: cn(allClasses, className),
        disabled,
        "aria-pressed": active,
        "aria-label": ariaLabel,
        ...props,
        children: /* @__PURE__ */ jsx5("span", { className: "flex items-center justify-center", children: icon })
      }
    );
  }
);
IconButton.displayName = "IconButton";
var IconButton_default = IconButton;

// src/components/IconRoundedButton/IconRoundedButton.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
var IconRoundedButton = ({
  icon,
  className = "",
  disabled,
  ...props
}) => {
  const baseClasses = [
    "inline-flex",
    "items-center",
    "justify-center",
    "w-8",
    "h-8",
    "rounded-full",
    "cursor-pointer",
    "border",
    "border-background-200",
    "bg-background",
    "text-text-950",
    "hover:shadow-hard-shadow-1",
    "focus-visible:outline-none",
    "focus-visible:shadow-hard-shadow-1",
    "focus-visible:ring-2",
    "focus-visible:ring-indicator-info",
    "focus-visible:ring-offset-0",
    "disabled:opacity-50",
    "disabled:cursor-not-allowed"
  ].join(" ");
  return /* @__PURE__ */ jsx6(
    "button",
    {
      type: "button",
      className: cn(baseClasses, className),
      disabled,
      ...props,
      children: /* @__PURE__ */ jsx6("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
    }
  );
};
var IconRoundedButton_default = IconRoundedButton;

// src/components/NavButton/NavButton.tsx
import { forwardRef as forwardRef2 } from "react";
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
var NavButton = forwardRef2(
  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
    const baseClasses = [
      "flex",
      "flex-col",
      "items-center",
      "justify-center",
      "gap-0.5",
      "px-12",
      "py-1",
      "rounded-sm",
      "cursor-pointer",
      "text-text-950",
      "text-xs",
      "font-medium",
      "hover:text-text",
      "hover:bg-primary-600",
      "focus-visible:outline-none",
      "focus-visible:ring-2",
      "focus-visible:ring-offset-0",
      "focus-visible:ring-indicator-info",
      "disabled:opacity-50",
      "disabled:cursor-not-allowed",
      "disabled:pointer-events-none"
    ];
    const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
    const allClasses = [...baseClasses, ...stateClasses].join(" ");
    return /* @__PURE__ */ jsxs4(
      "button",
      {
        ref,
        type: "button",
        className: cn(allClasses, className),
        disabled,
        "aria-pressed": selected,
        ...props,
        children: [
          /* @__PURE__ */ jsx7("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
          /* @__PURE__ */ jsx7("span", { className: "whitespace-nowrap", children: label })
        ]
      }
    );
  }
);
NavButton.displayName = "NavButton";
var NavButton_default = NavButton;

// src/components/SelectionButton/SelectionButton.tsx
import { forwardRef as forwardRef3 } from "react";
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
var SelectionButton = forwardRef3(
  ({ 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__ */ jsxs5(
      "button",
      {
        ref,
        type: "button",
        className: cn(allClasses, className),
        disabled,
        "aria-pressed": selected,
        ...props,
        children: [
          /* @__PURE__ */ jsx8("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
          /* @__PURE__ */ jsx8("span", { children: label })
        ]
      }
    );
  }
);
SelectionButton.displayName = "SelectionButton";
var SelectionButton_default = SelectionButton;

// src/components/Table/Table.tsx
import { forwardRef as forwardRef4 } from "react";
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var Table = forwardRef4(
  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx9("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs6(
    "table",
    {
      ref,
      className: cn("w-full caption-bottom text-sm", className),
      ...props,
      children: [
        /* @__PURE__ */ jsx9("caption", { className: "sr-only", children: "My Table" }),
        children
      ]
    }
  ) })
);
Table.displayName = "Table";
var TableHeader = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
  "thead",
  {
    ref,
    className: cn("[&_tr:first-child]:border-0", className),
    ...props
  }
));
TableHeader.displayName = "TableHeader";
var TableBody = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
  "tbody",
  {
    ref,
    className: cn(
      "[&_tr:last-child]:border-0 border-t border-border-200",
      className
    ),
    ...props
  }
));
TableBody.displayName = "TableBody";
var TableFooter = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
  "tfoot",
  {
    ref,
    className: cn(
      "border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5",
      className
    ),
    ...props
  }
));
TableFooter.displayName = "TableFooter";
var VARIANT_STATES_ROW = {
  default: "border-b border-border-200",
  selected: "border-b-2 border-indicator-primary",
  invalid: "border-b-2 border-indicator-error",
  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
};
var TableRow = forwardRef4(
  ({ state = "default", className, ...props }, ref) => {
    return /* @__PURE__ */ jsx9(
      "tr",
      {
        ref,
        className: cn(
          "transition-colors",
          state !== "disabled" ? "hover:bg-muted/50" : "",
          VARIANT_STATES_ROW[state],
          className
        ),
        "aria-disabled": state === "disabled",
        ...props
      }
    );
  }
);
TableRow.displayName = "TableRow";
var TableHead = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
  "th",
  {
    ref,
    className: cn(
      "h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
      className
    ),
    ...props
  }
));
TableHead.displayName = "TableHead";
var TableCell = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
  "td",
  {
    ref,
    className: cn(
      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5",
      className
    ),
    ...props
  }
));
TableCell.displayName = "TableCell";
var TableCaption = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
  "caption",
  {
    ref,
    className: cn(
      "border-t border-border-200 text-sm text-text-800 px-6 py-3.5",
      className
    ),
    ...props
  }
));
TableCaption.displayName = "TableCaption";
var Table_default = Table;

// src/components/CheckBox/CheckBox.tsx
import {
  forwardRef as forwardRef5,
  useState,
  useId
} from "react";
import { Check, Minus } from "phosphor-react";
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
var SIZE_CLASSES3 = {
  small: {
    checkbox: "w-4 h-4",
    // 16px x 16px
    textSize: "sm",
    spacing: "gap-1.5",
    // 6px
    borderWidth: "border-2",
    iconSize: 14,
    // pixels for Phosphor icons
    labelHeight: "h-[21px]"
  },
  medium: {
    checkbox: "w-5 h-5",
    // 20px x 20px
    textSize: "md",
    spacing: "gap-2",
    // 8px
    borderWidth: "border-2",
    iconSize: 16,
    // pixels for Phosphor icons
    labelHeight: "h-6"
  },
  large: {
    checkbox: "w-6 h-6",
    // 24px x 24px
    textSize: "lg",
    spacing: "gap-2",
    // 8px
    borderWidth: "border-[3px]",
    // 3px border
    iconSize: 20,
    // pixels for Phosphor icons
    labelHeight: "h-[27px]"
  }
};
var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES = {
  default: {
    unchecked: "border-border-400 bg-background hover:border-border-500",
    checked: "border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
  },
  hovered: {
    unchecked: "border-border-500 bg-background",
    checked: "border-primary-800 bg-primary-800 text-text"
  },
  focused: {
    unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
    checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
  },
  invalid: {
    unchecked: "border-error-700 bg-background hover:border-error-600",
    checked: "border-error-700 bg-primary-950 text-text"
  },
  disabled: {
    unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
    checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
  }
};
var CheckBox = forwardRef5(
  ({
    label,
    size = "medium",
    state = "default",
    indeterminate = false,
    errorMessage,
    helperText,
    className = "",
    labelClassName = "",
    checked: checkedProp,
    disabled,
    id,
    onChange,
    ...props
  }, ref) => {
    const generatedId = useId();
    const inputId = id ?? `checkbox-${generatedId}`;
    const [internalChecked, setInternalChecked] = useState(false);
    const isControlled = checkedProp !== void 0;
    const checked = isControlled ? checkedProp : internalChecked;
    const handleChange = (event) => {
      if (!isControlled) {
        setInternalChecked(event.target.checked);
      }
      onChange?.(event);
    };
    const currentState = disabled ? "disabled" : state;
    const sizeClasses = SIZE_CLASSES3[size];
    const checkVariant = checked || indeterminate ? "checked" : "unchecked";
    const stylingClasses = STATE_CLASSES[currentState][checkVariant];
    const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
    const checkboxClasses = cn(
      BASE_CHECKBOX_CLASSES,
      sizeClasses.checkbox,
      borderWidthClass,
      stylingClasses,
      className
    );
    const renderIcon = () => {
      if (indeterminate) {
        return /* @__PURE__ */ jsx10(
          Minus,
          {
            size: sizeClasses.iconSize,
            weight: "bold",
            color: "currentColor"
          }
        );
      }
      if (checked) {
        return /* @__PURE__ */ jsx10(
          Check,
          {
            size: sizeClasses.iconSize,
            weight: "bold",
            color: "currentColor"
          }
        );
      }
      return null;
    };
    return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
      /* @__PURE__ */ jsxs7(
        "div",
        {
          className: cn(
            "flex flex-row items-center",
            sizeClasses.spacing,
            disabled ? "opacity-40" : ""
          ),
          children: [
            /* @__PURE__ */ jsx10(
              "input",
              {
                ref,
                type: "checkbox",
                id: inputId,
                checked,
                disabled,
                onChange: handleChange,
                className: "sr-only",
                ...props
              }
            ),
            /* @__PURE__ */ jsx10("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
            label && /* @__PURE__ */ jsx10(
              "div",
              {
                className: cn(
                  "flex flex-row items-center",
                  sizeClasses.labelHeight
                ),
                children: /* @__PURE__ */ jsx10(
                  Text_default,
                  {
                    as: "label",
                    htmlFor: inputId,
                    size: sizeClasses.textSize,
                    weight: "normal",
                    className: cn(
                      "cursor-pointer select-none leading-[150%] flex items-center font-roboto",
                      labelClassName
                    ),
                    children: label
                  }
                )
              }
            )
          ]
        }
      ),
      errorMessage && /* @__PURE__ */ jsx10(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5",
          color: "text-error-600",
          children: errorMessage
        }
      ),
      helperText && !errorMessage && /* @__PURE__ */ jsx10(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5",
          color: "text-text-500",
          children: helperText
        }
      )
    ] });
  }
);
CheckBox.displayName = "CheckBox";
var CheckBox_default = CheckBox;

// src/components/CheckBox/CheckboxList.tsx
import {
  forwardRef as forwardRef6,
  useId as useId2,
  useEffect,
  useRef,
  Children,
  cloneElement,
  isValidElement
} from "react";
import { create, useStore } from "zustand";
import { jsx as jsx11 } from "react/jsx-runtime";
var createCheckboxListStore = (name, defaultValues, disabled, onValuesChange) => create((set, get) => ({
  values: defaultValues,
  setValues: (values) => {
    if (!get().disabled) {
      set({ values });
      get().onValuesChange?.(values);
    }
  },
  toggleValue: (value) => {
    if (!get().disabled) {
      const currentValues = get().values;
      const newValues = currentValues.includes(value) ? currentValues.filter((v) => v !== value) : [...currentValues, value];
      set({ values: newValues });
      get().onValuesChange?.(newValues);
    }
  },
  onValuesChange,
  disabled,
  name
}));
var useCheckboxListStore = (externalStore) => {
  if (!externalStore) {
    throw new Error("CheckboxListItem must be used within a CheckboxList");
  }
  return externalStore;
};
var injectStore = (children, store) => Children.map(children, (child) => {
  if (!isValidElement(child)) return child;
  const typedChild = child;
  const shouldInject = typedChild.type === CheckboxListItem;
  return cloneElement(typedChild, {
    ...shouldInject ? { store } : {},
    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
  });
});
var CheckboxList = forwardRef6(
  ({
    values: propValues,
    defaultValues = [],
    onValuesChange,
    name: propName,
    disabled = false,
    className = "",
    children,
    ...props
  }, ref) => {
    const generatedId = useId2();
    const name = propName || `checkbox-list-${generatedId}`;
    const storeRef = useRef(null);
    storeRef.current ??= createCheckboxListStore(
      name,
      defaultValues,
      disabled,
      onValuesChange
    );
    const store = storeRef.current;
    const { setValues } = useStore(store, (s) => s);
    useEffect(() => {
      const currentValues = store.getState().values;
      if (currentValues.length > 0 && onValuesChange) {
        onValuesChange(currentValues);
      }
    }, []);
    useEffect(() => {
      if (propValues !== void 0) {
        setValues(propValues);
      }
    }, [propValues, setValues]);
    useEffect(() => {
      store.setState({ disabled });
    }, [disabled, store]);
    return /* @__PURE__ */ jsx11(
      "div",
      {
        ref,
        className: cn("flex flex-col gap-2 w-full", className),
        "aria-label": name,
        ...props,
        children: injectStore(children, store)
      }
    );
  }
);
CheckboxList.displayName = "CheckboxList";
var CheckboxListItem = forwardRef6(
  ({
    value,
    store: externalStore,
    disabled: itemDisabled,
    size = "medium",
    state = "default",
    className = "",
    id,
    ...props
  }, ref) => {
    const store = useCheckboxListStore(externalStore);
    const {
      values: groupValues,
      toggleValue,
      disabled: groupDisabled,
      name
    } = useStore(store);
    const generatedId = useId2();
    const inputId = id ?? `checkbox-item-${generatedId}`;
    const isChecked = groupValues.includes(value);
    const isDisabled = groupDisabled || itemDisabled;
    const currentState = isDisabled ? "disabled" : state;
    return /* @__PURE__ */ jsx11(
      CheckBox_default,
      {
        ref,
        id: inputId,
        name,
        value,
        checked: isChecked,
        disabled: isDisabled,
        size,
        state: currentState,
        className,
        onChange: () => {
          if (!isDisabled) {
            toggleValue(value);
          }
        },
        ...props
      }
    );
  }
);
CheckboxListItem.displayName = "CheckboxListItem";
var CheckboxList_default = CheckboxList;

// src/components/Radio/Radio.tsx
import {
  forwardRef as forwardRef7,
  useState as useState2,
  useId as useId3,
  useEffect as useEffect2,
  useRef as useRef2,
  Children as Children2,
  cloneElement as cloneElement2,
  isValidElement as isValidElement2
} from "react";
import { create as create2, useStore as useStore2 } from "zustand";
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
var SIZE_CLASSES4 = {
  small: {
    radio: "w-5 h-5",
    textSize: "sm",
    spacing: "gap-1.5",
    borderWidth: "border-2",
    dotSize: "w-2.5 h-2.5",
    labelHeight: "h-5"
  },
  medium: {
    radio: "w-6 h-6",
    textSize: "md",
    spacing: "gap-2",
    borderWidth: "border-2",
    dotSize: "w-3 h-3",
    labelHeight: "h-6"
  },
  large: {
    radio: "w-7 h-7",
    textSize: "lg",
    spacing: "gap-2",
    borderWidth: "border-2",
    dotSize: "w-3.5 h-3.5",
    labelHeight: "h-7"
  },
  extraLarge: {
    radio: "w-8 h-8",
    textSize: "xl",
    spacing: "gap-3",
    borderWidth: "border-2",
    dotSize: "w-4 h-4",
    labelHeight: "h-8"
  }
};
var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES2 = {
  default: {
    unchecked: "border-border-400 bg-background hover:border-border-500",
    checked: "border-primary-950 bg-background hover:border-primary-800"
  },
  hovered: {
    unchecked: "border-border-500 bg-background",
    checked: "border-info-700 bg-background"
  },
  focused: {
    unchecked: "border-border-400 bg-background",
    checked: "border-primary-950 bg-background"
  },
  invalid: {
    unchecked: "border-border-400 bg-background",
    checked: "border-primary-950 bg-background"
  },
  disabled: {
    unchecked: "border-border-400 bg-background cursor-not-allowed",
    checked: "border-primary-950 bg-background cursor-not-allowed"
  }
};
var DOT_CLASSES = {
  default: "bg-primary-950",
  hovered: "bg-info-700",
  focused: "bg-primary-950",
  invalid: "bg-primary-950",
  disabled: "bg-primary-950"
};
var Radio = forwardRef7(
  ({
    label,
    size = "medium",
    state = "default",
    errorMessage,
    helperText,
    className = "",
    labelClassName = "",
    checked: checkedProp,
    defaultChecked = false,
    disabled,
    id,
    name,
    value,
    onChange,
    ...props
  }, ref) => {
    const generatedId = useId3();
    const inputId = id ?? `radio-${generatedId}`;
    const inputRef = useRef2(null);
    const [internalChecked, setInternalChecked] = useState2(defaultChecked);
    const isControlled = checkedProp !== void 0;
    const checked = isControlled ? checkedProp : internalChecked;
    const handleChange = (event) => {
      const newChecked = event.target.checked;
      if (!isControlled) {
        setInternalChecked(newChecked);
      }
      if (event.target) {
        event.target.blur();
      }
      onChange?.(event);
    };
    const currentState = disabled ? "disabled" : state;
    const sizeClasses = SIZE_CLASSES4[size];
    const actualRadioSize = sizeClasses.radio;
    const actualDotSize = sizeClasses.dotSize;
    const radioVariant = checked ? "checked" : "unchecked";
    const stylingClasses = STATE_CLASSES2[currentState][radioVariant];
    const getBorderWidth = () => {
      if (currentState === "focused") {
        return "border-2";
      }
      return sizeClasses.borderWidth;
    };
    const borderWidthClass = getBorderWidth();
    const radioClasses = cn(
      BASE_RADIO_CLASSES,
      actualRadioSize,
      borderWidthClass,
      stylingClasses,
      className
    );
    const dotClasses = cn(
      actualDotSize,
      "rounded-full",
      DOT_CLASSES[currentState],
      "transition-all duration-200"
    );
    const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
    const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
    const getTextColor = () => {
      if (currentState === "disabled") {
        return checked ? "text-text-900" : "text-text-600";
      }
      if (currentState === "focused") {
        return "text-text-900";
      }
      return checked ? "text-text-900" : "text-text-600";
    };
    const getCursorClass = () => {
      return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
    };
    return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
      /* @__PURE__ */ jsxs8(
        "div",
        {
          className: cn(
            "flex flex-row items-center",
            isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
            disabled ? "opacity-40" : ""
          ),
          children: [
            /* @__PURE__ */ jsx12(
              "input",
              {
                ref: (node) => {
                  inputRef.current = node;
                  if (typeof ref === "function") ref(node);
                  else if (ref) ref.current = node;
                },
                type: "radio",
                id: inputId,
                checked,
                disabled,
                name,
                value,
                onChange: handleChange,
                className: "sr-only",
                style: {
                  position: "absolute",
                  left: "-9999px",
                  visibility: "hidden"
                },
                ...props
              }
            ),
            /* @__PURE__ */ jsx12(
              "button",
              {
                type: "button",
                className: radioClasses,
                disabled,
                "aria-pressed": checked,
                onClick: (e) => {
                  e.preventDefault();
                  if (!disabled) {
                    if (inputRef.current) {
                      inputRef.current.click();
                      inputRef.current.blur();
                    }
                  }
                },
                onKeyDown: (e) => {
                  if ((e.key === "Enter" || e.key === " ") && !disabled) {
                    e.preventDefault();
                    if (inputRef.current) {
                      inputRef.current.click();
                      inputRef.current.blur();
                    }
                  }
                },
                children: checked && /* @__PURE__ */ jsx12("div", { className: dotClasses })
              }
            ),
            label && /* @__PURE__ */ jsx12(
              "div",
              {
                className: cn(
                  "flex flex-row items-center",
                  sizeClasses.labelHeight,
                  "flex-1 min-w-0"
                ),
                children: /* @__PURE__ */ jsx12(
                  Text_default,
                  {
                    as: "label",
                    htmlFor: inputId,
                    size: sizeClasses.textSize,
                    weight: "normal",
                    className: cn(
                      getCursorClass(),
                      "select-none leading-normal flex items-center font-roboto truncate",
                      labelClassName
                    ),
                    color: getTextColor(),
                    children: label
                  }
                )
              }
            )
          ]
        }
      ),
      errorMessage && /* @__PURE__ */ jsx12(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5 truncate",
          color: "text-error-600",
          children: errorMessage
        }
      ),
      helperText && !errorMessage && /* @__PURE__ */ jsx12(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5 truncate",
          color: "text-text-500",
          children: helperText
        }
      )
    ] });
  }
);
Radio.displayName = "Radio";
var createRadioGroupStore = (name, defaultValue, disabled, onValueChange) => create2((set, get) => ({
  value: defaultValue,
  setValue: (value) => {
    if (!get().disabled) {
      set({ value });
      get().onValueChange?.(value);
    }
  },
  onValueChange,
  disabled,
  name
}));
var useRadioGroupStore = (externalStore) => {
  if (!externalStore) {
    throw new Error("RadioGroupItem must be used within a RadioGroup");
  }
  return externalStore;
};
var injectStore2 = (children, store) => Children2.map(children, (child) => {
  if (!isValidElement2(child)) return child;
  const typedChild = child;
  const shouldInject = typedChild.type === RadioGroupItem;
  return cloneElement2(typedChild, {
    ...shouldInject ? { store } : {},
    ...typedChild.props.children ? { children: injectStore2(typedChild.props.children, store) } : {}
  });
});
var RadioGroup = forwardRef7(
  ({
    value: propValue,
    defaultValue = "",
    onValueChange,
    name: propName,
    disabled = false,
    className = "",
    children,
    ...props
  }, ref) => {
    const generatedId = useId3();
    const name = propName || `radio-group-${generatedId}`;
    const storeRef = useRef2(null);
    storeRef.current ??= createRadioGroupStore(
      name,
      defaultValue,
      disabled,
      onValueChange
    );
    const store = storeRef.current;
    const { setValue } = useStore2(store, (s) => s);
    useEffect2(() => {
      const currentValue = store.getState().value;
      if (currentValue && onValueChange) {
        onValueChange(currentValue);
      }
    }, []);
    useEffect2(() => {
      if (propValue !== void 0) {
        setValue(propValue);
      }
    }, [propValue, setValue]);
    useEffect2(() => {
      store.setState({ disabled });
    }, [disabled, store]);
    return /* @__PURE__ */ jsx12(
      "div",
      {
        ref,
        className,
        role: "radiogroup",
        "aria-label": name,
        ...props,
        children: injectStore2(children, store)
      }
    );
  }
);
RadioGroup.displayName = "RadioGroup";
var RadioGroupItem = forwardRef7(
  ({
    value,
    store: externalStore,
    disabled: itemDisabled,
    size = "medium",
    state = "default",
    className = "",
    id,
    ...props
  }, ref) => {
    const store = useRadioGroupStore(externalStore);
    const {
      value: groupValue,
      setValue,
      disabled: groupDisabled,
      name
    } = useStore2(store);
    const generatedId = useId3();
    const inputId = id ?? `radio-item-${generatedId}`;
    const isChecked = groupValue === value;
    const isDisabled = groupDisabled || itemDisabled;
    const currentState = isDisabled ? "disabled" : state;
    return /* @__PURE__ */ jsx12(
      Radio,
      {
        ref,
        id: inputId,
        name,
        value,
        checked: isChecked,
        disabled: isDisabled,
        size,
        state: currentState,
        className,
        onChange: (e) => {
          if (e.target.checked && !isDisabled) {
            setValue(value);
          }
        },
        ...props
      }
    );
  }
);
RadioGroupItem.displayName = "RadioGroupItem";
var Radio_default = Radio;

// src/components/TextArea/TextArea.tsx
import {
  forwardRef as forwardRef8,
  useState as useState3,
  useId as useId4
} from "react";
import { WarningCircle as WarningCircle2 } from "phosphor-react";
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
var SIZE_CLASSES5 = {
  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_CLASSES3 = {
  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 = forwardRef8(
  ({
    label,
    size = "medium",
    state = "default",
    errorMessage,
    helperMessage,
    className = "",
    labelClassName = "",
    disabled,
    id,
    onChange,
    placeholder,
    ...props
  }, ref) => {
    const generatedId = useId4();
    const inputId = id ?? `textarea-${generatedId}`;
    const [isFocused, setIsFocused] = useState3(false);
    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_CLASSES5[size];
    const stateClasses = STATE_CLASSES3[currentState];
    const textareaClasses = cn(
      BASE_TEXTAREA_CLASSES,
      sizeClasses.textarea,
      stateClasses.base,
      stateClasses.hover,
      stateClasses.focus,
      className
    );
    return /* @__PURE__ */ jsxs9("div", { className: `flex flex-col`, children: [
      label && /* @__PURE__ */ jsx13(
        Text_default,
        {
          as: "label",
          htmlFor: inputId,
          size: sizeClasses.textSize,
          weight: "medium",
          color: "text-text-950",
          className: cn("mb-1.5", labelClassName),
          children: label
        }
      ),
      /* @__PURE__ */ jsx13(
        "textarea",
        {
          ref,
          id: inputId,
          disabled,
          onChange: handleChange,
          onFocus: handleFocus,
          onBlur: handleBlur,
          className: textareaClasses,
          placeholder,
          ...props
        }
      ),
      errorMessage && /* @__PURE__ */ jsxs9("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
        /* @__PURE__ */ jsx13(WarningCircle2, { size: 16 }),
        " ",
        errorMessage
      ] }),
      helperMessage && !errorMessage && /* @__PURE__ */ jsx13(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
    ] });
  }
);
TextArea.displayName = "TextArea";
var TextArea_default = TextArea;

// src/components/Toast/Toast.tsx
import { CheckCircle as CheckCircle2, WarningCircle as WarningCircle3, Info as Info2, X } from "phosphor-react";
import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES4 = {
  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: CheckCircle2,
  info: Info2,
  warning: WarningCircle3
};
var Toast = ({
  variant = "outlined",
  action = "success",
  className = "",
  onClose,
  title,
  description,
  position = "default",
  ...props
}) => {
  const variantClasses = VARIANT_ACTION_CLASSES4[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__ */ jsxs10(
    "div",
    {
      role: "alert",
      "aria-live": "assertive",
      "aria-atomic": "true",
      className: cn(
        baseClasses,
        positionClasses[position],
        variantClasses,
        className
      ),
      ...props,
      children: [
        /* @__PURE__ */ jsxs10("div", { className: "flex flex-row items-start gap-3", children: [
          /* @__PURE__ */ jsx14("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx14(IconAction, {}) }),
          /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-start justify-start", children: [
            /* @__PURE__ */ jsx14("p", { className: "font-semibold text-md", children: title }),
            description && /* @__PURE__ */ jsx14("p", { className: "text-md text-text-900", children: description })
          ] })
        ] }),
        /* @__PURE__ */ jsx14(
          "button",
          {
            onClick: onClose,
            "aria-label": "Dismiss notification",
            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
            children: /* @__PURE__ */ jsx14(X, {})
          }
        )
      ]
    }
  );
};
var Toast_default = Toast;

// src/components/Toast/utils/ToastStore.ts
import { create as create3 } from "zustand";
var useToastStore = create3((set) => ({
  toasts: [],
  addToast: (toast) => {
    const id = crypto.randomUUID();
    set((state) => ({
      toasts: [...state.toasts, { id, ...toast }]
    }));
  },
  removeToast: (id) => {
    set((state) => ({
      toasts: state.toasts.filter((t) => t.id !== id)
    }));
  }
}));
var ToastStor