@trail-ui/react/dist/chunk-7FMTYK2I.mjs

import {
  _Button
} from "./chunk-VGPOEUEE.mjs";
import {
  _IconButton
} from "./chunk-CTOQKVKR.mjs";

// src/flag/flag.tsx
import { useMemo } from "react";
import { filterVariantProps, flag } from "@trail-ui/theme";
import {
  CheckCircleIcon,
  CloseIcon,
  ErrorIcon,
  InfoIcon,
  SettingsIcon,
  WarningIcon
} from "@trail-ui/icons";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function Flag(props) {
  let flagIcon;
  const { title, desc, variant, hasActionBtn, actionBtnText, isClosable, onActionClick, onClose } = props;
  const variantProps = filterVariantProps(props, flag.variantKeys);
  const styles = useMemo(
    () => flag({
      ...variantProps,
      variant
    }),
    [variantProps, variant]
  );
  switch (variant) {
    case "default":
      flagIcon = /* @__PURE__ */ jsx(SettingsIcon, { height: 24, width: 24 });
      break;
    case "success":
      flagIcon = /* @__PURE__ */ jsx(CheckCircleIcon, { height: 24, width: 24 });
      break;
    case "error":
      flagIcon = /* @__PURE__ */ jsx(ErrorIcon, { height: 24, width: 24 });
      break;
    case "warning":
      flagIcon = /* @__PURE__ */ jsx(WarningIcon, { height: 24, width: 24 });
      break;
    case "info":
      flagIcon = /* @__PURE__ */ jsx(InfoIcon, { height: 24, width: 24 });
      break;
    default:
      break;
  }
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "shadow-medium flex w-full gap-1.5 rounded text-base", children: [
    /* @__PURE__ */ jsx("div", { className: `${styles} flex w-12 min-w-12 items-center justify-center rounded-l`, children: flagIcon }),
    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center p-2", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col", children: [
        /* @__PURE__ */ jsx("p", { className: "font-semibold text-neutral-900", children: title }),
        /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-neutral-700", children: desc })
      ] }),
      hasActionBtn && /* @__PURE__ */ jsx(_Button, { appearance: "link", onPress: onActionClick, children: actionBtnText || "Action" }),
      isClosable && /* @__PURE__ */ jsx(
        _IconButton,
        {
          spacing: "compact",
          appearance: "transparent",
          onPress: onClose,
          "aria-label": "Close",
          className: "ml-auto h-auto p-2.5",
          children: /* @__PURE__ */ jsx(CloseIcon, { height: 24, width: 24, className: "text-neutral-600" })
        }
      )
    ] })
  ] }) });
}

export {
  Flag
};