export declare const accordionTemplate = "\"use client\";\nimport { useId, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledAccordion = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)};\n  width: 100%;\n`;\n\nconst StyledAccordionTitle = styled.button<{\n  theme: Theme;\n  $isOpen: boolean;\n}>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  border: none;\n  background: none;\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n  margin: 0;\n  padding: 0 40px 0 0;\n  ${({ theme }) => styledText(theme)};\n  font-weight: 700;\n  color: ${({ theme }) => theme.colors.primary};\n  transition: color 0.3s ease;\n  position: relative;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n  }\n\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  & .lucide-chevron-down {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: translateY(-50%) rotate(180deg);\n      `}\n  }\n`;\n\nconst StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      margin: 20px 0 0;\n      height: auto;\n    `}\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\ninterface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n  defaultOpen?: boolean;\n}\n\nfunction Accordion({ children, title, defaultOpen = false }: AccordionProps) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const contentId = useId();\n  const titleId = useId();\n\n  return (\n    <StyledAccordion>\n      <StyledAccordionTitle\n        id={titleId}\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        $isOpen={isOpen}\n        aria-expanded={isOpen}\n        aria-controls={contentId}\n      >\n        {title} <Icon name=\"ChevronDown\" />\n      </StyledAccordionTitle>\n      <StyledAccordionContent\n        id={contentId}\n        role=\"region\"\n        aria-labelledby={titleId}\n        aria-hidden={!isOpen}\n        inert={!isOpen}\n        $isOpen={isOpen}\n      >\n        {children}\n      </StyledAccordionContent>\n    </StyledAccordion>\n  );\n}\n\nexport { Accordion };\n";