{"version":3,"sources":["../src/Section/Section.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface SectionProps {\n  /**\n   * Content to display inside the section\n   */\n  children?: React.ReactNode;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Arbor Design System section container styles\nconst sectionStyles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    width: '100%',\n    padding: '8px',\n    borderRadius: '8px',\n    backgroundColor: '#ffffff',\n    boxSizing: 'border-box' as const,\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  },\n};\n\n/**\n * Section component - Arbor Design System\n *\n * A container component that provides consistent styling for content sections.\n * Has 8px padding, 8px border radius, and white background.\n * Used to wrap SectionHeadings, SubSectionHeadings, ListRows, and other content.\n *\n * @example\n * ```tsx\n * // Basic section with heading and list rows\n * <Section>\n *   <SectionHeading title=\"Contact Information\" />\n *   <ListRow label=\"Email\" value=\"john@example.com\" />\n *   <ListRow label=\"Phone\" value=\"+44 123 456 7890\" />\n * </Section>\n *\n * // Section with interactive heading\n * <Section>\n *   <SectionHeadingInteractive title=\"Personal Details\">\n *     <SubSectionInteractive title=\"Profile\">\n *       <ListRow label=\"Name\" value=\"John Smith\" />\n *     </SubSectionInteractive>\n *   </SectionHeadingInteractive>\n * </Section>\n *\n * // Multiple sections on a page\n * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n *   <Section>\n *     <SectionHeading title=\"Section 1\" />\n *     <ListRow label=\"Field\" value=\"Value\" />\n *   </Section>\n *   <Section>\n *     <SectionHeading title=\"Section 2\" />\n *     <ListRow label=\"Field\" value=\"Value\" />\n *   </Section>\n * </div>\n * ```\n */\nexport const Section = React.forwardRef<HTMLDivElement, SectionProps>(\n  ({ children, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-section', className)}\n        style={{ ...sectionStyles.container, ...style }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nSection.displayName = 'Section';\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAwEf;AAtDN,IAAM,gBAAgB;AAAA,EACpB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,IACT,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAwCO,IAAM,UAAgB;AAAA,EAC3B,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,iBAAiB,SAAS;AAAA,QAC1C,OAAO,EAAE,GAAG,cAAc,WAAW,GAAG,MAAM;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}