"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { keyframes } from "@emotion/react";
import * as RadixAccordion from "@radix-ui/react-accordion";
import { forwardRef } from "react";
import { Spacing } from "../../tokens/Spacing.js";
import { Icon } from "../Icon/Icon.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
const accordionRootStyles = {
  display: "flex",
  flexDirection: "column",
  gap: Spacing["24px"]
};
const accordionItemStyles = {
  overflow: "hidden",
  marginTop: "1px",
  "&:first-of-type": {
    marginTop: 0
  },
  "&:focus-within": {
    position: "relative",
    zIndex: 1,
    boxShadow: "0 0 0 2px White8"
  }
};
const accordionHeaderStyles = {
  display: "flex"
};
const accordionTriggerStyles = {
  display: "flex",
  alignItems: "center",
  gap: Spacing["16px"],
  color: "White64",
  flex: 1,
  fontSize: "14px",
  lineHeight: "21px",
  fontWeight: 400,
  '&:hover, &[data-state="open"]': {
    color: "White88"
  }
};
const animationSlideDown = keyframes({
  from: { height: 0 },
  to: { height: "var(--radix-accordion-content-height)" }
});
const animationSlideUp = keyframes({
  from: { height: "var(--radix-accordion-content-height)" },
  to: { height: 0 }
});
const accordionContentStyles = {
  overflow: "hidden",
  fontSize: "14px",
  lineHeight: "21px",
  fontWeight: 400,
  '&[data-state="open"]': {
    animation: `${animationSlideDown} 300ms cubic-bezier(0.87, 0, 0.13, 1)`
  },
  '&[data-state="closed"]': {
    animation: `${animationSlideUp} 300ms cubic-bezier(0.87, 0, 0.13, 1)`
  }
};
const accordionChevronStyles = {
  transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1), background-color 400ms ease",
  padding: Spacing["4px"],
  bg: "White8",
  borderRadius: BorderRadius.FULL,
  "& svg": {
    transform: "translateX(0.75px)"
  },
  '[data-state="open"] > &': {
    transform: "rotate(90deg)",
    bg: "White16"
  }
};
const AccordionSingle = forwardRef((props, ref) => /* @__PURE__ */ jsx(RadixAccordion.Root, { ref, sx: accordionRootStyles, type: "single", collapsible: true, ...props }));
AccordionSingle.displayName = "Accordion.Single";
const AccordionItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(RadixAccordion.Item, { ref, sx: accordionItemStyles, ...props }));
AccordionItem.displayName = "Accordion.Item";
const AccordionTrigger = forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx(RadixAccordion.Header, { sx: accordionHeaderStyles, children: /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { sx: accordionTriggerStyles, ...rest, ref, children: [
  /* @__PURE__ */ jsx("div", { sx: accordionChevronStyles, children: /* @__PURE__ */ jsx(Icon.CaretRight, { "aria-hidden": "true" }) }),
  children
] }) }));
AccordionTrigger.displayName = "Accordion.Trigger";
const AccordionContent = forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx(RadixAccordion.Content, { sx: accordionContentStyles, ...rest, ref, children: /* @__PURE__ */ jsx("div", { children }) }));
AccordionContent.displayName = "Accordion.Content";
const Accordion = {
  Single: AccordionSingle,
  Item: AccordionItem,
  Trigger: AccordionTrigger,
  Content: AccordionContent
};
export {
  Accordion
};
