'use client';
import{__rest as e}from"tslib";import t,{useContext as r}from"react";import{twMerge as i}from"tailwind-merge";import l from"../../../assets/ArrowUpHeadIcon.js";import{sizing as o}from"../../../lib/sizing.js";import{spacing as a}from"../../../lib/spacing.js";import{colorPalette as n,DEFAULT_COLOR as s}from"../../../lib/theme.js";import{getColorClassNames as m,makeClassName as c}from"../../../lib/utils.js";import{ExpandedContext as d}from"./Accordion.js";const f=c("AccordionHeader"),p=t.forwardRef(((c,p)=>{const{children:g,className:h,onClick:u}=c,x=e(c,["children","className","onClick"]),{isExpanded:b,setIsExpanded:j}=r(d);return t.createElement("button",Object.assign({ref:p,className:i(f("root"),"w-full flex items-center justify-between",a.threeXl.paddingX,a.lg.paddingY,h),onClick:e=>{null==j||j(!b),null==u||u(e)},type:"button"},x),t.createElement("div",{className:i(f("children"),"flex flex-1",a.threeXl.marginRight)},g),t.createElement("div",null,t.createElement(l,{className:i(f("arrowIcon"),b?"transition-all":"transition-all -rotate-180",m(s,n.lightText).textColor,a.twoXs.negativeMarginRight,o.xl.height,o.xl.width)})))}));p.displayName="AccordionHeader";export{p as default};
