{"version":3,"sources":["../src/ModalHeader/ModalHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { SectionIcon, SectionIconVariant } from '../SectionIcon';\n\nexport interface ModalHeaderProps {\n  /**\n   * The title text for the modal header\n   */\n  title: string;\n  /**\n   * Optional icon variant to display before the title\n   * Uses the SectionIcon component variants: 'warning', 'danger', 'info', 'success'\n   */\n  icon?: SectionIconVariant;\n  /**\n   * Callback when close button is clicked\n   * If not provided, close button will not be shown\n   */\n  onClose?: () => void;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Close X icon\nconst CloseIcon = () => (\n  <svg\n    width=\"10\"\n    height=\"10\"\n    viewBox=\"0 0 10 10\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M1 1L9 9M9 1L1 9\"\n      stroke=\"#2f2f2f\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n// Arbor Design System modal header styles\nconst modalHeaderStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    padding: '16px',\n    backgroundColor: '#ffffff',\n    boxSizing: 'border-box' as const,\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n    minHeight: '56px',\n  },\n  leftContent: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '16px',\n    flex: 1,\n  },\n  title: {\n    fontSize: '22px',\n    fontWeight: '600',\n    color: '#2f2f2f',\n    lineHeight: '1.25',\n    margin: 0,\n  },\n  closeButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    borderRadius: '16px',\n    backgroundColor: '#ffffff',\n    border: 'none',\n    cursor: 'pointer',\n    padding: 0,\n    flexShrink: 0,\n    transition: 'background-color 0.15s ease-in-out',\n  },\n  closeButtonHover: {\n    backgroundColor: '#f8f8f8',\n  },\n  closeButtonFocus: {\n    outline: '3px solid #3cad51',\n    outlineOffset: '-3px',\n  },\n};\n\n/**\n * ModalHeader component - Arbor Design System\n *\n * The header part of a modal dialog with title, optional icon, and close button.\n * The icon uses SectionIcon variants (warning, danger, info, success).\n *\n * @example\n * ```tsx\n * // Basic modal header with close button\n * <ModalHeader\n *   title=\"What would you like to do?\"\n *   onClose={() => setIsOpen(false)}\n * />\n *\n * // Modal header with warning icon\n * <ModalHeader\n *   title=\"Are you sure?\"\n *   icon=\"warning\"\n *   onClose={() => setIsOpen(false)}\n * />\n *\n * // Modal header with danger icon (error state)\n * <ModalHeader\n *   title=\"Sorry, we can't find this page\"\n *   icon=\"danger\"\n *   onClose={() => setIsOpen(false)}\n * />\n *\n * // Modal header without close button\n * <ModalHeader\n *   title=\"Processing...\"\n *   icon=\"info\"\n * />\n * ```\n */\nexport const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n  ({ title, icon, onClose, className, style, ...props }, ref) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    const closeButtonStyle: React.CSSProperties = {\n      ...modalHeaderStyles.closeButton,\n      ...(isHovered && modalHeaderStyles.closeButtonHover),\n      ...(isFocused && modalHeaderStyles.closeButtonFocus),\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-modal-header', className)}\n        style={{ ...modalHeaderStyles.container, ...style }}\n        {...props}\n      >\n        <div style={modalHeaderStyles.leftContent}>\n          {icon && <SectionIcon variant={icon} />}\n          <h2 style={modalHeaderStyles.title}>{title}</h2>\n        </div>\n        {onClose && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            style={closeButtonStyle}\n            aria-label=\"Close modal\"\n          >\n            <CloseIcon />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nModalHeader.displayName = 'ModalHeader';\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAqCjB,cAgHI,YAhHJ;AARJ,IAAM,YAAY,MAChB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA;AAAA,IACjB;AAAA;AACF;AAIF,IAAM,oBAAoB;AAAA,EACxB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,kBAAkB;AAAA,IAChB,iBAAiB;AAAA,EACnB;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AACF;AAqCO,IAAM,cAAoB;AAAA,EAC/B,CAAC,EAAE,OAAO,MAAM,SAAS,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC7D,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AACtD,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AAEtD,UAAM,mBAAwC;AAAA,MAC5C,GAAG,kBAAkB;AAAA,MACrB,GAAI,aAAa,kBAAkB;AAAA,MACnC,GAAI,aAAa,kBAAkB;AAAA,IACrC;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,sBAAsB,SAAS;AAAA,QAC/C,OAAO,EAAE,GAAG,kBAAkB,WAAW,GAAG,MAAM;AAAA,QACjD,GAAG;AAAA,QAEJ;AAAA,+BAAC,SAAI,OAAO,kBAAkB,aAC3B;AAAA,oBAAQ,oBAAC,eAAY,SAAS,MAAM;AAAA,YACrC,oBAAC,QAAG,OAAO,kBAAkB,OAAQ,iBAAM;AAAA,aAC7C;AAAA,UACC,WACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,cAAc,MAAM,aAAa,IAAI;AAAA,cACrC,cAAc,MAAM,aAAa,KAAK;AAAA,cACtC,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAChC,OAAO;AAAA,cACP,cAAW;AAAA,cAEX,8BAAC,aAAU;AAAA;AAAA,UACb;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":[]}