@trail-ui/react/dist/index.js

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  Alert: () => _Alert,
  AlertIcon: () => AlertIcon,
  Avatar: () => _Avatar,
  AvatarContext: () => AvatarContext,
  AvatarGroup: () => _AvatarGroup,
  AvatarIcon: () => AvatarIcon,
  BaseImage: () => _BaseImage,
  BasePopover: () => _Popover,
  BreadcrumbItem: () => BreadcrumbItem,
  Breadcrumbs: () => Breadcrumbs,
  Button: () => _Button,
  Card: () => _Card,
  CardBody: () => _CardBody,
  CardContext: () => CardContext,
  CardFooter: () => _CardFooter,
  CardHeader: () => _CardHeader,
  Checkbox: () => _Checkbox,
  CheckboxContext: () => import_react_aria_components8.CheckboxContext,
  CheckboxGroup: () => _CheckboxGroup,
  CheckboxGroupContext: () => import_react_aria_components8.CheckboxGroupContext,
  CheckboxGroupStateContext: () => import_react_aria_components8.CheckboxGroupStateContext,
  CheckboxIcon: () => CheckboxIcon,
  Chip: () => _Chip,
  ChipContext: () => ChipContext,
  CloseButton: () => _CloseButton,
  Collection: () => import_react_aria_components50.Collection,
  Divider: () => Divider,
  Drawer: () => _Drawer,
  DrawerBody: () => _ModalBody,
  DrawerCloseButton: () => _ModalCloseButton,
  DrawerContent: () => ModalContent,
  DrawerFooter: () => _ModalFooter,
  DrawerHeader: () => ModalHeader,
  FileTrigger: () => import_react_aria_components50.FileTrigger,
  Flag: () => Flag,
  IconButton: () => _IconButton,
  Image: () => _Image,
  Input: () => _Input,
  Label: () => import_react_aria_components50.Label,
  Link: () => _Link,
  LinkContext: () => import_react_aria_components19.LinkContext,
  ListBox: () => ListBox,
  ListBoxItem: () => ListBoxItem,
  ListBoxSection: () => ListBoxSection,
  Lozenge: () => Lozenge,
  Menu: () => Menu,
  MenuItem: () => MenuItem,
  MenuSection: () => MenuSection,
  MenuTrigger: () => import_react_aria_components29.MenuTrigger,
  Modal: () => _Modal,
  ModalBody: () => _ModalBody,
  ModalCloseButton: () => _ModalCloseButton,
  ModalContent: () => ModalContent,
  ModalFooter: () => _ModalFooter,
  ModalHeader: () => ModalHeader,
  MultiSelect: () => MultiSelect,
  MultiSelectField: () => MultiSelectField,
  MultiSelectItem: () => MultiSelectItem,
  MultiSlider: () => MultiSlider,
  NumberInput: () => NumberInput,
  Popover: () => Popover,
  PopoverTrigger: () => PopoverTrigger,
  ProgressBar: () => ProgressBar,
  Radio: () => _Radio,
  RadioContext: () => import_react_aria_components41.RadioContext,
  RadioGroup: () => _RadioGroup,
  RadioGroupContext: () => import_react_aria_components41.RadioGroupContext,
  RadioGroupStateContext: () => import_react_aria_components41.RadioGroupStateContext,
  Ripple: () => ripple_default,
  Select: () => _Select,
  SelectItem: () => ListBoxItem,
  SelectSection: () => ListBoxSection,
  SideNavbar: () => SideNavbar,
  Skeleton: () => _Skeleton,
  Slider: () => Slider,
  Spinner: () => _Spinner,
  Switch: () => _Switch,
  SwitchContext: () => import_react_aria_components44.SwitchContext,
  Tab: () => Tab,
  TabList: () => TabList,
  TabPanel: () => TabPanel,
  Tabs: () => Tabs,
  TabsContext: () => import_react_aria_components46.TabsContext,
  Text: () => import_react_aria_components50.Text,
  TextArea: () => _TextArea,
  TextField: () => _TextField,
  TextFieldContext: () => TextFieldContext,
  Tooltip: () => Tooltip2,
  TooltipTrigger: () => TooltipTrigger2,
  TrailUIProvider: () => TrailUIProvider,
  useDisclosure: () => useDisclosure,
  useNumberInput: () => useNumberInput,
  usePopover: () => usePopover,
  useRipple: () => useRipple
});
module.exports = __toCommonJS(src_exports);

// src/alert/alert.tsx
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
function Alert(props, ref) {
  const { className, variant, color: color2, radius, children, ...rest } = props;
  const styles = (0, import_react.useMemo)(
    () => (0, import_theme.alert)({
      variant,
      color: color2,
      radius,
      className
    }),
    [className, color2, radius, variant]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "alert", ...rest, ref, className: styles, children });
}
var _Alert = (0, import_react.forwardRef)(Alert);

// src/alert/alert-icon.tsx
var import_icons = require("@trail-ui/icons");
var import_shared_utils = require("@trail-ui/shared-utils");
var import_jsx_runtime2 = require("react/jsx-runtime");
var ICONS = {
  info: { outline: import_icons.InfoIcon, filled: import_icons.InfoFilledIcon },
  yellow: { outline: import_icons.ExclamationCircleIcon, filled: import_icons.ExclamationCircleFilledIcon },
  green: { outline: import_icons.CheckCircleIcon, filled: import_icons.CheckCircleFilledIcon },
  error: { outline: import_icons.XCircleIcon, filled: import_icons.XCircleFilledIcon }
};
var AlertIcon = (props) => {
  const { type = "info", filled = false, className, ...rest } = props;
  const Icon = filled ? ICONS[type].filled : ICONS[type].outline;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: (0, import_shared_utils.clsx)("h-6 w-6 shrink-0", className), ...rest });
};

// src/avatar/avatar.tsx
var import_hooks = require("@trail-ui/hooks");
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_theme2 = require("@trail-ui/theme");
var import_utils = require("@react-aria/utils");
var import_react2 = require("react");
var import_react_aria = require("react-aria");
var import_react_aria_components = require("react-aria-components");

// src/avatar/avatar-icon.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
  "svg",
  {
    "aria-hidden": "true",
    fill: "none",
    height: "80%",
    role: "presentation",
    viewBox: "0 0 24 24",
    width: "80%",
    children: [
      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
        "path",
        {
          d: "M12 2C9.38 2 7.25 4.13 7.25 6.75C7.25 9.32 9.26 11.4 11.88 11.49C11.96 11.48 12.04 11.48 12.1 11.49C12.12 11.49 12.13 11.49 12.15 11.49C12.16 11.49 12.16 11.49 12.17 11.49C14.73 11.4 16.74 9.32 16.75 6.75C16.75 4.13 14.62 2 12 2Z",
          fill: "currentColor"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
        "path",
        {
          d: "M17.0809 14.1489C14.2909 12.2889 9.74094 12.2889 6.93094 14.1489C5.66094 14.9989 4.96094 16.1489 4.96094 17.3789C4.96094 18.6089 5.66094 19.7489 6.92094 20.5889C8.32094 21.5289 10.1609 21.9989 12.0009 21.9989C13.8409 21.9989 15.6809 21.5289 17.0809 20.5889C18.3409 19.7389 19.0409 18.5989 19.0409 17.3589C19.0309 16.1289 18.3409 14.9889 17.0809 14.1489Z",
          fill: "currentColor"
        }
      )
    ]
  }
);

// src/avatar/avatar.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var safeText = (name) => {
  const parts = name.trim().split(" ");
  if (parts.length === 1) {
    return parts[0].slice(0, 2).toUpperCase();
  } else {
    return (parts[0][0] + parts[1][0]).toUpperCase();
  }
};
var AvatarContext = (0, import_react2.createContext)({});
function Avatar(props, ref) {
  [props, ref] = (0, import_react_aria_components.useContextProps)(props, ref, AvatarContext);
  const ctx = props;
  const {
    elementType,
    src,
    name,
    icon = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarIcon, {}),
    className,
    classNames,
    fallback: fallbackComponent,
    alt = name || "avatar",
    color: color2 = "red",
    radius = "full",
    size = "md",
    isBordered = false,
    isDisabled = false,
    ignoreFallback = false,
    showFallback: showFallbackProp = false,
    getInitials = safeText,
    ImgComponent = "img",
    imgProps,
    onError,
    onClick,
    ...avatarProps
  } = props;
  const Component3 = elementType || "span";
  const { isFocusVisible, isFocused, focusProps } = (0, import_react_aria.useFocusRing)();
  const { isHovered, hoverProps } = (0, import_react_aria.useHover)({ isDisabled });
  const imageStatus = (0, import_hooks.useImage)({ src, onError, ignoreFallback });
  const isImgLoaded = imageStatus === "loaded";
  const showFallback = (!src || !isImgLoaded) && showFallbackProp;
  const slots = (0, import_react2.useMemo)(
    () => {
      var _a;
      return (0, import_theme2.avatar)({
        color: color2,
        radius,
        size,
        isBordered,
        isDisabled,
        isInGroup: ctx == null ? void 0 : ctx.isInGroup,
        isInGridGroup: (_a = ctx == null ? void 0 : ctx.isGrid) != null ? _a : false
      });
    },
    [color2, radius, size, isBordered, isDisabled, ctx == null ? void 0 : ctx.isInGroup, ctx == null ? void 0 : ctx.isGrid]
  );
  const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
  const fallback = (0, import_react2.useMemo)(() => {
    if (!showFallback && src)
      return null;
    if (fallbackComponent) {
      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        "div",
        {
          "aria-label": alt,
          className: slots.fallback({ class: classNames == null ? void 0 : classNames.fallback }),
          role: "img",
          children: fallbackComponent
        }
      );
    }
    return name ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-label": alt, className: slots.name({ class: classNames == null ? void 0 : classNames.name }), role: "img", children: getInitials(name) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-label": alt, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), role: "img", children: icon });
  }, [showFallback, src, fallbackComponent, classNames, name, icon, alt, slots, getInitials]);
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_aria_components.TooltipTrigger, { delay: 200, closeDelay: 200, children: [
    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components.Button, { className: "outline-none", onPress: onClick, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
      Component3,
      {
        ...(0, import_react_aria.mergeProps)((0, import_utils.filterDOMProps)(avatarProps), focusProps, hoverProps),
        ref,
        "data-hovered": (0, import_shared_utils2.dataAttr)(isHovered),
        "data-focused": (0, import_shared_utils2.dataAttr)(isFocused),
        "data-focus-visible": (0, import_shared_utils2.dataAttr)(isFocusVisible),
        className: slots.base({ class: baseStyles }),
        children: [
          src && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
            ImgComponent,
            {
              src,
              alt,
              "data-loaded": (0, import_shared_utils2.dataAttr)(isImgLoaded),
              className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
              ...imgProps
            }
          ),
          fallback
        ]
      }
    ) }),
    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
      import_react_aria_components.Tooltip,
      {
        className: "shadow-medium pointer-events-none max-w-[150px] rounded bg-neutral-50 text-neutral-900",
        placement: "bottom",
        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "px-2 py-1 text-[10px]", children: alt })
      }
    )
  ] });
}
var _Avatar = (0, import_react2.forwardRef)(Avatar);

// src/avatar/avatar-group.tsx
var import_react_utils = require("@trail-ui/react-utils");
var import_shared_utils3 = require("@trail-ui/shared-utils");
var import_theme3 = require("@trail-ui/theme");
var import_react3 = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
function AvatarGroup(props, ref) {
  const {
    elementType,
    max = 5,
    total,
    size,
    color: color2,
    radius,
    isBordered,
    isDisabled,
    isGrid,
    renderCount = (count) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(_Avatar, { className: "hover:-translate-x-0", name: `+${count}` }),
    className,
    children,
    ...otherProps
  } = props;
  const Component3 = elementType || "span";
  const context = (0, import_react3.useMemo)(
    () => ({
      isInGroup: true,
      size,
      color: color2,
      radius,
      isGrid,
      isBordered,
      isDisabled
    }),
    [size, color2, radius, isGrid, isBordered, isDisabled]
  );
  const classNames = (0, import_react3.useMemo)(() => (0, import_theme3.avatarGroup)({ className, isGrid }), [className, isGrid]);
  const validChildren = (0, import_react_utils.getValidChildren)(children);
  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
  const remainingCount = total ? total : max != null ? validChildren.length - max : -1;
  const clones = childrenWithinMax.map((child, index) => {
    const isFirstAvatar = index === 0;
    const isLastAvatar = index === childrenWithinMax.length - 1;
    const childProps = {
      className: (0, import_shared_utils3.clsx)(
        isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
        isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
      )
    };
    return (0, import_react3.cloneElement)(child, (0, import_shared_utils3.compact)(childProps));
  });
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component3, { ref, className: classNames, role: "group", ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(AvatarContext.Provider, { value: context, children: [
    clones,
    remainingCount > 0 && renderCount(remainingCount)
  ] }) });
}
var _AvatarGroup = (0, import_react3.forwardRef)(AvatarGroup);

// src/button/button.tsx
var import_theme5 = require("@trail-ui/theme");
var import_react5 = require("react");
var import_react_aria_components2 = require("react-aria-components");

// src/spinner/spinner.tsx
var import_theme4 = require("@trail-ui/theme");
var import_react4 = require("react");

// src/spinner/spinners/bars.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var Bars = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("rect", { y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.5s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.5s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.25s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.25s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("rect", { x: "60", width: "15", height: "140", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.25s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.25s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6", children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "height",
        begin: "0.5s",
        dur: "1s",
        values: "120;110;100;90;80;70;60;50;40;140;120",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "animate",
      {
        attributeName: "y",
        begin: "0.5s",
        dur: "1s",
        values: "10;15;20;25;30;35;40;45;50;0;10",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] })
] });

// src/spinner/spinners/dots.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var Dots = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      "animate",
      {
        attributeName: "r",
        from: "15",
        to: "15",
        begin: "0s",
        dur: "0.8s",
        values: "15;9;15",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      "animate",
      {
        attributeName: "fill-opacity",
        from: "1",
        to: "1",
        begin: "0s",
        dur: "0.8s",
        values: "1;.5;1",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("circle", { cx: "60", cy: "15", r: "9", fillOpacity: "0.3", children: [
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      "animate",
      {
        attributeName: "r",
        from: "9",
        to: "9",
        begin: "0s",
        dur: "0.8s",
        values: "9;15;9",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      "animate",
      {
        attributeName: "fill-opacity",
        from: "0.5",
        to: "0.5",
        begin: "0s",
        dur: "0.8s",
        values: ".5;1;.5",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      "animate",
      {
        attributeName: "r",
        from: "15",
        to: "15",
        begin: "0s",
        dur: "0.8s",
        values: "15;9;15",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      "animate",
      {
        attributeName: "fill-opacity",
        from: "1",
        to: "1",
        begin: "0s",
        dur: "0.8s",
        values: "1;.5;1",
        calcMode: "linear",
        repeatCount: "indefinite"
      }
    )
  ] })
] });

// src/spinner/spinners/ring.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Ring = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
  "svg",
  {
    fill: "none",
    stroke: "currentColor",
    viewBox: "0 0 38 38",
    xmlns: "http://www.w3.org/2000/svg",
    ...props,
    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { transform: "translate(2.5 2.5)", strokeWidth: "5", children: [
      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { strokeOpacity: ".5", cx: "16", cy: "16", r: "16" }),
      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M32 16c0-9.94-8.06-16-16-16", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
        "animateTransform",
        {
          attributeName: "transform",
          type: "rotate",
          from: "0 16 16",
          to: "360 16 16",
          dur: "1s",
          repeatCount: "indefinite"
        }
      ) })
    ] }) })
  }
);

// src/spinner/spinners/spin.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var Spin = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3", strokeLinecap: "round", children: [
    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
      "animate",
      {
        attributeName: "stroke-dasharray",
        dur: "1.5s",
        calcMode: "spline",
        values: "0 150;42 150;42 150;42 150",
        keyTimes: "0;0.475;0.95;1",
        keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
        repeatCount: "indefinite"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
      "animate",
      {
        attributeName: "stroke-dashoffset",
        dur: "1.5s",
        calcMode: "spline",
        values: "0;-16;-59;-59",
        keyTimes: "0;0.475;0.95;1",
        keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
        repeatCount: "indefinite"
      }
    )
  ] }),
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
    "animateTransform",
    {
      attributeName: "transform",
      type: "rotate",
      dur: "2s",
      values: "0 12 12;360 12 12",
      repeatCount: "indefinite"
    }
  )
] }) });

// src/spinner/spinner.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var SPINNERS = {
  bars: Bars,
  dots: Dots,
  ring: Ring,
  spin: Spin
};
var DEFAULT_SPINNER = "spin";
function Spinner(props, ref) {
  const { className, variant = DEFAULT_SPINNER, color: color2, size, ...spinnerProps } = props;
  const defaultSpinner = variant in SPINNERS ? variant : DEFAULT_SPINNER;
  const SpinnerComponent = SPINNERS[defaultSpinner];
  const styles = (0, import_react4.useMemo)(
    () => (0, import_theme4.spinner)({
      color: color2,
      size,
      className
    }),
    [className, color2, size]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SpinnerComponent, { role: "presentation", className: styles, ref, ...spinnerProps });
}
var _Spinner = (0, import_react4.forwardRef)(Spinner);

// src/button/button.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
function Button2(props, ref) {
  const {
    appearance,
    // size = 'md',
    spacing = "default",
    fullWidth,
    isLoading,
    spinner: spinner2 = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(_Spinner, { color: "current", size: "sm", ...props.spinnerProps }),
    spinnerPlacement = "start",
    startContent: startContentProp,
    endContent: endContentProp,
    disableAnimation,
    className,
    children,
    ...otherProps
  } = props;
  const styles = (0, import_react5.useMemo)(
    () => (0, import_theme5.button)({
      // size,
      isLoading,
      spinnerPlacement,
      startContentProp: !!startContentProp,
      endContentProp: !!endContentProp,
      appearance,
      spacing,
      fullWidth,
      disableAnimation,
      className
    }),
    [
      isLoading,
      spinnerPlacement,
      startContentProp,
      endContentProp,
      appearance,
      spacing,
      fullWidth,
      disableAnimation,
      className
    ]
  );
  const getIconClone = (icon) => (0, import_react5.isValidElement)(icon) ? (0, import_react5.cloneElement)(icon, {
    "aria-hidden": true,
    focusable: false,
    tabIndex: -1
  }) : null;
  const startContent = getIconClone(startContentProp);
  const endContent = getIconClone(endContentProp);
  return (
    // @ts-ignore
    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components2.Button, { ref, className: styles, ...otherProps, children: () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
      !isLoading && startContent,
      isLoading && spinnerPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "shrink-0", children: spinner2 }),
      children,
      isLoading && spinnerPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "shrink-0", children: spinner2 }),
      !isLoading && endContent
    ] }) })
  );
}
var _Button = (0, import_react5.forwardRef)(Button2);

// src/button/close-button.tsx
var import_icons2 = require("@trail-ui/icons");
var import_react7 = require("react");

// src/button/icon-button.tsx
var import_theme6 = require("@trail-ui/theme");
var import_react6 = require("react");
var import_react_aria_components3 = require("react-aria-components");
var import_jsx_runtime12 = require("react/jsx-runtime");
function IconButton(props, ref) {
  const { appearance, spacing, disableAnimation, className, children, ...otherProps } = props;
  const styles = (0, import_react6.useMemo)(
    () => (0, import_theme6.button)({
      isIconOnly: true,
      appearance,
      spacing,
      disableAnimation,
      className
    }),
    [className, disableAnimation, appearance, spacing]
  );
  const element = children;
  const _children = (0, import_react6.isValidElement)(element) ? (0, import_react6.cloneElement)(element, {
    "aria-hidden": true,
    focusable: false
  }) : null;
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components3.Button, { ref, className: styles, ...otherProps, children: _children });
}
var _IconButton = (0, import_react6.forwardRef)(IconButton);

// src/button/close-button.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
function CloseButton(props, ref) {
  const { children = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons2.CloseIcon, { width: 24, height: 24 }), ...otherProps } = props;
  const ariaLabel = props["aria-label"] || "Close";
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(_IconButton, { ref, ...otherProps, "aria-label": ariaLabel, children });
}
var _CloseButton = (0, import_react7.forwardRef)(CloseButton);

// src/card/card.tsx
var import_shared_utils4 = require("@trail-ui/shared-utils");
var import_theme7 = require("@trail-ui/theme");
var import_utils2 = require("@react-aria/utils");
var import_react8 = require("react");
var import_react_aria2 = require("react-aria");
var import_react_aria_components4 = require("react-aria-components");
var import_jsx_runtime14 = require("react/jsx-runtime");
var CardContext = (0, import_react8.createContext)({});
function Card(props, ref) {
  [props, ref] = (0, import_react_aria_components4.useContextProps)(props, ref, CardContext);
  const ctx = props;
  const { elementType, children, autoFocus, className, classNames, onPress, ...cardProps } = props;
  const variantProps2 = (0, import_theme7.filterVariantProps)(props, import_theme7.card.variantKeys);
  const Component3 = elementType || (props.isPressable ? "button" : "div");
  let componentProps = cardProps;
  if (typeof Component3 === "string") {
    componentProps = (0, import_utils2.filterDOMProps)(cardProps);
  }
  const baseStyles = (0, import_shared_utils4.clsx)(classNames == null ? void 0 : classNames.base, className);
  const { buttonProps, isPressed } = (0, import_react_aria2.useButton)(
    {
      elementType: Component3,
      onPress,
      isDisabled: !props.isPressable,
      ...cardProps
    },
    ref
  );
  const { focusProps, isFocused, isFocusVisible } = (0, import_react_aria2.useFocusRing)({ autoFocus });
  const { hoverProps, isHovered } = (0, import_react_aria2.useHover)({
    isDisabled: !props.isHoverable,
    ...cardProps
  });
  const slots = (0, import_react8.useMemo)(
    () => (0, import_theme7.card)({
      ...variantProps2
    }),
    [variantProps2]
  );
  const context = (0, import_react8.useMemo)(
    () => ({
      isPressable: ctx.isPressable,
      isDisabled: ctx.isDisabled,
      isFooterBlurred: ctx.isFooterBlurred,
      disableAnimation: ctx.disableAnimation,
      fullWidth: ctx.fullWidth,
      slots,
      classNames
    }),
    [
      ctx.isPressable,
      ctx.isDisabled,
      ctx.isFooterBlurred,
      ctx.disableAnimation,
      ctx.fullWidth,
      slots,
      classNames
    ]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
    Component3,
    {
      ...(0, import_utils2.mergeProps)(
        props.isPressable ? { ...buttonProps, ...focusProps, role: "button" } : {},
        props.isHoverable ? hoverProps : {},
        componentProps
      ),
      ref,
      className: slots.base({ class: baseStyles }),
      tabIndex: props.isPressable ? 0 : -1,
      "data-disabled": (0, import_shared_utils4.dataAttr)(props.isDisabled),
      "data-pressed": (0, import_shared_utils4.dataAttr)(isPressed),
      "data-hovered": (0, import_shared_utils4.dataAttr)(isHovered),
      "data-focused": (0, import_shared_utils4.dataAttr)(isFocused),
      "data-focus-visible": (0, import_shared_utils4.dataAttr)(isFocusVisible),
      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardContext.Provider, { value: context, children })
    }
  );
}
var _Card = (0, import_react8.forwardRef)(Card);

// src/card/card-body.tsx
var import_shared_utils5 = require("@trail-ui/shared-utils");
var import_react9 = require("react");
var import_jsx_runtime15 = require("react/jsx-runtime");
function CardBody(props, ref) {
  var _a;
  const { elementType, className, ...otherProps } = props;
  const Component3 = elementType || "div";
  const { slots, classNames } = (0, import_react9.useContext)(CardContext);
  const bodyStyles = (0, import_shared_utils5.clsx)(classNames == null ? void 0 : classNames.body, className);
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Component3, { ref, className: (_a = slots.body) == null ? void 0 : _a.call(slots, { class: bodyStyles }), ...otherProps });
}
var _CardBody = (0, import_react9.forwardRef)(CardBody);

// src/card/card-footer.tsx
var import_shared_utils6 = require("@trail-ui/shared-utils");
var import_react10 = require("react");
var import_jsx_runtime16 = require("react/jsx-runtime");
function CardFooter(props, ref) {
  var _a;
  const { elementType, className, ...otherProps } = props;
  const Component3 = elementType || "div";
  const { slots, classNames } = (0, import_react10.useContext)(CardContext);
  const footerStyles = (0, import_shared_utils6.clsx)(classNames == null ? void 0 : classNames.footer, className);
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component3, { ref, className: (_a = slots.footer) == null ? void 0 : _a.call(slots, { class: footerStyles }), ...otherProps });
}
var _CardFooter = (0, import_react10.forwardRef)(CardFooter);

// src/card/card-header.tsx
var import_shared_utils7 = require("@trail-ui/shared-utils");
var import_react11 = require("react");
var import_jsx_runtime17 = require("react/jsx-runtime");
function CardHeader(props, ref) {
  var _a;
  const { elementType, className, ...otherProps } = props;
  const Component3 = elementType || "div";
  const { slots, classNames } = (0, import_react11.useContext)(CardContext);
  const headerStyles = (0, import_shared_utils7.clsx)(classNames == null ? void 0 : classNames.header, className);
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component3, { ref, className: (_a = slots.header) == null ? void 0 : _a.call(slots, { class: headerStyles }), ...otherProps });
}
var _CardHeader = (0, import_react11.forwardRef)(CardHeader);

// src/breadcrumbs/breadcrumbs.tsx
var import_react12 = __toESM(require("react"));
var import_theme8 = require("@trail-ui/theme");
var import_theme9 = require("@trail-ui/theme");
var import_react_aria_components5 = require("react-aria-components");
var import_react_aria3 = require("react-aria");
var import_jsx_runtime18 = require("react/jsx-runtime");
function Breadcrumbs(props) {
  let { navProps } = (0, import_react_aria3.useBreadcrumbs)(props);
  let childCount = import_react12.default.Children.count(props.children);
  const slots = (0, import_react12.useMemo)(() => (0, import_theme8.breadcrumb)(props), [props]);
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ol", { className: slots.orderedList(props), children: import_react12.default.Children.map(
    props.children,
    (child, i) => child && import_react12.default.cloneElement(child, {
      isCurrent: i === childCount - 1
    })
  ) }) });
}
function BreadcrumbItem(props) {
  let ref = import_react12.default.useRef(null);
  let { itemProps } = (0, import_react_aria3.useBreadcrumbItem)(props, ref);
  const slots = (0, import_react12.useMemo)(() => (0, import_theme8.breadcrumb)(props), [props]);
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("li", { className: slots.base(props), children: [
    props.before && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", "aria-current": "page", children: props.before }),
    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
      import_react_aria_components5.Link,
      {
        ...itemProps,
        ref,
        href: props.href,
        className: (0, import_theme9.link)({
          underline: props.isCurrent ? "hover" : "always",
          color: "foreground",
          className: props.isCurrent ? "font-medium" : "font-normal"
        }),
        onFocus: props.onFocus,
        onBlur: props.onBlur,
        children: props.children
      }
    ),
    props.after && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", "aria-current": "page", children: props.after }),
    !props.isCurrent && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", style: { padding: "0 5px" }, children: "/" })
  ] });
}

// src/checkbox/checkbox.tsx
var import_shared_utils9 = require("@trail-ui/shared-utils");
var import_theme11 = require("@trail-ui/theme");
var import_react14 = require("react");
var import_react_aria_components7 = require("react-aria-components");

// src/checkbox/checkbox-group.tsx
var import_shared_utils8 = require("@trail-ui/shared-utils");
var import_theme10 = require("@trail-ui/theme");
var import_react13 = require("react");
var import_react_aria_components6 = require("react-aria-components");
var import_icons3 = require("@trail-ui/icons");
var import_jsx_runtime19 = require("react/jsx-runtime");
var CheckboxGroupThemeContext = (0, import_react13.createContext)({});
function CheckboxGroup(props, ref) {
  const {
    lineThrough,
    orientation = "vertical",
    label,
    className,
    classNames,
    isInvalid,
    children,
    ...otherProps
  } = props;
  const slots = (0, import_react13.useMemo)(() => (0, import_theme10.checkboxGroup)(), []);
  const baseStyles = (0, import_shared_utils8.clsx)(classNames == null ? void 0 : classNames.base, className);
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
    import_react_aria_components6.CheckboxGroup,
    {
      ref,
      className: slots.base({ class: baseStyles }),
      ...otherProps,
      children: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components6.Label, { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
        children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
          "div",
          {
            "data-orientation": orientation,
            className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxGroupThemeContext.Provider, { value: { isInvalid, lineThrough }, children: typeof children === "function" ? children(renderProps) : children })
          }
        ),
        props.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-row items-center gap-0.5", children: [
          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons3.InfoIcon, { className: "h-6 w-6 text-red-600", "aria-hidden": "true" }),
          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
            import_react_aria_components6.Text,
            {
              slot: "errorMessage",
              className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }),
              children: props.errorMessage
            }
          )
        ] }) : props.description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
          import_react_aria_components6.Text,
          {
            slot: "description",
            className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
            children: props.description
          }
        ) : null
      ] })
    }
  );
}
var _CheckboxGroup = (0, import_react13.forwardRef)(CheckboxGroup);

// src/checkbox/checkbox-icon.tsx
var import_jsx_runtime20 = require("react/jsx-runtime");
function CheckIcon(props) {
  const { isSelected } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { "aria-hidden": "true", role: "presentation", viewBox: "0 0 17 18", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
    "polyline",
    {
      fill: "none",
      points: "1 9 7 14 15 4",
      stroke: "currentColor",
      strokeDasharray: 22,
      strokeDashoffset: isSelected ? 44 : 66,
      strokeLinecap: "round",
      strokeLinejoin: "round",
      strokeWidth: 2,
      style: isSelected ? {
        transition: "stroke-dashoffset 250ms linear 0s"
      } : {}
    }
  ) });
}
function IndeterminateIcon() {
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { stroke: "white", strokeWidth: 3, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "21", x2: "3", y1: "12", y2: "12" }) });
}
function CheckboxIcon(props) {
  const { isIndeterminate, ...otherProps } = props;
  const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BaseIcon, { ...otherProps });
}

// src/checkbox/checkbox.tsx
var import_jsx_runtime21 = require("react/jsx-runtime");
function Checkbox(props, ref) {
  var _a, _b;
  const groupThemeContext = (0, import_react14.useContext)(CheckboxGroupThemeContext);
  const {
    icon = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckboxIcon, {}),
    lineThrough = (_a = groupThemeContext == null ? void 0 : groupThemeContext.lineThrough) != null ? _a : false,
    isInvalid = (_b = groupThemeContext == null ? void 0 : groupThemeContext.isInvalid) != null ? _b : false,
    className,
    classNames,
    children,
    ...otherProps
  } = props;
  const slots = (0, import_react14.useMemo)(
    () => (0, import_theme11.checkbox)({
      lineThrough,
      isInvalid
    }),
    [isInvalid, lineThrough]
  );
  const baseStyles = (0, import_shared_utils9.clsx)(classNames == null ? void 0 : classNames.base, className);
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components7.Checkbox, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => {
    const iconProps = {
      "data-checked": String(renderProps.isSelected),
      isSelected: renderProps.isSelected,
      isIndeterminate: renderProps.isIndeterminate,
      isInvalid: renderProps.isInvalid,
      className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
    };
    const clonedIcon = typeof icon === "function" ? icon(iconProps) : (0, import_react14.cloneElement)(icon, iconProps);
    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
        "span",
        {
          "aria-hidden": "true",
          className: slots.control({ class: classNames == null ? void 0 : classNames.control }),
          "data-indeterminate": props.isIndeterminate,
          children: clonedIcon
        }
      ),
      children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: typeof children === "function" ? children(renderProps) : children })
    ] });
  } });
}
var _Checkbox = (0, import_react14.forwardRef)(Checkbox);

// src/checkbox/index.tsx
var import_react_aria_components8 = require("react-aria-components");

// src/chip/chip.tsx
var import_icons4 = require("@trail-ui/icons");
var import_shared_utils10 = require("@trail-ui/shared-utils");
var import_theme12 = require("@trail-ui/theme");
var import_utils3 = require("@react-aria/utils");
var import_react15 = require("react");
var import_react_aria4 = require("react-aria");
var import_react_aria_components9 = require("react-aria-components");
var import_jsx_runtime22 = require("react/jsx-runtime");
var ChipContext = (0, import_react15.createContext)({});
function Chip(props, ref) {
  [props, ref] = (0, import_react_aria_components9.useContextProps)(props, ref, ChipContext);
  const ctx = props;
  const {
    elementType,
    children,
    avatar: avatar2,
    startContent: startContentProps,
    endContent: endContentProps,
    classNames,
    className,
    onClose,
    isBordered,
    ...chipProps
  } = props;
  const variantProps2 = (0, import_theme12.filterVariantProps)(props, import_theme12.chip.variantKeys);
  const Component3 = elementType || "div";
  let componentProps = chipProps;
  if (typeof Component3 === "string") {
    componentProps = (0, import_utils3.filterDOMProps)(chipProps);
  }
  const baseStyles = (0, import_shared_utils10.clsx)(classNames == null ? void 0 : classNames.base, className);
  const isCloseable = !!onClose;
  const isDot = props.variant === "dot";
  const { focusProps: closeFocusProps, isFocusVisible: isCloseButtonFocusVisible } = (0, import_react_aria4.useFocusRing)();
  const { pressProps: closePressProps } = (0, import_react_aria4.usePress)({
    isDisabled: !!(ctx == null ? void 0 : ctx.isDisabled),
    onPress: onClose
  });
  const hasStartContent = (0, import_react15.useMemo)(
    () => !!avatar2 || !!startContentProps,
    [avatar2, startContentProps]
  );
  const hasEndContent = (0, import_react15.useMemo)(
    () => !!endContentProps || isCloseable,
    [endContentProps, isCloseable]
  );
  const slots = (0, import_react15.useMemo)(
    () => (0, import_theme12.chip)({
      ...variantProps2,
      hasStartContent,
      hasEndContent,
      isCloseable,
      isCloseButtonFocusVisible,
      isBordered
    }),
    [
      variantProps2,
      hasStartContent,
      hasEndContent,
      isCloseable,
      isCloseButtonFocusVisible,
      isBordered
    ]
  );
  const getAvatarClone = (avatar3) => {
    if (!(0, import_react15.isValidElement)(avatar3))
      return null;
    return (0, import_react15.cloneElement)(avatar3, {
      // @ts-ignore
      className: slots.avatar({ class: classNames == null ? void 0 : classNames.avatar })
    });
  };
  const getContentClone = (content) => (0, import_react15.isValidElement)(content) ? (0, import_react15.cloneElement)(content, {
    // @ts-ignore
    className: (0, import_shared_utils10.clsx)("max-h-[80%]", content.props.className)
  }) : null;
  const startContent = getAvatarClone(avatar2) || getContentClone(startContentProps);
  const endContent = getContentClone(endContentProps);
  const start = (0, import_react15.useMemo)(() => {
    if (isDot && !startContent) {
      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: slots.dot({ class: classNames == null ? void 0 : classNames.dot }) });
    }
    return startContent;
  }, [isDot, startContent, slots, classNames == null ? void 0 : classNames.dot]);
  const end = (0, import_react15.useMemo)(() => {
    if (isCloseable) {
      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
        "span",
        {
          role: "button",
          tabIndex: 0,
          "aria-label": `Remove ${children}`,
          className: slots.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
          ...(0, import_react_aria4.mergeProps)(closePressProps, closeFocusProps),
          children: endContent || /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons4.CloseIcon, {})
        }
      );
    }
    return endContent;
  }, [
    classNames == null ? void 0 : classNames.closeButton,
    closeFocusProps,
    closePressProps,
    children,
    endContent,
    isCloseable,
    slots
  ]);
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
    Component3,
    {
      ref,
      className: `${slots.base({ class: baseStyles })} ${isBordered && slots.border({ class: classNames == null ? void 0 : classNames.border })}`,
      ...componentProps,
      children: [
        start,
        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children }),
        end
      ]
    }
  );
}
var _Chip = (0, import_react15.forwardRef)(Chip);

// src/divider/divider.tsx
var import_theme13 = require("@trail-ui/theme");
var import_react16 = require("react");
var import_react_aria_components10 = require("react-aria-components");
var import_jsx_runtime23 = require("react/jsx-runtime");
function Divider(props) {
  let { className, orientation, ...otherProps } = props;
  const styles = (0, import_react16.useMemo)(
    () => (0, import_theme13.divider)({
      orientation,
      className
    }),
    [orientation, className]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components10.Separator, { className: styles, "data-orientation": orientation, ...otherProps });
}

// src/modal/modal-body.tsx
var import_shared_utils12 = require("@trail-ui/shared-utils");
var import_react18 = require("react");

// src/modal/modal.tsx
var import_shared_utils11 = require("@trail-ui/shared-utils");
var import_theme14 = require("@trail-ui/theme");
var import_react17 = require("react");
var import_react_aria_components11 = require("react-aria-components");
var import_jsx_runtime24 = require("react/jsx-runtime");
var InternalModalContext = (0, import_react17.createContext)(
  {}
);
function Modal(props, ref) {
  const {
    children,
    classNames,
    className,
    size,
    radius,
    placement,
    shadow,
    backdrop = "opaque",
    scrollBehavior,
    ...otherProps
  } = props;
  const slots = (0, import_react17.useMemo)(
    () => (0, import_theme14.modal)({ size, radius, placement, shadow, scrollBehavior, backdrop }),
    [backdrop, placement, radius, scrollBehavior, shadow, size]
  );
  const baseStyles = (0, import_shared_utils11.clsx)(classNames == null ? void 0 : classNames.base, className);
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components11.ModalOverlay, { ...otherProps, className: slots.backdrop({ class: classNames == null ? void 0 : classNames.backdrop }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), "data-placement": placement, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InternalModalContext.Provider, { value: { slots, classNames }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components11.Modal, { ref, className: slots.base({ class: baseStyles }), children }) }) }) });
}
var _Modal = (0, import_react17.forwardRef)(Modal);

// src/modal/modal-body.tsx
var import_jsx_runtime25